動的リスト: スクリーン リーダーでアクセスできるようにします

提案していただきありがとうございます.

ウェブアクセシビリティは初めてですか?古い投稿とブログを確認してください https://a11ytips.dev/

このブログは、アクセス可能なモジュール/機能を作成するシリーズの一部です.

For this blog I am using a Mac system/OS, and voiceover as a screenreader

問題

ユーザーがドロップダウンからオプションを選択すると、関連する説明が画面に表示されます.

スクリーン リーダーがアクセスできるようにする必要があります.スクリーン リーダーは、ユーザーのイベントの値とそれに関連付けられた説明を識別できる必要があります.

Watch this video to see how screenreaders current experience is

ここで学べること

アリアライブ

タブインデックス

スクリーンリーダー

コードを見てみましょう

<select aria-label="Please select your prefer cuisine">
   <option>Italy</option>
   <option>India</option>
   <option>America</option>
   <option>UK</option>
   <option>UAE</option>
</select>

<div id="message" class="description hide"></div>

const $ = document;
const SELECT = $.querySelector('select');
const MESSAGE_CONTAINER = $.getElementById('message');

const data = {
  'Italy': 'You can order pasta, pizza, or any bread',
  'India': 'You can order different flat-breads, curry, etc.',
  'America' : 'Fancy some burger?',
  'UK': 'What about fish & chips, or tea?'
}

const onChangeHandler = (e) => {
  const selectedvalue = e.target.value;

    if(data?.[`${selectedvalue}`]){
      MESSAGE_CONTAINER.innerText = data[selectedvalue];
      MESSAGE_CONTAINER.classList.remove('hide');
    }
    else{
      MESSAGE_CONTAINER.innerText = 'Sorry we are not serving this cuisine currently';
    }
}

SELECT.addEventListener('change',onChangeHandler);

解決

この問題を簡単に修正できることに驚かれることでしょう. aria-live 、 role 、 focus 、および tabindex のピンチが必要です.
html で合計 4 つの変更を行います.

1) role="alert" : これは、支援ツールが DIV の役割が「アラート」であることを識別するのに役立ちます.

2) aria-roledescription="notification" : これは、支援ツールが要素の詳細を提供するのに役立ちます.

3) aria-live="polite" : これにより、変更があるたびにスクリーンリーダーがアナウンスできます.ここでの変更は、内部テキストが更新されることです.

4) tabindex=0 : ここで、スクリーンリーダーが変更について通知すると、キーボードのフォーカスはリージョン div に移動します.

<div id="message" role="alert" aria-roledescription="notification" class="description hide" aria-live="polite" tabindex="0"></div>

Watch this video to see how screenreaders experience is

このブログが気に入ったら、「いいね!」をドロップしてください.私がニュースレターを持っていることを知っていますか?購読はこちら: http://tinyletter.com/hellonehha

ハッピーラーニング!!