BT

InfoQ ホームページ ニュース HTMLコントロールの残されたアクセシビリティの問題

HTMLコントロールの残されたアクセシビリティの問題

ブックマーク

原文(投稿日:2020/04/08)へのリンク

HTML標準は、何年にもわたってアクセシビリティの進歩を続けてきた。しかし、開発者とデザイナは、<input/><select/><video/>などの一般的なHTMLコントロールに関するいくつかのアクセシビリティの問題を報告している。

WebアクセシビリティコンサルタントでフロントエンドエンジニアのScott Vinkle氏は、最近、ネイティブビデオプレーヤのキーボードとスクリーンリーダのアクセシビリティを比較し、ネイティブビデオプレーヤの使用には注意が必要であると結論付けた。Vinkle氏は説明した:

ほとんどの[ネイティブビデオプレーヤ]のキーボードとスクリーンリーダのサポートが不十分であることがわかりました。これにより、ユーザーが不満を感じるかもしれません。
(…) ビデオコントロールがフォーカスを受け取ってからフェードアウトするとフォーカスを失い、ユーザーが再生を調整するために自分の位置を変更する必要がある場合があります。フルスクリーンモードでキーボードフォーカスをトラップしなかったものもあり、アクセスできないモーダルウィンドウと同様の状況が発生し、ウィンドウの「裏」のコンテンツにアクセスできるようになりました。

その結果、Vinkle氏はShopifyのビデオ機能にサードパーティのプレーヤ (Plyr) を使用することを決めた。

GOV.UKデザインシステムチームのフロントエンド開発者であるHanna Laakso氏も、数値の入力タイプを<input type="number">から<input type="text" inputmode="numeric" pattern="[0-9]*">に変更して、そして新しいユーザに数値を尋ねる方法に関するガイダンスの公開を報告した。チームはさらに、数字のみのコンテンツで<input type="text">を使用する場合に、入力モードを相互参照するためのHTML仕様ガイダンスの変更を提案した。

デザインチームは、見つかったいくつかのアクセシビリティの問題を引用した:

<input type="number">の次のことがわかりました:

Microsoftでアクセシビリティに取り組んでいるWeb開発者のSarah Higley氏は、最近<select>要素を詳細研究した。Higley氏は、さまざまなタイプの障害 (視覚や可動性など) を持つ12人の参加者による実験を実現した。Higley氏は次のように結論付けた:

つまり、特定のニーズに合わせて設計し、常に実際の人とテストし、<select multiple>を使用しないでください !

Paravelの主任開発者であるDave Rupert氏は、何年にもわたって発生したアクセシビリティの問題の長いリストをまとめた。Rupert氏は、ネイティブのセマンティックHTML要素を使用するという一般的なアドバイスでは不十分な場合があり、プレーンな古いHTMLがアクセシビリティの問題を引き起こす可能性があることを憂いた。

アクセシビリティは、引き続きデザインシステムとブラウザベンダーの焦点である。Chrome 81はHTMLコントロールを更新し、フォームコントロールのルックアンドフィールを改善するだけでなく、アクセシビリティとタッチサポートを向上させる。INGは最近、機能、パフォーマンス、スタイリングよりもアクセシビリティに焦点を当てたコントロールを提供するデザインシステムLionをオープンソース化した。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。