10 excellentes façons de rendre votre contenu portable et accessible

Contenu

• L’accessibilité n’est pas une «fonctionnalité»
• Définition des plates-formes
• Garder le contenu portable et accessible
• 1. Commencez avec HTML5
• 2. WAI-ARIA
• 3. Utilisation de doctype
• 4. Balises de document HTML5
• 5. Mauvais liens
• 6. Images - ALT contre TITLE
• Faites savoir aux gens
• Résumé
• Remerciements
• Ressources

Quand Kerie tape sur son iPhone, elle a l'air de jouer de la flûte. Elle le tient près de son visage et ses doigts bougent à un rythme incroyable. Elle finit d'écrire et me tend son téléphone pour lire le message qu'elle vient de taper. Il a une orthographe et une grammaire parfaites et a été tapé beaucoup plus rapidement que je n'aurais pu le faire en utilisant le clavier tactile de l'iPhone.

Kerie utilise une application appelée Fleksy pour l'aider à déplacer ses doigts sur le visage du téléphone selon des motifs qui se transforment en mots. Elle lit également les actualités, écoute les applications radio, vérifie Twitter et recherche les horaires des trains avec son téléphone. Elle est complètement aveugle.

«Publier» signifie différentes choses pour différentes personnes. Pour certaines personnes, cela signifie produire un volume de travail imprimé et physique. D'autres personnes associent la publication à la possibilité de distribuer des œuvres écrites via des appareils et des applications. De plus en plus souvent, les gens considèrent la publication comme la mise à disposition de contenu dans n'importe quel format, qu'il s'agisse de pousser un article sur un blog ou de mettre à jour un article Google Plus.

La réalité est que les attentes diffèrent selon les utilisateurs, et ces attentes évoluent avec le temps. Les lecteurs qui ont jadis consommé avec voracité le dernier article d'un blog s'attendent maintenant à pouvoir lire ce billet de blog, ou tout article ou livre, où et quand cela leur convient. Aujourd'hui, le contenu nous suit d'un blog à Reeder sur un téléphone à Instapaper sur un iPad à une version envoyée par courrier électronique via Whispernet à un Kindle.

Le flux de travail de lecture de chacun est différent, et pour ceux qui ont besoin de fonctionnalités d'accessibilité comme un lecteur d'écran, un contraste élevé ou du texte agrandi, ce flux de travail est interrompu, parfois de manière irréparable, lorsque les auteurs et les éditeurs ne prennent pas en compte les détails de mise en forme mineurs mais nécessaires. Ne pensez pas que cela ne consiste pas à "cocher la case d'accessibilité". Sachez plutôt que vous transformez efficacement votre contenu en une boîte noire pour de nombreux clients potentiels.

L’accessibilité n’est pas une «fonctionnalité»

S'il est vrai que les commandes accessibles sont utilisées par les personnes malentendantes et malvoyantes, de nombreuses autres personnes en bénéficient également. Une personne malvoyante ajustera la taille des polices pour lire plus facilement le contenu sur un écran. Une personne daltonienne apprécie la possibilité d'ajuster la palette de couleurs afin que des éléments tels que le texte d'avertissement rouge ressortent réellement. Les personnes ayant de longs trajets utilisent des lecteurs d'écran pour écouter les articles qui leur sont lus. Les locuteurs non natifs utilisent la vidéo et l'audio sous-titrés pour les aider à comprendre une nouvelle langue. Tous ces scénarios représentent une portée plus large pour votre contenu, une expérience utilisateur et une empathie améliorées, et peut-être même plus de revenus.

Pour un excellent aperçu de ce que signifie l’accessibilité, consultez l’article de Ian Hamilton.

Définition des plates-formes

Commençons par quelques définitions des formats sur lesquels nous pouvons nous concentrer pour rendre notre contenu plus facile à lire:

• HTML: Avec HTML5, le Web est un endroit encore meilleur pour les écrivains et les éditeurs pour présenter leur travail. Nouvelles balises comme article, section, entête et bas de page sont désormais implémentés dans de nombreux navigateurs et peuvent être utilisés de manière semi-fiable pour ajouter un contexte sémantique à votre écriture. De plus, le prochain module de page CSS3 peut également intéresser ceux qui recherchent une expérience de lecture de page plus fixe à activer.
• EPUB: EPUB est le standard officiel de l'International Digital Publishing Forum (IDPF). EPUB3 a été approuvé en octobre 2011 et permet aux publications d'avoir un contenu plus stylé et personnalisable, plus proche de ce qui est possible avec HTML / CSS, plutôt que les directives précédentes, plus statiques.
• MOBI: MOBI, abréviation de Mobipocket, est un format utilisé par Kindle et d'autres lecteurs numériques. Il est à nouveau moins personnalisable que EPUB, mais nous le couvrons ici car vous pouvez l'utiliser pour publier du contenu sur Amazon si vous le souhaitez. Selon Robin Christopherson de AbilityNet, certains modèles de Kindle sont accessibles aux utilisateurs aveugles; cependant, l'application Kindle sur iOS ne l'est pas. KF8, le nouveau format de Kindle, est actuellement pris en charge par le Kindle Fire et sera bientôt déployé sur les appareils e-ink Kindle de dernière génération et les applications de lecture Kindle.
• PDF: Le PDF est devenu une entité omniprésente sur le Web. Je l'inclus ici car la plupart des tablettes ont une bonne technologie intégrée pour lire les PDF et activer la technologie d'assistance avec eux. Avec un PDF, le facteur décisif est la façon dont il a été créé. Selon Alan Dalton, conseiller en développement de l'accessibilité à la National Disability Authority d'Irlande, "Vous pouvez rendre les fichiers PDF accessibles, mais beaucoup de gens ne le font pas. Ils ne réalisent pas que leurs outils produisent de mauvais produits. Si j'avais mon chemin, tout ce que nous ferions serait être HTML. " Hormis la navigation et l'accessibilité, les PDF ne s'adaptent pas non plus à différentes tailles, et quiconque a essayé de lire un PDF sur un smartphone est familier avec le pincement, le zoom et le panoramique maladroits nécessaires pour le faire.

Ce qui n'entre pas dans cette catégorie, ce sont les applications qui prennent votre contenu et le transforment en grandes images. Bien que cela puisse garantir que l'apparence et le style sont identiques sur toutes les plates-formes, vous bloquez une grande partie de votre public tout en créant un téléchargement très important. Ce problème est exacerbé lorsque nous commençons à parler d'écrans Retina et d'images à double taille. Pour avoir une idée de ce que c'est que de se voir refuser quelque chose que vous voulez lire (mais que vous devez quand même payer pour cela), consultez les commentaires sur les applications Kiosque qui sont pour la plupart inaccessibles via VoiceOver dans iOS.

Pour voir à quoi ressemblent ces types de magazines pour un utilisateur de technologie accessible, consultez ma vidéo intégrée, qui montre l'expérience frustrante d'essayer de lire ces magazines avec un
outil d'accessibilité tel que VoiceOver:

Garder le contenu portable et accessible

En nous concentrant sur les formats portables, nous pouvons gérer notre contenu pour vivre heureux sur plus de navigateurs, de téléphones, de lecteurs numériques et d'applications de lecture. Que devons-nous faire à notre contenu pour nous assurer qu'il peut bien se traduire entre ces différents formats, tout en conservant un style personnalisé et une excellente expérience?

J'ai rassemblé ci-dessous quelques consignes destinées aux personnes qui souhaitent que leur audience soit aussi large que possible et qui ne souhaitent pas enfermer leur contenu dans une boîte noire pour de nombreux utilisateurs. Ces techniques peuvent être appliquées à tout, des articles de blog au journalisme de longue durée, en passant par toutes les autres œuvres que vous envisagez d'auto-publier:

1. Commencez avec HTML5

En créant vos documents initialement avec HTML5, vous n'aurez plus à vous soucier à l'avenir. Le balisage HTML5 aidera à faciliter la navigation dans vos documents et à les traduire dans d'autres formats. Vous ferez beaucoup moins de «rétro-ajustement» de vos publications dans d’autres formats si vous disposez d’informations sémantiques dès le départ.

2. WAI-ARIA

WAI-ARIA est la Web Accessibility Initiative - Suite d'applications Internet riches accessibles. Il s’agit d’un ensemble de directives créées par le Groupe de travail sur les protocoles et les formats (PFWG) de
le W3C. WAI-ARIA définit un moyen de rendre le contenu et les applications Web plus accessibles aux personnes handicapées, et il aide avec un contenu dynamique et des contrôles d'interface utilisateur avancés développés avec Ajax, HTML, JavaScript et les technologies associées. Certaines des techniques de cet article proviennent des directives WAI-ARIA, et bien que cet article ne soit pas assez long pour couvrir toutes les spécifications, je vous encourage à le consulter pour plus de détails sur les raisons pour lesquelles elles sont recommandées et les meilleures pratiques pour les mettre en œuvre.

3. Utilisation de doctype

Bien que l'utilisation d'un doctype spécifique n'affecte pas l'accessibilité du code HTML associé, la raison importante d'utiliser un doctype est de s'assurer que le mode bizarreries du navigateur n'est pas déclenché. Utilisez simplement ! DOCTYPE html> pour s'assurer que cela ne se produit pas.

4. Balises de document HTML5

Une bonne navigation d'un document est élevée sur son indice d'accessibilité. De nombreux utilisateurs de technologies accessibles que j'ai interrogés ont exprimé leur frustration face aux fournisseurs de contenu et aux développeurs qui ne marquaient pas correctement leurs documents pour la capacité de navigation. Ces balises donnent plus de contexte aux sections de votre document que l'utilisation de nombreuses divs.

• Entête et Bas de page peuvent tous deux être utilisés plusieurs fois dans une page. Ils peuvent désigner l'en-tête ou le pied de page principal respectif du document, ou ils peuvent être utilisés pour les informations d'en-tête / pied de page dans des articles ou des sections.
• De côté est une bonne balise à utiliser pour les sections, telles que les barres latérales dans un livre, qui sont complémentaires au document mais pas absolument cruciales pour sa compréhension.
• Sections sont des moyens de briser des idées ou de regrouper des contenus qui ont du sens.
• Des articles sont des éléments indépendants et autonomes qui pourraient exister sans le reste du contenu. L'utilisation appropriée de ces balises permet de s'assurer que la structure de votre contenu est interprétée correctement.

5. Mauvais liens

Avec CSS, il est possible d’utiliser des images d’arrière-plan sur les liens et les boutons. C'est un bel effet pour les concepteurs Web car il donne plus de contrôle sur la typographie. Cependant, cela a conduit les gens à oublier d'inclure des descriptions textuelles. Assurez-vous que même si vous utilisez du texte dans l'image, assurez-vous qu'il reste accessible. Cela peut également affecter des choses telles que le référencement et
internationalisation.

Exemple:

a href = "/ contact"> / a>

C'est mauvais.

a href = "/ contact"> Contactez-nous / a>

Bien mieux.

6. Images - ALT contre TITLE

Les gens incluent souvent soit alt ou alors Titre attributs à leur image, mais pas les deux car ils sont souvent mal compris et semblent donc redondants. Pour dissiper la confusion, Titre peut représenter des informations consultatives, telles que celles qui peuvent apparaître dans une info-bulle. Cela peut également vous donner des informations supplémentaires lorsque vous passez la souris sur une image, une technique que de nombreuses personnes utilisent sur leurs blogs. Cependant, avec la croissance des appareils tactiles, ce type d'informations devient moins utile.

Alt d'autre part, il est utilisé par la technologie d'assistance et donne un contexte à l'élément. Tu dois utiliser alt sur vos images et assurez-vous que ce sont des informations utiles. Utilisant img alt = "" src = "1348.webp">

Faites savoir aux gens

Si votre contenu est disponible dans plusieurs formats, assurez-vous qu'il existe un moyen de le découvrir sur votre site. Vous avez probablement vu le message "Si vous ne parvenez pas à consulter cet e-mail, lisez le
version "en haut de nombreux e-mails de newsletters. Faites de même pour votre contenu. Si vous disposez d'un PDF accessible ou d'une version audio ainsi que d'un ePub, assurez-vous que les utilisateurs peuvent trouver ces informations. Est-ce que l'utilisateur des tests pour vous assurer que le contenu est trouvable et lisible.