これは、フォームのアクセシビリティに関して行っている小規模シリーズの 3 回目の投稿です。 2回目の投稿を見逃した方はぜひチェックしてください :focus-visible を使用したユーザー フォーカスの管理。この投稿では、フォーム内を移動する際のスクリーン リーダーの使用方法と、いくつかのベスト プラクティスについて説明します。
スクリーンリーダーとは何ですか?
Web を利用していると、「スクリーン リーダー」という用語を聞いたことがあるかもしれません。現時点では、構築中のエクスペリエンスに対して手動のアクセシビリティ テストを実行するためにスクリーン リーダーを使用している可能性もあります。スクリーン リーダーは、AT または支援技術の一種です。
スクリーン リーダーは、デジタル テキストを点字リーダーでよく見られる合成音声または点字出力に変換します。
この例では、Mac VO を使用します。 Mac VO (VoiceOver) はすべての Mac デバイスに組み込まれています。 iOS、iPadOS、および macOS システム。 macOS を実行しているデバイスの種類に応じて、VO を開く方法が異なる場合があります。これを書いているVOを実行しているMacbook Proにはタッチバーがないので、ハードウェアに応じてショートカットキーを使用することになります。
macOS での VO のスピンアップ
更新された Macbook Pro を使用している場合、マシンのキーボードは下の画像のようになります。
を押し続けると始まります。 cmd キーを押してから、Touch ID をすばやく 3 回押します。
TouchBar を備えた MBP (MacBook Pro) を使用している場合は、ショートカットを使用します。 cmd+fn+f5 VOをオンにします。デスクトップまたはラップトップで従来のキーボードを使用している場合、キーは同じである必要があります。そうでない場合は、アクセシビリティ設定で VO をオンに切り替える必要があります。VO をオンにすると、音声ガイドとともにこのダイアログが表示されます。 VOの紹介。
「Use VoiceOver」ボタンをクリックすると、VO を使用して Web サイトやアプリをテストする準備が整います。留意すべき点の 1 つは、VO は Safari での使用に最適化されていることです。そうは言っても、スクリーン リーダー テストを実行するときは、使用しているブラウザが Safari であることを確認してください。それはiPhoneやiPadにも当てはまります。
最初から VO を使用するには、主に 2 つの方法があります。私が個人的に使用する方法は、Web サイトに移動し、次の機能を組み合わせて使用することです。 tab, control, option, shift と矢印キーを使用すると、これらのキーだけでエクスペリエンスを効率的に移動できます。
エクスペリエンスをナビゲートするもう 1 つの一般的な方法は、 VoiceOver ローター。ローターは、エクスペリエンス内で希望する場所に直接移動できるように設計された機能です。 Rotor を使用すると、サイト全体を横断する必要がなくなり、「自分だけの冒険を選択する」と考えることができます。
修飾キー
修飾キーは、VO のさまざまな機能を使用する方法です。デフォルトの修飾キーまたは VO is control + option ただし、Caps Lock に変更したり、両方のオプションを選択して交互に使用したりできます。
ローターの使い方
ローターを使用するには、修飾キーと文字「U」を組み合わせて使用する必要があります。私の場合、修飾キーは caps lock。私は押します caps lock + U するとローターが回転し始めます。ローターが表示されたら、左右の矢印を使用して、希望するエクスペリエンスの任意の部分に移動できます。
見出しレベルによるナビゲーション
エクスペリエンスをナビゲートするもう 1 つの優れた方法は、見出しレベルを使用することです。修飾キー + の組み合わせを使用する場合 cmd + H 見出しレベルに基づいて文書構造をたどることができます。を押してドキュメントを上に戻すこともできます。 shift このようなシーケンスでは、修飾キー + shift + cmd + H.
歴史とベストプラクティス
フォームは、HTML の中で最も強力なネイティブ要素の 1 つです。ページ上で何かを検索している場合でも、何かを購入するためのフォームを送信している場合でも、アンケートを送信している場合でも。フォームは Web の基礎であり、私たちのエクスペリエンスにインタラクティブ性を導入するきっかけとなりました。
Web フォームの歴史は、Web フォームが導入された 1995 年 XNUMX 月に遡ります。 HTML2.0仕様。ウェブの古き良き時代を言う人もいますが、少なくとも私はそう思います。 Stephanie Stimac が素晴らしい記事を書きました スマッシングマガジン 「選択とその先の標準化: ネイティブ HTML フォーム コントロールの過去、現在、未来"。
Web 用のアクセシビリティ対応フォームを構築する際に従うべき 5 つのベスト プラクティスを以下に示します。
- フォーム要素を使用していることを確認してください。フォームはデフォルトでアクセス可能であり、常に div 上で使用する必要があります。
<form>
<!-- Form controls are nested here. -->
</form>
- 必ずご使用ください。
for&idの属性label'砂inputでリンクされるようになります。これにより、ラベルをクリックまたはタップすると、フォーカスが入力に移動し、入力を開始できるようになります。
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- フォームを完成させるためにフィールドが必要な場合は、required 属性と aria-required 属性を使用します。これらにより、フォームの送信が制限されます。 aria-required 属性は、フィールドが必須であることを支援技術に明示的に伝えます。.
<input type="text" id="name" name="name" required aria-required/>- 使用、
:focus,:focus-within&:focus-visibleユーザーがフォーカスを受け取る方法を管理およびカスタマイズするための CSS 疑似クラス。
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttonフォームの送信などのアクションを呼び出すために使用されます。これを使って！を使用してボタンを作成しないでくださいdivさんの。あdiv定義上、ディバイダーです。固有のアクセシビリティ プロパティはありません。
デモ
コードをチェックアウトしたい場合は、次の場所に移動してください。 VoiceOver デモ GitHub リポジトリ。選択したスクリーン リーダーで上記のデモを試してみたい場合は、以下をチェックしてください。 VoiceOver を使用した Web フォームの操作.
スクリーンリーダーソフトウェア
以下は、特定のオペレーティング システムで使用できるさまざまな種類のスクリーン リーダー ソフトウェアのリストです。 Mac が選択できない場合でも、Windows や Linux、Android デバイス用のオプションがあります。
NVDA
NVDA は、NV Access のスクリーン リーダーです。現在、Microsoft Windows 7 SP1 以降を実行している PC でのみサポートされています。さらにアクセスするには、 NV Access Web サイトの NVDA バージョン 2024.1 ダウンロード ページ!
JAWS
「より優れたスクリーンリーダーが必要です」
- 匿名
上記のリファレンスを理解できたなら、あなたは大丈夫です。 JAWS の Web サイトによると、簡単に説明すると次のようになります。
「JAWS (Job Access With Speech) は世界で最も人気のあるスクリーン リーダーで、視覚障害により画面のコンテンツを見たり、マウスで操作したりすることができないコンピューター ユーザーのために開発されました。 JAWS は、PC 上の最も一般的なコンピュータ アプリケーションに音声出力と点字出力を提供します。オフィス、リモート デスクトップ、または自宅から、インターネットにアクセスしたり、文書を書いたり、電子メールを読んだり、プレゼンテーションを作成したりすることができます。」
JAWS を自分でチェックしてください そのソリューションがあなたのニーズに合っている場合は、ぜひ試してみてください。
ナレーター
ナレーターは、Windows 11 に同梱されている組み込みのスクリーン リーダー ソリューションです。これをスクリーン リーダーとして使用することを選択した場合、以下のリンクはその使用法に関するサポート ドキュメントです。
Orca
Orca は、GNOME を実行するさまざまな Linux ディストリビューションで使用できるスクリーン リーダーです。
「Orca は、音声と更新可能な点字を介してグラフィカル デスクトップへのアクセスを提供する、無料のオープンソース、柔軟で拡張可能なスクリーン リーダーです。
Orca は、Linux および Solaris の主要な支援技術インフラストラクチャである支援技術サービス プロバイダー インターフェイス (AT-SPI) をサポートするアプリケーションおよびツールキットと連携します。 AT-SPI をサポートするアプリケーションとツールキットには、GNOME Gtk+ ツールキット、Java プラットフォームの Swing ツールキット、LibreOffice、Gecko、WebKitGtk などがあります。 KDE Qt ツールキットの AT-SPI サポートが追求されています。」
トークバック
Google TalkBack は、Android デバイスで使用されるスクリーン リーダーです。オンにして使用する方法の詳細については、 Android アクセシビリティ サポート サイトのこの記事をご覧ください。.
ブラウザのサポート
HTML 要素と ARIA (Accessible Rich Internet Application) 属性に対する実際のブラウザのサポートを探している場合は、次のことをお勧めします。 caniuse.com (HTML 用) & ARIA のアクセシビリティ サポート ブラウザーのサポートに関する最新の 4-1-1 を入手してください。ブラウザがその技術をサポートしていない場合、スクリーン リーダーもサポートしていない可能性があることに注意してください。
デジタルA11Y ブラウザとスクリーン リーダーの情報を記事で要約するのに役立ちます。 スクリーンリーダーとブラウザ！アクセシビリティテストに最適な組み合わせはどれですか?
リンク
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- プラトンヘルス。 バイオテクノロジーと臨床試験のインテリジェンス。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
