Depuis juillet 2023, j’ai retiré de mon blog les liens de partage direct vers les réseaux sociaux bien connus afin de leur faire moins de publicité. À la place, j’ai codé un petit script qui copie le titre de l’article et son adresse dans le presse-papier afin de partager l’article où on veut en collant ces éléments. Bien sûr, j’ai codé ça de façon à ce que ça respecte les règles d’accessibilité ! Je vous partage donc le code de ce composant, ici dans le contexte WordPress, mais adaptable facilement à n’importe quel autre environnement.
Les articles autour du thème : Code
Parlons un peu code… HTML ou CSS ou même un peu de JavaScript, de PHP ou les entrailles des fichiers Apache (.htaccess, en fait uniquement). L’intégration web ne se limite pas toujours qu’au HTML et CSS, il faut parfois entrer un peu au cœur de son environnement de développement. Il faut le maîtriser un tant soit peu pour aller au bout de son travail qui se veut de qualité. Les performances, le référencement, la sécurité, l’accessibilité passent par cette maîtrise ; d’autant plus si on construit des sites de A à Z (y compris avec un CMS, que ce soit WordPress, Joomla ou autre).
Obfuscation de liens en SEO et problèmes d’accessibilité
Afin d’optimiser le référencement d’un site web pour les moteurs de recherche, il existe une pratique qui consiste à masquer un lien aux moteurs de recherche tout en le laissant, en théorie, utilisable pour les humains. Malheureusement, cette pratique est majoritairement mal réalisée du point de vue de l’accessibilité et cela rend ces faux-liens totalement inaccessibles aux personnes handicapées naviguant au clavier, avec un lecteur d’écran ou au pilotage à la voix. De plus, l’utilisabilité s’en voit également largement amoindrie. Proposition de solution et réflexions.
Continuer la lecture « Obfuscation de liens en SEO et problèmes d’accessibilité »
Et si on corrigeait l’accessibilité du site de cagnotte en ligne Leetchi ?
Il y a quelques jours, je me suis mise à la recherche d’un site de cagnotte en ligne et qui, bien sûr, serait un minimum accessible pour que les personnes handicapées (et notamment les personnes aveugles qui rencontrent des difficultés insurmontables sur les sites inaccessibles) puissent donner aussi.
J’ai posé la question sur Twitter pour savoir si des personnes aveugles avaient réussi à en utiliser. Visiblement, pas trop. Alors, je suis allée jeter un œil avisé : aucun site de cagnotte en ligne ne semble être accessible.
Pour finir, j’ai quand même jeté mon dévolu sur Leetchi. J’ai commencé à faire une feuille de style personnalisée pour corriger deux-trois trucs. Et, de fil en aiguille, j’ai repéré des choses que je ne pouvais pas corriger avec CSS… Alors, je me suis dit que j’allais faire une extension de navigateur pour pouvoir ajouter du JavaScript (JS), aussi.
Et voilà à quoi j’ai passé mon samedi : surcharger le site de Leetchi avec du CSS et JS personnalisé pour corriger des gros soucis d’accessibilité.
Continuer la lecture « Et si on corrigeait l’accessibilité du site de cagnotte en ligne Leetchi ? »
Créer des boutons accessibles et dignes de ce nom en HTML
Sur le web, les boutons sont partout. Il est très rare de voir un site web sans bouton. En effet, les boutons servent à soumettre des formulaires ou à actionner des interactions gérées via JavaScript. En revanche, les boutons ne servent pas à aller sur une autre page web (ou à une zone de la page web en cours de consultation) ; ça, ce sont les liens qui le font.
Parfois, les liens ont des têtes de boutons ; on les appelle même les call to action (CTA) dans le jargon du marketing.
Parfois, et c’est pire que tout, des éléments ont des têtes de boutons mais, dans le code, ils ne sont ni des liens, ni des boutons. Ils sont une image, une div, un span, un élément a sans attribut href ou je ne sais quoi encore. Ils sont inutilisables au clavier ou avec une technologie d’assistance comme un lecteur d’écran et sont donc inaccessibles pour les personnes handicapées. Nous sommes là face à un problème d’accessibilité web critique que nous devons résoudre.
Je vais essayer d’expliquer au mieux ce qu’il faut faire pour avoir un code HTML sémantique, utilisable, accessible en ce qui concerne les boutons.
Continuer la lecture « Créer des boutons accessibles et dignes de ce nom en HTML »
Le vaste monde des alternatives textuelles : les attributs ARIA : à n’utiliser qu’en connaissance de cause (6/6)
Dans la spécification ARIA, il existe 3 attributs qui permettent d’ajouter du contexte textuel à des éléments. Ils peuvent être utilisés comme alternatives textuelles dans certains contextes. Les attributs aria-label et aria-labelledby permettent de nommer un élément tandis que l’attribut aria-describedby permet de le décrire. Comment les utiliser ?
Le vaste monde des alternatives textuelles : le texte masqué en CSS (5/6)
Le texte masqué en CSS est un moyen de fournir une alternative textuelle ou d’ajouter du contexte à des éléments pour lesquels on ne peut pas le faire de façon visible, sans déstructurer la mise en page prévue par les maquettes. Bien sûr, on ne s’y prend pas n’importe comment pour que le contenu soit accessible aux lecteurs d’écran.
Continuer la lecture « Le vaste monde des alternatives textuelles : le texte masqué en CSS (5/6) »
Le vaste monde des alternatives textuelles : la balise <title> et les images SVG (4/6)
La balise <title>, à ne pas confondre avec l’attribut du même nom, est généralement le titre de la page et n’est donc pas une alternative textuelle. Cependant, elle existe aussi pour les balises <svg> et est dans ce cas une alternative textuelle à ce format d’image particulier.
Le vaste monde des alternatives textuelles : l’attribut title (3/6)
L’attribut title permet d’apporter de l’information complémentaire à certains éléments pour des utilisateurs qui naviguent à la souris ou avec un lecteur d’écran, par exemple. Son principal défaut est de ne pas pouvoir s’afficher en navigation tactile donc mobile notamment. Il est donc à utiliser en dernier recours et avec parcimonie.
Continuer la lecture « Le vaste monde des alternatives textuelles : l’attribut title (3/6) »
Le vaste monde des alternatives textuelles : l’attribut alt (2/6)
L’attribut alt sert surtout pour les balises <img />. Il est obligatoire sur les balises <img /> mais, sa valeur varie en fonction des cas : les images de décoration, les images-liens, les images porteuses d’information, les images contenant du texte ou images-texte. Faisons le point.
Continuer la lecture « Le vaste monde des alternatives textuelles : l’attribut alt (2/6) »
Le vaste monde des alternatives textuelles (1/6)
Lorsqu’on souhaite réaliser un site web avec du contenu accessible à tous, aujourd’hui, on se met très rapidement à parler d’alternatives. Les maquettes graphiques, les besoins fonctionnels imposent certains choix qui posent parfois quelques problèmes d’accessibilité à certains types d’utilisateurs (ou à tous). Pour y pallier, on utilise des alternatives. Dans cette série d’articles, je vais me concentrer sur les alternatives textuelles.
Continuer la lecture « Le vaste monde des alternatives textuelles (1/6) »
Rendre son site un peu meilleur sur Joomla
Au mois de janvier, je me suis enfin décidée à en finir avec Joomla et à passer mon portfolio sur WordPress après y avoir passé ce blog. Si je n’ai pas réussi à vous convaincre de ne pas utiliser Joomla, avant d’en finir définitivement, je voulais quand même partager quelques tuyaux ; quelques trucs qui m’ont aidé à rendre mon site un peu moins pourri en terme de sécurité et de performances d’affichage notamment. Certains points sont valables pour n’importe quel site mais je me suis dit que ce n’était pas plus mal de les mettre quand même.
Continuer la lecture « Rendre son site un peu meilleur sur Joomla »
Problème d’intégrateur : de la détection d’un périphérique tactile
Je me suis récemment arrachée les cheveux sur un problème de navigation dans des galeries photos jQuery sur certains périphériques et avec un navigateur en particulier : Google Chrome. Il s’avère que le fond du problème est la mauvaise utilisation de la détection d’un périphérique tactile. Je vais donc vous expliquer pourquoi.
Continuer la lecture « Problème d’intégrateur : de la détection d’un périphérique tactile »