5アクセシビリティクイックウィン

完全にアクセス可能な（AAまたはAAA）製品を構築するのは困難です。ただし、わずかな改善でさえ、多くの人にとってユーザーエクスペリエンスが大幅に向上します。今日実装できる5つのクイックアクセシビリティの勝利は次のとおりです。

クイックウィン1：現在のページを明確に示します視覚的な手がかり（スタイリング）は一般に現在のページを表示しますが、誰もがアクセスできません。マークアップがデザインと同じくらい明確に現在のページを反映していることを確認してください。 aria-current="page" <https:> on the active navigation element: <https:> <div class="code" style="position:relative; padding:0px; margin:0px;"><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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</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:>を使用しますaria-current="page" <https:> on the active navigation element: <https:> <div class="code" style="position:relative; padding:0px; margin:0px;"><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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</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:>

以上が5アクセシビリティクイックウィンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。