デモを始める

もともと投稿a11ywithlindsey.com
あなたがすでにこれを知っていなかったならば、私は通常これらの上ですべてを掲示します.アクセシビリティがエッジケースではない理由について、私はクロスを投稿すると、アクセシビリティがより簡単に実装されているというコメントを得ました.私は、私がHTMLとCSSベストプラクティスで最新の状態であったならば、それに挑戦的な解決をすることを学ぶことを見つけませんでした.とき、それは主要な痛み点がアリアであるようでした.
私はアリアについての混乱のトンを見てきたとき、それを使用する必要はありません.これらのアリア属性は、何を意味しますか?すべての属性のリストはありますか?私は、これをシリーズにすることについて考えています、多分、私が彼らが好きであるかどうかにかかわらず、我々が彼らを好きであるかどうかにかかわらず、1週にいくつかのARIA属性の上に行くかもしれません.

どのような地獄はアリアですか？

アリアは、余分なコンテキストと意味を与えるためにあなたの要素に追加することができます属性の束です.これは多くのことに役立ちます.ここでは私はアリアに役立つものです

あなたが動的なコンテンツをロードしているときに伝える

何か重要なポップアップ時にユーザーに警告

状態変更時にスクリーンリーダを伝える

必要に応じていくつかの追加コンテキストを追加する

アリアに関するドキュメントはかなり威圧的です.アクセシビリティの人として、私はそれは少し困難を見つける.私はアリアについて学んだ方法は、Twitterのようなよく使用されるアプリケーションを開くことです.私はその後、要素を検査し、HTMLaria そして、すべての属性を見ました.私はそれから私のスクリーンリーダーをつけて、実際に私がその特定の要素に達したとき、発表されたものに耳を傾けました.例えば、MacでVoiceOverを使ってTwitterのホームページを開くと、右上隅にあるプロフィール画像のマークアップです

<a href="/settings" id="user-dropdown-toggle" role="button" aria-haspopup="true">
<!-- Children Elements --> 
</a>

注意:読みやすさのために、マークアップからいくつかの属性とクラスを削除しました
私は、一見して2つのアリア属性を見つけます:role="button" and aria-haspopup="true" . それで、私が私のスクリーンリーダーを使うとき、これは何を意味しますか.
最初に、VoiceOverは言います.
番目のことはVoiceOverが言います.
あなたが何を読んでいるかを見るならば、あなたは「ポップアップ・ボタン」という語に気がつきますマークアップがリンクであるので、それらの属性なしで、それはちょうどリンクとして読むでしょう.私は正直にこのマークアップを変更することができます<button> なぜなら、この読書の時には、私はリンクを使用することはできませんhref 属性値(/設定)とボタンのように動作します.しかし、これを知ってのコンテキストは、ポップアップは、画面リーダーに超便利かもしれません.
私は言います、私は通常、私が最初にものを造って始めるとき、アリアを使うのを躊躇しています.あなたは私がこのマークアップを私が変えるものについて批評しているのに気がついたかもしれません、そして、それが文脈を加える必要がない限り、私はARIAを使用しないようにしようとするのです.これは、私が何かをゼロからコーディングしている私の技術的なポストでは、最初にARIA属性を見ないでしょう.私には、私につながるそれに対するいくつかの理由があります.

アリアって何？

初めて私がアメーゼでアリアについて発表したとき、盲目の開発者が出席し、彼は私を焼きました.それはおもしろかった.この理由は、AIAの多くはアクセシビリティの焦点ではないはずです.特に最近ではHTML 5を持っています.HTML 5は、スクリーンの読者が直面して使用する意味の問題の多くを解決します.
アリアがそうでないものは、ここにあります:

セマンティックHTMLの置換

うーん、それは実際に私が考えることができるすべてです.私が意味するもののより多くの感覚を作るために、これを例に壊しましょう.場合は、デフォルトのスタイリングのような<button> , しかし、あなたはすべてのビルトインボタン機能が好きで、このHTMLは魔法のようにすべてのボタンデフォルトを働かせません:

<div role="button">
  Open Menu
</div>

あなたがそのボタンのClickイベントを持っていると言いましょう.私の記事を読んだら3 Simple Tips to Improve Keyboard Accessibility , あなたはボタンがいくつかのデフォルト機能を内蔵している知っている.他に何もしないで、これはスクリーンリーダーとボタンとしてこれを発表するすべてです.ただし、キーボードなしでそれに集中することはできません.それで、次のステップは、我々があることを確認することですtabindex その上に試してみましょう.

<div tabindex="0" role="button">
  Open Menu
</div>

我々は今それをクリックイベントを使用することはできますか?それを試してみましょう.HTMLを更新しましょう.

<div tabindex="0" id="button" role="button">
  Open Menu
</div>

さあ、基本的なJavaScriptを書いてみてください.

const button = document.getElementById('button');
button.addEventListener('click', () => alert('clicked!'));

GIFから見ることができるように、アリアの役割やtabindexはそれを修正しませんでした.我々は、ボタンの上でkeypressイベントを聞きなければなりません.私はこれをデバッグするつもりです、それで、我々はこれがどれくらい余分な仕事であるかについて歩くことができます.

button.addEventListener('keypress', (e) => {
  console.log(e)
})

コンソールログの結果

ここで何をしているか考えましょう.私はボタンにkeypressイベントを追加し、イベントオブジェクトにあるプロパティをチェックします.これは重要です.なぜなら、ボタンを複製したいのであれば、キープレスのイベントがあるときにキーを押す必要があります.ビルトインのHTMLボタンの動作の両方のキーを押すとスペースバーで動作します.コンソールログを見るとき、我々は使いたいですe.code . だからここで私は条件付きで更新します.

button.addEventListener('keypress', (e) => {
  if (e.code === 'Enter' || e.code === 'Space') {
    alert('pressed!')
  }
})

だから、これは最も挑戦的なことではないが、それは簡単に変更する方法です<div> に<button> . あなたはデフォルトのスタイリングを取り除くためにCSSを使用することができますし、全体的にあなたの人生をはるかに簡単にアクセシビリティ賢明になるよ!

結論

アリアについて考えるのは文脈です.場合によっては、追加の背景を必要としない- HTMLは確かに十分です.場合によっては、特にそれがカスタムウィジェットである場合は、特に良いかもしれない.私は将来のアリアについてもっと具体的な属性について行います.それに乾杯!
あなたがこのブログ柱についての質問をするならば、私に連絡してください!