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

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

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

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

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

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

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

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

Reactをアクセシブルにする

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

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

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

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

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

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

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

...
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>
    </>
  )
}

role小道具は、要素をネイティブ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'）ですが、アクセシビリティを向上させるために一般的ではありません。
Zero ：ゼロ/0のtabindexを使用すると、他の方法ではタブで移動できない要素にタブで移動できます。これは、セマンティックHTMLを使用できない場合に役立ちます。

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

5. 画像の代替テキスト

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）でその他のヒントを確認してください。