2018年7月20日

あのWAI-ARIAがIDL属性として実装される！？

UI開発者宇賀

みなさんこんにちは！UI開発者の宇賀です。

昨夜Twitterをぼーっと眺めていましたら、非常に興味深いニュースが飛び込んできました。

Accessible Rich Internet Applications 1.2 suite published, by Joanmarie Diggs https://t.co/j9ivdFW74E
— W3C (@w3c) 2018年7月19日

WAI-ARIA 1.2の草案が先日公開されたとのこと。何が変わったのか気になりますよね...！早速見ていきましょう！

WAI-ARIA 1.1の勧告から変更点についてを見てみると、次のように書かれていました。

C.1 Substantive changes since the WAI-ARIA 1.1 Recommendation

31-May-2018: Add blockquote, caption, and paragraph roles.

01-Apr-2018: Added ARIA IDL Section (JavaScript interfaces).

06-Dec-2017: Make aria-expanded a supported state of menuitem. This change also makes it a supported property of menuitemcheckbox and menuitemradio via inheritance.

06-Dec-2017: When aria-errormessage is not pertinent, authors MUST either ensure the content is not rendered or remove the aria-errormessage attribute or its value. User agents MUST NOT expose aria-errormessage for an object with an aria-invalid value of false.

role属性値に引用とキャプション、それから段落のセマンティクスを示す値が増えたり、menuitemロールがaria-expandedをサポートするようになったりすることが挙げられていますが、現段階で特に気になったのが「IDL Interfaceについての章が追加された」という項目です。

これまでの実装だと、WAI-ARIAに関連する属性をJavaScriptで操作するときには必ず ELEMENT_NODE.setAttribute(), ELEMENT_NODE.getAttribute(), ELEMENT_NODE.removeAttribute() を用いなければなりませんでした。しかし、WAI-ARIAがIDL属性として実装されるとこんな風にコードを書くことができるようになります。

(() => {
    'use strict';

    let element = document.getElementById(SELECTOR);

    element.role = 'dialog';
    element.ariaExpanded = 'false';

    // ...
})();

冗長な ELEMENT_NODE.getAttribute('role') で取得できる値と、今回新たに策定が進められている ELEMENT_NODE.role で取得できる値は同一になるとのこと。シンプルでらくちん、素晴らしいですね！

具体的なサンプルコードは草案の中に掲載されていますのでそちらをご参照ください。

草案の第一稿なので、この先も次々と新しい変更点が追加されていくことでしょう。2017年12月に勧告されたWAI-ARIA 1.1の草案の初稿は2013年09月公開だったので、1.2がいつ頃勧告まで進むのかわかりませんがそのときが待ち遠しいですね！

2018年の記事一覧に戻る