Go Wiki: WebAccessibilityResourcesAndTips

アクセシビリティ（「a11y」とも略される）は、ウェブ開発においてますます重要なトピックとなっています。godocのように、多くのGoツールやリソースがウェブ技術を使用しているため、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 Accessibility Checkerこれは最高の静的監査ツールです。この拡張機能は初回使用時にニュースレターの登録を求めますが、登録する必要はありません。スキップしてください。
Spectrum は、さまざまな種類の色覚異常をシミュレートし、特定の病状を持つユーザーが読んだときに、ページ上の何も見えなくなったり、区別しにくくなったりしないことを確認します。（何らかの理由で、インストール直後には機能しないようですが、数回再試行すると機能するようになります）。
Funkify 使いやすい障害シミュレーター。

さらに読む

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