5 Accessibility Quick Wins

Building fully accessible (AA or AAA) products can be challenging. However, even small improvements significantly enhance user experience for many. Here are five quick accessibility wins you can implement today:

Quick Win 1: Clearly Indicate the Current Page

While visual cues (styling) commonly show the current page, they're not accessible to everyone. Ensure your markup reflects the current page as clearly as the design. Use aria-current="page"<https:> on the active navigation element:<https:> <div class="code" style="position:relative; padding:0px; margin:0px;"><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;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;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;p&gt;Not everyone can easily determine a website's language. Use the &lt;code&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;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;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;a 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; hreflang=&quot;fi&quot; lang=&quot;fi&quot; title=&quot;Suomeksi&quot;&gt; &lt;bdi&gt;Suomeksi&lt;https:&gt;&lt;https:&gt;&lt;https:&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;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;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;p&gt;&lt;strong&gt;Quick Win 4: Indicate Data Sorting State&lt;https:&gt;&lt;https:&gt; &lt;p&gt;Visually indicating sort direction (e.g., 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;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;First Name&lt;https:&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;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;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;h2&gt;Top Artists of 2021&lt;https:&gt; &lt;ul&gt; &lt;li aria-setsize=&quot;3&quot; aria-posinset=&quot;1&quot;&gt;Bloodbound&lt;https:&gt; &lt;li aria-setsize=&quot;3&quot; aria-posinset=&quot;2&quot;&gt;Manimal&lt;https:&gt; &lt;li aria-setsize=&quot;3&quot; aria-posinset=&quot;3&quot;&gt;Powerwolf&lt;https:&gt; &lt;https:&gt;&lt;https:&gt; &lt;p&gt;&lt;strong&gt;Bonus: Axe DevTools&lt;https:&gt;&lt;https:&gt; &lt;p&gt;The Axe DevTools browser extension is a valuable tool for auditing accessibility issues, providing clear explanations and solutions.&lt;https:&gt; &lt;p&gt;&lt;strong&gt;Conclusion&lt;https:&gt;&lt;https:&gt; &lt;p&gt;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.&lt;https:&gt; &lt;p&gt;&lt;strong&gt;Resources:&lt;https:&gt; (Links remain the same as original)&lt;https:&gt; &lt;ul&gt; &lt;li&gt;Learn more about the aria-current attribute&lt;https:&gt; &lt;li&gt;Learn more about the lang attribute&lt;https:&gt; &lt;li&gt;Learn more about the hreflang attribute&lt;https:&gt; &lt;li&gt;Learn more about prefers-reduced-motion&lt;https:&gt; &lt;li&gt;Learn more about the aria-sort attribute&lt;https:&gt; &lt;li&gt;Learn more about the aria-setsize attribute&lt;https:&gt; &lt;li&gt;Learn more about the aria-posinset attribute&lt;https:&gt; &lt;li&gt;Axe-DevTools browser extension&lt;https:&gt; &lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt; &lt;/ul&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt;&lt;/https:&gt; &lt;/li&gt; &lt;/ul&gt;&lt;/https:&gt; &lt;/h2&gt;</pre><div class="contentsignin">Copy after login</div></div></https:></https:>

The above is the detailed content of 5 Accessibility Quick Wins. For more information, please follow other related articles on the PHP Chinese website!