Tester le niveau d'accessibilité d'un thème WordPressClaire Bizingre
Les personnes en situation de handicap peuvent rencontrer des difficultés dans l’utilisation des sites Web. WordPress a de nombreux atouts pour la création de sites avec un bon niveau d’accessibilité. Mais le thème choisi ou développé joue un rôle important pour permettre à tous les utilisateurs d’accéder à un site WordPress. C’est pourquoi, à l’aide d’un ensemble d’outils, nous allons voir comment tester un thème WordPress dans le but d’évaluer son niveau d’accessibilité pour ensuite en déduire la liste des améliorations à effectuer.
Atelier WordPress: Création d’extension WordPressIZZA Samir
Initiation aux développement de plugin WordPress, inclus 3 tutoriels:
TP1: Hello World.
TP2: Compteur de visites.
TP3: Création du bouton « j’aime » de Facebook
Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.
L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.
Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !
Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)
Tester le niveau d'accessibilité d'un thème WordPressClaire Bizingre
Les personnes en situation de handicap peuvent rencontrer des difficultés dans l’utilisation des sites Web. WordPress a de nombreux atouts pour la création de sites avec un bon niveau d’accessibilité. Mais le thème choisi ou développé joue un rôle important pour permettre à tous les utilisateurs d’accéder à un site WordPress. C’est pourquoi, à l’aide d’un ensemble d’outils, nous allons voir comment tester un thème WordPress dans le but d’évaluer son niveau d’accessibilité pour ensuite en déduire la liste des améliorations à effectuer.
Atelier WordPress: Création d’extension WordPressIZZA Samir
Initiation aux développement de plugin WordPress, inclus 3 tutoriels:
TP1: Hello World.
TP2: Compteur de visites.
TP3: Création du bouton « j’aime » de Facebook
Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.
L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.
Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !
Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)
WPNdigital ux et a11y par Claire Bizingre et Thomas VillainClaire Bizingre
UX et Accessibilité avec WordPress.
Ce talk sera l’occasion de montrer comment ces deux métiers travaillent ensemble pour créer un site WordPress prenant en compte l’accessibilité numérique dès le début du projet.
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Claire Bizingre
Atelier présenté au WordCamp Paris 2015, présentation des besoins, des problèmes rencontrés par les utilisateurs, solutions proposées par WordPress, plugin et thèmes accessibility-ready.
Stratégies pour accroître la visibilité et l'engagement de votre blogAsher256
Dans la présentation proposée, vous explorerez les fondamentaux et les stratégies essentielles pour augmenter la visibilité de votre blog. Voici une élaboration détaillée sur les différents aspects qui seront abordés:
Nous débuterons par des techniques de promotion essentielles. Cela inclut l'utilisation des réseaux sociaux, le networking avec d'autres blogueurs, et la participation à des forums et des groupes en ligne pertinents. L'objectif est de créer une présence initiale qui capte l'attention.
Ensuite, nous discuterons de méthodes pour augmenter le trafic vers votre site. Cela comprend le marketing de contenu, lequel implique la création d'articles intéressants, pertinents et utiles qui répondent aux questions de votre audience cible. Nous aborderons également l'importance de l'email marketing et des newsletters pour attirer régulièrement des visiteurs.
Fidéliser votre audience est important pour assurer le succès à long terme de votre blog. Nous explorerons des techniques telles que l'offre de contenu exclusif, la mise en place de programmes de fidélité, et la régularité des publications. Engager activement vos lecteurs via les commentaires et les réseaux sociaux sera également discuté.
Un des aspects les plus techniques mais essentiels est le référencement naturel, ou SEO (Search Engine Optimization). Vous apprendrez comment optimiser vos articles de blog et votre site pour améliorer votre classement dans les résultats des moteurs de recherche comme Google et Yahoo. Cela inclut l'optimisation des mots-clés, la création de liens retour (backlinks), l'amélioration de la vitesse de chargement du site, et plus encore.
Conseils pour mieux Sécuriser votre système LinuxAsher256
La sécurité est un aspect crucial mais souvent négligé dans le domaine informatique, y compris sous GNU/Linux. J'ai eu l'occasion de sensibiliser sur ce sujet lors d'une conférence organisée en 2008. Au cours de cet événement, j'ai partagé divers conseils visant à renforcer la sécurité des ordinateurs sous GNU/Linux, afin de contrer les menaces, même celles provenant de simples "script kiddies" qui exploitent les vulnérabilités à des fins ludiques.
La conférence a abordé plusieurs points essentiels, notamment l'importance de sécuriser un système GNU/Linux, les bonnes pratiques pour sécuriser le navigateur web Firefox, les précautions à prendre lors de l'installation de logiciels, l'intérêt de verrouiller l'écran, les avantages d'un pare-feu efficace, ainsi que la pertinence du chiffrement du disque dur pour protéger les données sensibles.
Comme à l'accoutumée, à la suite de la conférence, j'ai rendu accessible mes présentations sous forme de diapositives pour tous ceux intéressés. Vous avez ainsi la possibilité de télécharger le PDF contenant les conseils de sécurité pour les systèmes GNU/Linux, ou de les visualiser directement depuis la page dédiée, afin de renforcer la sécurité de vos propres systèmes.
Outre ces points fondamentaux, la conférence a également mis en lumière l'importance de maintenir son système GNU/Linux à jour en installant régulièrement les mises à jour de sécurité fournies par les distributions. De même, l'utilisation de mots de passe forts et leur gestion sécurisée ont été abordées afin de prévenir les accès non autorisés. En outre, j'ai souligné l'importance de la sensibilisation des utilisateurs aux pratiques de sécurité, car même les mesures les plus avancées peuvent être contournées par des techniques d'ingénierie sociale.
La sécurité sous GNU/Linux ne se limite pas uniquement à la protection contre les menaces externes, mais comprend également la surveillance des activités potentiellement malveillantes à l'intérieur du réseau. Des outils de surveillance réseau et de détection d'intrusions peuvent jouer un rôle important dans la détection précoce des anomalies et des attaques, permettant ainsi une réponse rapide et efficace pour limiter les dommages potentiels.
Enfin, il est essentiel de promouvoir une culture de sécurité au sein de la communauté GNU/Linux, en encourageant le partage des bonnes pratiques, la collaboration sur la résolution des vulnérabilités et la formation continue sur les dernières techniques et outils de sécurité. En renforçant la sécurité à tous les niveaux, nous pouvons créer un écosystème GNU/Linux plus robuste et résilient face aux menaces croissantes dans le monde numérique.
Les logiciels libres : une opportunite pour votre entreprise?Asher256
L'utilisation des logiciels libres se généralise dans le milieu professionnel, notamment avec l'intégration croissante de logiciels de gestion, de comptabilité et administratifs. Vous découvrirez les principaux points abordés lors de la conférence.
La conférence intitulée « Les logiciels libres, une opportunité pour votre entreprise ? » visait à explorer le potentiel des logiciels libres dans le milieu des affaires.
Dans cette présentation, j'ai principalement mis en avant les avantages des logiciels libres pour les entreprises, tout en abordant certains éléments de manière plus spectaculaire.
L'objectif n'était pas de présenter exhaustivement tous les avantages et désavantages, mais plutôt :
- De simplifier le sujet pour un public découvrant les logiciels libres, potentiellement composé de futurs entrepreneurs.
- De favoriser une session de questions/réponses, durant laquelle nous avons discuté plus objectivement et en détail des avantages et désavantages. Cette session a duré environ une heure.
- De présenter les logiciels libres sous un jour favorable pour inciter les participants à les explorer davantage.
Pour approfondir vos connaissances sur les logiciels libres dans les entreprises, je vous recommande de consulter :
- Un dossier complet sur les logiciels libres dans les entreprises (un document PDF de plus de 80 pages).
Vous pouvez également lire ces articles pour en savoir plus :
- Quels usages des logiciels libres dans les entreprises ?
- L'entreprise doit-elle adopter les logiciels libres ?
- Logiciels libres et entreprise.
La discussion est maintenant ouverte. Quelle est votre perspective sur l'utilisation des logiciels libres dans les entreprises ? Quels sont, selon vous, leurs avantages et leurs inconvénients ? Y a-t-il des écueils à éviter ?
Le gros titres des slides:
Les Logiciels Libres : Une Opportunité Pour Les Entreprises ?
Les logiciels propriétaires ? ● (aussi appelées logiciels privateurs) ● Propriétaire = Un logiciel qui n’est pas ”libre”. ● En général (il y a des variantes) : – Il est interdit de le partager – Droit seulement de l’utiliser – Code source fermé – En général payant
Les Logiciels Libres : Une Opportunité Pour Les Entreprises ?
Les logiciels propriétaires ? ● (aussi appelées logiciels privateurs) ● Propriétaire = Un logiciel qui n’est pas ”libre”. ● En général (il y a des variantes) : – Il est interdit de le partager – Droit seulement de l’utiliser – Code source fermé – En général payant
Les Licences Open Source ● Plus de droits: BSD, X, MIT ● Libres, avec conditions : GPL, LGPL ● Autres licences : Art Libre, Creative Common…
Le logiciel libre, selon la FSF (4 libertés de la GPL) ● Exécuter sans restriction ● Étudier son fonctionnement ● Redistribuer des copies (même payantes) ● Améliorer le programme et publier les améliorations
Comment s’ont développés les logiciels libres ? ● Bénévoles – Organisés (GNU, Apache) – Isolés ● Entreprises – QT – OpenERP ● Divers profiles : – Traducteur – Développeur –
La télévision fait partie intégrante de notre quotidien. Avec l'évolution de la technologie, notre manière de consommer le contenu télévisuel a changé de manière significative. L'une des innovations les plus remarquables dans ce domaine est l'IPTV. Mais qu'est-ce que c'est exactement ? Et pourquoi l'ABO IPTV PREMIUM est-il si révolutionnaire ? Découvrons ensemble.
ABO IPTV PREMIUM peut également être utilisé sur des ordinateurs portables, des PC de bureau et même des consoles de jeux.
Regardez vos émissions préférées en déplacement grâce aux applications mobiles disponibles pour iOS et Android.
Que vous ayez une Smart TV Samsung, LG, ou autre, ABO IPTV PREMIUM est compatible avec la plupart des téléviseurs intelligents.
WPNdigital ux et a11y par Claire Bizingre et Thomas VillainClaire Bizingre
UX et Accessibilité avec WordPress.
Ce talk sera l’occasion de montrer comment ces deux métiers travaillent ensemble pour créer un site WordPress prenant en compte l’accessibilité numérique dès le début du projet.
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Claire Bizingre
Atelier présenté au WordCamp Paris 2015, présentation des besoins, des problèmes rencontrés par les utilisateurs, solutions proposées par WordPress, plugin et thèmes accessibility-ready.
Stratégies pour accroître la visibilité et l'engagement de votre blogAsher256
Dans la présentation proposée, vous explorerez les fondamentaux et les stratégies essentielles pour augmenter la visibilité de votre blog. Voici une élaboration détaillée sur les différents aspects qui seront abordés:
Nous débuterons par des techniques de promotion essentielles. Cela inclut l'utilisation des réseaux sociaux, le networking avec d'autres blogueurs, et la participation à des forums et des groupes en ligne pertinents. L'objectif est de créer une présence initiale qui capte l'attention.
Ensuite, nous discuterons de méthodes pour augmenter le trafic vers votre site. Cela comprend le marketing de contenu, lequel implique la création d'articles intéressants, pertinents et utiles qui répondent aux questions de votre audience cible. Nous aborderons également l'importance de l'email marketing et des newsletters pour attirer régulièrement des visiteurs.
Fidéliser votre audience est important pour assurer le succès à long terme de votre blog. Nous explorerons des techniques telles que l'offre de contenu exclusif, la mise en place de programmes de fidélité, et la régularité des publications. Engager activement vos lecteurs via les commentaires et les réseaux sociaux sera également discuté.
Un des aspects les plus techniques mais essentiels est le référencement naturel, ou SEO (Search Engine Optimization). Vous apprendrez comment optimiser vos articles de blog et votre site pour améliorer votre classement dans les résultats des moteurs de recherche comme Google et Yahoo. Cela inclut l'optimisation des mots-clés, la création de liens retour (backlinks), l'amélioration de la vitesse de chargement du site, et plus encore.
Conseils pour mieux Sécuriser votre système LinuxAsher256
La sécurité est un aspect crucial mais souvent négligé dans le domaine informatique, y compris sous GNU/Linux. J'ai eu l'occasion de sensibiliser sur ce sujet lors d'une conférence organisée en 2008. Au cours de cet événement, j'ai partagé divers conseils visant à renforcer la sécurité des ordinateurs sous GNU/Linux, afin de contrer les menaces, même celles provenant de simples "script kiddies" qui exploitent les vulnérabilités à des fins ludiques.
La conférence a abordé plusieurs points essentiels, notamment l'importance de sécuriser un système GNU/Linux, les bonnes pratiques pour sécuriser le navigateur web Firefox, les précautions à prendre lors de l'installation de logiciels, l'intérêt de verrouiller l'écran, les avantages d'un pare-feu efficace, ainsi que la pertinence du chiffrement du disque dur pour protéger les données sensibles.
Comme à l'accoutumée, à la suite de la conférence, j'ai rendu accessible mes présentations sous forme de diapositives pour tous ceux intéressés. Vous avez ainsi la possibilité de télécharger le PDF contenant les conseils de sécurité pour les systèmes GNU/Linux, ou de les visualiser directement depuis la page dédiée, afin de renforcer la sécurité de vos propres systèmes.
Outre ces points fondamentaux, la conférence a également mis en lumière l'importance de maintenir son système GNU/Linux à jour en installant régulièrement les mises à jour de sécurité fournies par les distributions. De même, l'utilisation de mots de passe forts et leur gestion sécurisée ont été abordées afin de prévenir les accès non autorisés. En outre, j'ai souligné l'importance de la sensibilisation des utilisateurs aux pratiques de sécurité, car même les mesures les plus avancées peuvent être contournées par des techniques d'ingénierie sociale.
La sécurité sous GNU/Linux ne se limite pas uniquement à la protection contre les menaces externes, mais comprend également la surveillance des activités potentiellement malveillantes à l'intérieur du réseau. Des outils de surveillance réseau et de détection d'intrusions peuvent jouer un rôle important dans la détection précoce des anomalies et des attaques, permettant ainsi une réponse rapide et efficace pour limiter les dommages potentiels.
Enfin, il est essentiel de promouvoir une culture de sécurité au sein de la communauté GNU/Linux, en encourageant le partage des bonnes pratiques, la collaboration sur la résolution des vulnérabilités et la formation continue sur les dernières techniques et outils de sécurité. En renforçant la sécurité à tous les niveaux, nous pouvons créer un écosystème GNU/Linux plus robuste et résilient face aux menaces croissantes dans le monde numérique.
Les logiciels libres : une opportunite pour votre entreprise?Asher256
L'utilisation des logiciels libres se généralise dans le milieu professionnel, notamment avec l'intégration croissante de logiciels de gestion, de comptabilité et administratifs. Vous découvrirez les principaux points abordés lors de la conférence.
La conférence intitulée « Les logiciels libres, une opportunité pour votre entreprise ? » visait à explorer le potentiel des logiciels libres dans le milieu des affaires.
Dans cette présentation, j'ai principalement mis en avant les avantages des logiciels libres pour les entreprises, tout en abordant certains éléments de manière plus spectaculaire.
L'objectif n'était pas de présenter exhaustivement tous les avantages et désavantages, mais plutôt :
- De simplifier le sujet pour un public découvrant les logiciels libres, potentiellement composé de futurs entrepreneurs.
- De favoriser une session de questions/réponses, durant laquelle nous avons discuté plus objectivement et en détail des avantages et désavantages. Cette session a duré environ une heure.
- De présenter les logiciels libres sous un jour favorable pour inciter les participants à les explorer davantage.
Pour approfondir vos connaissances sur les logiciels libres dans les entreprises, je vous recommande de consulter :
- Un dossier complet sur les logiciels libres dans les entreprises (un document PDF de plus de 80 pages).
Vous pouvez également lire ces articles pour en savoir plus :
- Quels usages des logiciels libres dans les entreprises ?
- L'entreprise doit-elle adopter les logiciels libres ?
- Logiciels libres et entreprise.
La discussion est maintenant ouverte. Quelle est votre perspective sur l'utilisation des logiciels libres dans les entreprises ? Quels sont, selon vous, leurs avantages et leurs inconvénients ? Y a-t-il des écueils à éviter ?
Le gros titres des slides:
Les Logiciels Libres : Une Opportunité Pour Les Entreprises ?
Les logiciels propriétaires ? ● (aussi appelées logiciels privateurs) ● Propriétaire = Un logiciel qui n’est pas ”libre”. ● En général (il y a des variantes) : – Il est interdit de le partager – Droit seulement de l’utiliser – Code source fermé – En général payant
Les Logiciels Libres : Une Opportunité Pour Les Entreprises ?
Les logiciels propriétaires ? ● (aussi appelées logiciels privateurs) ● Propriétaire = Un logiciel qui n’est pas ”libre”. ● En général (il y a des variantes) : – Il est interdit de le partager – Droit seulement de l’utiliser – Code source fermé – En général payant
Les Licences Open Source ● Plus de droits: BSD, X, MIT ● Libres, avec conditions : GPL, LGPL ● Autres licences : Art Libre, Creative Common…
Le logiciel libre, selon la FSF (4 libertés de la GPL) ● Exécuter sans restriction ● Étudier son fonctionnement ● Redistribuer des copies (même payantes) ● Améliorer le programme et publier les améliorations
Comment s’ont développés les logiciels libres ? ● Bénévoles – Organisés (GNU, Apache) – Isolés ● Entreprises – QT – OpenERP ● Divers profiles : – Traducteur – Développeur –
La télévision fait partie intégrante de notre quotidien. Avec l'évolution de la technologie, notre manière de consommer le contenu télévisuel a changé de manière significative. L'une des innovations les plus remarquables dans ce domaine est l'IPTV. Mais qu'est-ce que c'est exactement ? Et pourquoi l'ABO IPTV PREMIUM est-il si révolutionnaire ? Découvrons ensemble.
ABO IPTV PREMIUM peut également être utilisé sur des ordinateurs portables, des PC de bureau et même des consoles de jeux.
Regardez vos émissions préférées en déplacement grâce aux applications mobiles disponibles pour iOS et Android.
Que vous ayez une Smart TV Samsung, LG, ou autre, ABO IPTV PREMIUM est compatible avec la plupart des téléviseurs intelligents.
4. Les principaux usages concernés
Lecteur d’écran Commande vocale
WAI-ARIA peut influencer ces usages :
les améliorer ou les dégrader
5. Mais concrètement ?
• Attribut role : button, search…
• Attribut d’état : aria-disabled, aria-expanded, aria-hidden…
• Attribut de propriété : aria-required, aria-describedby…
Intégrés dans les balises HTML, pour ajouter du sens si besoin
Spécification : https://www.w3.org/TR/wai-aria-1.1
6. Utilisation de Aria
1. Privilégier les éléments HTML natifs
2. Changer la sémantique d’un élément que si nécessaire
3. Assurer l’usage d’un composant dynamique au clavier
4. Ne pas supprimer la restitution des éléments visibles atteignables
au clavier
5. Tous les éléments interactifs doivent avoir un nom accessible.
https://w3c.github.io/using-aria/
8. Ne pas tromper l’utilisateur !
• Une listbox (liste déroulante) pour un carrousel
• Un tabpanel (onglet) pour des colonnes de
présentation
• Un tabpanel pour un menu de navigation
• Un tabpanel pour un accordéon (obsolète)
• Un menu, menubar pour un menu de navigation
9. Trio Navigateur - OS - Technologie d’assistance
ex : API accessibilité sous Windows
ex : Firefox
ex : NVDA
Illustration : http://wicg.github.io/aom/demos/#7
10. L’arbre d’accessibilité (Accessibility tree)
<button type="button">
Afficher plus d’actualités
</button>
Role : button
Nom accessible : "Afficher plus d’actualités"
État, propriété : enabled, focusable
Visualisation de l’arbre avec Firefox
11. Arbre d’accessibilité et restitution
<button type="button">
Afficher plus d’actualités
</button>
Restitution avec NVDA
Afficher plus d’actualités bouton
12. Nom accessible d’un champ de saisie
<label>Votre nom</label>
<input id="id-nom" type="text" name="nom" />
Sans liaison,
<input> nom accessible : "" Édition
13. Nom accessible d’un champ de saisie lié à
son étiquette
<label for="id-nom">Votre nom</label>
<input id="id-nom" type="text" name="nom" />
Avec la liaison,
<input> nom accessible : "Votre nom" Votre nom Édition
14. Nom accessible d’un lien avec un intitulé
<a href="https://2019.paris.wordcamp.org/">
<img src="logo-wcp19.png" alt="WordCamp Paris 2019" />
</a>
<a> nom accessible :
"WordCamp Paris 2019"
WordCamp Paris 2019 lien
15. Nom accessible d’un lien sans intitulé
<a href="https://2019.paris.wordcamp.org/">
<img src="logo-wcp19.png" alt="WordCamp Paris 2019" />
</a>
<a> nom accessible : "" lien
16. Les landmarks – balise et role
<header role="banner">…</header>
<form role="search">…</form>
<nav role="navigation">…</nav>
<main role="main">…</main>
<footer role="contentinfo">…</footer>
Attribut role encore nécessaire
Jeu de tests : https://www.scottohara.me/blog/2019/04/05/landmarks-exposed.html
17. Icon font
<a href="urlpage">
À la une
<span class="arrow-left"></span>
</a>
Propriété CSS « content » de l’icône pouvant être restituée
18. Icon font non restitué avec aria-hidden
<a href="urlpage">
À la une
<span class="arrow-left" aria-hidden="true"></span>
</a>
19. Icon svg - aria-hidden et focusable
<a href="urlpage">
À la une
<svg aria-hidden="true" focusable="false">…</svg>
</a>
20. Show/hide et aria-expanded utile
<button type="button" aria-expanded="false">
Menu
</button>
Menu bouton réduitAprès activation
<button type="button" aria-expanded="true">
Menu
</button>
Menu bouton développé
21. Pattern Accordéon
service-public.fr
<h2>
<button type="button" aria-expanded="false">
Où et comment faire la démarche
</button>
</h2>
Niveau de titre à adapter
Plugin respectant le pattern accordéon ARIA : https://fr.wordpress.org/plugins/ad-sliding-faq /
22. Show/hide et aria-expanded inutile
<button type="button" >
Plus de critères
</button>
Plus de critères boutonAprès activation
<button type="button">
Moins de critères
</button>
Moins de critères boutonIntitulé du bouton
suffisamment explicite
23. Nom d’un bouton - Font icon uniquement
<button type="button" aria-expanded="false">
<span class="icon-burger" aria-hidden="true" ></span>
</button>
<button> nom accessible : "" bouton réduit
24. Nom d’un bouton - Font icon - aria-label
<button type="button" aria-expanded="false" aria-label="Menu">
<span class="icon-burger" aria-hidden="true" ></span>
</button>
<button> nom accessible : "Menu"
CSS désactivé, bouton vide
visuellement
25. Nom d’un bouton - Font icon - texte caché
<button type="button" aria-expanded="false">
<span class="screen-reader-text">Menu</span>
<span class="icon-burger" aria-hidden="true" ></span>
</button>
<button> nom accessible : "Menu" Menu bouton réduit
https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
26. Activer vocalement un bouton
<button type="button" aria-label="Afficher plus">
Voir plus
</button>
<button> nom accessible : " Afficher plus"
<button type="button"
aria-label="Voir plus d’actualités">
Voir plus
</button>
<button> nom accessible : " Voir plus d’actualités "
27. Déguiser un lien en bouton
<a href="papiers-citoyennete"
role="button" aria-expanded="true">
Papiers - Citoyenneté
</a>
Prévoir l’activation avec
Enter et barre d’espace
28. Champ obligatoire et aria-required
<label for="email">E-mail *
(nom@domaine.fr)</label>
<input id="email" aria-required="true"
type="email" name="email" />
E-mail * (nom@domaine.fr)
édition obligatoire
Si aria-required présent,
ajouter une indication visible
29. Erreur de saisie et aria-describedby
<label for="email">E-mail*
(nom@domaine.fr)</label>
<input id="email" aria-required="true"
type="email" name="email"
aria-describedby="id-error" />
<div id="id-error">
<p>L’adresse e-mail n’est pas
valide</p>
</div>
E-mail * (nom@domaine.fr) édition
obligatoire L’adresse e-mail n’est pas
valide
30. Loader et aria-live
<div aria-live="polite" class="screen-reader-text"></div>
Avant ou après le chargement
<div aria-live="polite" class="screen-reader-text">
<p>En cours de chargement</p>
</div>
Pendant le chargement
https://make.wordpress.org/accessibility/handbook/markup/wp-a11y-speak/
31. Carrousel et aria-disabled
Campus Malesherbes
<button type="button" aria-disabled="true" class="disabled">
<img src="previous.svg" alt="Image pécédente" />
</button>
Ne pas utiliser l’attribut disabled
https://2019.paris.wordcamp.org/2019/01/15/campus-malesherbes/
32. Toggle et aria-pressed
Mode avion
<button type="button" aria-pressed="true">
Mode avion
<span class="switch-toggle" aria-hidden="true"></span>
</button>
Mode avion
<button type="button" aria-pressed="false">
Mode avion
<span class="switch-toggle" aria-hidden="true"></span>
</button>