Accessibilité et design mobile : comment les intégrer à son portfolio ?
Un portfolio UX/UI peut montrer comment vous rendez une interface plus facile à lire et à utiliser sur téléphone. Présentez des contrôles concrets et leurs limites : une belle maquette ne prouve pas à elle seule l’accessibilité du produit développé.
1. Choisissez un parcours à examiner
Prenez un formulaire ou une recherche mobile. Montrez le contenu sur un petit écran, avec des libellés longs et des messages d’erreur. Expliquez comment les informations restent compréhensibles sans dépendre uniquement d’une couleur.
2. Documentez les contrastes
Pour le texte courant, le critère WCAG 2.2 de niveau AA prévoit généralement un contraste d’au moins 4,5:1 ; le grand texte a un seuil de 3:1, avec des exceptions précisées par le W3C. Mesurez les paires texte/fond réellement utilisées et conservez le résultat, plutôt que d’écrire simplement « couleurs accessibles ».
3. Pensez aux actions tactiles
Vérifiez taille et espacement des zones activables. Le critère WCAG 2.2 AA sur la taille minimale vise 24 × 24 pixels CSS, ou un espacement suffisant, avec des exceptions. Cela ne signifie pas que 24 pixels sont toujours confortables : choisissez des zones adaptées à la tâche et au contexte mobile.
| Exemple fictif | Amélioration à montrer |
|---|---|
| Erreur signalée seulement en rouge | Message explicite associé au champ. |
| Petite icône sans texte | Zone activable élargie et libellé ou nom accessible à préciser. |
| Texte coupé | Retour à la ligne et mise en page adaptée. |
4. Annotez ce qui dépend du développement
Indiquez ordre de lecture, nom des contrôles, focus et comportement attendu au clavier. La navigation clavier et le lecteur d’écran doivent être vérifiés dans l’interface développée ; une annotation Figma n’est pas un test de fonctionnement.
5. Présentez un bilan précis
« Contrastes vérifiés sur les écrans présentés ; messages et zones tactiles revus. Tests au clavier et au lecteur d’écran à réaliser sur la version développée. Il ne s’agit pas d’un audit complet de conformité. »
Références : contraste, W3C et taille des cibles, W3C.
Photos de stock illustratives ; les personnes ne sont pas présentées comme des employeurs Kamerjob. Couverture et illustration : Pexels / Pexels.
Consultez les opportunités sur Kamerjob et adaptez votre portfolio aux missions réelles de chaque offre.
L’équipe Kamerjob
Commentaires
Chargement des commentaires…