こんにちは！

何かを書いてからしばらく時間が経ちましたが、実際には新しいものは何も書いていません。これは、私がウェブとフロントエンドの開発を学び始めたばかりの数年前に作成して使用した古いチェックリストだからです。

ここにある内容の一部が古くなったり、一部のリンクが機能しなくなったりする可能性があります。その場合はコメントしてください。それに応じて更新します。

早速ですが、これが私の Web アクセシビリティ チェックリストです。それが役に立てば幸い！

発達

意味構造

1. ページのメイン領域は<header>、<nav>、 、<main>、<article>、 などのセマンティック要素内でラップされるか、 ARIA ランドマーク ロール<footer>で定義されます。
2. My <header>、<main>、および<footer>要素は、 要素の直接の子です<body>。
3. 私の<nav>要素は通常、Web サイトのメイン ナビゲーションにのみ適用され、すべてのリンクまたはリンクのリストには適用されません。Web サイトに密度の高いコンテンツがある場合は、<nav>このコンテンツのナビゲーションまたは目次として機能する別の要素を追加します。
4. Web サイトに 2 つ以上の<nav>要素がある場合、それらは ARIA ラベルで区別されます。
5. <h1>通常、ページのコンテンツ全体を説明し、ページに似た見出しをページごとに1 つだけ配置します<title>。
6. 私は、必要に応じて見出し<h2>から<h6>小見出しまたはサブトピックとして使用しますが、見出しレベルをスキップしません（たとえば、<h2>直接から に進むなど<h4>）。
7. <b>( 、<strong>、またはを使用して) 単に太字または強調されているテキスト、<em>または単に大きいテキストはページ見出しとして機能せず、そのように解釈されないことを理解しています。
8. <ul>私は、順序なしリスト、順序付きリスト<ol>、説明リストなどのリスト構造を、<dl>論理リストを形成するコンテンツにのみ使用します。

1. 私のhtml要素には、langドキュメントで使用される言語を指定する属性があります。
2. lang段落に散在する外来語句は、外来語句の言語を示す属性を備えたspanタグで囲まれます。

1. 私のリンクをクリックすると、新しいタブまたはウィンドウが開くという表示があります (開いている場合)。
2. 私のリンクをクリックするとファイルがダウンロードされるという表示があります (ダウンロードされる場合)。さらに、ファイルの種類とファイルの大きさも示す必要があります。
3. 私のリンク テキスト (またはアンカー テキスト) は説明的なものであり、ユーザーが段落やフレーズ全体を読まなくても、そこに何が含まれているかをユーザーに単独で伝えます。
4. mailto:またはアンカー リンクがある場合でも、電子メール アドレスと電話番号がアンカー テキストとして出力されますtel:。つまり、<a href="[email protected]">[email protected]</a>これの代わりにこれを実行します。<a href="[email protected]">E-mail us</a>
5. 巨大なテキストの塊 (段落など) に埋め込まれたリンクは、下線が引かれているか、異なる色、またはその両方であることが明らかです。
6. 私のリンクはモバイルでクリックできるほど十分な大きさであり、リンク同士が近すぎません。
7. 私のリンクはマウスでホバーでき、キーボードでフォーカスできます。これは、リンクにホバーまたはフォーカスすると、このリンクのスタイルまたはカーソルのスタイルが変化して、ホバーまたはフォーカスしていることを示すことを意味します。
8. すべてのリンクは<a>要素を使用してリンクされているため、すべてのデバイスがリンクの操作方法を認識できます。
9. アイコンのみを含むリンクには、そのアイコンが何であるかを示す代替テキストが含まれるか (たとえば、Twitter アイコンには「Twitter」という代替テキストが表示されます)、または 属性がありますaria-label。
10. 私の Web サイトには、ユーザーが密度の高いテキストやコンテンツをスキップするのに役立つ内部リンクまたはページ内リンクがあります。これらの内部リンクまたはページ内リンクは、name 属性ではなく、リンク先の要素の ID 属性を指します。

1. すべての mybuttonは、ユーザーを新しいページに移動するリンクとして機能するのではなく、アクションをアクティブ化します。

1. 私のすべての画像にはalt属性があります。
2. alt私のすべての画像には、画像が何を示しているかを説明する代替テキストが含まれています。これは、画像の内容を説明する画像を囲む属性またはその他の HTML 要素の形式である可能性があります。私の画像が純粋に装飾的で、サイトを理解するのに重要ではない場合、その画像には空のalt属性があり、代替テキストはありません。
3. アンカー リンク内の画像には、空のalt属性が設定されているか、altリンクの代わりに画像を説明する属性が設定されています。(余談ですが、リンクにアクセスできるようにするために、リンクがユーザーをどこに誘導するかを示す代替テキストまたはアンカー テキストも用意しています。)
4. 画像形式のフォーム ボタンには、alt「送信」、「登録」、「ログイン」など、ボタンの機能を説明する属性があります。
5. Web サイトにイメージ マップがある場合、イメージ自体にはそのコンテンツを説明する属性があり、コンテンツを伝えず、単にエリアのコンテナとして機能する場合はalt空の属性があり、イメージ マップの各エリア要素には、その内容を説明する属性があります。ホットスポットの機能。altalt
6. Web サイトに 1 つの大きな画像のスライスである複数の画像が含まれている場合、1 つの画像 (通常は最大の画像) のみがaltその画像を説明する属性を持ち、他のすべてのスライスは空のalt属性を持ちます。
7. すべての背景画像にalt属性を指定することはできないため、それらは純粋に装飾的なものであるか、画像の代替テキストとして機能する HTML 要素が存在します。
8. 私の Web サイト内のすべての複雑な画像 (チャート、グラフ、または地図) には、スクリーン リーダーで使用できる代替テキスト (通常はデータ テーブルの形式) が含まれていますが、画像の一般的な内容を説明する属性も含まれていますalt。(ヒント: すべての形式の代替テキストはビューポートの外側に配置でき、視覚に障害のあるユーザーには表示されませんが、スクリーン リーダーには表示されます。)

自動アクセシビリティテスト

インターネット上には、Web サイトのアクセシビリティをテストするのに役立つツールがいくつかあり、無料のものと有料のものがあります。最も一般的なもののいくつかを次に示します。

1. ax by deque (無料および有料)https://www.deque.com/axe/
2. クロム灯台（無料）https://developers.google.com/web/tools/lighthouse/
3. WAVE by WebAIM (無料および有料)https://wave.webaim.org/
4. レベル別の Web アクセシビリティ アクセス (無料および有料)https://www.webaccessibility.com/

キーボードインタラクションテスト

ここには、 WebAIM のキーボード テストへのリンクがあります。そこでは、Web サイト上で最も一般的なインタラクション、このインタラクションに関連する標準キーストローク、および考慮すべきその他の追加情報が列挙されています。キーボード インタラクション テストの詳細については、Blanca Mendizábal Perello 著の「Manual Accessibility Testing: Keyboard and Screen Reader Navigation」を参照してください。

スクリーン リーダーのテスト

WebAIM の「スクリーン リーダーの互換性を考慮した設計」では、スクリーン リーダーのアクセシビリティのために Web サイトを設計する際に知っておく必要がある最も一般的なテクニックのいくつかをリストしています。

Web サイトやアプリがスクリーン リーダーでどのように動作するかをテストしたい場合は、お使いの OS に最適なスクリーン リーダー アプリとソフトウェアをいくつか紹介します。

ウィンドウズ

Windows 開発者の場合、システムには Microsoft Edge で使用するのに最適なナレーターアプリが組み込まれていますが、 NV Access の NVDA Screen ReaderやFreedom Scientific の JAWS などの他のソフトウェアも利用できます(これは無料ではありません)。

Chrome OS

Chromebook または Chrome OS の開発者向けには、システムにChromeVoxと呼ばれるスクリーン リーダーが組み込まれています。ChromeVox は、 Chrome ブラウザのプラグインとしても利用できます。

macOS と iOS

macOS または iOS の開発者向けに、システムにApple VoiceOver機能が組み込まれています。

アンドロイド

Android 開発者向けに、システムにTalkBack機能が組み込まれています。

その他の役立つリソース

WebAIM カラー コントラスト チェッカー
Chrome 用のアクセス可能なカラー ピッカー

参考文献

リアン・リートフェルト著『パーフェクト・リンク』。 https://a11y-collective.com/blog/the-perfect-link/

自分のためだけに開発しないでください: アクセシビリティに関する開発者のチェックリスト。 https://dev.to/eevajonnapanula/don-t-develop-just-for-yourself-a-developer-s-checklist-to-accessibility-545k

WebAIM: 代替テキスト。 https://webaim.org/techniques/alttext/

どうやって考えますか？ https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

視覚障害者に最適なスクリーン リーダー。 https://www.maketecheasier.com/best-screen-readers-for-visually-impaired/

7 つの最高のスクリーン リーダー アプリとソフトウェア https://www.techuntold.com/best-screen-readers/

開発者の視点: スクリーン リーダーのテストの問題 https://jaketracey.com/a-developers-perspective-the-problem-with-screen-reader-testing/

サイトをテストするための 25 の無料アクセシビリティ ツールhttps://www.accessiblemetrics.com/blog/7-web-accessibility-testing-tools-for-every-need/

セマンティック構造: 領域、見出し、およびリスト (WebAIM)https://webaim.org/techniques/semanticstructure/

スクリーン リーダーを使用したテスト https://webaim.org/articles/screenreader_testing/