What's new in web accessibility

ハイライト

Safari では、2022 年に HTML ダイアログ要素のサポート、Web Speech API での SSML サポート、ARIA カスタム コントロールのサポートの強化が追加され、開発者はより少ないコードでアクセス可能な Web アプリケーションを構築できるようになります。

主要内容

支援技術の概要

世界中の約 7 人に 1 人が、デバイスや Web とのやり取りに影響を与える何らかの障害を抱えています。 Apple は、VoiceOver (スクリーン リーダー)、Switch Control (スイッチ コントロール)、Voice Control (音声コントロール)、および Full Keyboard Access (フル キーボード アクセス) といういくつかのアクセシビリティ ツールを提供しています。

（00:36）

これらのツールは、Web ページに関するセマンティック情報に依存して機能します。 Safari には、セマンティック HTML 要素 (ボタン、h1 ～ h6、テーブル、リストなど) のアクセシビリティ サポートが組み込まれており、これが推奨されるオプションです。ただし、セマンティック HTML がニーズを満たせない場合は、カスタム コントロールを JavaScript で作成し、ARIA 属性で補完する必要があります。

カスタム コントロールのアクセシビリティ

セッションでは、例としてピザ スライス セレクターを使用します。これはカスタム対話型コントロールです。ユーザーはピザ トレイ上のさまざまな場所をクリックしてスライスの数を選択します。

（02:42）

初期実装にはクリック イベントのみがあり、視覚障害のあるユーザーはまったく使用できません。変換手順:

1.追加role="slider"支援技術にコントロールがスライダーであることを知らせるため 2.追加tabindex="0"、キーボード ユーザーがこのコントロールに集中できるようにします。 3. ARIA 属性を追加します。aria-valuemin、aria-valuemax、aria-valuenow、aria-valuetext 4. キーボード イベントの処理: 上下左右の矢印キーを使用して値を調整します

重要な詳細は次のとおりです。iOS では、VoiceOver ユーザーが上にスワイプしてスライダー値を増やし、下にスワイプしてスライダー値を減らすと、Safari は対応する矢印キー イベントを自動的にシミュレートします。したがって、VoiceOver ジェスチャとキーボード操作を同時にサポートするには、キーボード イベントをリッスンするだけで済みます。

SSML 音声合成

Web Speech API の SpeechSynthesis インターフェイスは、Safari に SSML (音声合成マークアップ言語) のサポートを追加します。

（07:09）

SSML は音声合成のさまざまな側面を制御できます。

• <break>:ポーズを挿入
• <phoneme>: 単語の発音を制御する
• <prosody>:ピッチ、話す速度、音量を調整します
• <lang>:言語地域を指定

セッションの例は言語学習テストです。[質問を読む] ボタンをクリックすると、英語の質問はアメリカ英語で発音され、スペイン語のオプションはメキシコスペイン語で発音され、各オプションの前に短い一時停止があります。

HTML ダイアログ要素

Safari が HTML のサポートを追加<dialog>エレメントのサポートにより、バリアフリーのモーダル ボックスを簡単に実装できます。

（10:50）

<dialog>自動処理:

• 集中管理
• エスケープキーで閉じます
• iOS のスクラブ ジェスチャがオフになっています (左右に素早くスワイプします)
• モーダルの外側の要素は支援技術には表示されません

協力するaria-labelledbyそしてautofocusプロパティを使用して、スクリーン リーダー ユーザーのエクスペリエンスをさらに最適化します。

詳細

カスタム スライダー コントロール

HTML 構造:

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

キーポイント:

• role="slider"これがスライダー コントロールであることを支援技術に伝えます
• tabindex="0"キーボードと支援技術が要素に集中できるようにします
• aria-valueminそしてaria-valuemax値の範囲を定義する
• aria-valuenow現在の値を表します
• aria-valuetext数値よりもわかりやすい説明を提供します（「4」よりも「4 スライス」の方が理解しやすい）

JavaScript の実装:

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);
    });

    // 键盘事件：支持方向键调整
    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);
    });
  }

  update(newSliceCount) {
    // 限制在 0-8 范围内
    this.sliceCount = Math.max(0, Math.min(newSliceCount, 8));

    // 视觉更新
    this.renderSlices(this.sliceCount);

    // 同步更新 ARIA 属性
    this.control.setAttribute("aria-valuenow", this.sliceCount);
    const sliceModifier = this.sliceCount === 1 ? "slice" : "slices";
    this.control.setAttribute("aria-valuetext",
      `${this.sliceCount} ${sliceModifier}`);
  }
}

キーポイント:

• マウス/タッチ操作のクリック イベント処理
• キーボード イベントは、キーボード ユーザーと VoiceOver ユーザーの両方にサービスを提供します
• update()視覚的表現と ARIA プロパティの両方を更新するメソッド
• ルール: ビジュアルを更新するときは、ARIA 表現も同時に更新する必要があります

SSML 音声合成

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

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);
});

キーポイント:

• SSML 文字列全体がラップされます。<speak>要素内
• <break>オプション間にリズムを作り出すために 100 ミリ秒の一時停止を挿入します
• <prosody rate="80%">聞き取りやすくするために、話す速度を 80% に落とします
• <lang xml:lang="...">発音言語エリアを切り替える
• SpeechSynthesisUtteranceSSML文字列を受け取り、それを渡しますspeechSynthesis.speak()遊ぶ

HTML のボタン:

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

キーポイント:

• スピーカーの絵文字aria-hidden="true"スクリーン リーダーが無意味な絵文字の説明を読み上げないようにするために非表示にします

ダイアログモーダルボックス

基本的な実装:

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

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

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

キーポイント:

• <dialog>要素はモーダル動作をネイティブにサポートします
• method="dialog"フォームの送信ボタンでダイアログ ボックスを自動的に閉じるようにします。
• showModal()モーダルボックスを表示し、フォーカスと背景のオクルージョンを自動的に管理します

最適化されたアクセシビリティ対応バージョン:

<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>

キーポイント:

• aria-labelledbyスクリーン リーダーが開いたときに最初にコンテンツを読み取るためのコンテンツ要素の ID を指します。
• autofocus初期フォーカスを閉じるボタンに置​​くと、ユーザーはそれを直接操作できるようになります
• システムは Esc キーと iOS のスクラブ ジェスチャのシャットダウンを自動的に処理します

重要ポイント

アクセシビリティを第一に考えたオンライン クイズ プラットフォームを構築します

• 内容: 複数の質問タイプをサポートするオンライン試験/クイズ システム。すべての対話はスクリーン リーダーに対応しています。
• 実行する価値がある理由: クイズではカスタム コントロール (スライダー、ドラッグ アンド ドロップによる並べ替えなど) が非常に一般的で、ARIA + キーボード イベントを使用して見栄えの良いバリアフリーなエクスペリエンスを作成できます。
• 開始方法: を使用しますrole、aria-*カスタム コントロールを構築するためのプロパティとキーボード イベントを使用します。<dialog>SSML を使用した結果と確認ボックスの表示、質問の読み取り

音声アシストの料理アプリを作成する

• 何をすべきか: ユーザーが音声コントロールを使用して、イントネーションの読み上げを聞きながらステップを切り替えることができる Web クッキング チュートリアル
• 実行する価値がある理由: 手が濡れたり油で汚れたりするキッチン シーンでは、音声インタラクションとクリアな音声フィードバックが非常に実用的です。
• 開始方法: Web Speech API の SpeechRecognition を使用して音声コマンドを受信し、SSML を使用して発話速度と歩数読み上げの一時停止を制御します。

フルキーボードで操作可能な画像エディタを作成

• 機能: 軽量の Web 画像エディター。すべての機能をキーボードから実行できます。
• 価値がある理由: 多くのクリエイティブ ツールはマウスのみをサポートしており、運動障害のあるユーザーには不向きです。
• 開始方法: 各ツールの設定tabindexおよびキーボード ショートカット、ARIA ライブ リージョンを使用して操作の結果をブロードキャストする、<dialog>ハンドル確認ポップアップ

多言語学習カード アプリを作成します

• やるべきこと: 言語学習ツール。カードの表面は単語、裏面は定義と例文です。音声読み上げにも対応しています。
• 実行する価値がある理由: SSML<lang>タグを使用すると、さまざまな言語の単語を正しい発音で読むことができ、<phoneme>特殊な発音にも対応できる
• 開始方法: を使用して、各単語と例文を SSML でラップします。<prosody>話す速度を調整するには、次を使用します。aria-live現在のカードステータスの地域ブロードキャスト

関連セッション

• iOS アプリでフル キーボード アクセスをサポート — iOS フル キーボード アクセス サポート ガイド
• Safari と WebKit の新機能 — Safari と WebKit の新機能
• パスキーについて — パスキー パスワードレス認証