WAI-ARIA の IDL 属性について

https://gyazo.com/db02711295480193878aff69b8be22fb

https://gyazo.com/5510d4e88c34b7dc94f91817952946e7

メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります

自己紹介

得意領域

https://gyazo.com/93e565d87ab03c58701d31ee4d685837

めでたいね

こちらもめでたい

作業草案（3つ前の段階）の最終更新が2019/12/18

およそ5年半かかってます

今回話す部分

code:js

const toggleButton = document.getElementById('toggle');

toggleButton.setAttribute('role', 'button');

toggleButton.setAttribute('aria-disabled', isAriaDisabled ? 'false' : 'true');

code:js

const toggleButton = document.getElementById('toggle');

toggleButton.role = 'button';

toggleButton.ariaDisabled = isAriaDisabled ? false : true;

code:html

<custom-label>

<label id="foo">Hello world</label>

</custom-label>

<custom-input>

<input type="text" id="foo">

</custom-input>

みたいなパターンがあったときに

code:html

<custom-input>

<input type="text" aria-labelledby="foo">

</custom-input>

という参照ができない

input.ariaLabelledByElements = [label]

code:js

canvas.attachAccessibleRoot();

const table = canvas.accessibleRoot.appendChild(new AccessibleNode());

table.role = "table";

table.colCount = 10;

table.rowcount = 100;

code:js

VirtualNode.focusable = true;

https://gyazo.com/e445f1731f74e8bca2e466bb0cd4815e https://wicg.github.io/aom/caniuse.html#summary

※2022年4月時点のデータ

Thank you for listening !

https://gyazo.com/4c1d0df4903765cc351797c10f903ba1

参考