Go Wiki: WebAccessibilityResourcesAndTips

アクセシビリティ、または「a11y」は、Web開発においてますます重要なトピックになっています。 godocのような多くのGoツールとリソースがWebテクノロジーを使用しているため、Goにとって重要です。これらのツールがアクセス可能であることを保証することで、より多くの人々がそれらを使用できるようになり、より多くの人々がGoを使用できるようになります。

アクセシビリティは、単なる難解なものから、極めて理解しにくいものまで、幅広いトピックです。

ただし、不注意でアクセスできないページを作成する可能性を大幅に減らすための、いくつかの簡単な経験則があります。

セマンティックマークアップを優先してください。ネイティブのhtml要素には、何もオン/オフにする必要なく、多くのアクセシビリティが組み込まれています。リストを表示したくない場合でも、項目のリストがある場合は、ulまたはolを使用します。追加のCSSはそれだけの価値があります。
ヘッダー（h1-h6）を使用する場合は、レベルをスキップせず、論理的にネストして、たとえばh4が前のh3の論理的なサブセクションになるようにしてください。スクリーンリーダーはこれらを、目次と同様のナビゲーションランドマークとして使用します。
ドキュメントのソース順に反するレイアウトは避けてください。 flexboxとgridを使用すると要素を簡単に再配置できますが、フォーカス順は変更されません。キーボードでサイトをナビゲートする人は、ランダムに移動しているように見え、何が起こっているのかを把握するのが非常に困難になります。
十分な色のコントラストを確保してください。誰もが完璧な視力や高品質のディスプレイを持っているわけではありません。どちらも、低コントラストのコンテンツの開始点と終了点を判別することを困難にする可能性があります。https://leaverou.github.io/contrast-ratio/
ページが色なしで使用できるようにしてください。色覚異常には多くの種類があります。赤緑色覚異常のように一般的なものもあれば、非常にまれなものもあります。すべての人が同じ情報を取得できるようにする最良の方法は、形状と色の両方で情報をエンコードすることです。たとえば、テストランナーのダッシュボードを作成する場合、合格した場合は緑色の円、失敗した場合は赤い円だけにするのではなく、合格した場合は緑色のチェックマーク、失敗した場合は赤いXを表示します。
要素が「クリック可能」であることをユーザーに知らせるために、明確なホバーおよびフォーカススタイルを設定してください。上記と同様に、これは色なしでも明確である必要があります。
ページを200％に拡大しても何も壊れないことを確認してください。ブラウザはこれの処理に非常に優れていますが、常に完璧というわけではありません。視力の弱いユーザーは、この努力を高く評価するでしょう。
ページが完全にキーボードで使用できるようにしてください。特定の病状により、マウスやトラックパッドの使用が困難になる可能性があり、多くの特別な支援ソフトウェアとハードウェアは、合成キーイベントを作成することで機能します。特別な作業を行わなくても、ページの非表示要素はフォーカス順に残るため、十分に注意してください。
すべての非テキスト要素に適切な代替テキストがあることを確認してください。（非テキスト項目が純粋に装飾的なものである場合、適切な代替テキストは空の文字列です。）
すべて大文字で記述しないでください。スクリーンリーダーは常にこれを頭字語として読み、各文字を綴ります（ただし、text-transform: uppercaseは問題ありません。音声に強調を追加するだけです）。
アクセシビリティの問題を見つけるのに役立つツール（以下にいくつかリスト）はたくさんありますが、これらは単なるリンターであり、静的解析には限界があることに注意してください。それらは誤検知が発生する場合もあれば、見逃しが発生する場合もよくあります。また、チェックしているのは、ツールを実行したときに表示されるページであることにも注意してください。

便利なブラウザ拡張機能

Firefox

Fangsはスクリーンリーダーエミュレーターです。スクリーンリーダーが一度に発表するすべての情報を注釈付きテキストとしてダンプすることで、非常に迅速なレビューを可能にします。

Chrome

Chromeには非常に便利なa11yツールがいくつか組み込まれていますが、開発者ツールの設定>実験に移動し、「アクセシビリティ検査」をオンにして有効にする必要があります。

Googleのアクセシビリティ開発者ツール　主にChrome開発者ツールに統合されていますが、まだ完全なアクセシビリティツリーへのアクセスなど、含まれていない機能がいくつかあります。
aXe　まともな静的アナライザー。Chrome開発者ツールのアクセシビリティ監査の基礎ですが、この拡張機能にはより多くの情報が含まれており、より多くのテストを実行します。（Firefoxでも利用できますが、Chromeでの統合がはるかに優れています）。
ChromeVox　ブラウザ内で完全に動作するスクリーンリーダー。（使用しないときにオフにするにはキーボードショートカットを設定する必要があり、アクティブでない場合でも迷惑なことをする可能性があるため、使用しないときは拡張機能を完全に無効にする必要がある場合もあります）。
ハイコントラスト　この拡張機能は、特別なコントラストニーズを持つ人々に使用されます。すべてのフィルターを通してページを実行し、（ホバー/フォーカス状態をテストして）すべてがまだ表示されることを確認することをお勧めします。
Siteimproveアクセシビリティチェッカー　これは最高の静的監査ツールです。拡張機能は、初回使用時にニュースレターへの登録を求めますが、登録する必要はありません—スキップするだけです。
Spectrum　さまざまな種類の色覚異常をシミュレートして、その特定の病状を持つユーザーが読んだときに、ページ上の何も不可視になったり、区別が困難になったりしないようにします。（何らかの理由で、インストール直後は機能しないようですが、数回再試行すると機能します）。
Funkify　使いやすい障害シミュレーター。

参考文献

このコンテンツは、Go Wikiの一部です。