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">
の次のことがわかりました:
- Dragon Naturally Speakingを使用している場合、読み上げまたは選択することはできません。
- NVDAの要素リストにラベルなしで表示されます。
- NVDAのオブジェクトナビゲーションに編集フィールドと2つのスピンボタンが表示されます。これらのボタンにはラベルが付いていませんが、値を増減します。
- nvda+tabを使用すると、ラベルのない編集フィールドとして報告されます。
Microsoftでアクセシビリティに取り組んでいるWeb開発者のSarah Higley氏は、最近<select>
要素を詳細に研究した。Higley氏は、さまざまなタイプの障害 (視覚や可動性など) を持つ12人の参加者による実験を実現した。Higley氏は次のように結論付けた:
つまり、特定のニーズに合わせて設計し、常に実際の人とテストし、
<select multiple>
を使用しないでください !
Paravelの主任開発者であるDave Rupert氏は、何年にもわたって発生したアクセシビリティの問題の長いリストをまとめた。Rupert氏は、ネイティブのセマンティックHTML要素を使用するという一般的なアドバイスでは不十分な場合があり、プレーンな古いHTMLがアクセシビリティの問題を引き起こす可能性があることを憂いた。
アクセシビリティは、引き続きデザインシステムとブラウザベンダーの焦点である。Chrome 81はHTMLコントロールを更新し、フォームコントロールのルックアンドフィールを改善するだけでなく、アクセシビリティとタッチサポートを向上させる。INGは最近、機能、パフォーマンス、スタイリングよりもアクセシビリティに焦点を当てたコントロールを提供するデザインシステムLionをオープンソース化した。