アクセス可能なフロントエンドコンポーネントの完全ガイド

公開: 2022-03-10

簡単な要約↬新しい短い一連の投稿では、開発者と設計者にとって便利なツールとテクニックのいくつかに焦点を当てています。最近、CSS監査ツールとCSSジェネレーターについて説明しました。今回は、タブやテーブルからトグルやツールチップまで、信頼性の高いアクセス可能なコンポーネントについて説明します。

：フォーカススタイル
オートコンプリート
ボタンボタン
カード
カルーセル
「閉じる」ボタン
コンテンツスライダー
チェックボックス
カラーシステム
カラーパレット
漫画
コンポーネントライブラリ
クッキーの同意プロンプト
現在のページナビゲーション
ダークモード
データチャート
データの視覚化
日付ピッカー
無効なボタン
仕切り
フォームスタイル
脚注
コンテンツを隠す
アイコンリンク
入力
キーボードナビゲーション
リンク
メディアスクローラー
モーダル
ナビゲーションメニュー
パスワードフィールド
優先-削減-*
ラジオボタン
スケルトン
「スキップ」リンク
SVG
タブ
テーブル
テスト
サードパーティコンポーネントのアクセシビリティ
トグルスイッチ
ツール
ツールチップ
ビデオ/オーディオプレーヤー

アクセス可能`:focus`スタイル

すべてのブラウザにはデフォルトのフォーカススタイルがありますが、すぐに使用できるため、あまりアクセスできません。 :focusの目標は、ドキュメント内の正確な場所に関するガイダンスをユーザーに提供し、ドキュメント内を移動できるようにすることです。それを達成するには、微妙すぎる、またはまったく見えない焦点を避ける必要があります。実際、アウトラインを削除すると、キーボードユーザーのフォーカスの表示がすべて削除されるため、お勧めできません。焦点がはっきりしているほど、良いです。

より良い：フォーカススタイル — より良い`:focus`スタイル（大きなプレビュー）

より良い:focusスタイルを設計する方法があります。彼女の記事「フォーカススタイルのヒント」で、ニックチャンは、より良いアフォーダンスと少しのパディング、オフセット、および適切なアウトラインを使用してフォーカススタイルを改善する方法に関するいくつかの役立つヒントを強調しています。 :focusスタイルをもっと楽しみたいですか？ラリマザもあなたを取り戻しました。

また、 :focus-withinを使用して、フォーカスされた要素の親要素のスタイルを設定したり、 :focus-visibleを使用して、デザインに問題が発生した場合にマウス/ポインターを操作するときにフォーカススタイルを表示しないようにすることもできます。

Hidde de Vriesが指摘しているように、 :focus-visible ：に関するアクセシビリティの懸念を共同で検討することが重要です。フォーカススタイルに依存するすべての人がキーボードを使用し、フォーカススタイルをキーボードのみにするわけではありません。何かがインタラクティブであることを示します（ヒントをくれたJason Webbに感謝します！） 。

最後に、最近のChrome、Edge、およびその他のChromiumベースのブラウザーは、ユーザーがボタンをクリックまたはタップしたときにフォーカスインジケーター（フォーカスリング）の表示を停止したことに注意してください（ヒントを提供してくれたKim Johannesenに感謝します！） 。

アクセス可能なオートコンプリート

マップ、データの視覚化、またはチェックアウトのカントリーセレクターなど、より大きなデータセットを処理する必要があるたびに、オートコンプリートは顧客の入力を大幅に増やすことができます。ただし、入力に役立つのと同様に、スクリーンリーダーのユーザーにもオプションと選択を通知するのに役立つ必要があります。

英国のGovernmentDigitalServiceの背後にあるチームであるGov.ukは、WAI-ARIAのベストプラクティスに従ったJavaScriptコンポーネントである、オープンソースのaccessible-autocomplete（他の多くのものの中でも）を持っています。提案の表示を開始するタイミングを選択でき、メニューを絶対位置のオーバーレイとして表示するか、デフォルトで最初の提案を選択できます。チームは、アクセス可能なオートコンプリートの例と実装が多数含まれているデモページも提供しています。

アクセシブルなボタンとアイコンリンク

視覚的にテキストがなく、アイコン（コンパクトなナビゲーションバーなど）やソーシャルアイコンのみで構成されるリンクやボタンがあることは珍しくありません。しかし、これらの種類のアイコンリンクに完全にアクセスできるようにするにはどうすればよいでしょうか。結局のところ、それは人が考えるほど簡単ではありません。

KittyGiraudelによるアクセス可能なアイコンリンクに関する投稿のコード例。（大プレビュー）

私たちがどのように改善できるかを示すために、KittyGiraudelはこの問題に「AccessibleIconLinks」という記事を捧げました。彼らは、SVGと象徴的なTwitterの鳥で構成されるアイコンリンクを使用してポイントを説明し、アクセス可能にする方法を段階的に示します。視覚的に非表示の説明テキストを使用して、 aria-hiddenを使用してアクセシビリティツリーからSVGマークアップを削除します。 -非表示になり、最後に、 aria-hidden属性を追加することで、 svg要素をInternetExplorerにfocusableできるという事実を修正します。記事の最後に、Kittyはこれらすべてを小さなReactコンポーネントに変換する方法も示しています。

多くのユーザーにとって大きな違いを生む小さなディテール。

アクセシブルなアイコンボタンの作成と包括的非表示では、SaraSoueidanとScottO'Haraがアイコンボタンのすべての細かい複雑さと詳細を調べ、それを機能させるためのいくつかのテクニックを探ります。サラとスコットはいくつかのテクニックを探求し、視覚的に隠されているがスクリーンリーダーがアクセスできるテキストである、視覚的に隠されたテキストにアクセスするための適切なテクニックを使用することを提案しています。これは、 .sr-onlyユーティリティクラス、 hiddenおよびaria-labelledby 、またはaria-labelのみを使用して実行できます。ボタン自体に直接ラベルを付けることができる場合、サラはSVGアイコン自体を使用してボタンのラベルを付けることをお勧めしません。

ただし、一般的に、ユーザーインタラクションに使用する要素はまだかなり混乱しています。リンクを使用するのはいつですか、ボタンを使用するのはいつですか。 Marcy Suttonは、最新のアプリケーションにおけるリンクとボタンの詳細について書いています。リンクを使用して、訪問者は新しいリソースに移動し、現在のコンテキストからそれらを取り除きます。ただし、ボタンはインターフェイスの変更を促します。

ボタンがボタンではない場合：あなたの本当にSmashingMagazineのVadimMakeevによるガイド。（大プレビュー）

Marcyは、シングルページアプリケーションのリンクとボタンの両方の使用例を概説し、ボタンがモーダルウィンドウを開いたり、ポップアップをトリガーしたり、インターフェイスを切り替えたり、メディアコンテンツを再生したりするのに最適な要素であることを示しています。「ボタンがボタンではないのはいつですか？」に関するVadimMakeevの記事も確認できます。

アクセス可能な無効なボタン

長いWebフォームでは、顧客がすべてのデータを正しく提供するまで「続行」ボタンを無効にしておくことが非常に一般的になっています。この動作は、フォームに問題があることを示すものとして機能し、入力を確認せずに完了することはできません。これは、すべての入力フィールドのインライン検証が正常に機能している場合に機能し、グリッチまたはバグがある場合はまったく機能しません。

「DisabledButtonsSuck」では、HampusSethforsが無効なボタンの欠点を強調しています。それらを適切に配置することで、何かが間違っていることを伝えますが、何が間違っているのか、またはそれを修正する方法については実際には説明しません。そのため、顧客がエラーメッセージを見落とした場合、デスクトップでは長い形式であっても、モバイルでは短い形式であっても、メッセージは失われます。多くの点で、ボタンをアクティブに保ち、エラーを伝達する方が効率的です。

それが不可能な場合は、少なくとも「フォームに記入できません。助けてください」というボタンを押して、問題が発生した場合にカスタマーサポートがお客様に連絡できるようにします。 Webフォームのより詳細な復習が必要な場合は、「1から0までのフォームデザイン」で忙しくなります。

Sandrina Pereiraは、CSS-Tricksに関する彼女の記事で、<buttondisabled <button disabled>を使用する一般的な方法でクリックだけでなくフォーカスも妨げられるという問題を調査しています。これは無害に見えるかもしれませんが、スクリーンリーダーのユーザーに混乱を引き起こします。彼女の提案：無効になっているものをaria-disabled disabled交換すると、ボタンにフォーカスを合わせてもアクセスできるため、エクスペリエンスがより楽しくなり、無効とマークされていてもツールチップがトリガーされる可能性があります。

アクセシブルカード

カードには多くの利点があります。これらはモバイルでうまく機能し、大きなクリック領域を提供し、水平方向と垂直方向の両方に積み重ねることができるという事実により、多くのレイアウト決定が容易になります。ただし、従うべきアクセシビリティ標準、 <card>要素、またはARIAデザインパターンはありません。代わりに、遭遇する可能性のある潜在的なアクセシビリティの障壁は、カードの目的と内容によって異なります。包括的なコンポーネントのコレクションで、Heydon Pickeringは、単純なカードコンポーネントのいくつかの順列と、健全なHTML構造と人間工学的相互作用のバランスを保つ方法を調べています。

包括的カードコンポーネント — カードの目的に応じて、注意すべきさまざまなアクセシビリティの障壁があります。（大プレビュー）

Adrian Roselliはまた、アクセシビリティの主な落とし穴に簡単に変わる可能性のあるカードの側面、つまり大きなクリック領域に取り組む素晴らしい記事を書きました。ユーザーがスクリーンリーダーを使用してナビゲートする場合、非常に複雑なコントロールを作成できます。音声ユーザーの場合、召喚状を選択するために何を言うか混乱する可能性があります。エイドリアンは、少しの計画でこの問題を解決する方法を示しています。

アクセス可能なカードコンポーネントのもう1つの詳細は、Nomensaのチームによるものです。ブログ投稿では、カードとブロックリンクに関する一般的な問題を確認し、コンテンツを並べ替えて改善することで、カードをよりアクセスしやすくするための貴重なヒントを共有しています。たとえば、セマンティクス。

アクセス可能なカルーセルとコンテンツスライダー

アクセシブルなカルーセルは、撞着語のように聞こえます—機能を提供するスクリプトはたくさんありますが、アクセシブルなスクリプトはごくわずかです。もちろん、アクセス可能な範囲スライダーもありますが、カルーセルは少し異なるコンポーネントです。 Alison Waldenが「カルーセルを使用する必要がある場合は、アクセスできるようにする」という記事で気づいたように、目の見える人はカルーセルを使用する必要はありませんが、キーボードユーザーはカルーセル全体をナビゲートする必要があります。少なくとも、非表示の「スキップ」リンクがキーボードフォーカスに表示される可能性があります。また、人がすべてのパネルセットをタブで移動したら、カルーセルに続く次のインタラクティブ要素にフォーカスを移動する必要があります。

ブラウズモードのスクリーンリーダーユーザーのスライダーへのパスと、あるアイテムから次のアイテムへのパスを表示します（大プレビュー）

Heydon Pickeringは、リストマークアップを使用してスライドをグループ化し、前と次のボタン、スナップポイントを含め、フォーカスから削除された非表示のリンクされたアイテムを使用することを提案しています。この記事では、IntersectionObserverを使用するコードサンプルも提供されているため、ポリフィルが必要になる場合があります。

ジャンプした後もっと！以下を読み続けてください↓

アクセス可能な閉じるボタン

「閉じる」ボタンは、モーダル、広告、確認メッセージ、Cookieプロンプト、およびインターフェイスに表示されるオーバーレイなど、いたるところにあります。残念ながら、機能は多くの場合マウスユーザーに制限されており、スクリーンリーダーユーザーとキーボードユーザーは除外されています。修正できます。

「アクセス可能な閉じるボタン」では、Manuel Matuzovicが、アクセスできない閉じるボタンの11の例とパターン、およびかなりうまく機能する閉じるボタンの5つの例を強調して詳細に説明します。この問題を解決する最も簡単な方法は、ボタンにテキストと視覚的にアクセス可能なアイコンのみを表示し、スクリーンリーダーによる説明がアイコンの説明によって汚染されないようにすることです。 Manuelは、すぐに作業に適用できる5つの閉じるボタンのコード例も提供しています。

アクセス可能なチェックボックスとラジオボタン

古き良き問題：チェックボックスとラジオボタンのスタイルを設定して、ほとんどのブラウザで少なくとも同じように見えるようにすると同時に、アクセスしやすい状態を維持するにはどうすればよいでしょうか。彼女の記事の中で、Sara Soueidanは、望ましい結果を達成するために心に留めておくべきいくつかのテクニックをカバーしています。

Saraは、要素を非表示にするためのさまざまな手法、各要素がコンテンツのアクセシビリティにどのように影響するか、視覚的に非表示にする方法について説明しているため、よりスタイルの良い代替手段であるSVGに置き換えることができます。

インタラクティブな要素を非表示にするときは、スクリーンリーダーでアクセスできるようにする非表示の手法を選択し、視覚的に置き換えられる要素の上に配置して、タッチでナビゲートするユーザーが期待する場所で要素を見つけられるようにする必要があります。そしてそれを透明にします。 Saraは、すぐに使用できるライブデモと、さらに読むための記事への役立つリファレンスも提供しています。

アクセシブルカラーシステム

色のコントラストを正しくすることは、視覚障害のある人だけでなく、暗い環境や古い画面を使用しているときに他のすべての人が簡単に製品を使用できるようにするための重要な部分です。ただし、アクセシブルなカラーシステムを自分で作成しようとしたことがある場合は、これが非常に難しいことをご存知でしょう。

Stripeのチームは最近、この課題に取り組み、既存のカラーシステムを再設計することを決定しました。すぐに使用できるメリット：アクセシビリティガイドラインに合格し、ユーザーが簡単に区別できる明確で鮮やかな色相を使用し、色が他の色よりも優先されることなく、一貫した視覚的重みを持ちます。彼らのアプローチについてもっと知りたい場合は、アクセシブルなカラーシステムに関する彼らのブログ投稿から貴重な洞察を得ることができます。

アクセシブルなカラーパレット

色の完璧な色合いや色合いを見つけることは、好みだけでなく、アクセシビリティの問題でもあります。結局のところ、色のコントラストが不足している場合、最悪の場合、製品は視力障害のある人にとっても使用できなくなる可能性があります。 WCAG 2.0レベルAAには、通常のテキストには少なくとも4.5：1、大きなテキストには3：1のコントラスト比が必要です。また、WCAG 2.1には、グラフィックスおよびUIコンポーネント（フォーム入力など）に少なくとも3：1のコントラスト比が必要です。ボーダー）。 AAAでは、通常のテキストの場合は少なくとも7：1、大きなテキストの場合は4.5：1のコントラスト比が必要です。潜在的な落とし穴を事前に検出するのに役立つ非常に詳細なコントラストチェッカーは、Gianluca Gini：Geenesから提供されています。

このツールを使用すると、色相範囲と彩度を調整し、3つの選択可能なUIモックアップの1つにカラーパレットを適用できます。適用すると、さまざまな種類の視覚障害を引き起こして、影響を受けた人々がどのように色を見るかを確認し、最後に、パレットに最適な色調について情報に基づいた決定を下すことができます。色をすぐに使用するには、コードをコピーして貼り付けるか、Sketchにエクスポートします。 DevToolsでビジョンの欠陥をエミュレートすることもできます。

視覚障害を理解する

おそらく、1型2色覚異常、先天赤緑異常、または緑内障について聞いたことがあるでしょう。しかし、このような視覚障害を持つ人々は、実際にあなたの色の組み合わせをどのように見ていますか？ CoreyGinnivanのWhoCanUseツールは、それをシミュレートします。

誰が使えるか — 誰が使用できるかは、あなたの色の選択が視覚障害を持つ人々にどのように影響するかをシミュレートします。（大プレビュー）

背景とテキストの色を入力すると、ツールがコントラスト比とWCAGグレーディングを計算します。これらのかなり抽象的な数字を人間化するために、 Who Can Useは、さまざまな視覚タイプのリスト、それらの影響を受ける人の数、そしてもちろん、各タイプの色の組み合わせのシミュレーションも表示します。色の効果をよりよく理解するための素晴らしい小さなヘルパー。

アクセシブルコミック

Webで少し複雑な形状やレイアウトを使用すると、前景または背景の画像として保存し、さまざまな画像を大小の画面に表示する方がはるかに簡単に見える場合があります。これは、複雑なチャートやグラフだけでなく、泡を話す古き良き漫画にも当てはまりますが、経験を完全に再想像できるとしたらどうでしょうか。

Comica11yは、包括的なオンラインコミック読書体験を実現することを目的としたPaulSpencerによる実験です。クローズドキャプション、パネル間を移動するための適切なフォーカス管理、高コントラストモード、SVG色覚異常フィルター、プログラムによるバブル、選択可能で翻訳可能なテキスト、LTRとRTLのサポート、さらには調整可能なフォントサイズ？ UIの課題に取り組み、Webを使用してエクスペリエンスを大幅に向上させることができる範囲を示す素晴らしいイニシアチブ。

アクセス可能なコンポーネントライブラリ

私たちが作成するコンポーネントライブラリの多くは、すべての通常の容疑者（アコーディオン、テーブル、カルーセル、ドロップダウン、タイポグラフィ、色、ボックスシャドウ）をカバーしようとしていますが、AdamSilverのNoStyleDesignSystemに焦点を当てています。主にアクセシビリティとWebフォームに関するものです。

フォームデザインパターンに関する彼の本のために作成され、使用されているシステムとして、Adamのライブラリは、オートコンプリート、チェックボックス、パスワードの表示からラジオ、選択ボックス、ステッパーまで、あらゆるものにアクセス可能なコンポーネントのセットを提供します。それらのほとんどは、クリーンでアクセス可能なマークアップを備えた最小限のCSSスタイリングを備えています。

また、もう少し高度なコンポーネントが必要な場合は、Heydon Pickeringの包括的コンポーネント（上記の例をいくつか挙げました）が戻ってきました。アクセス可能なカード、データテーブル、通知、スライダー、タブ付きインターフェイス、ツールチップ、メニュー、トグルに関する包括的なチュートリアルがあります。

アクセス可能なCookie同意プロンプト

オーバーレイとポップアップは常に問題があります。ただし、特にスクリーンリーダーのユーザーの場合、設定を設定したり、サイトでのCookieの使用を確認したりするために、これらのプロンプトを処理するのが非常に難しい場合があります。「スクリーンリーダーとCookieの同意」に関する15分間の講演で、Leonie Watsonは、コンプライアンスポップアップがアクセシビリティに対して持つ貧弱な体験について詳しく説明します。ユーザーが同意プロンプトを気付かずにすり抜ける場合もあれば、プロンプトを受け入れることができず、サイトをまったく使用できない場合もあります。

では、どうすればそれらを改善できるでしょうか。クッキーのバナーとアクセシビリティの中で、シェリ・バーン・ハーバーは、クッキーのプロンプトが通常持つ一般的な問題を強調しています：トラップをフォーカスするように視覚的にどのように見えるか、タブ順序での外観、受け入れのタイプ、同意開示の代替形式。 Quentin Bellangerは、Cookie同意モーダルの基本的なコード例とそれに伴うチュートリアルを提供します。無料のオープンソースソリューションもあります：Osano Cookie Consentとcookie-consent-boxですが、アクセシビリティの作業が必要になる場合があります。

アクセス可能な現在のページのナビゲーション状態

色は意味を伝える効果的な方法ですが、視力の低下や色覚障害のある人のために、2番目の視覚的指標を用意することも常に良い考えです。たとえば、アイコン。 Callum Hartは、ユーザーが現在表示しているページを示すために、色とアイコンの組み合わせに依存しています。彼のブログ投稿「アクセス可能な現在のページのナビゲーション状態」で、彼はこの設計上の決定の背後にある考慮事項についての貴重な洞察を共有しています。

アクセス可能なトグル — アイコンは、現在のページを反映する追加の視覚的インジケータを提供します。（大プレビュー）

HTMLでSVGアイコンをインライン化し、 aria-hiddenを使用して支援技術から非表示にすることから、ピクセルの代わりにemsを使用すること、およびaria-current属性を使用してスクリーンリーダーユーザーに追加のコンテキストを伝えることまで、この投稿では、真にアクセス可能なナビゲーション状態に対応します。

Web上のダークモードの完全ガイド

ダークモードは、Apple、Windows、およびGoogleがオペレーティングシステムに実装することで、すぐにユーザーの好みになりつつあります。しかし、Webのダークモードはどうですか？ Adhuhamは、ダークモードの包括的なガイドを作成しました。このガイドでは、ウェブ上にダークモードの設計を実装するためのさまざまなオプションとアプローチについて詳しく説明しています。

まず、ガイドでは、ダークモードの実装に伴う技術的な考慮事項について説明し、テーマを切り替えるためのさまざまなアプローチと、サイト全体およびその後のアクセスで一貫して適用されるようにユーザーの設定を保存する方法について説明します。 color-schemeメタタグを使用してユーザーエージェントスタイルを処理するためのヒントは、潜在的なFOIT状況を回避するのに役立ちます。

もちろん、画像、シャドウ、タイポグラフィ、アイコン、および色をダークモードに対応させるための貴重なヒントを使用して、設計上の考慮事項にも取り組んでいます。その間：モードで意図せずにハイコントラストを壊さないようにするために、Windowsハイコントラストモードのスタイリングを見てください（ヒント、Courtney Heitmanに感謝します！ ）。

アクセス可能なデータチャート

データの視覚化は、情報を目立たせるための優れた方法です。ただし、アクセシビリティに関する独自の課題もあります。 Sara SoueidanがSuperFriendlyと協力して、Khan Academyの年次報告書用のアクセス可能なマイクロサイトを作成したとき、訪問者がサイトをどのように探索するかに関係なく、データの表示方法と実装方法に可能な限りアクセスできるようにしたいと考えました。彼女の解決策：SVG。

米国の公立学校の生徒を収入レベル別に示したカーンアカデミーの年次報告書のグラフ。（大プレビュー）

アクセス可能なデータチャートのケーススタディで、Saraは、SVGチャートと視覚化をアクセス可能にするときに考慮する必要があるすべてを要約しました。これは、適切な埋め込み手法を選択する最も重要なステップから始まります。また、ARIAロールを使用してSVGチャートにアクセスできるようにすることを避ける必要がある理由と、Saraがそれらを埋め込むために<figure>を選択しなかった理由についても説明します。素晴らしいリファレンスガイド。さらに、特にグラフでは、よりアクセスしやすいテキストラベルを使用することもできます。また、Saraはそれらを別の記事で取り上げています。

アクセス可能なデータの視覚化

データの視覚化には、多くの場合、ユーザーが行動しなければならない重要な情報が含まれています。代わりに短い文章で多数を使用できる場合もありますが、視覚化は開発と大量の情報をより速く理解するのに役立ちます。しかし、それは情報が理解しやすいものでなければならないことを意味し、それは特に色の選択、情報の表示方法、ラベル、凡例、パターンや形を指します。データ視覚化におけるアクセシビリティに関する一連の記事の中で、Sarah L. Fossheimは、アクセシブルなデータ視覚化を設計する際に留意すべき例、すべきこと、すべきでないこととともに、トピックに関する有用なガイドラインとリソースを強調しています。

色だけが視覚的な手がかりになるべきではありません。グラフでは色だけでなくパターンも使用することをお勧めします — 色だけが視覚的な手がかりになるべきではありません。チャートでは、色だけでなくパターンも使用することをお勧めします。経由：キーン（大プレビュー）

サラは、データを説明するために色に依存せず、一般的に明るい色と低コントラストの色を避けることを提案しています。色に加えてパターンや形状を使用すると便利です。明確な言語、ラベル、凡例は、データの視覚化を明確に説明するのに役立ちます。すべての記事には、さらに読むための例とリソースがたくさん詰まっています。また、チェックする価値があります：米国大統領選挙データの視覚化に関するサラのレビュー（ヒントをくれたStephanie Ecklesに感謝します！ ）。

アクセス可能な日付ピッカー

そこには数十の日付ピッカーライブラリがありますが、ブラウザー間で機能し、依存関係が大きくなく、適度に適切に記述され、すべての主要なアクセシビリティ要件を満たす信頼できる主力製品があることは常に素晴らしいことです。

デュエットデイトピッカーはそのようなものです。これは、アクセス可能なWCAG 2.1準拠の日付ピッカーであり、JavaScriptフレームワーク全体に実装して使用することも、フレームワークをまったく使用しないこともできます。最小許容日と最大許容日を設定できる機能が組み込まれており、重量は約10kb最小化およびGzip圧縮されています（これにはすべてのスタイルとアイコンが含まれます）。

別の方法が必要な場合は、AirbnbがリリースしたライブラリであるReact Datesをチェックしてください。このライブラリは、国際化に最適化されていると同時に、アクセス可能でモバイルフレンドリーです。

水平分割器のスタイリング

<hr>要素は通常非常に退屈です。視覚的な区切りを提供し、コンテンツを分割するプレーンな水平線。しかし、CSSとSVGを使用してスタイルを設定し、コンテンツとデザインに素敵なパーソナルタッチを与えることができることをご存知ですか？

ワイヤー上の鳥のようなスタイルの水平線。 — `<hr>`ワイヤー上の鳥のようなスタイル。（大プレビュー）

Sara Soueidanはまさにそれを行いました。彼女の個人サイトの<hr>は退屈な線として表示されません。代わりに、鳥がワイヤーの上に座っているのが見えます。 <hr>をもっと楽しくするために、SaraはCSSとSVGの魔法を使って水平線をどのようにスタイリングしたかを要約しました。彼女はまた、セマンティックでアクセス可能なまま、さまざまなコンテキストに適応できるように、それらをさらに改善する方法を検討しています。ちょっとしたディテール。

アクセス可能なクロスブラウザフォームスタイル

カスタムチェックボックスとラジオボタンの非表示とスタイル設定に苦労したことがありますか？カスタムセレクトスタイルはどうですか？または、おそらくアクセス可能なドロップダウンナビゲーションメニューですか？私たちは常に同じコンポーネントを構築および再構築する傾向があるので、それらを一度だけ正しく取得しましょう。

SarahHigleyの「<select>yourpoison」は、 <select>要素のスタイリングのすべての課題と複雑さ、編集可能な複数選択のバリエーション、それらの比較の使いやすさ（データ付き！）、および実用的な推奨事項についての包括的な2部構成の詳細です。それを正しくする方法の。

Stephanie Ecklesの古いCSS問題に対する最新のCSSソリューションは、多くの課題を解決するための便利な最新の手法を数多く取り上げていますが、彼女のシリーズの一部の記事は、CSSカスタムチェックボックス、スタイル付きラジオボタン、選択スタイル、入力、テキスト領域などのフォームに特化しています。

彼女のブログで、Sara Soueidanは、チェックボックスとラジオボタンを包括的に非表示にしてスタイルを設定する方法を詳しく説明しています。ボーナス：Adrian Roselliのコード例は、設計が不十分なトグルに関する追加の洞察を提供します。すぐに使用できる素晴らしいリソースと、フォームにアクセスできるスタイルを設定します。

責任を持ってコンテンツを隠す

コンテンツを責任を持って非表示にして、非表示にし、スクリーンリーダーからアクセスできるようにするにはどうすればよいですか？ Kitty Giraudelは、HTMLとCSSのどちらを使用するか、そしていつ使用するかなど、何かを隠すさまざまな方法を要約しました。

キティが示唆しているように、ビジュアルコンテンツとアクセシビリティレイヤーに公開されている基になるコンテンツとの間にあまりにも多くの不一致がないようにすることができます。それらが同期しているほど、優れています。 Kittyは、どの手法をいつ使用するかを評価するのに役立つ3つの異なるシナリオを定義しています。視覚的にもアクセシビリティツリーからも何かを非表示にする必要がある場合（ウィジェットの表示/非表示、オフスクリーンナビゲーション、閉じたダイアログなど）、 display: noneを使用します。またはhiddenのHTML属性。アクセシビリティツリーから何かを非表示にする必要があるが、それを表示したままにする必要がある場合は、 aria-hidden="true"を使用します（有効なケースは、意味のない視覚的なコンテンツ、アイコンです）。そして、最後に重要なことですが、何かを非表示にしてアクセス可能な状態に保ちたい場合は、視覚的に非表示のCSS宣言グループを使用します（たとえば、アイコンボタンやリンクなど、より多くのコンテキストを提供する補完的なコンテンツの場合）。素晴らしい概要。

アクセシブルな脚注と補足

本質的に、脚注はジャンプリンクにすぎません。ドキュメントの下部またはサイドバーに配置されているか、インラインで表示されるソースの説明へのリンクです。ただし、脚注はジャンプリンクであるため、スクリーンリーダーのユーザーが、リンクが脚注への参照である場合を確実に理解する必要があります。これは、 aria-describedby属性を使用して行うことができます。すべてのリンクのカウンターは、CSSカウンターを介して実装されます。 :targetを使用して、読者がジャンプした行を強調表示し、コンテンツ内の実際の脚注の場所に戻るバックリンクを提供します。

Kitty Giraudelは、アクセシブルな脚注を作成する方法を詳しく説明しています。また、Reactでアクセシブルな脚注を作成する方法を確認し、react-a11y-footnotesを使用してReact with Eleventyで脚注を作成することもできます（ヒントをくれたKitty Giraudelに感謝します！） 。

アクセス可能な入力

2019年、WebAIMは上位100万のWebサイトのアクセシビリティを分析し、衝撃的な結論を出しました。エラーのないページの割合は1％未満と推定されました。私たちのサイトを包括的で支援技術に依存する人々が利用できるようにするには、セマンティックHTMLの基本を正しく理解する必要があります。小規模から始め、共有し、協力するという信条を持つOscar Braunertの包括的入力に関する記事は、そうするための優れた出発点です。

この記事では、WAI、ARIA、およびWCAGの基本から始めて、入力をよりアクセシブルにする方法について説明します。ヒントは、ユーザーインターフェイスを変更せずに実装でき、オスカーは次のように述べています。誰も気付かないでしょう。一部のユーザーを除きます。そして、彼らはそれをあなたに感謝するでしょう。」

パーフェクトリンク

リンクはリンクですよね？リンクには、クリック可能な単語や画像だけではありません。彼女の記事「完璧なリンク」で、Rian Rietveldは、すべてのデバイスのすべての人に役立つリンクを作成、設計、およびコーディングする方法を調べます。

Rian Rietveldが、リンクを誰にとってもアクセス可能で意味のあるものにする方法を説明しています。（大プレビュー）

Rianは、リンクを新しいウィンドウまたは新しいタブで開く必要があるかどうか、リンクテキストを理解できるようにする方法、メールアドレス、電話番号、またはファイルへのリンクを処理する方法、画像をに埋め込むときに考慮する必要があることについて説明します。リンク、下線を引くタイミング、ホバーとフォーカスのスタイル、およびセマンティックの問題と内部リンクの処理方法。トピックを360度見ます。

アクセス可能なアプリ全体のキーボードナビゲーション

キーボードナビゲーションのよく考えられた概念は、すべての人にメリットをもたらします。これにより、マウスを快適に使用できないユーザーが可能になり、スクリーンリーダーのユーザーがアプリケーションを操作できるようになり、パワーユーザーができるだけ効率的に作業できるようになります。通常、キーボードサポートは特定のショートカットに制限されていますが、Discordのチームは、アプリケーションをさらに一歩進めて、キーボードサポートをすべてに拡張することを決定しました。

ケーススタディ「Discordがアプリ全体のキーボードナビゲーションをどのように実装したか」では、彼らがタスクにどのように取り組んだか、そしてもちろん、その過程で直面した課題についての貴重な洞察を共有しています。特に難しいことが判明しました。ページのどこにフォーカスがあるかを一貫して示すにはどうすればよいですか。フォーカスリングの既存のソリューションが機能しなかったため、チームは独自のソリューションをゼロから構築し、コードをオープンソースにする必要がありました。あなたが同様の課題に直面しているなら、これはあなたのためです。

アクセス可能なタップ/クリックメニュー

ホバー時に開くメガドロップダウンを設計することはまだ良い考えですか？おそらくそうではありません。ホバーメニューには、一貫性がなく、混乱を招き、もちろんモバイルデバイス用の代替ソリューションが必要なため、使いやすさとアクセシビリティの問題がたくさんあります。実際、Mark Root-Wileyは、明確でアクセス可能なクリックメニューを優先して、ホバーメニューを削除する時期が来ていることを示唆しています。

マークは彼の記事で、アクセス可能なクリックメニューを作成する方法の詳細と、彼の研究からの有用なポインタと参照について説明しています。アイデアは、サブメニューを表示するためにli:hover > ulおよびli:focus-within > ulを使用するCSSのみのホバーメニューとしてメニューの作成を開始することです。次に、JavaScriptを使用して<button>要素を作成し、 aria属性を設定し、イベントハンドラーを追加します。最終結果は、CodePenのコード例およびGitHubリポジトリとして利用できます。これは、メニューの開始点としても適しています。

アクセス可能なメディアスクローラーコンポーネント

テレビ、電話、デスクトップで同様に機能するレスポンシブメディアスクローラーコンポーネントをどのように作成しますか？ Adam Argyleが、プロセスを段階的に説明します。

Adam Argyleのレスポンシブメディアスクローラーコンポーネントは、スムーズなエクスペリエンスを提供します。（大プレビュー）

メディアまたは製品のサムネイルをホストするように設計されたスクローラーコンポーネントは、アクセス可能なマークアップを備えた<ul>に基づいて構築されています。 CSSは、控えめなリストをスムーズなスクロールエクスペリエンスに変換し、画像を表示してグリッドにスナップします。いくつかの精巧さを追加するために、JavaScriptはロービングインデックスの相互作用を促進し、キーボードユーザーが多数のアイテムのトラバースをスキップできるようにします。最後に重要なこととして、実験的なprefers-reduced-dataメディアクエリは、必要に応じてメディアスクローラーを軽量エクスペリエンスに変えます。頭がいい！

アクセシブルなモーダル

顧客の入力を確認したり、ギャラリーに2枚の写真を表示したり、ユーザーの好みを確認したりするために、ページに単純なモーダルまたはオーバーレイを配置する場合があります。これらすべての場合において、アクセシブルなモーダルを構築することは、かなりの冒険になり、フォーカストラップとしても知られています。

Eric Baileyが詳細に説明しているように、最初と最後のフォーカス可能なアイテムを含む、トラップされたコンテンツの境界を特定し、その中にないものをすべて削除し、トラップされたコンテンツにフォーカスを移動し、エスケープするイベントをリッスンする必要があります境界、前の状態を復元し、トラップされたコンテンツをトリガーしたインタラクティブ要素にフォーカスを戻します。

アクセシブルなモーダルは簡単に作成できません。エリックベイリーはそれがどのように機能するかを詳細に説明します。（大プレビュー）

理想的には、HTMLのdialog要素と同じくらい単純なものを使用しますが、残念ながら、それは大きなアクセシビリティの問題を抱えています。 Shadow DOMを使用すると、フォーカスの管理も簡単ではありません。 inert属性を使用して、インタラクティブな要素を検出してフォーカスする機能を削除してから復元できます。古いブラウザの場合、GoogleChromeおよびWICGのinertポリフィルを使用できます。

Scott O'Haraのaccessible-modal-windowは、信頼性が高く完全にアクセス可能なスクリプトです。
Kitty Giraudelはまもなくa11y-dialogをリリースします。次に、フォーカスをトラップして復元し、 aria–*属性を切り替え、オーバーレイクリックとエスケープでダイアログを閉じる軽量（1.6 KB）スクリプトです。 このバージョンを以前のバージョン（6.1.0）と混同しないことが重要です。これは、実装サポートがまだ不足している<dialog>に依存しており、アクセシビリティの問題が長引くためです。
依存関係のない、シンプルでアクセス可能なオープンソースの画像ライトボックスであるParvusを調べることができます。典型的なシナリオでは、画像の拡大版にリンクされた画像があります。 Parvusを使用すると、画像をラップするリンクにクラス.lightboxを追加するだけで十分であり、スクリプトが他のすべてを自動的に実行します。

アクセス可能なパスワードフィールド

「パスワードの表示」とパスワードのヒントにより、フォームフィールドがより使いやすくなります。これらは、ユーザーが自分のパスワードを間違って入力したかどうか、および新しいパスワードを作成するときにどのパターンが受け入れられるかを理解するのに役立ちます。しかし、結局のところ、これらのことに関しては、アクセシビリティが不足していることがよくあります。

状況を改善するために、Nicolas Steenhoutは、パスワードのアクセシビリティの表示/非表示と、パスワードのヒントがすべての人に役立つことを確認する方法を詳しく調べます。 switchとaria-liveおよびaria-pressed pressedの役割を持つ表示/非表示ボタンの拡張からオートコンプリートのサポートまで、Nicolasは、この点でWebをもう少しアクセスしやすくするために知っておく必要のあるすべてを要約しました。

設定でユーザー設定をサポート`prefers-reduced-*`

すべてのユーザーが同じであるとは限りません。アニメーションが好きなユーザーもいれば、動きに関する医学的な問題を抱えているユーザーもいます。 prefers-reduced-motionメディアクエリを使用すると、アニメーションのオンとオフを切り替えることができますが、ユーザーの好みに応じてアニメーションを管理するためのソリューションはさらに多くあります。 Elijah Manorは、彼のブログ投稿で、@ media、matchMedia、CSS、SVG SMIL、JavaScriptアニメーションに対応するカスタムReactフックなどのさまざまな手法に取り組んでいます。

CSSアニメーションとJavaScriptアニメーションを切り替えるには、prefers-reduced-motionメディアクエリを使用します — 動きを抑えたメディアクエリを使用して、CSSアニメーションとJavaScriptアニメーションを切り替えます（大プレビュー）

コンテンツをすべての人がアクセスできるようにすることに関しては、知っておく価値のあるもう1つのprefers-reduced-*メディアクエリがあります—まだブラウザでサポートされていませんが（ただし、PolypaneおよびChromiumブラウザでエミュレートできます）： prefers-reduced-data 。これは、ユーザーが使用するデータをできるだけ少なくしたい場合、たとえば接続が遅い場合やデータが制限されている場合を示します。

Tatiana Macは、アニメーションにモーションを優先しないアプローチを採用することについて非常に徹底的な記事を書き、すべてのアニメーション固有のスタイルをアニメーション固有のスタイルシートに配置し、訪問者が「モーションを減らす」を指定していない場合にのみ提供することを提案しています。
Kitty Giraudelは、バンキングUIの例とコード例で、モーションを減らしたモードを実装するためのガイドラインを提供しています。
Polypaneチームは、今日すでにサイトを将来にわたって利用できるようにするために、メディアクエリについて知っておくべきことを要約しました。

アクセス可能なスケルトン

スケルトンパターンは、スクリーンリーダーに自分自身を提示する意味のある方法を欠いている傾向があります。ウィジェットの読み込み時にaria-busy="true"を使用することがよくありますが、実際に属性を尊重するスクリーンリーダーはごくわずかです。では、どうすればもっとうまくやれるでしょうか？

よりアクセスしやすいスケルトン — スケルトンにアクセスできるようにします。（大プレビュー）

Adrian Roselliが示唆しているように、CSSを使用して、 aria-busy="true"ノードを検索し、それをdisplay: noneに設定して、スクリーンリーダーと非スクリーンリーダーのユーザーに同じ効果をもたらすことができます。彼の記事「よりアクセスしやすいスケルトン」では、彼はプロセスを段階的に説明しています。デモは、JAWS、NVDA、VoiceOver、およびTalkBackの現在のリリースのブラウザー間で機能します。

アクセス可能な「スキップ」リンク

特にナビゲーションの多いページでは、セクション間またはページ内を移動することはイライラし、煩わしい場合があります。そこで、「スキップ」リンクが非常に役立ちます。残念ながら、「スキップ」リンクが実装されているのにdisplay: noneであるため、誰も（スクリーンリーダーユーザーやキーボードユーザーを含む）利用できません。

「コンテンツをスキップする」リンクを作成する方法では、Paul Ryanが、アクセス可能なコンテンツをスキップするリンクを実装する方法についてのステップバイステップのチュートリアルを提供しています。基本的に、CSS変換を使用してスキップリンクを画面からプッシュしますが、 :focusで画面に戻します。記事へのコメントで、Eric Baileyは、インタラクティブなアイテムがたくさん含まれているコンテンツのセクション、またはナビゲートするのが難しいアイテム（目次やiframeなど）の前にスキップリンクを提供できることにも気づきました。

アクセス可能なSVG

SVGについて話す：今日のSVGでできることは、昨年の基本的な形をはるかに超えています。 SVGアイコンを説明するだけでなく、それらのスタイルとアニメーションも作成できます。真の包括性がパターンを超えている場合—アクセシブルなSVGを設計および開発する際に、他にどのような要素を考慮する必要がありますか？

それはまさに、Carie FisherがAccessibleSVGs：InclusivenessBeyondPatternsに関する彼女の記事で答えている質問です。この記事では、Carieが、SVGの色とコントラスト、明暗モード、SVGアニメーション、動きの低減、アクセシビリティに焦点を当てた多くのツールについて詳しく見ていきます。また、記事にはデモとコード例があり、詳細な説明と詳細な説明とポインタがあります。

また、SVGに関連するだけでなく、アクセシブルなコンポーネントの複雑な世界をさらに深く掘り下げたい場合は、アクセシブルなコードパターンに関するCarieの記事を公開しました。

アクセス可能なタブ

インターフェイスはタブパネルを使用している可能性がありますが、キーボードユーザーとスクリーンリーダーユーザーがこれらのタブのコンテンツにアクセスできるようにするには、ビジュアルデザインとARIAセマンティクスを非常に注意深く慎重に説明する必要があります。タブ付きインターフェースでは、Heydon Pickeringが詳細に説明し、キーボードの動作とフォーカス管理を尊重するための適切なソリューションを見つけようとしています。彼は、セクションをタブパネルに段階的に拡張することを提案しています（コード例） （ヒントを提供してくれたDaniela Kubeschに感謝します！）。

ユーザーが矢印キーで新しいタブを選択する方法、またはTabキーを押してタブパネルに入り、リンクにフォーカスする方法を示します（大きなプレビュー）

Adam Silverが指摘しているように、あまり精通していないスクリーンリーダーのユーザーは、矢印キーを使用してタブを切り替えることを知らない場合があります。キーボードを介したタブの動作方法を変更するために開発者の介入をほとんど必要とせずに、通常のタブシーケンスですべてのタブをフォーカス可能にするという議論があります。

または、TabPanelWidgetは、タブ用のレスポンシブでアクセス可能なソリューションです。これは、単純な古いセマンティックHTMLに依存しており、タブが完全に収まらない場合は常にアコーディオンに変わります（ResizeObserverに感謝しますが、まだサポートしていないブラウザー用のResizeObserverがあります）。

このスクリプトは、セマンティックでアクセス可能なソリューションであるだけでなく、Web用のタブパネルおよびアコーディオンウィジェットを作成するのに役立つレスポンシブで用途の広いソリューションでもあります。キーボードに対応しており、バニラJSライブラリとして（またはVue、React、Angularのウィジェットとして）利用できます。

アクセシブルなテーブル

テーブルに関連するアクセシビリティの問題はたくさんありますが、最大の課題は、重要な情報を省略せずに、視覚的な表現をスクリーンリーダーで意味のある形で読み上げる線形シリーズに変換することです。幸いなことに、Adrian Roselliは、アクセシブルなテーブルの課題と解決策を探求することに多くの時間を費やしてきました。

アクセシブルなテーブルに関する彼の投稿で、エイドリアンは、キーボードのみのユーザーがコンテナにタブで移動できるように、テーブルを<div>でrole="region" 、 aria-labelledby 、 tabindex="0"でラップすることを提案しています。テーブルは、スクリーンリーダーに適切にアナウンスされるように、テーブル内でフォーカスと<caption>を受け取ります。 Adrianは、レスポンシブテーブル、および展開可能な行、並べ替え可能なテーブル、固定テーブルヘッダーを備えたテーブルのコード例も提供しています。

スクリーンリーダーがデータテーブルをナビゲートする方法

スクリーンリーダーを使用してテーブルをナビゲートしようとしたことがありますか？そうでない場合は、スクリーンリーダーがデータテーブルをナビゲートする方法に関するLeonieWatsonの記事を確認する必要があります。貴重な洞察を共有し、誰でも使用できるフラストレーションのないテーブルを作成するために重要なことを示します。

投稿では、LeonieはNVDAを使用してテーブルに移動し、そのコンテンツをナビゲートし、特定の情報を検索します。適切なHTML要素（またはARIAロール）は、テーブルの特性について彼女に通知し、テーブルのコンテンツをナビゲートするためのキーボードコマンドへのアクセスを提供します。

興味深いポイント：キーボードフォーカスとスクリーンリーダーフォーカスは同じものではありません。聞いたことがあるかもしれませんが、ナビゲーションを支援するために、テーブルの各セルをキーボードでフォーカス可能にする必要はありません。セル内のコンテンツが非対話型である場合、キーボードユーザーが意図したよりもテーブルをナビゲートするのに非常に苦労する可能性があります。スクリーンリーダーユーザーがWebにアクセスする方法（73分）で、Leonieと一緒にSmashingTVビデオを視聴することもできます。

アクセス可能なトグルスイッチ

フォームがお客様にバイナリ選択を提供するときはいつでも（オン/オフ、ダーク/ライトモードなど）、トグルスイッチを使用できます。スイッチはいくつかの目的を果たす必要があります。現在の選択を明確に説明する必要があり（そしてそれはそれほど頻繁ではないことは明らかです！）、2つのオプションがあることを説明する必要があり、顧客がそれらを切り替える方法を理解します。 Sara Soueidanがトグルスイッチの作成方法を検討していたとき、彼女はもちろん、アクセス可能なトグルスイッチの作成方法を調査するのにかなりの時間を費やしました。

Mediumアプリのテーマカスタマイザーは、ライトモードからダークモードに、またはその逆に切り替えるためのシンプルなスイッチを含むシンプルなポップアップパネルです。サラの記事から。（大プレビュー）

Saraのソリューションは、それぞれ独自のラベルが付いた2つのラジオボタンを使用し、キーボードからアクセスできる2つの個別のオプションとして支援技術に発表されており、機能するための追加のARIAまたはJS要件はありません。結果はテーマ切り替えトグルコードの例であり、ScottO'Haraのコード例も見ることができます。

サラのラジオボタントグルスイッチには2つのラベルがあるため、アクセスできることに注意してください。したがって、トグルスイッチに2つのラベルがない場合、これは使用するパターンではありません。トグルスイッチのマークアップパターンは、Scottのリポジトリにあります。（ヒントをくれたScott O'Haraに感謝します！ ）。

Kitty Giraudelは、HTMLとCSSのみのアクセス可能なトグルの小さな実装のチュートリアルも共有しています。これは、自分の都合に合わせて調整できます。アクセス可能なトグルのベースは、適切にラベル付けされたチェックボックスです。図像と色の両方でステータスを伝え、CSSが有効になっていない場合はアーティファクトを残しません。トグルには、カスタマイズ可能なネイティブフォーカススタイル、無効な状態が付属しており、必要に応じて右から左への向きもサポートしています。

アクセス可能なツールチップとトグルチップ

アイコンボタンに密接に関連するコンポーネントはツールチップです。文字通り「ツールのヒント」であり、コントロールまたはビジュアルの目的を説明する小さな情報であり、そうでなければ誤解される可能性があります。チェックアウトで特定の個人情報が必要な理由を説明するたびに、古き良きツールチップを使用することになります。では、どうすればそれらを正しくすることができますか？

左の例は通知を示しており、キャプションのプライマリラベルがあります。右の例では、通知の表示と設定の管理のテキストが長くなり、補助的な説明のキャプションが付けられています。 From：HeydonPickeringによる包括的なツールチップとToggletips。（大プレビュー）

Heydon Pickeringの包括的なツールチップとToggletipsは、アクセス可能なツールチップを構築するために必要なほとんどすべての非常に完全な概要を提供します。つまり、ヒントのコンテンツをラベルまたは説明として提供するかどうかを決定し、それに応じてARIAプロパティを選択します。 title属性に依存せず、ツールチップに閉じるボタンやリンクなどのインタラクティブなコンテンツを配置しないようにします。

もちろん、Sara Soueidanは、完全にアクセス可能なヘルプツールチップを作成するという非常に複雑な作業にも取り組み、完全にアクセス可能なインタラクティブコンポーネントを作成するにはJavaScriptが不可欠であると結論付けています。
Sarah Higleyはまた、ツールチップの複雑さを説明し、動作中の信頼できるパターンを示すコード例をリリースしました。
Scott O'Haraは、ツールチップにGitHubリポジトリを持っています。
Adrian Roselliは、ツールチップとRTL方向を無効にしたデモなど、トグルのコード例も多数提供しています。

アクセシブルなビデオ/オーディオプレーヤー

最近、短いクリップや長い映画を見るときに、視聴者がキャプションを頻繁に使用するのを見るのは珍しいことではありません。騒がしい環境でビデオを消費している可能性があります。あるいは、書き言葉をよりよく理解できる可能性があります。あるいは、現在何か他のことに忙しく、ヘッドホンに頼らずに何かをすばやく調べる必要があるかもしれません。それ以外に、キーボードの<space>を使用して一時停止を促したり、キー矢印を使用して前後に移動したりする頻度はどれくらいですか。それでも、多くのビデオプレーヤーやカスタムソリューションは、この機能をそのままでは提供していません。

アクセス可能なHTML5メディアプレーヤーは、アクセス可能なオーディオおよびビデオプレーヤーの概要を提供します。優れたオープンソースオプションはたくさんあります。たとえば、AblePlayerは信頼できるものの1つであるようです。キーボードでアクセス可能で、スクリーンリーダーユーザー向けに適切にラベル付けされ、音声認識ユーザーが制御できるプレーヤーコントロールのフルセットが含まれ、高コントラストを備え、クローズドキャプションと字幕、チャプター、テキストベースの音声ガイド、インタラクティブなトランスクリプト機能をサポートしますと自動テキストハイライト。 YouTubeとVimeoのビデオをサポートしています。しかし、それはjQueryに依存します。

または、Vime.jsを調べることもできます。完全にオープンソースで、軽量で、完全にカスタマイズ可能で、サードパーティの依存関係はありません。 PlyrやPayPalによるAccessibleHTML5VideoPlayerなどの他の優れたオプションも同様です。後者は、キーボードのみのユーザーとスクリーンリーダーユーザーが完全にアクセスでき、バニラJavaScriptで記述され、 Reactコンポーネントとして追加で提供され、JavaScriptが使用できない場合は、ブラウザーのネイティブコントロールにフォールバックします（ヒント、 @ jamsandwich ！）。

スクリーンリーダーのユーザーを困らせるWebサイトの機能

欠落している代替キャプション、自動再生ビデオ、ラベルのないボタン、見出しの不適切な使用、アクセスできないWebフォーム—目の見えるユーザーにとっては小さな問題のように見えるかもしれませんが、視覚障害者向けと非視覚障害者向けでWebサイトを単独で使用できるかどうかの違いを生む可能性があります。視覚障害者。ホリー・トゥケは彼女自身の経験からこれを知っています。

見出しの階層-見出し1から見出し5まで — 見出しの階層。見出し1から見出し5まで（大きなプレビュー）

一般的なアクセシビリティの問題に対する意識を高めるために、ホリーはスクリーンリーダーユーザーとして毎日直面している5つの厄介なWebサイトの機能と、もちろんそれらを修正する方法を要約しました。 Chris Ashtonは、スクリーンリーダーのユーザーが抱える一般的な問題を説明する記事も公開しました。これらの問題は、セマンティクスとキーボードのアクセシビリティのみに焦点を当てた会話では無視されることがよくあります。大きな違いを生む小さな詳細（ヒントをくれたAlex Chudesnovに感謝します！ ）。

しかし、最初に、アクセシビリティサポート

支援技術がブラウザやコードと相互作用する方法はたくさんあります。スクリーンリーダーや音声制御ソフトウェアを完全に自動化することはまだ不可能であるため、手動テストを行う必要があります。そこで、a11ysupport.ioが登場します。

もともとマイケルフェアチャイルドによって作成されたこのコミュニティ主導のウェブサイトは、アクセシビリティがサポートされているものについて開発者に知らせるのを助けることを目的としています。これは活発なプロジェクトであり、貢献はいつでも歓迎されているので、テストを開始してください。また、一般的なコンポーネントとパターンに必要な基本的なセマンティクス、役割、およびARIAを説明するWAI-ARIAオーサリングプラクティスを常に確認する価値があります（ヒントを提供してくれたStephanie Ecklesに感謝します！） 。

アクセシビリティリソースとチェックリスト

アクセシビリティは非常に重要ですが、残念ながら、見過ごされがちです。コミュニティ主導のA11Yプロジェクトは、デジタルアクセシビリティを容易にし、デザイナーと開発者に、美しく、アクセスしやすく、包括的なエクスペリエンスを構築するために必要なノウハウを提供しようとしています。

アクセシビリティ設計の背後にある基本原則から、アクセシビリティ監査の実施、コミュニティの育成まで、A11Yプロジェクトはこのトピックを360度見ています。クイックヒント、読む本のヒント、フォローするニュースレターのほか、便利なツール、アクセシビリティに取り組んでいるグループなどの記事を見つけることができます。

アクセシビリティツールのリポジトリ

プロジェクトを出荷する前に何かを忘れてしまうようなかゆみを感じたことはありますか？さて、チェックリストは、最終的な対決の前に実行し、世話をする必要があることの概要を維持するための鍵であることが知られています。アクセシビリティに関しては、物事を監視するのに役立つツールとリソースのリストが増えています：A11yリソース。

Hannah Milanによってキュレーションされたこのリストは、当初、200以上の手作業でキュレートされたアクセシビリティプラグイン、ツール、記事、ケーススタディ、デザインパターン、デザインリソース、アクセシビリティ標準、さらにはチェックリストを追跡するために作成されました。もちろん、足りないものがあればいつでもツールを提出できます。

サードパーティコンポーネントのアクセシビリティ

カスタム選択、オートコンプリート、日付ピッカーなどの再利用可能なコンポーネントは強力なヘルパーです。ただし、アクセス可能であると主張するサードパーティコンポーネントの多くは、少し深く掘り下げると、部分的にしかアクセスできないことがわかります。 Hidde de Vriesが指摘しているように、ARIAオーサリングプラクティスガイド1：1を実装したコンポーネントでさえ、スクリーンリーダーのアクセシビリティやユーザーエクスペリエンスについて主張していないため、重要になる可能性があります。では、本当にアクセス可能なコンポーネントをどのように見つけますか？

アクセス可能なフロントエンドコンポーネント：主張と現実 — Hidde de Vriesは、サードパーティのコンポーネントにアクセスできるかどうかを確認するのに役立つ貴重なヒントを共有しています。（大プレビュー）

Hiddeは、コンポーネントのアクセシビリティについてもう少し確実にするために尋ねることができる質問のチェックリストを公開しました。それらはどのようにテストしましたか？彼らは誰とテストしましたか？彼らは彼らのアプローチの賛否両論についてオープンですか？そして、誰がコンポーネントを作成しましたか？彼はまた、アクセス可能であると主張するコンポーネントがその約束を果たすかどうかを評価するのに役立つ、コミュニティからのいくつかの貴重なヒントを共有しています。

まとめ

アクセシビリティコミュニティには、セマンティクスとアクセシビリティに関する膨大なシリーズの記事を掲載したSteveFaulknerや一般的なアクセシビリティに関する膨大なシリーズの記事を掲載したLeonieWatsonなど、間違いなく数十から数百の重要なガイドラインがあります。全員をリストアップすることは不可能ですが、すべての貢献に心から感謝しています。

私たちはおそらくいくつかの重要で価値のある技術とリソースを逃しました！コメントを残して参照してください。この投稿を更新して最新の状態に保ち、信頼性が高くアクセス可能なコンポーネントをより早く構築できるようにしたいと思います。

これらのツールとテクニックが日常業務に役立つことを心から願っています。そして最も重要なことは、時間のかかる日常的なタスクを回避するのに役立つことです。

アクセスし続けてください！

ありがとう！ ️

@ jamsandwich、Courtney Heitman、Stephanie Eckles、Adam Silver、Daniela Kubesch、Tanisha Sabherwal、Manuel Matuzovic、Vadim Makeev、Kitty Giraudel、Ian James、Juha Lehtonen、Heydon Pickering、Shivani Gupta、Jason Webb、Alex Kallinikos、Scottに心から感謝します。 O'Hara、Sara Soueidan、Sasha Chudesnov、Adam Liptrot、Holger Bartel、Kim Johannesen、およびこの記事への貢献のためにアクセシビリティのすべてに熱心に取り組んできた他のすべての人。コミュニティは重要です。

アクセシビリティの詳細

CSS監査ツール
CSSジェネレーター
アクセス可能なパターンの複雑な世界を解きほぐす
モーション感度の低減されたモーションを使用した設計
スクリーンリーダーを使用して1日Webを使用しました
ChromeDevToolsのアクセシビリティ
今日CSSでできること
また、次のニュースレターを見逃さないように、ニュースレターを購読してください。