開発者向けアクセシビリティ

12778 ワード
react a11y webdev テキストリンク

導入


アクセス可能なウェブサイトに関係なく、自分の能力によって使用することができます.アクセス可能なウェブサイトの設計と構築は、スクリーンリーダやキーボードナビゲーションのような支援技術や色不足の人々のために働くことを保証することを意味します.
もちろん、多くの障害がありますが、これらは最も一般的なものを念頭に置いて念頭に置いてあなたのWebアプリを構築することです.この記事はアクセシビリティへの導入として機能し、アクセス可能な反応アプリケーションを構築する方法の基礎を教えてくれます.

クイック勝


あなたの反応アプリケーションは最終的にHTMLをレンダリングするので、それはあなたの複雑なインタラクティブなコンポーネントがアクセス可能であることが重要であるだけでなく、基本的なマークアップとスタイリングもしています.インタラクティブなJavaScript重いコンポーネントをアクセスすることさえ、主に彼らのマークアップを改善することから成ります.
しかし、JavaScriptを考慮することなく、いくつかのことは、すでに大幅にあなたのサイトのアクセシビリティを向上させることができますがあります.

色対比


The WCAG 2 Specは、2色の間の知覚された明るさとして色コントラストを定めます.これは、1 : 1(白い背景の白いテキスト)から21 : 1(白い背景の黒いテキスト)にわたる比率として表されます.

イラストレーションAccessible Web .
WCAGは、少なくとも24ピクセルより大きいテキストのために少なくとも4.5 : 1と3 : 1の通常のテキストの対照を持っていることを勧めます.少なくともここのキー.最小限の要件を超えるコントラストを使用してください.両方のChromeとFirefoxの開発ツールは、それを検査するときに要素のコントラストが表示されます.

ALT属性


おそらく、あなたはすでにこれに精通しています.alt属性は画像の内容を記述する.画像が正しくロードされていない場合は、この説明は便利です、あなたのサイトをインデックスする検索エンジン、および最も重要なのは視覚的に障害のユーザーのための画面リーダーに依存します.
<img src="image.jpeg" alt="Birch tree on a meadow" />

フォームラベル


フォーム内のすべての対話型要素のラベルを使用します.フォーム内のフォームは、フォームコントロールとしても知られています.フォームコントロールが何をするかをユーザが理解するのを助けます.
// JSX uses htmlFor to associate a label with a form control
<label htmlFor="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>
あなたが検索バーのような視覚的にレンダリングされるとき、目的が明白であるフォームコントロールを持っているならばaria-label スクリーンリーダーに要素の目的を知らせさせる.
<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>

ボタンテキスト


アイコンだけのボタンのようなボタン、その目的が視覚的にレンダリングされたときには明らかであるaria-label .
<button type="submit" aria-label="Search">Search</button>

ドキュメント言語


画面リーダーは、正しい発音を使用するウェブサイト上のコンテンツの言語を知る必要があります.
<html lang="en"></html>
ページの一部が他の言語で他の言語で書かれている場合は、lang それを囲むどんなHTML要素にでも属性.
<span lang="fr">C'est en français</span>

インタラクティブコンポーネントのアクセス


高忠実度、インタラクティブなアプリケーションをアクセスできるようにいくつかの余分な手順があります.そのため、上記の手順を実行したら、たとえば、ドロップダウンのようなインタラクティブコンポーネントのアクセシビリティを改善しようとします.

意味HTML要素を使用する


セマンティックHTML要素は、それらの意味を開発者とブラウザに伝える要素です.このarticle W 3学校によって意味のあると考えられる要素のリストを提供します.
アプリケーションのレイアウトのdivに頼る代わりに、適切な意味要素HTMLを使用します.これは、画面の読者や他のツールが関連するコンテンツを識別するのに役立ちます.

反応アプリケーションを開発するとき、あなたはdivsとスパンだけを使っているほとんど何でも構築するオプションを持ちます.一方button or select 要素は意味的なHTML要素であると公式に考慮されていません、彼らはまだDivisionと比較してより明確な意味を伝えます.したがって、DIVに対話型でクリック可能な要素を作る代わりに、利用できるとき、適切なHTML要素を使用してください.これは、我々は後で取得するARIAの属性の多くを使用することからあなたを保存します.
<div role="button" tabIndex="0" onClick={clickHandler}>
    <!-- Content-->
</div>

// use the HTML button element!
<button onClick={clickHandler}>
    Click me
</button>

キーボードナビゲーション


キーボードナビゲーションはアクセシビリティの巨大な部分ですが、それはまた、時折彼らのマウスに触れることなく、ウェブサイトを移動するのが好きな他の誰のために便利で来ることができます.キーボードナビゲーションは、タブを押すことによって、各対話型要素を通してサイクリングすることによって動作します.キーボードナビゲーションが正しくあなたのウェブサイトで動くことを確認するとき、2つの重要な要因があります:あらゆる対話的な要素が届くのを確実にして、選択されたアイテムをハイライトしている境界線を隠すためにカスタムCSSを持っていないことを確認してください.項目の選択を管理するにはtabIndex を使用できます.
リンクやボタンのような要素は、タブごとにデフォルト(意味は、タブを使用して到達することができます)の内部にあるので、可能な限りそれらを使用します.Clickable divのようなカスタムのインタラクティブなコンポーネントがあるときはいつでもtabIndex それ以外の場合は、コンポーネントをキーボードユーザーに到達できません.
tabIndex="0" // in tab order, can be selected
tabIndex="-1" // removed from tab order, cannot be selected
tabIndex="1234" // manually manage tab order, usually not needed
リンクまたはボタンのような対話的なHTML要素は、デフォルト(タブを使用して到達することができます)ごとにタブの順序の中にあるので、可能な限りそれらを使用します.できるだけ早く、カスタムのインタラクティブなコンポーネントをクリックすることができますtabIndex それ以外の場合、コンポーネントはキーボードユーザーのために使用されません.

アリア


Ariaはアクセス可能なWebアプリケーションを構築するための重要なツールです.それはアクセシビリティ情報を供給するために使用される多数の属性を提供します.アクセス可能なJavaScriptアプリケーションを開発したいなら、ARIAは間違いなく使用する最も重要な技術です.
アリアは多少複雑なので、可能な限り記述的HTML要素を使うことを勧めます.多くの場合、彼らはアリアの必要性を排除する.しかし、単に適切なHTMLを使用して十分ではない場合があります.それはアリアが遊びに来るところです.アリア属性は、ロール、プロパティ、および状態の3種類のうちの1つです.
アリア属性は、ロール、プロパティ、および状態の3種類のうちの1つです.

  • role :要素が何であるかを定義します.

  • state :チェックボックスなどの要素の状態を記述する

  • プロパティ:セマンティックHTMLがカバーしない追加プロパティ
    • 以下にAria属性のリストを示します:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques .
    次の章では、反応コンポーネントをよりアクセス可能にするためにARIAをどのように使うかを調べます.

    プログレスバー


    このような通常の進行状況バーをください.今、想像して、どのように画面リーダーに依存する誰もその内容を理解することができますか?すべての情報は、画面リーダーのために役に立たないスタイリングの中に隠されている.マークアップは1つの空の部門と同じくらい小さいかもしれません.

    ARIAのおかげで、このコンポーネントを完全にアクセスできるようにいくつかの属性を利用できます.
    const ProgressBar = ({ progress }) => {
  // some CSS-in-JS

  return (
    <div
      role="progress-bar" // purpose of this element
      aria-valuenow={progress} // current progress value
      aria-valuemin="0" // minimum value of progress bar
      aria-valuemax="100" // maximum value of progress bar
    ></div>
  );
};
    この例を選んだのは、アリアの能力をうまく示しているからです.しかし、私は意味のないHTMLの代わりに意味のないdivの代わりに使用すると言ったか覚えていますか?HTML 5がAと共に来ますprogress 要素.スクリーン読者はデフォルトHTML要素に対処できるので、Aria属性を加える必要はありません.
    <progress id="progress-bar" value="50" max="100">50%</progress>
    しかし、意味的なHTML要素があなたの特定のユースケースに十分柔軟でないならば、何もカスタムを構築することからあなたを止めません.あなたはそれがアクセスできるようにいくつかの余分な仕事を入れる必要があります.多くの一般的なUIライブラリは、まだ進行状況バーのためのARIA属性と組み合わせてdivsを使用します.

    テスト


    他のすべての機能をテストするように、開発中にアクセシビリティをテストすることが重要です.起動するには、何らかの種類の自動テストを使用します.Google Lighthouse いくつかのアクセシビリティの問題点を見つけることができます.Accessibility Insights マイクロソフトや斧コアエンジンに基づいている他のツールも良い選択です.
    自動テストを開始するには良い場所ですが、あなたは単独でそれらを信頼すべきではありません.それはあなたのウェブサイトを使用して手動チェックを実行する価値があります.偉大な場所を開始するには、画面の読者(MacOSの上のボイスのような)とキーボードを使用してテストを制御します.

    リソース


    反応ライブラリ


    一方、アクセシビリティの高いアプリケーションをゼロから構築する方法を知ることが重要だと思いますが、デフォルトでアクセス可能なカスタマイズ可能なコンポーネントを提供することで、あなたの人生をより簡単にすることができる素晴らしいツールがたくさんあります.

  • Reach UI スタイリングを完全に制御したい場合は、大きなアクセス可能な基礎を提供します

  • Chakra UI 私のお気に入りのコンポーネントライブラリは、アクセシビリティに焦点を当てても良いことです

    • 更なる読書

  • React Accessibility docs
  • A11y Coffee
    • laravel-adminのviewをvendor外で動かす
    cuDNN