ウェブ・アクセシビリティ・クックブック

第12章 カスタム要素の作成 カスタム要素を作成する

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

WebコンポーネントはウェブプラットフォームAPIのセットであり、独自の完全な機能を備えたDOM 要素を構築することができる。

インタラクティブなWebサイトをネイティブに構築するためにカスタム要素を作成できることはエキサイティングだが、同時に新しいアクセシビリティの問題も発生する。カスタム要素とそれに関連するAPIの限界と可能性を認識しておく必要がある。適切なアーキテクチャと十分な計画によって、ウェブコンポーネントはアクセシビリティを第一に考えた開発を促し、素晴らしい体験を生み出すことができる。また、注意せずに使用すれば、アクセシビリティを本質的に破壊することもできる。

12.1 IDを使う

問題

id 属性を使用して、Light DOMの要素をShadow DOMで参照すること、またはその逆は不可能である。この制限に気づかず、とにかくこれらの参照を作成しようとすると、壊れた関係がユーザに影響を与える可能性がある：

• スキップリンクが機能せず、ナビゲーションが難しくなる可能性がある。

• フォーム要素に適切なラベルがない場合があり、スクリーン・リーダーのユーザがそれらを区別するのが難しくなる。

• ARIAの参照が壊れる可能性があり、その結果、スクリーン・リーダー・ユーザにとって情報やフィードバックが欠落する。

解決策

フォームでは、ラベルとフォーム・フィールドの両方をLight DOMに置くか、両方をShadow DOMに置くが、例12-1と12-2に示すように、2つのコンテキストを混在させないこと。

例 12-1. ラベルと入力フィールドはLight DOMにある

<label for="email">E-Mail</label>

<the-input>
  <input type="email" id="email" />
</the-input>

<script>
  class TheInput extends HTMLElement {
    constructor() {
      super();

      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `<slot></slot>`;
    }
  }

  customElements.define("the-input", TheInput);
</script>

例 12-2. ラベルと入力フィールドはShadow DOMにある

<the-input></the-input>

<script>
  class TheInput extends HTMLElement {
    constructor() {
      super();

      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <label for="email">E-Mail</label>
        <input type="email" id="email" />
      `;
    }
  }

  customElements.define("the-input", TheInput);
</script>

ディスカッション

DOMはWebページのHTMLをツリー状に表現したものだ。ページ上のすべての要素で構成され、その枝は要素間の階層と関係を反映する。これにより、JavaScriptを使ってHTML文書内の要素を操作することができる。 ...