Webアクセシビリティチェックリスト

アクセシビリティとは、障害を持つ人々がウェブサイトを平等に利用できるようにすることであり、障害者がそれらのサイトが提供する商品やサービスに平等にアクセスできるようにします。それはプロのウェブデザインと開発の不可欠な部分です.


Contents

なぜあなたは気にする必要があります アクセシビリティ?

開発者、設計者、およびその雇用者/クライアントが、アクセシビリティがWeb開発プロセスの初期の不可欠な部分であることを確認する必要がある理由はたくさんあります。.

  • 米国、EU、英国、イスラエル、日本などの多くの地域では、障害のために人々を差別しないことが法的要件です。昨年アメリカで, 2,235件の新しいADA Webサイト訴訟が提起されました 連邦裁判所で。 1時間に1回.
  • アクセシブルなサイトは、コード化され、より堅牢で、検索エンジンでのランクが高くなる傾向があります.
  • アクセスしやすいサイトは 障害のない訪問者にとってより使いやすい, より大きな満足と転換につながる.
  • アクセスできないサイトはビジネスに悪影響を及ぼす。 2019年には、 英国調査 400万人以上の人々が見つけたアクセシビリティの障壁のために小売Webサイトを放棄したことがわかりました。失業した「クリックアウェイポンド」は171億ポンドでした。それは . 英国だけで.
  • 潜在的な顧客を自発的に拒否することは悪いビジネスです.

共通の基準と問題

幸いにも、W3C(Webが依存する多くの標準を作成する機関)には、Webサイトをアクセス可能にする方法に関する標準があります。それは呼ばれています Webコンテンツのアクセシビリティガイドライン (WCAG)。 3つの適合レベル(A、AA、AAA)があり、「A」がアクセシビリティの最低レベルです。レベルAAを目指すことをお勧めします.

残念ながら、WCAGは長くドライで非常に技術的な読み物です。そのため、比較的簡単に何ができるかを調べて、費用対効果を最大化しましょう。これは、知っておくべきすべてのチェックリストではありません。これは最も一般的なエラーのチェックリストであり、障害を持つ人々が主なブロッカーであると言うエラーは、問題を解決するための実用的な提案が含まれています。すべての外部リンクが新しいタブで開きます.

クリックアウェイパウンド調査では、障害を持つ回答者に、購入を完了するための主要なブロックを尋ねました。これが一番の障壁です(複数の回答が許可されました):

  1. コンテンツが多すぎる混雑したページ– 66%
  2. reCAPTCHAテスト– 59%
  3. 判読性が悪い(コントラスト、テキストレイアウト)56%
  4. 動画やグラフィックの邪魔になる– 53%
  5. リンク情報が不十分– 59%(スクリーンリーダーユーザーは77%)
  6. フォーム記入56%

ウェブサイトのアクセシビリティを向上させる方法

まず、上位5つは技術的な問題ではないことに注意してください。これらは設計またはコピーライティングエラーです。.

1)コンテンツが多すぎる

簡単に言うと、テキストを見出しと箇条書きリストのセクションに分割します。簡単な言葉を使う.

選択肢の数が増えると、 情報収集に必要な努力 良い決断をしてください。コンテンツが多すぎる場合も同様です。すぐに圧倒されます。コンテンツを必要最低限​​にまで絞り込むことは、時間のかかる作業です。マーク・トウェイン(申し立てによると)が書いたように、「短い手紙を書く時間がなかったので、代わりに長い手紙を書きました。」

最近の本 書くことはデザインすること 示唆する

人々は、視覚や音声に関係なく、テキストの長いブロックを読み飛ばしたいと考えているため、ヘッダー、短い段落、およびその他のコンテンツデザインのベストプラクティスを使用して、長い文章を構成することが非常に重要です。.

そう:

  • 1つだけ

    ページ上.

  • 小見出しを自由に使用してください。スクリーンリーダーなどの支援技術のユーザーはショートカットキーを使用して見出し間を移動したり、見出し構造からコンテンツのメンタルマップを取得したりできますが、視覚障害者向けのテキストの「スラブ」を分割します。.
  • 見出しのレベルをスキップしないでください。たとえば、

    , の前に

    .

  • 次のようにHTMLで正しくマークアップされた箇条書き(このような!)を使用します
      ,
    • . スクリーンリーダーが「10項目のリスト」を発表します(ユーザーが項目を飛び越えることができます).

    平易な英語を使う

    モンゾ銀行 「声のトーン」ガイド わかりやすい言葉の重要性を説明します:

    2010年、米国の弁護士Sean Flammerが実験を行いました。彼は800の巡回裁判所の裁判官に、伝統的な「合法的」な議論、または彼が「普通の英語」と呼んでいるもののいずれかを支持するように求めました.

    裁判官は圧倒的にプレーンな英語版(66%〜34%)を好み、その好みは年齢や背景に関係なく保持されました.

    フラマーノート(PDF) 平易な英語版の:

    ほぼ1ページ分短いため、不要な文や単語が明らかに排除されます。その文は、25.2語ではなく、平均17.8語です。.

    彼は結論付けている:

    25年の経験的研究により、避けられない結論に至りました。読者を喜ばせ、説得したい場合は、平易な英語で書いてください。.

    2)ReCAPTCHA

    簡単に言うと、開発者の時間を節約するために、ユーザーに潜在的に不可能なループを飛び越えさせないでください.

    回答者はしばしば古いものについて話していました ReCAPTCHAバージョン

    再入力する必要のある不安定なテキストを含むreCAPTCHAのバージョン

    画像に苦労し、数字や文字を入力する必要があります。ショップのある画像などをクリックしなければならない種類では、いつも一部を逃したり、混乱したりして、持っていないエネルギーを使い果たしてしまいます…

    reCAPTCHAのぐらぐらした文字スタイルは非推奨になりました。 「CAPTCHA reCAPTCHAなし」と呼ばれる新しい化身が見られるのはより一般的です(「私はロボットではありません」チェックボックス)ユーザーが自分がロボットではないことを確認するチェックボックスをオンにする必要があり、秘密のブードゥー教を使用してユーザーにスコアを付けます。問題がなければ、それ以上の操作は必要ありません。ただし、失敗した場合は、さらにチャレンジが表示されます。

    ユーザーにオレンジを示す四角をクリックするように要求するキャプチャの部分的なスクリーンショット

    (たとえば)道路標識のあるすべての正方形をクリックするようにユーザーに要求するキャプチャの種類は、必ずしも国際的ではないことに注意してください。テレンス・エデンが書いているように, CAPTCHAはあなたが人間であることを証明するものではありません-彼らはあなたがアメリカ人であることを証明します.

    reCAPTCHAの最もアクセスしやすい形式は reCAPTCHA v3 これはユーザーの操作を必要としませんが、テストに失敗した訪問に対処するためにより多くの作業を行う必要があります。

    これは、スコアを返す純粋なJavaScript APIであり、サイトのコンテキストでアクションを実行する機能を提供します。たとえば、認証の追加の要素の要求、モデレートへの投稿の送信、コンテンツをこすり取る可能性のあるボットの抑制.

    3)判読性が悪い

    簡単に言うと、テキストに十分なコントラストがあり、読みやすく、正当化されていないことを確認してください.

    • 適切なコントラストを確保する. Webで最も一般的なアクセスブロッカーの1つは、テキストと背景のコントラストが悪いことです。 W3Cガイドラインでは、コントラスト比が3:1以上である必要がある大規模なテキストと画像を除いて、少なくとも4.5:1のコントラスト比が必要です(ロゴと「付随的」テキストは除外されます)。コントラスト比を測定できるユーティリティはたくさんあります。私の個人的なお気に入りはエイダローズキャノンの優秀です コントラストウィジェット, これは、ページのコントラストが不十分な領域を強調表示する便利なブラウザブックマークレットです.
    • すべて大文字の見出しを使用しない. 大文字はすべて同じ高さであるため、読みづらいという証拠があり、一般的な単語の形を認識できません。さらに、一部のスクリーンリーダーは、大文字のグループを省略形(BBC、DOJなど)のように綴ります。すべての大文字の見出しが必要な場合は、通常のケースでHTMLに記述し、CSSで変換します。 テキスト変換:大文字.
    • テキストを左揃え. (アラビア語やヘブライ語などの右から左に書く言語のページでは、テキストを右揃えにします。)失読症の人が読みにくくなるため、正当化しないでください。の イギリス失読症協会のスタイルガイド また示唆している

      ArialやComic Sansなどのsans serifフォントを使用してください。代替には、Verdana、Tahoma、Century Gothic、Trebuchet、Calibri、Open Sansが含まれます.

    4)画像とグラフィックの邪魔になる

    簡単に言うと、ユーザーが移動を停止できるようにします。オペレーティングシステムの設定を尊重する。ビデオを自動再生しない.

    クリックアウェイパウンド調査の1人の回答者は、,

    私が以前問題なく使用していたサイトは、移動する広告を引き受けており、買い物をしながら常により多くの広告をロードしているため、問題になっています.

    WCAGの最も基本的なレベルでは、「(1)自動的に開始し、(2)5秒以上持続し、(3)他のコンテンツと並行して表示される、移動、点滅、またはスクロール情報には、動き、点滅、スクロールが不可欠なアクティビティの一部でない限り、ユーザーは一時停止、停止、または非表示にすることができます。」.

    気晴らしは迷惑です–特にADHDまたは他の認知障害を持つ人々にとって。ただし、動きと点滅も発作を引き起こす可能性があるため、WCAGガイドラインでは、コンテンツが1秒間に3回を超えて点滅しないようにする必要があります.

    アニメーションに対するユーザーの選択を尊重する

    すべての主要なオペレーティングシステムで、ユーザーは画面上でモーションを減らすことを選択できます。これはおそらく、モーションによって引き起こされる前庭スペクトラム障害があるためです。 Webサイトは、ユーザーがCSSでこれを行ったかどうかを検出できます 運動を好む メディアクエリ.

    ここでは、ユーザーが設定を表明していない場合にのみ、ボタンがアニメーション化できるようにします。

    @media(prefers-reduced-motion:no-preference){
    ボタン{
    / * `vibrate`キーフレームは他の場所で定義されています* /
    アニメーション:0.3s線形無限大の両方を振動させます。
    }
    }

    アニメーションルールが多いサイトを改造する場合は、次のようになります。 以前に宣言されたすべてのCSSアニメーションを停止する

    @media(prefers-reduced-motion:reduce){
    *,
    *::前,
    * :: after {
    アニメーション期間:0.001秒!重要;
    transition-duration:0.001s!重要;
    }
    }

    ユーザーのオペレーティングシステムの設定を尊重することについては、 ダークモード用のWebサイトの設計.

    5)リンク情報が不十分

    簡単に言うと、一意のリンクテキストを使用して、リンクを識別可能にします。リンクが新しいタブまたはファイルを開く場合にユーザーに警告する.

    リンク不良の主な原因の1つは、コピーライティングの不良です。ほとんどのスクリーンリーダーを使用すると、ユーザーはページ上のリンクのリストをすばやく表示できます(最もよく使用されている市販のスクリーンリーダーJAWSでは、キーボードショートカットはIns + F7です。 無料のNVDAスクリーンリーダー, 同じキーボードショートカットで、ページのリンク、見出し、ランドマークを一覧表示する要素リストが表示されます).

    ただし、すべてのリンクに「ここをクリック」または「もっと読む」というテキストがあり、それらを区別するために他に何もない場合、これは役に立ちません。これを解決する最も簡単な方法は、一意のリンクテキストを記述することですが、それが不可能な場合は、各リンクに一意のaria-label属性を使用して、支援技術用のリンクテキストを上書きできます。.

    ここからの良い例です Joomlaウェブサイト

    JoomlaのWebサイト、2つの異なるストーリーを表示し、それぞれが同一のストーリー

    表示されるリンクテキストは単に「もっと読む」だけですが、Joomlaは aria-label それぞれを支援技術に固有のものにする属性:

    続きを読む
    
    続きを読む

    のせいで aria-label 支援技術ではリンクテキストの代わりにテキストが使用されます。W3Cでは、aria-labelで使用されるテキストをリンク内で使用されるテキストから開始することをお勧めします。これにより、「ユーザー間の一貫したコミュニケーションが可能になります」.

    注意: 私がまだ古いサイトで見ているいくつかの悪いアドバイスは、リンクを使用して説明テキストを追加することです 題名 属性:

    続きを読む>

    これをしないでください. の タイトルがほとんどのスクリーンリーダーに表示されない (開発者はこれまで「SEO」の目的でキーワードを詰めていたため、スクリーンリーダーベンダーはデフォルトで無効にしていた)、そしてブラウザはタイトル属性を「ツールチップ」として提示し、マウスをホバーしたときにのみ利用できる.

    リンクはリンクのように見える必要があります

    デフォルトでは、ブラウザはリンクに下線を引きます。これを変更しないことをお勧めしますが、駐車場でデザイナーとこれについての戦いに負けた場合、リンクテキストは周囲の非リンクテキストと3:1のコントラスト比である必要があり、「非色指定」を与える必要があります」は、ホバーまたはフォーカスされたときのリンクであることを示します。次に例を示します。

    a:hover、a:focus {text-decoration:underline;}

    フォーカススタイルでは、マウス以外のユーザーがキーボード、スタイラス、または音声入力からリンクにフォーカスすると、リンクに下線が引かれます。一般に、ページ上の何かにホバースタイルがある場合は、フォーカススタイルも与える必要があります。.

    「色指定なし」(この場合は下線)により、視力が弱い、または色覚異常のある訪問者が、ホバーまたはフォーカスで変化を確認できます。 (スクリーンリーダーは、リンクテキストの前に「リンク」を自動的に通知します。)

    リンクが新しいタブ/ページを開いたかどうかを人々に知らせる

    リンクをアクティブ化すると新しいタブまたは新しいウィンドウが開く場合、特にページ上の一部のリンクだけがこれを行う場合(たとえば、外部リンクのみが新しいタブを開く場合)、訪問者を混乱させる可能性があります。これを行う必要がある場合は、リンクテキストで、または上記のaria-labelメソッドを使用してユーザーに警告する必要があります。.

    リンクがファイルへのリンクかどうかをユーザーに知らせる

    リンクがファイル(PDFやビデオなど)へのリンクである場合は、リンクテキストでユーザーに伝えます。隠さないで aria-label, これは、多くの視力のあるユーザーに役立ちます(たとえば、一部の携帯電話は.docxファイルを開くことができません)。ファイルが大きい場合は、おおよそのサイズをユーザーに通知することを検討してください。彼らは3G以上の大きなビデオファイルをダウンロードしたくないかもしれません.

    あなたも使うことができます ダウンロード 属性。ブラウザがオペレーティングシステムのネイティブファイルダウンロードダイアログを開きます。これをすべてまとめると、コードは次のようになります。

    年次報告書(PDF、240 MB)

    6)別のデザインエラー:フォーカスリングの取り外し

    簡単に言うと、キーボードユーザーが常に現在フォーカスしている場所を確認できるようにします。.

    私達は言及しました :フォーカス 以前のスタイル。これらは、何らかの理由でマウスを使用できない人々にとって非常に貴重な視覚的インジケータです。おそらく、RSI、パーキンソン病、または多発性硬化症にかかっている可能性があります。デフォルトでは、ブラウザは現在フォーカスされている要素にフォーカスリングを表示します。これが、Chromiumブラウザに焦点を当てた私の個人サイトのホームリンクです。

    リンク周辺のChromiumのデフォルトのフォーカスリングのスクリーンショット(これも画像です)

    ただし、一部の人々は、マウスを使用していてCSSでオフにすると、審美的に不快であると見なし、キーボードのユーザーがサイトにアクセスできないままにします。.

    と呼ばれるFirefoxの先駆者である新しい標準を入力してください :focus-visible. これは、キーボードまたはマウス以外のポインティングデバイスでフォーカスリングに到達したが、マウスユーザーには何も表示しない場合、要素にフォーカスリングを適用します。 Firefoxでのみサポートされているため(執筆時点), パトリック・ロークは示唆している 次のCSSは、すべてのブラウザでうまく機能します。

    button:focus {/ *いくつかのエキサイティングなボタンフォーカススタイル* /}
    button:focus:not(:focus-visible){
    / *上記のすべてのボタンスタイルを元に戻します
    ボタンにフォーカスがあるが、ブラウザが通常はそうしない場合
    デフォルトのフォーカススタイルを表示* /
    }
    button:focus-visible {/ *いくつかの*もっと*エキサイティングなボタンフォーカススタイル* /}

    7)フォーム入力

    簡単に言うと、フォームフィールドのように見えるフォームフィールドをデザインし、それぞれラベルに関連付けます。自動入力を無効にしないでください.

    eコマースサイトにとってフォームが非常に重要であることを考えると、アクセスできないフォームがいくつあるかは驚かされます。多くの場合、これは、古いブラウザではフォーム要素のスタイル設定があまり許可されていなかったため、開発者が他のHTML要素でそれらを偽造したためです。最新のブラウザでは 魅力的なチェックボックス、ラジオボタン, カスタム選択コンポーネントとコンボボックス, アクセス可能なオートコンプリートコントロール もっと.

    自動入力はあなたの友達です

    ブラウザがフォームに自動入力できるようにすると、訪問者は少ない作業で済むため、フォームに入力して製品にサインアップ/購入する可能性が高くなります。. ブラウザでの自動入力:詳細 これについてのeBayによる素晴らしい記事です(そして彼らは知っておくべきです).

    また、オートコンプリートは、現在AAコンプライアンスを達成するための唯一の十分なテクニックです。 達成基準1.3.5:入力目的を特定する.

    フォームフィールドをフォームフィールドのようにする

    デフォルトでは、ブラウザはフォーム入力フィールドをボックスとして表示します。必ず、これらをマージン、パディング、およびボーダーでスタイル設定しますが、ボックスとして保持します。多くの設計者は、ユーザーがテキストを入力するために1行を使用するというGoogleの2017年以前のマテリアルデザインパターンに従いました。

    長方形のボックスではなく水平線を使用した古いマテリアルデザインの入力

    ただし、Googleは、古いテキストフィールドの下の行が一部のユーザーにはわかりにくいことがわかり、多くの場合、区切り線と混同され、デザインを変更しました。で 使いやすさのテスト 600人の参加者とともに、彼らはそれを発見しました

    四角形(ボックス)の囲まれたテキストフィールドは、ラインアフォーダンスのパフォーマンスよりも優れています。今日、これらの新しいテキストフィールドは、アカウントのサインインページからGoogleフォームまで、Googleサービス全体に表示されます.

    Googleの完全なマテリアルデザインUIライブラリの採用を検討している場合は、 マテリアルデザインのテキストフィールドの使用をやめる! 松子フリードランドがあなたのニーズを満たしているかどうかを確認する.

    すべてのフォームフィールドにラベルを付ける

    すべてのフォームフィールド(テキスト入力、チェックボックス、ラジオボタン、スライダーなど)にラベルを付ける必要があります。これを行う最良の方法は、HTMLを使用することです ; WCAGが言うように、「標準のHTMLコントロールは、仕様に従って使用した場合、すでにこの達成基準を満たしています」.

    これは私が作ったデモです ラベルなしフォームフィールドとラベル付きフォームフィールド. 見た目は同じですが、上の1つには適切なラベルがありませんが、2つ目のラベルにはあります。下のテキストラベルをクリックすると、関連する入力に焦点が当てられていることがわかります.

    偽物と実際のラベルの比較

    これにより、モーター制御が困難な人や、でこぼこした電車の小さな画面で小さなチェックボックスをチェックしようとする人にとって、入力のフォーカスがはるかに簡単になります。また、フォームのフィールド間をタブで移動するスクリーンリーダーユーザーにとっても重要です(デフォルトでは、タブとタブでフォーカスできるのはリンクとフォームフィールドのみです)。ユーザーが入力フィールドにタブで移動すると、スクリーンリーダーは関連するラベルの内容をアナウンスします.

    このためのコードは単純です。入力フィールドには一意のIDが与えられ、ラベルは ために 属性:

    
    

    ラベルを隠す

    ときどき、ラベルを表示したくない場合があります。または、デザイナーが望んでおらず、駐車場での別の戦いを望んでいません。とにかく、入力の前に「検索」と書かれたラベルがやりすぎのように感じる場合の例を次に示します.

    入力フィールド、後で「検索」というラベルの付いたボタン

    入力フィールドを「検索」というテキストに関連付けることができます。これは、送信ボタンのコンテンツである aria-labelledby

    
    

    私たちは使うことができた aria-label (先にリンクについて話し合ったとき):


    ただし、ページが翻訳ツールで実行された場合は翻訳されるため、ページ上の表示テキストを優先することをお勧めしますが、HTML属性で「非表示」のテキストは翻訳されません。 (このヒントのAdrian Roselliへのハットヒント、彼の素晴らしい記事から コントロールにラベルを付けるためのメソッドの優先順位.)

    トップ100万のホームページの最も一般的なエラー

    何らかの障害のあるユーザーから報告された、eコマースサイトへの最大の障害を見てきました。次に、より広範なサイトのセット、つまり上位1,000,000のWebサイトのホームページを見てみましょう。, WebAIMによって自動的に分析 分析されたページの98%に少なくとも1つのエラーがありました。最も一般的なエラーは

    1. 低コントラストテキスト(86.1%)
    2. 画像の代替テキストがない(67.9%)
    3. 空のリンク(58.9%)
    4. フォーム入力ラベルがない(53.2%)
    5. ドキュメントの言語がありません(30.5%)

    上記では、低コントラスト、リンク、フォーム入力について説明しました。次に、他の非常に一般的なエラーを回避する方法を見てみましょう.

    8)すべての画像、動画、音声に代替テキストを提供する

    簡単に言うと、画像またはビデオを通じて伝達される情報には、同等のテキストが必要です。.

    視覚障害のある訪問者、またはブラウザーで画像をオフにしている低帯域幅/高額なデータプランの訪問者に伝えることができる代替テキスト(「代替テキスト」)が必要です。これにはテキストの画像が含まれます.

    基本的なルールは次のとおりです。

    • 画像が純粋に装飾的なものである場合は、空の代替テキストが必要です。 alt = "". (しかし、とにかく純粋に装飾的な画像はおそらくCSSであるはずです。)
    • 本文で説明されている画像の場合、空の代替テキスト(alt = "")、繰り返しを避けるため。しかし、それが
      – 見る どのように考えますか? 多くのための.
    • 画像がリンクの唯一のコンテンツである場合(たとえば、組織のロゴをクリックしてホームページに移動できる場合)、代替テキストはリンク先を説明する必要があります。例えば, alt = "ホームページ".
    • アイコンフォントを使用しない;彼らは失読症の人々にとって本当に悪いことができます。それらを使用する場合, それらをSVGに変換する.

    ビデオとオーディオの代替テキスト

    音声コンテンツには、聴覚障害を持つ人々のための代替テキストが必要であることを忘れないでください。つまり、ポッドキャストのトランスクリプトとビデオの字幕です。また、メディアを自動再生しないでください.

    9)適切なドキュメント言語を追加する

    簡単に言うと、支援技術にテキストの言語を知らせます。.

    ホームページの30%は、書かれている言語を宣言していないため、スクリーンリーダーのユーザーを混乱させる可能性があります。たとえば、文が英語またはフランス語の場合、「six」という単語の発音は非常に異なるため、これは重要です。.

    HTML要素にlang属性を追加することで、これを簡単に解決できます。

    「en」は、このページが英語であることをスクリーンリーダー(または翻訳ソフトウェア)に伝えます。 「es」はスペイン語、「fr」はフランス語などです。ほとんどの言語では、言語タグは簡単に判別できます。 W3Cには、 言語タグの選択.

    ページに宣言されているメイン言語以外の言語のコンテンツが含まれている場合は、そのコンテンツを囲む要素に言語属性を追加します。たとえば、英語として宣言されたページでは、次のようになります。

    チャットしたい場合 マタドール, クールに カバナ
    そして会う セノリタス スコアによる, スペイン語

    10)訪問者があなたのコンテンツを回避するのを助ける

    簡単に言うと、HTMLランドマーク要素を使用して、支援技術ユーザーがコンテンツを理解してナビゲートするのを支援.

    視力のある訪問者があなたのページに来るとき、彼らは簡単に視覚的にそれをスキャンして、ナビゲーションがどこにあるか、そして主要なコンテンツがどこから始まるかを理解することができます。スクリーンリーダーのユーザーはこれを行うことができません。ただし、HTML5にはこれらの領域をマークするための新しいタグがいくつかあり、支援技術には、 ヘッダ, フッター, 航海 など.

    これは、ウェブデベロッパーでスクリーンリーダーのユーザーであるLéonieWatsonがスクリーンリーダーを使用してこれらのセマンティクスを調べ、私の個人用サイトをナビゲートする方法を紹介した6分間のビデオです。

    • メインコンテンツ、つまり、ヘッダー、プライマリナビゲーション、またはフッターではないものを、
      素子。ほとんどすべての場合、1つだけである必要があります
      1ページあたり。すべてのブラウザー(IE9 +)でスタイルを設定でき、支援技術はそれをどうするかを認識しています.
    • ヘッダー(ブランドロゴ、ストラップライン、ページの見出し)を
      素子.
    • フッター(法的事項、連絡先の詳細、著作権情報など)を
    • を使用してプライマリナビゲーションをマークアップします
        に包まれた 素子。これは、
        それがページの視覚的なデザインに合う場合.
      • 広告や重要でないコンテンツは、
      • 1つのページに複数の製品/ビデオ/ニュースアイテム/ブログの投稿がある場合は、それぞれを
        素子.

      その中で スクリーンリーダーユーザーの調査, WebAIMは、スクリーンリーダーユーザーの26%がページをナビゲートするときにこれらのランドマークを頻繁にまたは常に使用することを発見しました.

      さらに、個別のコンテンツを

      AppleのWatchOSがコンテンツを最適に表示するのに役立ちます。私の記事を参照してください セマンティックHTMLの実用的な価値 これについての詳細.

      11)HTMLを適切に使用する

      つまり、HTML要素のセマンティクスとデフォルトの動作を理解します。コンテンツに適切な要素を使用する.

      この記事の共通のテーマは、正しいHTML要素を使用することです。を使って ラベル 関連付けられた入力フィールドに焦点を合わせる組み込みのブラウザ動作があります。を使用して

      より好ましい

      スクリーンリーダーのユーザーが重要なコンテンツに直接ジャンプできる一方で、スクリーンリーダーを使用しないユーザーにはまったく目立たないため.

      別の例は

      Like this post? Please share to your friends:
Adblock
detector
map