Puppeteer と ARIA Handler

先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。 また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って

[braitom]

面白い。“真に Accessible なアプリケーションとは、自動テストや RPA から見ても Accessible であるべきだし、テストの記述がアプリケーションの a11y 向上に繋がると捉えることもできるのではないだろうか”

[yosuke_furukawa]

普通のDOMそのものを使うのではなく、 Accessibility の Object Model 的なもの（ここでいうと ARIA Handler) を使ってるのがほんと面白い。a11y 気をつけて書けばrecorderが正しく動くようになるっていう。

[t2wave]

aria属性をe2eのセレクタに活用する

[teppeis]

「真に Accessible なアプリケーションとは、自動テストや RPA から見ても Accessible であるべき」

[mizdra]

へー面白い

[odan3240]

“「保守性の高い E2E を書こうと思ったら気づいたら a11y も向上した！」といった開発体験に繋げられたら最高だと思う。”