Décrypter les guides de styles numériques pour l'accessibilité : police, couleur et imagerie

1. Introduction: Bonjour, Je suis Tatiana Mac, et je suis directrice artistique interactive et designer, actuellement basée à Portland, Oregon. Je suis vraiment passionné de refléter les diverses communautés dans lesquelles nous vivons à travers mon travail, ce qui signifie créer des designs à la fois inclusifs et accessibles. J' ai toujours été intrigué par le rôle que l'art peut jouer dans le reflet de notre paysage social . J' ai réalisé que je pourrais faire de Maura une designer pour suivre cette éthique, alors j'ai commencé à lire sur le Web. C' est la possibilité ainsi que les conditions qui sont affectées par un web inaccessible, et je me suis rendu compte que beaucoup de guides de style ne considèrent pas l'accessibilité ou ne le cassent pas. Je suis vraiment excité de parler de l'accessibilité aujourd'hui, mais je tiens à le mentionner, mais je ne suis en aucun cas un expert en accessibilité. Mais j'espère que mon travail et des dizaines de guides de style interactifs pour créer des expériences différentes aideront à vous fournir la perspective unique des débutants afin que vous puissiez apprendre à rendre vos créations plus accessibles de manière digeste. La classe d'aujourd'hui couvrira certains aspects fondamentaux de l'accessibilité du Web. Vous quitterez la classe d'aujourd'hui avec la compréhension de base des directives d'accessibilité Web , façon de travailler avec des directives restrictives, incomplètes ou inaccessibles sur les erreurs courantes commises, ainsi que la façon de les corriger . Plus précisément, nous allons discuter des raisons pour lesquelles vous devriez vous soucier de l'accessibilité, comment faire une analyse de rentabilisation pour l'accessibilité dans votre entreprise, les principales catégories de handicaps, ainsi que de la décomposition d'un type de style dans son éléments constitutifs de la typographie, couleur et de la photographie et de l'imagerie. Puis cette connaissance de base. Nous examinerons les erreurs courantes qui rendent le Web inaccessible. Ensuite, nous vous expliquerons comment corriger ces erreurs afin que vous puissiez commencer à affecter votre prochain guide de style ou projet de site Web. J' ai également inclus une liste de contrôle que vous pouvez exécuter pour votre prochain projet dans la ressource de la section, Donc je suis heureux que vous soyez ici et commençons. 2. Le cas de l'accessibilité: Donc vous pourriez être ici parce que vous avez entendu un peu de buzz autour d'un allié hashtag ou un 11 Pourquoi ? Quel est un neurone imm pour l'accessibilité ? Vous pouvez également faire plus pour créer des conceptions accessibles au sein de votre équipe. Quelle que soit la raison, je suis juste excité que vous soyez ici et j'espère vous offrir des moyens clés pour améliorer l'accessibilité de vos conceptions et vous encourager avec les raisons pour lesquelles la capacité X. Raison. Une accessibilité est pour tout le monde, pas seulement pour les personnes handicapées. En fait, le design accessible améliore l'expérience pour tout le monde. Pour ceux qui n'ont pas besoin de besoins particuliers, cela rend l'expérience plus facile à utiliser. C' est donc d'un avantage universel. Le design accessible est souvent confondu avec le terme de conception universelle, et ils ne sont pas équivalents. Universal Design exprime qu'un design doit être aussi universel que possible et fonctionner pour grand nombre de personnes possible, reconnaissant que certains dessins ne fonctionneront pas pour tout le monde. accessibilité, L'accessibilité, d'autre part, commence par un besoin spécifique de différentes personnes, et les conceptions de leur premier design accessible est souvent synonyme de design inclusif et efficace. Les deux termes signifient que vous commencez avec des besoins spéciaux et construisez à partir de là pour que vous incluez tout le monde. L' objectif final est donc de s'assurer que toutes les conceptions sont accessibles et éventuellement accessibles. Le design et le design universel seront un dans le même. Mais jusqu'à ce que nous atteignions ce niveau de saturation, il est important de tenir compte des besoins uniques des gens afin de maximiser leurs expériences. Il y a cette idée fausse selon laquelle les personnes qui ont besoin d'un design accessible sont un petit sous-ensemble ou dans chaque population. Ce n'est pas vrai. Sur les sept milliards de personnes dans le monde, environ 15 % des personnes ont besoin d'une sorte de considérations d'accessibilité parce qu'elles souffrent d'une sorte de handicap. Cela équivaut à environ 1,14 milliard d'utilisateurs qui sont touchés et qui pourraient avoir une expérience utilisateur négative. Parce que vous n'envisagez pas de design accessible, c'est un grand nombre. Reason Teoh design accessible peut fournir d'énormes gains économiques à peu ou pas de coût supplémentaire . normes Web accessibles se croisent avec beaucoup d'autres normes, comme l'optimisation d'un PDG ou d'un moteur de recherche, considérations juridiques, les considérations techniques pour rendre votre site plus performant et le Web réactif le mieux possible pratiques. Donc, si vous apportez des améliorations à votre S. E O qui sont accessibles, vous bénéficierez des deux à peu ou pas de frais supplémentaires. Je pense que c'est ce qu'on appelle un bogo. conception accessible augmente également le nombre d'utilisateurs globaux, ce qui peut conduire à augmenter l'engagement et à augmenter la conversion, ce qui entraîne en fin de compte plus de revenus. Je pense que c'est ce que les gens d'affaires appellent une bonne raison de retour sur investissement. Trois. Malheureusement, comme beaucoup de marques négligent les normes d'accessibilité, les marques qui tiennent compte de l'accessibilité sont mises de côté. Donc, par exemple, si vous avez un site de commerce électronique avec une expérience d'achat fluide pour les personnes qui ont besoin considérations d' accessibilité, ils vont remarquer que vous êtes une marque qui semble assez soucieuse de leur fournir avec une expérience positive. Et finalement, les gens se soucient des marques qui se soucient d'abord d'eux Raison pour En tant que concepteurs modernes, nous devons comprendre le rôle essentiel que nous pouvons jouer dans l'influence du changement social positif à notre base. Ce que les concepteurs sont censés faire est d'améliorer la vie et l'expérience de nos utilisateurs, de tous nos utilisateurs. Nous devons donc reconnaître notre privilège en tant que concepteurs et comprendre où nos utilisateurs ont l'air. Venant d'une partie d'être un allié n'est pas Knee Shing, un groupe spécifique de personnes, peu importe la taille du groupe un aspect de notre industrie utilise le terme utilisateur ou part de marché pour décrire un groupe de personnes qui ont utilisé un navigateur spécifique périphérique ou système d'exploitation . Nous utilisons ce terme afin de hiérarchiser et de hiérarchiser les différents problèmes qui se produisent parce qu'il peut y en avoir autant. C' est une approche nécessaire et pragmatique lorsqu'on parle d'appareils, de navigateurs et de clients raison de toutes les permutations qui peuvent se produire. Mais quand on parle d'humains, cela devient très problématique. Bien que les utilisateurs puissent généralement choisir l'appareil ou le navigateur qu'ils utilisent, ils ne peuvent pas choisir de ne pas être affectés par leurs conditions. Nous devons donc nous assurer de prendre soin d'eux et de leur fournir de bonnes expériences. Donc les quatre raisons que nous venons de couvrir ou quatre des plus grandes. Mais il y a de nombreux autres avantages à fournir des conceptions accessibles. Si vous êtes à la recherche d'un particulier afin de faire une analyse de rentabilisation pour vos parties prenantes ont inclus, une liste de ressources se trouve dans la description de la classe 3. Comprendre l'accessibilité: avant de plonger dans le style, guides voudront retarder une base de base de l'accessibilité. Nous commencerons par les catégories de handicaps, modes de handicap, les types de technologies d'assistance ou 80 sur lesquels reposent les gens, ainsi que les normes Web en fonction desquelles l'accessibilité est mesurée. pose de ces bases nous aidera à nous assurer que nous posons les bonnes questions le plus tôt possible dans le cadre de nos projets. Commençons par les six principales catégories de handicap visuel. Auditif, moteur, physique, neurologique, cognitif et de la parole. Les utilisateurs affectés par une déficience visuelle comptent généralement sur des lecteurs d'écran ou agrandissent l'écran IRS ou ajustent les paramètres de leur navigateur. Les utilisateurs auditifs sont malentendants, sorte qu'ils comptent généralement sur des visualisations de contenu audio, comme le sous-titrage codé. Les utilisateurs qui ont une déficience motrice ou physique utilisent généralement des technologies d'assistance ou des années 80 qui leur permettent de naviguer sur le Web avec une mobilité limitée, comme des bâtons de bouche ou un logiciel de suivi des yeux ou des claviers alternatifs. Les conditions neurologiques véhiculent très largement en fonction de la condition spécifique de votre utilisateur, mais une chose courante à considérer en termes d'accessibilité est les crises. Les personnes qui peuvent éprouver des crises peuvent être déclenchées par un mouvement d'accès, donc la loi s'appuie souvent sur un mouvement réduit sur leurs appareils, ce qui est un paramètre pour empêcher ces instances. troubles cognitifs tels que l'autisme ou le syndrome de Down peuvent varier considérablement, comme les troubles neurologiques, il est donc important de comprendre comment ces utilisateurs sont affectés par le flux de contenu. Par exemple. Enfin, il est important de noter que cette liste de handicaps n'est pas exhaustive et que les utilisateurs peuvent être touchés par plus d'un. Ces conditions ne sont pas mutuellement exclusives, sorte que les utilisateurs peuvent avoir des expériences très compromises. Donc, en tant que concepteurs, nous devons nous assurer de maintenir cette empathie et cette compréhension et de toujours chercher à apprendre façons plus accessibles d'améliorer nos conceptions. Donc, les conditions que je viens de décrire sont toutes permanentes, ce qui signifie qu'elles affecteront les utilisateurs pour le reste de leur vie. Mais comme nous l'avons mentionné précédemment, rendre les conceptions accessibles aide tout le monde, pas seulement les personnes handicapées, sorte qu'il peut aider les personnes qui sont temporairement ou situationnelles touchées par ce handicap. Par exemple, si nous créons un design navigable d'une main, cela peut aider quelqu'un qui se trouve dans la situation Lee dans le besoin de cette aide, comme quelqu'un qui tient un bébé ou cela peut aider quelqu'un temporairement, comme quelqu'un qui a récemment cassé le bras et, bien sûr, quelqu'un qui est touché de façon permanente. Donc, quelqu'un qui n'a qu'un bras maintenant pour les personnes qui ont accès aux deux bras utilisant ce site sera juste plus rapide et plus facile, et ils ne remarqueront probablement aucune différence du tout. Et je suis presque sûr que c'est ce qu'on appelle privilège. 4. Décomposer un guide de style: ici, je tiens à mentionner qu'il existe des lignes directrices pour mesurer nos normes d'accessibilité . Le World Wide Web Consortium ou W trois C publie le contenu Web, directives d' accessibilité ou W C. A. G, et il s'agit d'un ensemble vraiment robuste de directives qui pourraient remplir toute une classe. Mais pour aujourd'hui, ce que vous devez savoir, c'est qu'ils existent, qu'ils sont l'étoile du Nord pour l'accessibilité, et c'est en fin de compte ce que nous allons faire dans nos recommandations aujourd'hui. Maintenant que nous avons établi votre compréhension de base de l'accessibilité, le quoi et le pourquoi nous allons parler de la façon dont nous pouvons mettre en œuvre l'accessibilité dans nos conceptions aide de guides de style. Quelque chose d'important à mentionner ici est que je crois au design en tant que partie intégrante des systèmes de conception . Et ce que cela signifie, c'est que je crois que le design devrait être traité comme un cadre plutôt qu'un ensemble de règles et règlements à respecter. Et je crois au maintien de l'esprit du guide de style plutôt que de la loi des lettres. Le guide de style. Ce mec ne respecte pas, en particulier au nom de l'accessibilité lors de la conception pour l'accessibilité Web et le design numérique en général, il est impossible de maintenir le contrôle de toutes les différentes combinaisons d'appareils et , donc nous allons probablement enfreindre certaines règles dans la section suivante. Et c'est bon. Les guides de style peuvent varier un peu en termes de combien ils couvrent. grands guides de style d'entreprise peuvent avoir des tons de 200 pages qui sont vraiment parfaits pour obtenir des étagères trop hautes, alors que votre bodega local peut avoir seulement un guide de style de cinq pages. Ou peut-être que c'est seulement ici à Portland. Peu importe, guides de style couvrent les mêmes types de sections aujourd'hui vont passer par la typographie, couleur et la photographie et l'imagerie. Nous discuterons des types courants d'erreurs commises dans ces trois sections, ainsi que des moyens de les corriger et de rendre vos conceptions plus accessibles. 5. Guide de style : typographie: est généralement la première section d'un guide de style bien après les 17 ou 18 pages d'utilisation appropriée du logo et son importance et sa priorité ont beaucoup de sens. Type est la façon dont nous recevons notre contenu et Foncier comme la clôture de notre contenu. Mais le type convoquer compliqué parce que ses origines proviennent de l'impression. Beaucoup de nuances créées pour l'impression ne se rencontrent pas très bien numériquement et peuvent causer des problèmes d'accessibilité. Le but principal du type est de vous fournir le contenu de sorte qu'il doit être lisible et clair. Le W three c W C A. G appelle son type à être perceptible et compréhensible. C' est la principale mesure par rapport à laquelle nous allons mesurer en sont des exemples aujourd'hui. Exemple. Un. Votre guide de style demande que votre type de paragraphe soit de taille 12, ce qui est trop petit. La première chose à faire pour corriger cela est d'augmenter votre paragraphe. Texte à 16 ou mieux encore 20. Ensuite, à partir de là, faites augmenter vos balises d'en-tête proportionnellement. Sur la base des critères décrits dans le guide de style, il est important de se rappeler ici que vos utilisateurs ont finalement le contrôle de la taille de la taxe sur leur appareil. Vous ne voulez donc pas altérer le succès de votre conception en fonction d'une taille de police spécifique , car elle se cassera à mesure qu'elle augmentera l'exemple de taille de police à votre style. Guide appelle pour le plaisir attend Lettre à la chose, ce qui peut être difficile à lire, en particulier pour les affichages non rétiniens. Ma première recommandation serait d'éviter d'utiliser des paramètres de type mince dans le guide de style . Cela pourrait ne pas être possible, en particulier avec les marques qui ont une affinité pour utiliser tous les poids minces sur l'ensemble de leur Fahnestock. Ne pouvons-nous pas être un peu plus de poids de police ici et inclure tous les poids de police ? Quoi qu'il en soit, Si vous devez utiliser des polices Finn, assurez-vous d'augmenter le poids de la police de 100. Dites à 200 Urban 300. La différence visuelle est un peu négligeable, même pour les équipes de la marque, et vous augmenterez la lisibilité. Deuxièmement. Si vous ne pouvez pas le faire, alors je recommanderais de compter sur le fonds de secours. J' ai trouvé que beaucoup de guides de style sont écrits par des concepteurs d'impression ou des concepteurs environnementaux dont la solution au type numérique est juste une utilisation. Helvetica, qui, bien que pas un choix très intéressant, garantit au moins que votre contenu soit lisible et c'est finalement ce qui est le plus important. Exemple trois appels de guide de style pour le texte centré et centré sur le texte est difficile à lire car il change le point de départ de chaque ligne. Cela provoque une charge cognitive énorme et est inaccessible, donc un moyen de capturer l'esprit du texte centré est de centrer le conteneur et, à gauche, aligner le texte dans le conteneur. De cette façon, vous maintiendrez l'esprit du texte centré sans causer de problèmes d'accessibilité. texte central n'est pas le seul type de texte problématique, et en fait c'est n'importe quel texte où le point de départ change. Donc, pour les langues de gauche à droite qui inclut l'alignement à droite pour les langues de l'orteil droit gauche comme l'arabe qui inclut l'alignement à gauche. Aussi désolé pour les fans de journaux. Mais le texte justifié est également problématique car bien qu'il fonctionne bien dans l'impression, il change la quantité d'espace entre les mots, ce qui provoque beaucoup de problèmes et un design réactif. Pour les personnes qui ont des troubles cognitifs, cela peut provoquer quelque chose appelé flou, ce qui le rend très inaccessible et difficile à lire. Ainsi, la façon dont vous pouvez capturer l'esprit du texte justifié est d'envelopper votre texte dans un conteneur et hors de la couleur d'arrière-plan ou d'un contour afin que vous puissiez capturer l'esprit du texte justifié sans causer de problèmes d'accessibilité. Exemple. Pour le style Guide appelle beaucoup de toutes les majuscules. Texte toutes les majuscules Le texte est tout d'abord difficile pour les personnes atteintes de troubles cognitifs à lire. Deuxièmement, tous les lecteurs d'écran liront tout texte qui a été tapé en majuscules. Donc, si vous définissez votre touche de verrouillage majuscules comme une abréviation, donc le respect serait lu comme R E s P E C T. Si vous avez besoin de faire du texte toutes les majuscules pour une raison quelconque, assurez-vous que vous respectez le boîtier de phrase ou le boîtier de titre lorsque vous le tapez et compter sur le texte. Transformer la propriété majuscule. Mais utilisez-le avec parcimonie parce que, rappelez-vous, c'est difficile à lire. Exemple. Les balises d'en-tête sont utilisées pour Onley, transmettent des différences visuelles et non pas pour transmettre la hiérarchie du contenu. Les personnes atteintes de troubles cognitifs s'appuient sur les balises de titre pour les aider à comprendre l' architecture de contenu de votre page. Les personnes ayant un trouble déficitaire de l'attention ou des problèmes de mémoire s'appuieront sur des balises d'en-tête pour écrémer rapidement la page ou leur rappeler où elles se trouvent, donc si vous l'utilisez simplement pour transmettre des différences visuelles. Cela peut causer une expérience utilisateur vraiment déroutante pour ces utilisateurs. Donc, par tous les moyens, éviter d'utiliser des balises d'en-tête juste pour transmettre des différences visuelles. Assurez-vous que votre contenu est dans l'ordre et utilise toutes les balises de titre dans l'ordre. En outre, HTML 5 comprenait des attributs HTML très utiles qui ont aidé à clarifier différents types de sections. Ceci est super utile pour les lecteurs d'écran car il fournit des contacts supplémentaires pour quel type de section l'utilisateur se trouve. Par exemple, un article ou une section peut aider à ajouter une hiérarchie supplémentaire aux balises de titre. Utilisé, um exemple, les styles ling ne sont différenciés que par couleur. Maintenant, il existe un petit sous-ensemble de couleurs que vous pouvez utiliser pour différencier vos styles de lien de votre copie corporelle et de l'arrière-plan. Mais cette fenêtre de couleurs est très étroite, et il est probable que votre guide de style n'inclut pas ces couleurs. Donc, au lieu de cela, je vous recommande d'éviter tout cela ensemble et de vous assurer que vous ajoutez un style supplémentaire pour différencier les liens de la copie corporelle. Le plus commun et largement compris est le sous-jacent. Le soulignement veillera à ce que votre utilisateur sache qu'il s'agit d'un appel à l'action qui aidera à le différencier de la copie corporelle. Deuxièmement, vous voudrez vous assurer que vous n'utilisez pas la propriété de soulignement pour autre chose, car cela peut créer beaucoup de confusion pour votre utilisateur. Du point de vue du contenu, vous voulez vous assurer que vous liez une partie appropriée de l'expression. La raison en est que les utilisateurs peuvent utiliser le lecteur d'écran pour rassembler tous les liens de la page pour obtenir un aperçu rapide de tous les liens que vous avez inclus. Ce que cela fait, c'est qu'il supprime les liens de leur contexte. Il est donc très important que ces phrases isolées puissent décrire deux choses. Un, qu'est-ce que c'est et où tu m'emmènes ? 6. Guide de style : couleur: est merveilleux car il peut aider à différencier ou classifier l'information et dans l'ensemble beaucoup de personnalité à votre conception. Mais pour quelqu'un qui souffre de cécité des couleurs, il ne pourra pas voir cette différenciation. Il est donc important que vous utilisiez la couleur de manière additive afin d'améliorer votre histoire. Il y a aussi la considération du contraste de couleur, donc le W trois C W C a. G comprend des niveaux de couleur. Accessibilité contrastée. Vous voudrez prendre en considération les écrans d'accessibilité pour votre conception, et un moyen vraiment utile de le faire est de télécharger le connecteur Stark in pour le croquis. Il s'agit d'un outil très simple mais efficace qui permet d'examiner vos conceptions pour l'accessibilité et vous dire ce que vous ressentez. Adobe Creative Cloud inclut également des filtres d'accessibilité intégrés Assurez-vous donc de vérifier vos conceptions car c'est trop simple. Pas pour donner l'exemple. Un. Le guide de style appelle le type de lumière sur fond clair ou le type sombre sur fond sombre , essentiellement n'importe quel cas où il n'y a pas suffisamment de contraste. Comme je l'ai mentionné précédemment, il existe de nombreux outils pour vous aider avec le rapport de contraste, mais un fait amusant parce que je sais que les concepteurs aiment grand type sur blanc est que le code hexadécimal 767676 est la forme la plus légère de gris que vous pouvez utiliser contre un blanc arrière-plan et encore gagner niveau un classement à la taille 16 texte. Donc, si vous vous souvenez d'avant, c'est le plus petit, vous devriez faire votre copie corporelle afin que vous puissiez toujours avoir ces pâturages sexy. suffit de le faire d'une manière accessible. Exemple de guide de style Mais appelle à des combinaisons de couleurs qui vibrent les vibrations de couleur ou chroma. Steri Op Sys se produit à des couleurs qui tombent en face de l'autre sur la roue de couleur et efficacement, les deux couleurs air juste en concurrence, ce qui provoque une vibration visuelle. Certains exemples incluent le bleu et le rouge, le rouge et le vert, le bleu et l'orange. Vous devriez éviter les vibrations de couleur car cela peut causer une surcharge cognitive et être vertigineux, ce qui est une expérience vraiment négative pour tous les utilisateurs. 7. Guide de style : Photographie et imagerie: imagerie comme l'illustration photographique et l'iconographie peut vraiment vous aider à améliorer votre histoire . Ils peuvent apporter de l'émotion, la personnalité et aider à articuler votre marque au-delà du contenu. Il y a un vieux principe de journalisme qui s'applique à l'accessibilité ici, qui est l'image fournissant un contexte supplémentaire et une histoire supplémentaire orteil ce qui est déjà là ? Si ce n'est pas le cas, vous ne devriez pas l'inclure. Mais si c'est le cas, assurons-nous que nous le faisons d'une manière accessible. Exemple. Un guide de style manque de critères autour de l'arrêt du texte pour les images. Tout le Texas. La copie qui est rendue lorsqu'une image est toujours en cours de chargement n'a pas pu être chargée. Et ce qu'un lecteur d'écran lit à la place de l'image. Tout le texte peut aider à fournir le contexte que l'image inclut. Donc, lorsque nous évaluons si une image aide ou non à articuler notre histoire, nous devons nous assurer que notre texte complet décrit comment elle aide à articuler l'histoire même si elle est l'un des aspects les plus connus d'une accessibilité Web en raison de son intersectionnalité avec un PDG ou l'optimisation des moteurs de recherche, mise en œuvre appropriée de tout le texte peut en fait être très difficile. Il ya beaucoup de littérature autour des nuances appropriées, et je suggère vraiment que vous lisez sur ceux parce qu'il ya beaucoup et ils sont tous très importants pour aujourd'hui va couvrir quelques bases. abord, vous devez déterminer si votre image fournit du contenu ou une fonction. Si elle fournit du contenu, alors vous devriez évaluer si l'image est en plus d'une description qui peut aider à la décrire déjà. Ainsi, par exemple, sur un site Web de musée qui a une peinture englobée d'une longue description qui décrit le tableau L'artiste cette année-là il a été peint alors vous n'avez pas besoin d'inclure tout le texte dans ce cas car il serait redondant. Mais dans la plupart des cas, ce n'est pas le cas. Les images nécessitent ce contenu. Donc, quand c'est le cas, assurez-vous d'être aussi concis que possible car les utilisateurs tentent d' écrémer rapidement le contenu à l'aide de leur lecteur d'écran et de longues descriptions fleuries vont interrompre cette expérience. Deuxièmement, si votre image sert de fonction, vous devez toujours inclure tout le texte. Cela fournirait une expérience utilisateur déroutante si vous l'omettiez. Donc toujours, toujours, toujours, si elle relie quelque part, ce qui est la fonction la plus principale qu'une image sert, assurez-vous d'inclure tout le texte. Si vous trouvez qu'une image est très complexe, disons un graphique où il y a beaucoup d'aspects à décrire et tout le texte peut ne pas être approprié parce que nous voulons qu'il soit concis. Ainsi, dans ces cas, il peut être plus approprié d'utiliser les attributs HTML d'un bureau long ou description longue. Nous en parlerons un peu plus tard, sorte que cela couvre certains des aspects les plus élémentaires de tout le texte. Avant de passer à autre chose, je pense qu'il est important de mentionner que tout texte est souvent quelque chose qui tombe sur les mains de la dernière personne qui le touche, qui est typiquement un développeur ou un spécialiste NSE Oh. Et c'est problématique parce que c'est généralement une précipitation à la fin de votre Q. Et ils ont remarqué que le tout le texte est manquant à la place. C' est une excellente occasion d'encourager vos équipes à commencer à intégrer tout le texte dans votre architecture d'information globale, car avec l'accessibilité, vous ne pouvez pas être la seule personne de votre équipe à prêter attention à cette . Donc, tout le texte est un excellent moyen d'équiper les autres membres de votre équipe pour le considérer. Plus tôt, comme lors de la phase de hiérarchie du contenu, parce que lorsqu'il est fait correctement, micro copie comme tout le texte, peut vraiment améliorer l'histoire. Vous dites, hum, et fournissez beaucoup de contexte supplémentaire. Exemple pour raster. Les images sont utilisées lorsque des graphiques vectoriels de S. P. P. G ou évolutifs peuvent être utilisés à la place. S P G sont vraiment géniaux parce qu'ils fournissent beaucoup plus que ce que peuvent les images raster. Ainsi, par exemple, SV G vous permettent de pincer et de zoomer pour les utilisateurs ayant une déficience visuelle afin d'obtenir plus de détails sans nécessiter le ballonnement de grandes images raster. SPG vous permet également de personnaliser certaines propriétés CSS pour rendre votre image plus accessible. Et il y a énormément d'animation et d'autres propriétés additifs que vous pouvez faire qui sont vraiment cool. Donc, nous allons couvrir quelques bases pour aujourd'hui. abord, vous voudrez vous assurer que votre SPG inclut les attributs de titre et de description de la même manière , toe toutes les balises. Cela aidera l'utilisateur à comprendre le contenu de votre SPG, en particulier pour les lecteurs d'écran. Deuxièmement, vous voudrez vous assurer que pour les Suggs plus complexes, tels que ceux qui incluent un paysage ou un graphique que vous regroupez comme des attributs et leur fournir leurs propres titres. Ainsi, par exemple, ah image de paysage avec maison et une voiture et un corgi devraient tous avoir leurs titres individuels . Cela aidera l'utilisateur à obtenir un aperçu de ces mises en page complexes. Et comme pour les photos, vous voudrez vous assurer d'inclure tout le texte maintenant. Une exception pour les S P G est que s'ils sont décoratifs, c' est-à-dire qu' ils ne le font pas vraiment. Ils ne sont pas nécessaires à votre flux de contenu. Vous n'avez pas besoin d'inclure un texte tout entier, mais vous devez vous assurer d'inclure ce qu'on appelle un texte vide pour vous assurer que le SPG s'affiche correctement. Ce ne sont que quelques notions de base. Il y a beaucoup de littérature sur les S P G, et je vous recommande fortement de prendre un peu de temps pour lire une grande partie de la littérature là-bas. Et l'un de mes experts SVG préférés, Sarah Sweden, a écrit des dizaines d'articles et mené de nombreuses discussions autour de Suggs et de l'accessibilité. De plus, elle aime les oiseaux pour que vous puissiez y mettre un oiseau SVG. Exemple. Trois. Un guide de marque s'appuie fortement sur la visualisation des données pour raconter son histoire. Maintenant, cela en lui-même, n' est pas une mauvaise chose. Je ne sais pas si vous l'avez remarqué, mais nous sommes en quelque sorte à l'ère des données en ce moment. de nombreuses entreprises, en particulier les entreprises technologiques, s'appuient sur la visualisation des données afin de fournir un contexte visuel à leurs informations très complexes . Sans elle, ils n'auraient pas beaucoup à visualiser. Il est donc merveilleux que la visualisation des données ait son âge en ce moment. Mais nous voulons nous assurer que nous incluons les visualisations de données d'une manière très accessible . La visualisation des données est excellente car elle peut prendre des données très complexes et les transformer en un format visuel digeste. Mais rappelez-vous que pour ceux qui n'ont pas accès à la vue visuelle et assurez-vous que nous leur fournissons des descriptions utiles en cours de route. Il y a donc deux façons principales de le faire. La première consiste à décrire une description claire et concise de votre SPG ou de votre image. Si vos données sont très complexes, comme, disons, il y a beaucoup de graphiques à barres ou de systèmes complexes qui sont difficiles à décrire Concisely, je recommande d'utiliser un attribut HTML appelé Long Desk, et ce que cela fait effectivement, c'est qu'il vous relie à une page distincte où, alors, vous pouvez articuler complètement l'image et fournir tous les indices contextuels afin que quelqu'un qui a une déficience visuelle puisse encore obtenir tout le contexte de quelqu'un qui peut voir les données exemple de visualisation pour un style Guy a écrit mensonges lourdement ou exclusivement sur le mouvement afin d'aider à articuler ou à améliorer ses histoires, j'ai vu quelques guides de style qui utilisent le mouvement dans chaque cas possible. Je suis sûr que vous avez vu des sites qui dépendent fortement de Parallax, et c'est problématique car cela peut causer beaucoup de mal des transports pour les gens qui ont pour Tego. Ou cela peut causer des problèmes cognitifs pour les personnes qui ont des troubles comme l'autisme. Mais le mouvement, lorsqu'il est utilisé avec modération, peut vraiment fournir beaucoup à votre histoire et un peu de fantaisie. Il y a donc deux règles de base que vous voudrez considérer autour de l'émotion. Tout d'abord, est-ce que cela améliore l'histoire que vous essayez de raconter ? Et deuxièmement, l'histoire peut-elle tenir toute seule sans elle ? Si vous avez répondu oui à ces deux questions, alors continuez par tous les moyens. Mais la raison pour laquelle il est important de s'assurer que l'histoire reste cohérente sans elle est que les utilisateurs ont accès à désactiver le mouvement dans ce qu'on appelle le mouvement réduit. Effectivement. Ce que cela fait, c'est qu'il supprime les interactions comme la parallaxe ou le rebondissement de toutes ces interactions que nous connaissons tellement aujourd'hui afin de réduire une partie de ce mal des transports qui peut survenir. Vous voudrez donc vous assurer que votre expérience reste vraie même sans le mouvement . Nous venons de couvrir beaucoup d'informations dont ils sont, mais nous nous sommes concentrés uniquement sur trois aspects principaux des guides de style, savoir les fonds, les couleurs, la photographie et l'imagerie. Il y a une mine d'informations que nous n'avons pas couvertes aujourd'hui, et je vous recommande fortement de plonger en profondeur. J' ai inclus quelques-uns de mes liens préférés dans La ressource est la section, mais s'il vous plaît lire évangéliser, poser des questions, poser des questions, communautés d' accessibilité très accueillantes et enthousiastes par tous ceux qui sont excités l'accessibilité. Donc, à partir de 8. Defending de règle défendant: Donc, vous avez possédé votre conception par rapport à ces normes d'accessibilité, et maintenant vous êtes prêt pour la prochaine étape, qui consiste à confier votre conception aux pouvoirs qui s'appliquent au côté de l'agence. Cela peut signifier l'envoyer à l'équipe de marque de votre client. Si votre côté de la marque de logiciel l'envoie à vos parties prenantes du niveau de la mer Peu importe, vous êtes probablement un peu nerveux parce que vous avez techniquement enfreint certaines règles. Il y a deux scénarios qui peuvent arriver, et je vais vous guider dans les deux scénarios. Vous l'envoyez et il est approuvé. Joli. Tu es juste coincé au scénario de l'homme. Deux. Tu te fais prendre. Heureusement, j'ai passé beaucoup de ma vie à regarder les anciennes procédures de Lee, et ça va être utile ici parce que tu vas traiter ça comme une transaction légale . abord, évaluez la règle du guide de style. Vérifiez que vous avez enfreint la règle. Si vous l'avez fait, alors site les lignes directrices d'accessibilité W trois c W. C. C. A G qui ont été brisées par le style Guide Express Comment cela impact négatif sur votre utilisateur. Je trouve qu'il est vraiment utile ici si vous pouvez financer l'accès aux données spécifiques pour l' entreprise parce que cela vous permet de transformer l'utilisateur en un nombre réel tangible. Et si vous pouvez associer ce numéro à l'engagement ou mieux encore, chiffre d'affaires, alors vous pouvez associer un montant spécifique en dollars. Parfois, tu dois juste leur montrer l'argent perdu. Et si vous constatez toujours que vous obtenez beaucoup de refoulement, je trouve qu'il est utile d'essayer de trouver un compromis et de passer au téléphone avec l'équipe de la marque. Par exemple. Il est important de noter ici qu'avec l'accessibilité, il ne s'agit pas de la quête du niveau A une perfection, bien que ce soit génial. Donc, si l'équipe de la marque repousse fortement sur une nuance de gris spécifique que vous savez ne pas être accessible, essayez de la rendre aussi accessible que possible tout en la faisant passer. Parce que l'accès consiste à s'assurer que l'utilisateur obtient l'information, et si elle ne passe jamais en direct, il n'obtiendra pas du tout l'information. Ce processus peut sembler beaucoup, surtout si vous êtes la seule personne de votre équipe qui semble se soucier de l'accessibilité. Mais je vous promets qu'à chaque conversation que vous avez dans une règle que vous décrivez à votre équipe, il sera un peu plus facile à chaque fois, alors continuez à 9. Concevoir avec une accessibilité en esprit: donc, une grande partie de ce dont nous avons discuté aujourd'hui a été dans le contexte d'un guide de style existant. Mais si l'occasion se présente pour vous de créer un guide de style à partir de zéro ou site Web à partir de zéro, c'est génial. Je vous recommande fortement de prendre l'approche suivante d'abord commencer avec un cadre de fil squelettique clair . Votre cadre métallique doit avoir un contenu clair Hiérarchie. Exprimez votre contenu de manière cohérente et soyez hautement accessible. Ce serait un peu inquiétant si chaque site Web ressemblait à une thèse universitaire. Temps de papier New Roman taille 12 Double espacement. Donc un top ce que nous devrions nous sentir libres d'utiliser la couleur et l'imagerie et le type afin d'améliorer notre expérience et de donner des marques de visite de la personnalité. Nous avons juste besoin de nous assurer que lorsque nous ajoutons chacune de ces propriétés additifs que le cadre métallique et son succès de l'expérience utilisateur sont maintenus à chaque étape du chemin. De cette façon, tout le monde reçoit une expérience utilisateur claire, et pour ceux qui ont accès à ces améliorations, ils bénéficient toujours d'une excellente expérience utilisateur. Si et quand ces extras aiment être extra sont dépouillés par les technologies d'assistance. Vos utilisateurs ont toujours l'air laissé avec une expérience utilisateur cohérente, et votre conception ne sera pas brisée. Et c'est As. Je vous encourage vivement à commencer avec votre prochain guide de style dans la nature. Cela peut être pour vos propres marques, guide de style interne ou votre prochain projet client. Mais peu importe, j'ai inclus une liste de contrôle pour vous qui couvre tout le matériel d'aujourd'hui dans la section des ressources . Alors s'il vous plaît partager votre travail et je suis heureux de voir votre processus et ce que vous avez appris que je suis impatient de voir. 10. Conclusion : l'avenir de l'accessibilité: Je tiens à mentionner qu'aujourd'hui, la plupart des considérations d'accessibilité que nous avons faites concernaient principalement les déficiences physiques et mentales. Mais il y a toute une série d'autres considérations à prendre au nom de l' inclusion sociale . L' inclusivité sociale peut inclure tout, allant de l'inclusion d'options de genre non binaires dans vos champs de formulaire à la représentation de races sous-représentées dans vos choix de photographie d'origine à création d'un site plus performant fonctionnant sur deux vitesses Internet G. Il peut être facile d'être submergé par le nombre de considérations à prendre, mais j'aime me rappeler qu'il ne s'agit pas de perfection. Au lieu de cela, il s'agit de faire de petits pas incrémentiels chaque jour, sorte qu'il peut être aussi simple que d'améliorer un formulaire sur votre site Web ou d'entamer une conversation sur façon d'être plus accessible avec votre équipe. Chaque chose que nous prenons nous fait avancer dans ce combat pour un web plus accessible, et avec la technologie en constante évolution, nous devons vraiment garder à l'esprit cette quête de perfection. Et en fait, le W three, c W. C. A. G, sortira sa version 2.1 plus tard cette année. Cela fait environ 10 ans que la dernière a été publiée, donc il y aura beaucoup de nouvelles informations à apprendre et de nouvelles façons d'innover dans notre espace. D' autres façons d'innover pour le plaisir qui sont accessibles sont grille CSS du travail qu'ils font pour créer des designs éditoriaux et dynamiques nous permettra d'avoir notre gâteau et de le manger, aussi. Les conceptions seront intéressantes, mais plus important encore, ont maintenu leur accessibilité grâce à leur hiérarchie de contenu. Et c'est vraiment génial. Être un bon allié signifie être résilient alors que nous poursuivons cette quête pour rendre un Web plus accessible et éventuellement universel. À mesure que le rôle de la technologie se développe dans la vie de nos utilisateurs, il est important de veiller à ce que nous allions tous nos utilisateurs d'une manière à la fois équitable et responsable. Merci beaucoup d'avoir regardé ma classe de partage de compétences et félicitations pour devenir un allié