コンポーネントアクセシビリティ属性
スクリーンリーダーや他の支援技術でコンポーネントを使用できるようにするには、コンポーネントで HTML 属性を使用します。HTML 属性は、含まれる UI 要素を記述します。アクセシビリティソフトウェアは属性を読み上げることで UI 要素を解釈します。
アクセシビリティの重要な点の 1 つに、title 属性を使用することがあります。スクリーンリーダーでは title 属性の値がユーザに読み上げられます。title 属性を持つ Lightning Web コンポーネントを使用する場合は、必ず値を指定します。たとえば、lightning-button コンポーネントには title 属性があります。
このテンプレートでは次のような HTML 出力が作成され、これをスクリーンリーダーはユーザに「Log In」 (ログイン) と読み上げます。
Lightning Web コンポーネントを作成するときに、スクリーンリーダーで値をユーザに読み上げるようにする場合、@api を使用して title 公開属性を公開します。
属性を公開プロパティとして公開することで属性を制御する場合、デフォルトでは属性は HTML 出力に表示されなくなります。表示される HTML に値を属性として渡す (プロパティを反映するため) には、プロパティの getter と setter を定義して setAttribute() メソッドをコールします。
setter 内で操作を実行することもできます。非公開プロパティを使用して、計算された値を保持します。
setAttribute() の使用法についての詳細は、「HTML 属性への JavaScript プロパティの反映」を参照してください。
スクリーンリーダーでボタンの現在の状態を読み上げるなど、より高度なアクセシビリティを提供するには、ARIA 属性を使用します。この属性により、より詳細な情報が ARIA 標準をサポートするスクリーンリーダーに提供されます。
ARIA 属性を HTML テンプレート内の id 属性に関連付けることができます。コンポーネントのテンプレートファイル内で id 値を一意にする必要があります。これで、スクリーンリーダーは ARIA 属性 (aria-describedby、aria-details、aria-owns など) を特定の要素に関連付けることができます。
テンプレートを表示するときに、id 値が、グローバル一意値に変換される場合があります。CSS または JavaScript 内で id セレクタを使用しないでください。変換された id に一致しなくなります。代わりに、要素の class 属性、または data-id のような data-* 属性を使用してください。
次にいくつかコードを見てみましょう。aria-pressed 属性は、ボタンが押されたときに通知するようにスクリーンリーダーに指示します。lightning-button コンポーネントを使用する場合、次のように記述します。
このコンポーネントで ARIA 属性を公開プロパティとして定義し、フィールドを使用して公開プロパティを取得および設定します。
コンポーネントの JavaScript はキャメルケースの属性の対応付けを使用して、lightning-button.js の値を取得および設定します。
生成される HTML は次のようになります。
ARIA をサポートするスクリーンリーダーが表示ラベルを読んで、ボタンが押されたことを示します。
ARIA 属性はアクセス機構関数内でキャメルケースを使用します。たとえば、aria-label は ariaLabel になります。完全な対応付けリストは、GitHub リポジトリ (lwc/packages/@lwc/template-compiler/src/parser/constants.ts) を参照してください。
コンポーネント作成者は、カスタムコンポーネントでデフォルトの ARIA 属性を定義し、属性値をコンポーネントコンシューマが指定できるようにしたいと考える場合があります。この場合、コンポーネント作成者はコンポーネントの要素でデフォルトの ARIA 値を定義します。
属性は connectedCallback() で定義してください。constructor() では属性を定義しないでください。
このコンポーネントを使用して、aria-label 値を提供した場合、提供した値が表示されます。
生成される HTML は次のようになります。
aria-label 値を提供しない場合、デフォルト値が表示されます。
生成される HTML は次のようになります。
カスタムコンポーネントを作成し、属性の値が変更されないようにしたいと考えています。この場合はどうすればよいでしょうか? 適切な例として role 属性があります。コンポーネントのコンシューマが button を tab に変更することは望まれません。ボタンはボタンです。
次の例のように、生成された HTML には button の role が常に含まれるようにしたいと考えています。
属性の値をコンシューマが変更できないようにするには、単に文字列を返します。次の例では、role 値に常に "button" が返されます。
同じテンプレートの ID および ARIA 属性は自動的にリンクされます。別のテンプレートに属性がある場合、その属性を手動でリンクする必要があります。
ネイティブの Shadow DOM では、別々のテンプレートにある要素間で ID や ARIA 属性をリンクすることはできません。
2 つの要素を ID や ARIA 属性を使ってリンクするには、Light DOM を使用して同じシャドウルートに配置します。「Light DOM」のアクセシビリティセクションを参照してください。