Webアクセシビリティの最新情報

カスタムコントロール、SSML、ダイアログ要素を使って、リッチでアクセシブルなWeb Appを構築するテクニックをご覧ください。さまざまな補助機能を解説しますので、Web Appのアクセシビリティをテストする際に役立てることができます。

リソース

関連ビデオ

WWDC21

iOS Appにおけるフルキーボードアクセスのサポート

こんにちは Tylerです WebKit Accessibility Teamのエンジニアですこのセッションでは最新の Webアクセシビリティに関してお話しますはじめに読み上げ機能などの補助機能についての簡単な説明を行い

次にWeb Speech APIとダイアログ要素内でカスタムのコントロールや SSMLなどのツールを使ってリッチでアクセッシブルな Web Appを作る方法を紹介します

まずは補助機能についてです世界中で７人に１人が周囲やデバイス Webとの交流が困難な障害を持っています年齢やその期間に関わらずさまざまな症状を患っているかもしれません Appleは最適な方法でデバイスを利用できる数々のツールを用意しています VoiceOverやスイッチコントロールそして音声コントロールフルキーボードアクセスなどそれぞれが異なるデバイスの利用方法を提供しますこれらのツールについては昨年のセッション「iOS Appにおけるフルキーボードアクセスのサポート」をご覧ください

実際にVoiceOverを使いクイズサイトをナビゲートしてみましょう iPadのトップボタンを３回押しVoiceOverを有効にします Siri：VoiceOverオン Safari サイドバー表示ボタン

Tyler：VoiceOverがアクディブになりページの冒頭をタップします Siri：ポップクイズ Heading レベル１ Tyler：右スワイプでページ内を移動します Siri：６問中１つ目　８等分のピザの４分の１は？２スライス　ラジオボタン４つの１つ目　空白３スライス４スライス６スライス次の質問ボタン Tyler：Webデベロッパには VoiceOverのようにページをアクセシブルにする多くのツールがあります例えばSafariにはボタンやh1からh6 table elementsや list elementsなどのセマンティック HTMLのサポートがありますセマンティック HTMLの使用をデフォルトにすればブラウザを通じて一貫したアクセシビリティ体験をユーザーに提供できますしかしセマンティックHTMLでは十分ではなく JavaScriptを使用しなければならない場合がありますその場合補助機能にセマンティックを正しく伝えるため ARIA属性も必要になるでしょうそこで２つ目のトピックカスタムのコントロールです先ほどのピザのクイズをより使いやすいものにしたいとしますラジオボタンをカスタムコントロールに置き換えタップでピザをトレイから動かせるようにしますこの場合のマークアップは divとidから始まります

タップやクリックでこれを可能にするには click event listenerが必要です id要素を受け入れるコンストラクタをもつ PizzaControl クラスを作りましょう

要素をIDで取得し click event listenerを追加します

このlistenerがタップの位置に基づきピザの数を計算し updateと呼ばれる関数に値をパスしリレンダリングしますしかし誰もがこの機能を使えるわけではありません

例えばどこをタップすればいいかわからない目の不自由なユーザーだったら？カスタムコンポーネントを構築する際はさまざまなユーザーを考慮する必要がありますそれを念頭に最初のステップは「slider」の値をもつrole属性を与えることです今回のコントロールには sliderがぴったりです最小値は０スライス最大値は８スライス現在値は４スライスですキーボードなどタッチできないインターフェイス用に０のtabindexを追加します

またARIA属性も必要です

aria-valueminと aria-valuemaxはこのsliderの最小･最大値を伝達します

これはrange type inputsの min max attributesに似ています

次にaria-valuenowで現在値を伝達します

aria-valuetextで分かりやすい説明を追加しますこの場合「４スライス」です

コントロールをフォーカス可能なスライダーとしたところで補助機能から受け取る値の処理が必要です iOSではVoiceOverが指１本の上スワイプでスライダーの増加そして下スワイプでスライダーの減少に対応するようになっていますこれらのジェスチャーに Safariは簡単に対応できます VoiceOverのユーザーがスライダーを上スワイプすると Safariは右矢印キーと同様にみなします同じく下スワイプだと左矢印キーと同様にみなしますこれらは実際にキーを押した時と同じように動作し key event listenersで処理できますこの知識とともに keydown listenerをコントロールに足しましょう作動したキーが右矢印か上矢印キーなら現在値プラス１としてコントロールを更新します同様に作動したキーが左矢印か下矢印キーなら現在値マイナス１としてコントロールを更新しますこれはVoiceOverを使うユーザーだけでなくキーボードでWeb Appにアクセスするユーザーにも応えることができます event listenersが出来上がったところで次は update 関数を定義しましょうまず与えられた範囲である０から８に値を制限し SliceCountの値を更新します次にコントロールのビジュアルおよびARIA表示を更新しますカスタムコンポーネントを作成する際ビジュアル表示を更新する時は ARIA表示も更新することを覚えておきましょう

この場合 aria-valuenowと aria-valuetextの属性を更新しコントロールの新しい値をユーザーに知らせます

まずaria-valuenowを現在値に設定します

次にaria-valuetextにわかりやすい説明「スライスの数+枚」を入れます設定が終わったところでクイズのWeb Appに戻り VoiceOverを試してみましょうピザをタップしてフォーカスします Siri：４スライス　変更可能指１本で上下にスワイプし値を変更 Tyler：VoiceOverがスライダーの現在の値は４スライスで変更可能だと読み上げましたその指示に従い上スワイプでスライス数を増やしていきます Siri：５スライス６スライス Tyler：下スワイプでスライス数を減らします Siri：５スライス４スライス Tyler：これらの変更によってカスタムスライダーコンポーネントがアクセシブルになりました次にWeb Speech APIで SSMLを使いさらに豊かな体験を提供してみましょう Web Speech APIは２つの JavaScriptからなりますオーディオインプット用の SpeechRecognitionとオーディオアウトプット用の SpeechSynthesisです

Web Speechは音声補助機能付きまたは音声のみのインターフェイスを Web Appに提供できます

これはマウスやキーボードタッチスクリーンなどを使用するのが困難な運動機能に障がいのある方々に便利です SafariのSpeechSynthesisの新機能としてテキストの話し方を調整する SSMLを使用できるようになりました SSMLには多くの能力があります例えばbreak要素を使って任意のタイミングでスピーチにポーズを加えることができますユーザーに呼吸する指示を出す時などに便利です

phoneme要素を使って tomayto /tomahtoなどの発音方法を指定できます

prosody要素を使って声のピッチや速さボリュームを調節できますこれらはSSMLの能力のごく一部です SSMLの詳細は w3.orgをご覧くださいではSSMLを実際に使ってみましょう最後の問題は"the water"のスペイン語の正しい翻訳のラジオボタンを選択してもらうクイズですボタンを押して text-to-speechを使って問題と解答を読み上げ SSMLでスペイン語のフレーズを現地の言葉で読み上げるようにすれば非常に使いやすいものになりますまずボタンを作成しますがこの絵文字必要ないので span aria-hiddenを trueに指定し絵文字を隠すことから始めます

次にwrapWithSSMLという JavaScriptのヘルパー関数で phraseとlocaleを指定します

各フレーズ前にポーズを置くため break 要素でSSMLのストリングを作成します

prosody要素でデフォルト80％の速さで読むよう指定します

最後にlang要素で現地の言葉で話すように指定します

さらに「Read Question」ボタンに click event listenerを追加しその中にSSMLストリングを作成しますまずはストリングを speak要素ですべて囲みます

speak要素は synthesis processorsに中身がすべてSSMLだと示すため重要です

次にHow do you say "the water" in Spanish? という質問を含めます wrapWithSSMLヘルパー関数を使って翻訳されるフレーズに強調を与え米英語のローカル音声で読むよう指定します

４つの答えにも wrapWithSSMLを使いスペイン語のローカル音声で読むよう指定します

最後にSSMLで新しい SpeechSynthesisUtterance オブジェクトを作成し window.SpeechSynthesis. speakメソッドに渡して読み上げます

では実際どう動作するか見てみましょう最後の問題ページで「Read question」ボタンを押し聞いてみます Siri：How do you say "the water" in Spanish? El agua La abuela La abeja El árbol Tyler：SSMLのおかげで生徒にとって非常に使いやすくなりました

ウェブでよくあるデザインのもう一つがモーダルです

サインインや登録フォーム確認ダイアログなどに使われています

アクセシブルなモーダルを提供する方法の1つが aria-modal属性です aria-modalをtrueにするとSafariはモーダル外のアクセシブルな要素を無視します最近ではSafariでdialog要素がサポートされるようになりました dialog要素を使用するとアクセシブルな体験をこれまで以上に簡単に提供できます一般的なフォーカス操作に加え EscapeキーやiOSのスクラブのような閉じるジェスチャーが簡単になりますそれではこの例の「Show score」ボタンを結果のダイアログに変更してみましょう

まずdialog要素の作成が必要ですマークアップはこのようになります show scoreボタンで後で参照できるよう dialogにIDを与えますダイアログのコンテンツを dialogメソッドを含むformで囲みます

これで今回のボタンのようなコントロールでダイアログを閉じることができますまたモーダル開くのに JavaScriptが必要です dialog要素で showModal()を呼ぶ「Show Score」ボタンに click event listenerを追加します

では試してみましょう VoiceOverを稼働させ「Show score」をタップします

Siri：「Show score」ボタン

Tyler：ボタンを押すには指１本でダブルタップです Siri：スコアを表示　ダイアログ「Close」ボタン Tyler：ここでモーダルが表示されます左スワイプでスコアを聞くことができます Siri：全６問正解しましたおめでとう！ Tyler：右スワイプで「Close」ボタンに戻ります Siri：「Close」ボタン Tyler：ダブルタップでモーダルを閉じます Siri：チェックが外れました Tyler：先ほどお話したように iOSのスクラブのジェスチャーをボックス外で行うことで dialog要素がモーダルを自動的に閉じてくれますダブルタップでモーダルをまた開きます Siri：「Show score」ボタン Webダイアログ「Close」ボタン Tyler：そして２本指で右･左･右に素早くスクラブします

Siri：「Show score」ボタン Tyler：モーダルが出来上がりましたがさらに向上させることができますモーダルを開いた時 Webダイアログ　「Close」ボタンとしか聞こえませんでしたこの場合 aria-labelまたは aria-labelledb属性で追加の情報を補助機能を用いてユーザーに提供することができますモーダルの内容は短いのでクイズの正解数を labelに使いましょうまずモーダルのコンテンツを span idで囲みます modal-content IDを指す dialogに aria-labelledby 属性を加えます

またautofocus属性を「Close」ボタンに加えることでモーダルの初期フォーカスを明確にします

これは今回のシンプルなモーダルでデフォルトでしたがモーダルにもっとコンテンツがあったり複雑であれば違ったかもしれません

例えばコンテンツが多いモーダルの場合 top-level headingに autofocusを置くべきですモーダルを開発する皆さんにその判断を委ねます

ではVoiceOverを試してみましょう「Show score」ボタンをタップしフォーカスします Siri：「Show score」ボタン

Tyler：ダブルタップして押します Siri：全６問正解です　おめでとう Webダイアログ　「Close」ボタン Tyler：よくなりましたね aria-labelledbyのおかげですぐに得点を聞くことができて「Close」ボタンにフォーカスしているのでダブルタップでモーダルを出られますではこのセッションのまとめですすべてのユーザーに最高の体験を届けるリッチでアクセシブルな Web Appを作成する技術を学ぶことができたかと思いますこれらをSafariでお試しになりバグがあれば WebKitのバグトラッカーで報告してください今日はご閲覧ありがとうございました WWDCをお楽しみください

3:06 - PizzaControl class with click event listener

class PizzaControl {
  constructor(id) {
    this.control = document.getElementById(id);
    this.sliceCount = 4;
    
    this.control.addEventListener("click", (event) => {
      const newSliceCount = this.computeSliceCount(event);
      this.update(newSliceCount);
    });
  }
}

4:23 - PizzaControl HTML markup

<div id="pizza-input" 
     role="slider" tabindex="0"
     aria-valuemin="0" aria-valuemax="8"
     aria-valuenow="4" aria-valuetext="4 slices">
</div>

5:15 - PizzaControl class with keydown event listener

class PizzaControl {
  constructor(id) {
    this.control = document.getElementById(id);
    this.sliceCount = 4;

    // …click event listener…
    
    this.control.addEventListener("keydown", (event) => {
      const key = event.key;
      if (key === "ArrowRight" || key === "ArrowUp")
        this.update(this.sliceCount + 1);
      else if (key === "ArrowLeft" || key === "ArrowDown")
        this.update(this.sliceCount - 1);
    });
  }
}

5:41 - PizzaControl class update function

class PizzaControl {
  // …constructor…
  
  update(newSliceCount) {
    this.sliceCount = Math.max(0, Math.min(newSliceCount, 8));

    // Visually re-render `this.sliceCount` slices
    // …

    // Update the ARIA representation of the control
    this.control.setAttribute("aria-valuenow", this.sliceCount);
    const sliceModifier = this.sliceCount === 1 ? "slice" : "slices";
    this.control.setAttribute("aria-valuetext", `${this.sliceCount} ${sliceModifier}`);
  }
}

7:52 - SSML examples

<speak>
  Breathe in <break time="3s"/> and breathe out.
</speak>

<speak>
  <phoneme alphabet="ipa" ph="təˈmeɪtoʊ">tomato</phoneme>
  <phoneme alphabet="ipa" ph="təˈmɑːtəʊ">tomato</phoneme>
</speak>

<speak>
  <prosody pitch="-2st" rate="slow" volume="loud">
    Hello world!
  </prosody>
</speak>

8:45 - "Read question" button HTML markup

<button id="read-question-btn">
  Read question<span aria-hidden="true">🔊</span>
</button>

8:57 - wrapWithSSML JavaScript function

function wrapWithSSML(phrase, locale) {
  return `
    <break time=“100ms"/>
    <prosody rate=“80%">
      <lang xml:lang="${locale}">
        ${phrase}
      </lang>
    </prosody>
  `;
}

9:24 - Read question button click event listener

const readQuestionButton =
  document.getElementById("read-question-btn");

readQuestionButton.addEventListener("click", () => {
  const ssml = `
    <speak>
      How do you say
        ${wrapWithSSML("the water", "en-US")}
      in Spanish?
      ${wrapWithSSML("El agua", "es-MX")}
      ${wrapWithSSML("La abuela", "es-MX")}
      ${wrapWithSSML("La abeja", "es-MX")}
      ${wrapWithSSML("El árbol", "es-MX")}
    </speak>
  `;
  const utterance = new SpeechSynthesisUtterance(ssml);
  window.speechSynthesis.speak(utterance);
});

11:33 - Show score dialog HTML markup

<dialog id="show-score-modal">
  <form method="dialog">
    You got all six questions correct. Great work!
    <button type="submit">Close</button>
  </form>
</dialog>

11:51 - JavaScript to open show score dialog

const showScoreButton =
  document.getElementById("show-score-btn");

showScoreButton.addEventListener("click", () => {
  document
    .getElementById("show-score-modal")
    .showModal();
});

13:23 - Show score dialog with autofocus and aria-labelledby attribute

<dialog id="show-score-modal" aria-labelledby="modal-content">
  <form method="dialog">
    <span id="modal-content">
      You got all six questions correct. Great work!
    </span>
    <button type="submit" autofocus>Close</button>
  </form>
</dialog>