搜尋

首頁 >web前端 >css教學 >5可訪問性快速獲勝

5可訪問性快速獲勝

Christopher Nolan
Christopher Nolan原創
2025-03-14 11:19:07620瀏覽

5可訪問性快速獲勝

建造完全可訪問的（AA或AAA）產品可能具有挑戰性。但是，即使很小的改進也可以顯著增強許多人的用戶體驗。您今天可以實現以下五個快速可訪問性勝利：

快速獲勝1：清楚地指示當前頁面雖然視覺提示（樣式）通常顯示當前頁面，但每個人都無法訪問它們。確保您的標記與設計一樣清晰地反映當前頁面。使用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:>

以上是5可訪問性快速獲勝的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css if sort for while Attribute this position table Foundation
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：SelectMenu HTML標籤下一篇：SelectMenu HTML標籤

相關文章

看更多