Reactアプリをよりアクセスしやすくする

投稿日: 2022-04-20 2022-10-11
タグ: React

Reactアプリにアクセスできるようにするために時間を費やすと、構築しているすべてのすばらしいインターフェースをより多くの人々が確実に使用できるようになります。ありがたいことに、アプリへのアクセスのしやすさを改善するには、多くの場合、コンポーネントにわずかな変更を加えるだけで済みます。

アクセシビリティのクイックイントロ

アクセス可能なアプリを構築するということは、できるだけ多くの人がアプリのインターフェースを操作できるようにすることを意味します。これには、聴覚、認知、神経、身体、言語、および視覚障害のある個人が含まれます。また、手首の骨折など、誰かが通常の方法でアプリを操作できなくなる可能性のある一時的な状態が含まれる場合もあります。

「a11y」は「アクセシビリティ」のヌメロニムです。これは、最初と最後の文字、およびその間の11文字を指します。 🤓

アクセシビリティは誰のためのものですか？

簡単に言えば、アクセシビリティはすべての人のためのものです！ ✨アクセシブルなアプリは、より直感的な操作ができるため、多くの場合、ユーザーエクスペリエンス（UX）が向上します。たとえば、色のコントラストが高いと、視覚障害のある人だけでなく、すべての人がテキストを読みやすくなります。

アクセス可能なアプリは、「平均的なユーザー」とは異なる方法でアプリを操作するユーザーだけでなく、すべてのユーザーのUXを向上させます。

Reactをアクセシブルにする

ありがたいことに、Reactには本質的にアクセスできないものは何もありません。ただし、Reactアプリはコンポーネントベースであるため、広い視野からアプリがどれだけアクセスしやすいかを見失いがちです。

Reactアプリをよりアクセスしやすくするための5つの具体的な方法を見てみましょう。

1. セマンティックマークアップを使用したアプリの構造化

セマンティックマークアップは、目的に合わせてタイトルが付けられた要素を使用するHTMLです。

私たちのほとんどのReact開発者は、私たちの信頼できるものにかなり満足しています。 div 要素。着水 div ただし、代わりにセマンティックHTMLを使用すると、いくつかの理由で非常に役立ちます。

スクリーンリーダーは、各要素の重要性をよりよく理解しています。
コードベース自体は、開発者にとってより自明になります。

セマンティックHTMLが役立つ理由を理解するために、まず、のみを使用して順序付けされていないリストコンポーネントを見てみましょう。 divs：

...
render() {
  return (
    <div>
      <div className='title'>
        Favourite Foods
      </div>
      <div className='list'>
        <div className='item'>
          - Sushi
        </div>
        <div className='item'>
          - Pizza
        </div>
      </div>
    </div>
  )
}

クラスと構造を考慮しない限り、このコンポーネントが何であるかはすぐにはわかりません。スクリーンリーダーは、これらの要素が何であるかを明確に判断できないため、このリストにはアクセスできないと見なすことができます。 🙈

セマンティックHTMLでこれをもう一度試してみましょう。

...
render() {
  return (
    <section>
      <h2>Favourite Foods</h2>
      <ol>
        <li>Sushi</li>
        <li>Pizza</li>
      </ol>
    </section>
  )
}

開発者として、これらの要素が何であるかを明確に確認できるようになり、スクリーンリーダーもそれらの目的を認識しています。

デフォルトでは、コンポーネントでdiv以外の要素を使用してみてください。多くの場合、アクセシビリティと読みやすさを大幅に向上させることができるより優れたオプションがあります（ヘッダー、フッター、セクション、脇など）。 ✨）

2. ARIA属性を使用してセマンティックマークアップをアップグレードする

ARIAはAccessibleRichInternetApplicationsの略です。 ARIA属性は必須ではなく、代わりに、さまざまなデバイスでHTMLを読み取るのに役立つ補足と見なすことができます。

上で見たように、セマンティックマークアップにより、コードベースがスクリーンリーダーで読みやすくなります。 ARIA属性を使用して、さらに具体的にすることができます。

何かをインクリメントするボタンを追加するための指示を受け取ったとしましょう。 1つのオプションは、 div を追加します onClick そのようなイベント：

...
render() {
  return {
    <div>
      <div>Increment Something</div>
      <div onClick={this.incrementSomething}>
        +
      </div>
    <div/>
  )
}

残念ながら、スクリーンリーダーは、このコンポーネントがボタンであるか、ラベルがボタンに関連していることを認識しません。

次に、よりアクセスしやすいバージョンを見てみましょう。

...
render() {
  return (
    <button
      onClick={this.incrementSomething}
      aria-label='Increment Something'>
      +
    </button>
  )
}

最初の例と比較すると、ネイティブHTMLボタンを使用しているため、スクリーンリーダーはボタンであることがわかります。また、ボタンが何をするかをユーザーに伝えることもできます。 aria-label. 💪

ここで、何らかの理由でコンポーネントをボタンに変換できない場合、またはユーザーインターフェイス（UI）にラベルを保持したい場合を考えてみましょう。問題ない。使用できます role と aria-labelledby スクリーンリーダーをループに保つための属性。

...
render() {
  return (
    <>
      <h3 id='incrementButtonTitle>
        Increment Something
      </h3>
      <div
        onClick={this.incrementSomething}
        role='button'
        aria-labelledby='incrementButtonTitle'>
        +
      </div>
    </>
  )
}

The role propは、要素をネイティブHTMLボタンとして読み取る必要があることをスクリーンリーダーに指示し、 aria-labelledby 属性は、そのIDを持つ要素を示します（ <h3>）はボタンのラベルです。 🎉

3. 要素のフォーカスされたスタイリングの使用

ブラウザのデフォルトのフォーカススタイリングは、表示される最も美しいスタイリングではありませんが、キーボードを使用してアプリをナビゲートするのに非常に役立ちます。

ブラウザのフォーカスされたスタイルを確認するには、Tabキーを数回押してみてください。現在フォーカスされている要素の周囲に境界線が表示されます。

数回タブを付けた後、ナビゲーションバーのリンクの周囲に境界線がなく、マウスを使用できなかったと想像してください。現在焦点が合っているものを視覚的に示すものがない場合、目的の要素を選択することはほぼ不可能です。

最も簡単な解決策は、ブラウザのデフォルトのフォーカススタイルを常に残すことです。または、デフォルトのスタイルがデザインに合わない場合は、デフォルトのスタイルを次のようなカスタムスタイルで上書きします。

a.nav-links:focus {
  outline: 0;
  border-bottom: 2px solid pink;
}

一般に、Webは本質的にアクセス可能です。フォーカススタイリングを削除するなどの設計上の決定により、Webサイトのアクセシビリティが低下する可能性があります。つまり、これらのデフォルトのスタイルをそのままにしておくと、多くの作業がすでに完了しているということです。 🌈

4. 重要な部分へのタブ移動

キーボードだけを使用してアプリをナビゲートできるようにすることは、アクセシビリティを向上させるための優れた方法です。

これを行う1つの方法は、 tabindex 属性。これにより、開発者は、デフォルトの順序の外側をタブで移動しながら、フォーカスされる要素の順序を制御できます。

タブオーダーには、（入力など）操作できる要素のみが含まれます。

デフォルトでは、タブの順序は、DOMに表示される要素の順序です。

...
render() {
  return (
    <footer>
      <a href='#link1' tabindex='3'>
        first
      </a>
      <a href='#link2' tabindex='2'>
        second
      </a>
      <a href='#link3' tabindex='1'>
        third
      </a>
    </footer>
  )
}

この場合、リンクを表示順に（1番目、2番目、3番目）タブで移動する代わりに、 tabindex 順序を制御します（3番目、2番目、1番目）。

デフォルトのタブ順序を変更するには、いくつかの方法があります。

正の数： tabindex 順番に読み取られます tabindex='1' 最初にフォーカスを受け取った（次に2、3、100など）。
負の数：負の数を使用すると、キーボードから要素にアクセスできなくなります（例： tabindex='-3'）しかし、アクセシビリティを改善するためにまれです。
ゼロ：A tabindex ゼロ/0の場合、ユーザーは他の方法ではタブ移動できない要素にタブ移動できます。これは、セマンティックHTMLを使用できない場合に役立ちます。

Reactコンポーネントにtabindexを追加するUXを常にテストして、ユーザーを妨げる以上に役立つことを確認してください。 HTMLがセマンティックである場合、tabindexは必要ありません。

5. 画像の代替テキスト

The alt （または「代替」）属性は、Reactアプリをよりアクセスしやすくするためのもう1つの簡単な方法です。スクリーンリーダーが画像に到達すると、大音量で読み上げられます alt 画像のコンテンツの説明を提供するテキスト。

const AlligatorImg = () => (
  <img
    src='./img/alligator.png'
    alt='Alligator coming out of water with mouth open'
  />
)

の目的 alt テキストは、それを聞いている人が画像の内容を理解するためのものです。人が画像を見なくても想像できるように、十分に具体的である必要があります。

代替テキストには、「Pictureof」や「Imageof」などのフレーズを含める必要はありません。スクリーンリーダーは、画像要素であるため、画像であることをすでに認識しているため、追加する必要はありません。 🤓

原則として、 alt 簡潔なテキスト（約20〜100文字）ですが、それでも説明的です。簡潔すぎる（ alt='alligator'）写真についてユーザーにあまり伝えません。

参考文献

全体として、アクセシビリティは大きなトピックであり、すばらしいReactアプリをすべて使用できる人の数を最大化する方法はたくさんあります。

さらに深く掘り下げたい場合は、 WAI（Web Accessibility Initiative）でその他のヒントを確認してください。

getdocs

13036