5 accessibilité victoires rapides

La construction de produits entièrement accessibles (AA ou AAA) peut être difficile. Cependant, même de petites améliorations améliorent considérablement l'expérience utilisateur pour beaucoup. Voici cinq victoires accessibles rapides que vous pouvez mettre en œuvre aujourd'hui:

Victoire rapide 1: indiquez clairement la page actuelle Bien que les indices visuels (style) affichent généralement la page actuelle, ils ne sont pas accessibles à tous. Assurez-vous que votre balisage reflète la page actuelle aussi clairement que la conception. Utilisez aria-current="page" <https:> on the active navigation element: <https:> <pre class="brush:php;toolbar:false">&lt;a aria-current=&quot;page&quot; href=&quot;https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712www.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712linkhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd8371229a9f8c8460e5e2be4edde557fd83712&quot;&gt;Home &lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/a&gt; &lt;p&gt;Use CSS attribute selectors to visually style the &lt;code&gt;aria-current=&quot;page&quot; &lt;https:&gt; element for consistency: &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;[aria-current=&quot;page&quot;] { https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712www.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712linkhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd8371229a9f8c8460e5e2be4edde557fd83712* Active element styles *https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712www.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712linkhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd8371229a9f8c8460e5e2be4edde557fd83712 } &lt;https:&gt; &lt;p&gt;&lt;strong&gt;Quick Win 2: Specify Document Language &lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;Not everyone can easily determine a website's language. Use the&lt;code&gt;&lt;/code&gt;&lt;/p&gt; &lt;https:&gt; tag's &lt;code&gt;lang &lt;https:&gt; attribute to specify the document's language and locale. This helps assistive technologies understand and convey the content correctly. Even for single-language sites, this improves accessibility. &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;https:&gt; &lt;https:&gt; &lt;p&gt;For multilingual sites, use &lt;code&gt;lang &lt;https:&gt; on individual elements with different languages and &lt;code&gt;hreflang &lt;https:&gt; on links to indicate both the link's language and its destination's language: &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;bdi&gt;Suomeksi &lt;https:&gt; &lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/bdi&gt; &lt;p&gt;&lt;strong&gt;Quick Win 3: Respect &lt;code&gt;prefers-reduced-motion &lt;https:&gt; &lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;While motion enhances user experience, it can be disorienting for some. Use CSS media queries to respect the system's &lt;code&gt;prefers-reduced-motion &lt;https:&gt; setting: &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } &lt;https:&gt; &lt;p&gt;For more nuanced control, consider animating only essential properties or removing motion entirely for certain elements. &lt;https:&gt;&lt;/https:&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Quick Win 4: Indicate Data Sorting State &lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;Visually indicating sort direction (eg, with arrows) should be mirrored in the markup. Use the &lt;code&gt;aria-sort &lt;https:&gt; attribute on table headers to communicate the sort order (ascendinghttps:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712www.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712linkhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd8371229a9f8c8460e5e2be4edde557fd83712descending): &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;thead&gt;&lt;tr&gt; &lt;th&gt;First Name &lt;https:&gt;&lt;/https:&gt; &lt;/th&gt; &lt;th aria-sort=&quot;ascending&quot;&gt;Last Name &lt;https:&gt; &lt;https:&gt; &lt;https:&gt; &lt;https:&gt; &lt;p&gt;&lt;strong&gt;Quick Win 5: Use &lt;code&gt;aria-setsize &lt;https:&gt; and &lt;code&gt;aria-posinset &lt;https:&gt; for Lazy-Loaded Lists &lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;For lazy-loaded lists, use &lt;code&gt;aria-setsize &lt;https:&gt; to indicate the total list size and &lt;code&gt;aria-posinset &lt;https:&gt; to indicate each item's position. If the total size is unknown, set &lt;code&gt;aria-setsize &lt;https:&gt; to -1. &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;h2&gt;Top Artists of 2021 &lt;https:&gt;&lt;/https:&gt; &lt;/h2&gt; </pre> <ul> <li aria-setsize="3" aria-posinset="1">Bloodbound <https:></https:> </li> <li aria-setsize="3" aria-posinset="2">Manimal <https:></https:> </li> <li aria-setsize="3" aria-posinset="3">Powerwolf <https:> <https:> <https:> <p><strong>Bonus: Axe DevTools <https:> <https:></https:></https:></strong></p> <p>The Axe DevTools browser extension is a valuable tool for auditing accessibility issues, providing clear explanations and solutions. <https:></https:></p> <p><strong>Conclusion <https:> <https:></https:></https:></strong></p> <p>Accessibility is an ongoing process. These quick wins are a starting point, but even small improvements significantly enhance user experience for many. They are easy to implement and provide a solid foundation for building more accessible products. <https:></https:></p> <p><strong>Resources: <https:> (Links remain the same as original) <https:></https:></https:></strong></p> <ul> <li>Learn more about the aria-current attribute <https:></https:> </li> <li>Learn more about the lang attribute <https:></https:> </li> <li>Learn more about the hreflang attribute <https:></https:> </li> <li>Learn more about prefers-reduced-motion <https:></https:> </li> <li>Learn more about the aria-sort attribute <https:></https:> </li> <li>Learn more about the aria-setsize attribute <https:></https:> </li> <li>Learn more about the aria-posinset attribute <https:></https:> </li> <li>Axe-DevTools browser extension <https:> <https:></https:></https:> </li> </ul></https:></https:></https:> </li> </ul></https:></https:></https:></https:> </th> </tr></thead></pre></https:></pre></pre></https:></https:></pre></https:></https:></pre></pre></https:></https:>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!