5 Barrierefreiheit Schnelle Gewinne

Es kann eine Herausforderung sein, vollständig zugängliche (AA- oder AAA) -Produkte aufzubauen. Selbst kleine Verbesserungen verbessern die Benutzererfahrung für viele jedoch erheblich. Hier sind fünf schnelle Zugänglichkeitserge, die Sie heute implementieren können:

Schneller Sieg 1: Geben Sie die aktuelle Seite eindeutig an Während visuelle Hinweise (Styling) häufig die aktuelle Seite zeigen, sind sie nicht für alle zugänglich. Stellen Sie sicher, dass Ihr Markup die aktuelle Seite so deutlich wie das Design widerspiegelt. Verwenden Sie 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;/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><div class="contentsignin">Nach dem Login kopieren</div></div> <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:>

Das obige ist der detaillierte Inhalt von5 Barrierefreiheit Schnelle Gewinne. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!