コンポーネントアクセシビリティ属性

スクリーンリーダーや他の支援技術でコンポーネントを使用できるようにするには、コンポーネントで HTML 属性を使用します。HTML 属性は、含まれる UI 要素を記述します。アクセシビリティソフトウェアは属性を読み上げることで UI 要素を解釈します。

アクセシビリティの重要な点の 1 つに、title 属性を使用することがあります。スクリーンリーダーでは title 属性の値がユーザに読み上げられます。title 属性を持つ Lightning Web コンポーネントを使用する場合は、必ず値を指定します。たとえば、lightning-button コンポーネントには title 属性があります。

1<!-- parent.html -->
2<template>
3  <lightning-button title="Log In" label="Log In" onclick={login}></lightning-button>
4</template>

このテンプレートでは次のような HTML 出力が作成され、これをスクリーンリーダーはユーザに「Log In」 (ログイン) と読み上げます。

1<!-- Generated HTML -->
2<lightning-button>
3  <button title="Log In">Log In</button>
4</lightning-button>

Lightning Web コンポーネントを作成するときに、スクリーンリーダーで値をユーザに読み上げるようにする場合、@api を使用して title 公開属性を公開します。

属性を公開プロパティとして公開することで属性を制御する場合、デフォルトでは属性は HTML 出力に表示されなくなります。表示される HTML に値を属性として渡す (プロパティを反映するため) には、プロパティの getter と setter を定義して setAttribute() メソッドをコールします。

setter 内で操作を実行することもできます。非公開プロパティを使用して、計算された値を保持します。

1// myComponent.js
2import { LightningElement, api } from "lwc";
3
4export default class MyComponent extends LightningElement {
5  privateTitle;
6  @api
7  get title() {
8    return this.privateTitle;
9  }
10
11  set title(value) {
12    this.privateTitle = value.toUpperCase();
13    this.setAttribute("title", this.privateTitle);
14  }
15}

1<!-- parent.html -->
2<template>
3  <c-my-component title="Hover Over the Component to See Me"></c-my-component>
4</template>

1/* Generated HTML */
2<c-my-component title="HOVER OVER THE COMPONENT TO SEE ME">
3  <div>Reflecting Attributes Example</div>
4</c-my-component>

setAttribute() の使用法についての詳細は、「HTML 属性への JavaScript プロパティの反映」を参照してください。

ARIA 属性

スクリーンリーダーでボタンの現在の状態を読み上げるなど、より高度なアクセシビリティを提供するには、ARIA 属性を使用します。この属性により、より詳細な情報が ARIA 標準をサポートするスクリーンリーダーに提供されます。

ARIA 属性を HTML テンプレート内の id 属性に関連付けることができます。コンポーネントのテンプレートファイル内で id 値を一意にする必要があります。これで、スクリーンリーダーは ARIA 属性 (aria-describedby、aria-details、aria-owns など) を特定の要素に関連付けることができます。

テンプレートを表示するときに、id 値が、グローバル一意値に変換される場合があります。CSS または JavaScript 内で id セレクタを使用しないでください。変換された id に一致しなくなります。代わりに、要素の class 属性、または data-id のような data-* 属性を使用してください。

Note

次にいくつかコードを見てみましょう。aria-pressed 属性は、ボタンが押されたときに通知するようにスクリーンリーダーに指示します。lightning-button コンポーネントを使用する場合、次のように記述します。

1<!-- parent.html -->
2<template>
3  <lightning-button
4    title="Log In"
5    label="Log In"
6    onclick={login}
7    aria-label="Log In"
8    aria-pressed
9  ></lightning-button>
10</template>

このコンポーネントで ARIA 属性を公開プロパティとして定義し、フィールドを使用して公開プロパティを取得および設定します。

1<!-- lightning-button.html -->
2<template>
3  <button
4    title="Log In"
5    label="Log In"
6    onclick={login}
7    aria-label={innerLabel}
8    aria-pressed={pressed}
9  ></button>
10</template>

コンポーネントの JavaScript はキャメルケースの属性の対応付けを使用して、lightning-button.js の値を取得および設定します。

1// lightning-button.js
2import { LightningElement, api } from "lwc";
3export default class LightningButton extends LightningElement {
4  innerLabel;
5
6  @api
7  get ariaLabel() {
8    return this.innerLabel;
9  }
10
11  set ariaLabel(newValue) {
12    this.innerLabel = newValue;
13  }
14
15  pressed;
16
17  @api
18  get ariaPressed() {
19    return this.pressed;
20  }
21
22  set ariaPressed(newValue) {
23    this.pressed = newValue;
24  }
25}

生成される HTML は次のようになります。

1<lightning-button>
2  <button
3    title="Log In"
4    label="Log In"
5    onclick={login}
6    aria-label="Log In"
7    aria-pressed="true"
8  ></button>
9</lightning-button>

ARIA をサポートするスクリーンリーダーが表示ラベルを読んで、ボタンが押されたことを示します。

ARIA 属性はアクセス機構関数内でキャメルケースを使用します。たとえば、aria-label は ariaLabel になります。完全な対応付けリストは、GitHub リポジトリ (lwc/packages/@lwc/template-compiler/src/parser/constants.ts) を参照してください。

Note

デフォルトの ARIA 値

コンポーネント作成者は、カスタムコンポーネントでデフォルトの ARIA 属性を定義し、属性値をコンポーネントコンシューマが指定できるようにしたいと考える場合があります。この場合、コンポーネント作成者はコンポーネントの要素でデフォルトの ARIA 値を定義します。

1// lightning-button.js sets "Log In" as the default label
2import { LightningElement } from "lwc";
3export default class LightningButton extends LightningElement {
4  connectedCallback() {
5    this.template.ariaLabel = "Log In";
6  }
7}

属性は connectedCallback() で定義してください。constructor() では属性を定義しないでください。

Note

このコンポーネントを使用して、aria-label 値を提供した場合、提供した値が表示されます。

1<!-- parent.html -->
2<template>
3  <lightning-button
4    title="Log In"
5    label="Submit"
6    onclick={login}
7    aria-label="Submit"
8    aria-pressed
9  ></lightning-button>
10</template>

生成される HTML は次のようになります。

1<lightning-button>
2  <button title="Log In" label="Submit" aria-label="Submit" aria-pressed="true"></button>
3</lightning-button>

aria-label 値を提供しない場合、デフォルト値が表示されます。

1<!-- parent.html -->
2<template>
3  <lightning-button title="Log In" label="Log In" onclick={login}></lightning-button>
4</template>

生成される HTML は次のようになります。

1<lightning-button>
2  <button title="Log In" label="Log In" onclick={login} aria-label="Log In"></button>
3</lightning-button>

静的値

カスタムコンポーネントを作成し、属性の値が変更されないようにしたいと考えています。この場合はどうすればよいでしょうか? 適切な例として role 属性があります。コンポーネントのコンシューマが button を tab に変更することは望まれません。ボタンはボタンです。

次の例のように、生成された HTML には button の role が常に含まれるようにしたいと考えています。

1<lightning-button>
2  <div title="Log In" label="Log In" onclick={login} role="button"></div>
3</lightning-button>

属性の値をコンシューマが変更できないようにするには、単に文字列を返します。次の例では、role 値に常に "button" が返されます。

1// lightning-button.js
2import { LightningElement, api } from "lwc";
3export default class LightningButton extends LightningElement {
4  set role(value) {}
5
6  @api
7  get role() {
8    return "button";
9  }
10}

さまざまなテンプレートからのリンク ID および ARIA 属性

同じテンプレートの ID および ARIA 属性は自動的にリンクされます。別のテンプレートに属性がある場合、その属性を手動でリンクする必要があります。

ネイティブの Shadow DOM では、別々のテンプレートにある要素間で ID や ARIA 属性をリンクすることはできません。

2 つの要素を ID や ARIA 属性を使ってリンクするには、Light DOM を使用して同じシャドウルートに配置します。「Light DOM」のアクセシビリティセクションを参照してください。

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。