建造完全可訪問的(AA或AAA)產品可能具有挑戰性。但是,即使很小的改進也可以顯著增強許多人的用戶體驗。您今天可以實現以下五個快速可訪問性勝利: 快速獲勝1:清楚地指示當前頁面aria-current="page" <https:> on the active navigation element: <https:> <pre class="brush:php;toolbar:false"><a aria-current="page" href="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712www.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712linkhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd8371229a9f8c8460e5e2be4edde557fd83712">Home <https:> <https:></https:></https:></a> <p>Use CSS attribute selectors to visually style the <code>aria-current="page" <https:> element for consistency: <https:></https:></https:></code></p> <pre class="brush:php;toolbar:false">[aria-current="page"] { 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 } <https:> <p><strong>Quick Win 2: Specify Document Language <https:> <https:></https:></https:></strong></p> <p>Not everyone can easily determine a website's language. Use the<code></code></p> <https:> tag's <code>lang <https:> 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. <https:></https:></https:></code> <pre class="brush:php;toolbar:false"><https:> <https:> <p>For multilingual sites, use <code>lang <https:> on individual elements with different languages and <code>hreflang <https:> on links to indicate both the link's language and its destination's language: <https:></https:></https:></code></https:></code></p> <pre class="brush:php;toolbar:false"><bdi>Suomeksi <https:> <https:> <https:></https:></https:></https:></bdi> <p><strong>Quick Win 3: Respect <code>prefers-reduced-motion <https:> <https:> <https:></https:></https:></https:></code></strong></p> <p>While motion enhances user experience, it can be disorienting for some. Use CSS media queries to respect the system's <code>prefers-reduced-motion <https:> setting: <https:></https:></https:></code></p> <pre class="brush:php;toolbar:false">@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } <https:> <p>For more nuanced control, consider animating only essential properties or removing motion entirely for certain elements. <https:></https:></p> <p><strong>Quick Win 4: Indicate Data Sorting State <https:> <https:></https:></https:></strong></p> <p>Visually indicating sort direction (eg, with arrows) should be mirrored in the markup. Use the <code>aria-sort <https:> 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): <https:></https:></https:></code></p> <pre class="brush:php;toolbar:false"><thead><tr>
<th>First Name <https:></https:>
</th> <th aria-sort="ascending">Last Name <https:> <https:> <https:> <https:> <p><strong>Quick Win 5: Use <code>aria-setsize <https:> and <code>aria-posinset <https:> for Lazy-Loaded Lists <https:> <https:></https:></https:></https:></code></https:></code></strong></p> <p>For lazy-loaded lists, use <code>aria-setsize <https:> to indicate the total list size and <code>aria-posinset <https:> to indicate each item's position. If the total size is unknown, set <code>aria-setsize <https:> to -1. <https:></https:></https:></code></https:></code></https:></code></p> <pre class="brush:php;toolbar:false"><h2>Top Artists of 2021 <https:></https:>
</h2> </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:>
以上是5可訪問性快速獲勝的詳細內容。更多資訊請關注PHP中文網其他相關文章!