デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi

TSKaigi 2025 本編で話せなかったこと、話し足りなかったことでの登壇資料です。

Google Slides版はこちら

この登壇は、TSKaigi 2025本編での登壇「TypeScriptとReactで、WAI-ARIAの属性を正しく利用する」」の「本編で話せなかったこと、話し足りなかったこと」の位置付けのものです。

驚きの無法地帯（TypeScript Playground）
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか

見えにくい、読みにくい、「困った！」を解決するデザイン
ウェブアクセシビリティ導入ガイドブック
Webアプリケーションアクセシビリティ

プログラマーは、目の前のパソコンをカタカタやって……
非プログラマーにTypeScriptというものを……

freee Application Designerの姿―業務デザインの裏側大公開！―

楽天ブックス キャンペーン
Webアプリケーションアクセシビリティ（アクリルスタンド・サイン本）
Webアプリケーションアクセシビリティ（アクリルキーホルダー・サイン本）
モバイルアプリアクセシビリティ入門（アクリルスタンド・サイン本）
モバイルアプリアクセシビリティ入門（アクリルキーホルダー・サイン本）
Webを支える技術（アクリルスタンド・サイン本）
Webを支える技術（アクリルキーホルダー・サイン本）
オブジェクト指向UIデザイン（アクリルスタンド・サイン本）
オブジェクト指向UIデザイン（アクリルキーホルダー・サイン本）
縁の下のUIデザイン（アクリルスタンド・サイン本）
縁の下のUIデザイン（アクリルキーホルダー・サイン本）

Transcript

1. デザイナーがTSKaigiで WAI-ARIAの話をしてみて @ymrl TSKaigi 2025 本編で話せなかったこと、話し⾜りなかったこと 2025年5⽉23⽇
2. ⾃⼰紹介 • ymrl （⼭本 伶） ◦ 「ymrl」は「やまある」と読みます ◦ フリー株式会社 デザイナー/エンジニア • 「Webアプリケーションアクセシビリティ」共著者 • Software Design 6⽉号の特集に記事を書きました • ⾝体の調⼦が（ずっと）悪いので座って喋ります みなさん、⾻と筋⾁は⼤事にしてください……
3. セッションのフォローアップ
4. 今回の登壇の概要 • WAI-ARIAの属性について、Reactの型定義 (@types/react）では ◦ role に⾃由な⽂字列が使え、role定義もWAI-ARIA 1.1のまま • TypeScriptのJSXでは、属性名に - があると型が未定義でもスルーされる • aria-* 属性は kebab-case ではなく camelCase で表現したほうが安⼼ • camelCase で role に対して許可された aria-* 属性のみを使えるようにする aria-attribute-types を作ってみた
5. TypeScriptのJSXには驚きの無法地帯が存在する TypeScript Playground
6. aria-attribute-types のコードと向き合っています • TSKaigiで発表した時点のコードでは不完全だったことに気付いた • 設計から⾒直して直しています。いまこの会場でも。
7. やたらマニアックな内容だったのではと思っている • そもそもrole属性やaria-*属性を使っている⼈がそんなに多くないだろう • アクセシビリティの話でよくある「なぜ⼤切か」みたいな話をしていない • WAI-ARIAの仕様とTypeScriptの型定義の話ばかりを延々としている • ふだんは「role属性やaria-*属性をなるべく使うな」と⾔っているので、 いつも喋っているのとは真逆の内容になっていた ◦ role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、 いつ使うべきなのか
8. WAI-ARIAの属性はなるべく使わないでください • WAI-ARIAのaria-*属性を使う上での罠について発表しました ◦ たまたま仕事中に発⾒して、⾯⽩いなと思って温めていたネタです ◦ TypeScriptを使う⼈の知的好奇⼼を刺激できると思っただけです • これはアクセシビリティに取り組む上で必須なものではないです！！ ◦ 多くの場⾯は、role属性やaria-*属性を指定する必要はありません ◦ HTML要素が持つ暗黙の WAI-ARIAセマンティクスに頼るべきです ◦ 下⼿に使うより無いほうがマシ（No ARIA is better than Bad ARIA）
9. アクセシビリティを学ぶには • role属性やaria*属性のことは⼀旦忘れて、以下の順で読んでください ◦ ⾒えにくい、読みにくい、「困った！」を解決するデザイン ◦ ウェブアクセシビリティ導⼊ガイドブック ◦ Webアプリケーションアクセシビリティの1,2,3,5章 • role属性やaria*属性は、Webアプリケーションアクセシビリティの 3章で初登場し、5章で助演男優賞‧助演⼥優賞くらいの活躍をします
10. Software Designの最新号もおすすめです
11. デザイナーとしての話
12. わたしはデザイナー • もともとWebデザインからHTMLやプログラミングに興味を持った • 学⽣時代はインタラクションデザインの研究室に所属 • エンジニアとして就職、freeeへもエンジニアとして転職 • UIデザインや実装が揃っていないこと、アクセシビリティへの課題意識から デザイナーと⼀緒にデザインシステムをつくりはじめた • 希望を出してデザイナーに社内異動
13. デザイナーであることにこだわりがある • 開発に関わる上で、使う⼈のことを考えずにいることができない ◦ エンジニアリングよりもユーザーのことにフォーカスしていたい • コードを書くのも絵を描くのも、ソフトウェア開発のプロセス内の⼿段 ◦ ユーザーの元に、最終的に⽬的に適うものが届くことが重要 ◦ 思い描いたものをそのままユーザーに届けるためにはコードを書く • デザインシステムのユーザーは、社内の開発者 ◦ 社内の開発者もユーザーであり、開発しやすいものを届けたい
14. https://x.com/ymrl/status/1924062051649175880
15. 現在: デザイナーとしてコードを書いたり教えたり • 会社ではデザインシステムに関していろいろ状況が変化していった ◦ 開発⽣産性を上げられるデザインツール‧HTML/CSS/JS のライブラリ ◦ freeeのUIデザイン⾃体をもっと良いデザインにしていきたい ◦ デザインプリンシプル策定‧より⼤きな粒度のコンポーネントへ • コードを書くのは⼿段 ◦ 実現したいUIを、最も早く⾼品質に作るには⾃分がやるしかない • 最近は⾃分が書くだけでなく、周囲のデザイナーに教えようとしている
16. freeeのデザイナーのイベントがあります！ freee Application Designerの姿 ―業務デザインの裏側⼤公開！― 2025/06/19(⽊) 19:00 〜 21:00 フリー株式会社 ⼤崎オフィス + YouTube Live https://freee.connpass.com/event/356728/
17. デザイナーとTypeScript
18. https://x.com/ymrl/status/1909465672079622213
19. 多くのデザイナーにとってのTypeScript エンジニア「フロントエンドだけなら簡単だからやってみませんか」 デザイナー「ﾜｰｲ」 Node.js, npm, TypeScript「「「こんにちは」」」 デザイナー「ｳｯ..ﾜ...ﾜｧ....」
20. TypeScriptの難しさ • 「JavaScriptを書けばブラウザで動く」という話をした直後に、 「現場では別の⾔語で書いています」という話をしなければいけない • 黒い画⾯が怖い、エラーメッセージが怖いという状況で、 黒い画⾯で怒られるための仕組みを⽤意しなければならない • 「型」の概念を説明しづらい、理解しづらい • 難しいものに向き合って解きほぐすのが仕事のデザイナーなので、 難しいものが難しいまま存在していることが気になってしまう
21. じつはこれはエンジニアも同じなのでは • プロジェクトに参画している全員が、TypeScriptを好きで書いているのか？ • TypeScriptを採⽤する利点を説明できるのか？納得できているのか？ • 実はコンパイラに怒られる箇所を仕⽅なしに直しているだけなのでは？
22. TSKaigiは熱量が⾼いイベントだったが…… • 中級者以上を対象とするトークが多く、難しいという声もちらほら聞こえた ◦ 他の場所では聞けない話が多く、個⼈としては楽しく参加しました • 初級TypeScriptユーザーが来年の開催までに中級者になれるだろうか？ ◦ 学習のきっかけを⾃⼒で掴める環境になっているだろうか？ ◦ ステップアップしていくのに必要なリソースに辿りつけるだろうか？ • TypeScriptユーザーの裾野はこれからも広がっていけるだろうか？ ◦ 「なんか知らんけどAIが教えてくれるヤツ」になっていないだろうか？
23. 気軽にステップアップできる環境があるといいと思ってる • 現状のTypeScriptは、初級者にとって⼤きな壁があるように⾒える ◦ ReactやVueのユーザーは増えているが、TypeScriptの話を 初級者がしている様⼦はあまり⾒られないように⾒える ◦ 教える側として、TypeScriptをどう教えていけばいいかわからない • 初級者が徐々にTypeScriptのことを知っていくにはどうすればいいのか？ ◦ すぐ難しめ‧分厚めな本が出てくるイメージ ◦ いい教材が知りたいです！薄くてやさしいやつ！！
24. そういう感じで 来年のTSKaigiも楽しみにしています！
25. 本とか雑誌とか
26. 楽天ブックスのキャンペーンのお知らせ 「Webアプリケーションアクセシビリティ」の アクリルキーホルダーまたはアクリルスタンドと、 サイン本のセットが楽天ブックスで販売中です 「モバイルアプリアクセシビリティ⼊⾨」 「Webを⽀える技術」 「オブジェクト指向UIデザイン」 「縁の下のUIデザイン」 でも、キャンペーン実施中です
27. freeeのデザイナーのイベントがあります！ freee Application Designerの姿 ―業務デザインの裏側⼤公開！― 2025/06/19(⽊) 19:00 〜 21:00 フリー株式会社 ⼤崎オフィス + YouTube Live https://freee.connpass.com/event/356728/
28. ご清聴ありがとう ございました