reading-flow プロパティから見る アクセシビリティ的懸念点

Transcript

1. reading-flow プロパティから⾒る アクセシビリティ的懸念点 綾本公平
2. ⾃⼰紹介 • 綾本公平（あやもとこうへい） • 株式会社ラクス・パートナーズ • 3年ほどバックエンド領域でエンジニア • 現在フロントエンド2年目 • Webアクセシビリティ領域を勉強中 • Twitter（@ksu_kohei0104）
3. 今回の登壇で… • 話すこと⭕ ◦ reading-flow プロパティの解説 ◦ アクセシビリティの基礎知識の説明 ◦ アクセシビリティ視点での懸念点の解説 • 話さないこと❌ ◦ reading-flow プロパティの詳細な実装⽅法 ◦ WCAGに基づいた詳細な解説
4. reading-flow プロパティとは • Chrome 137 以降で利⽤できる • ⾒た⽬の並び順とDOM上の並び順が異なってしまう問題の解決のた めに提案 • CSS側である程度フォーカスをコントロールすることができ、意図し ない移動を防げる ◦ キーボードフォーカス ◦ スクリーンリーダーなどの⽀援技術 論理的な連続フォーカス ナビゲーションに CSS 読み上げフローを利⽤する https://developer.chrome.com/blog/reading-flow?hl=ja
5. 利⽤できる値 • flex コンテナ内でのみ利⽤できる ◦ flex-visual：writing mode に考慮した視覚的な順序に従う ◦ flex-flow：flex-visual の逆順に維持する • grid コンテナ内でのみ利⽤できる ◦ grid-columns：writing mode に考慮して、⾏ごとに従う ◦ grid-order：writing mode に考慮して、列ごとに従う reading-flow - CSS - MDN - Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/reading-flow
6. デモ
7. そもそも… アクセシビリテとは、『利⽤可能な状況の幅広さ』を指す⾔葉。 • ユーザビリティ（usability） ◦ 特定のユーザが特定の利⽤状況において、システム、製品⼜はサービスを利⽤する際に、効 果、効率及び満⾜を伴って特定の⽬標を達成する度合い。 • アクセシビリティ（accessibility） ◦ 製品、システム、サービス、環境及び施設が、特定の利⽤状況において特定の⽬標を達成する ために、ユーザの多様なニーズ、特性及び能⼒で使える度合い ユーザビリティは特定のユーザーにとっての使いやすさ、 アクセシビリティは幅広い範囲のユーザーが利⽤できるかどうか アクセシビリティ学習の⼿引きとしての⼊⾨講座 https://tech.plaid.co.jp/introduction-to-accessibility
8. 間嶋沙知『⾒えにくい、読みにくい「困った！」を解決するデザイン【改訂版】』 マイナビ出版 2024年
9. どんなアクセシビリティがあるのか • どんなデバイスでも、最適なレイアウトで快適に利⽤できる • マウスやキーボード、タッチパネルでも操作ができる • スクリーンリーダー（⾳声読み上げ機能）でも、問題なく利⽤できる • ⽂字がくっきりとした⾊使いで書かれていて、⽼眼でも読みやすい • ナビゲーションに使われる⾔葉に⼀貫性があり、迷⼦になりにくい • 拡⼤機能を利⽤しても、デザインが崩れることなく利⽤できる などなど… がんばらないアクセシビリティ https://docs.google.com/presentation/d/1ARkpEjP9Le6oG4DbV9OEZDFLnIrsnTTIv8 mVpEQ3Vng/edit?slide=id.g2ed02dfebc1_2_294#slide=id.g2ed02dfebc1_2_294
10. 懸念点1 レイアウトの複雑化の肯定 • 複雑なデザインを肯定してしまうおそれ • 利⽤するデバイスによって情報のアクセスのしやすさに差ができる ◦ どんなデバイスでも、平等に情報にアクセスできない恐れ ◦ ユーザーに混乱を招く場合もある
11. 懸念点2 根本的な問題は解決できていない • reading-flow プロパティを利⽤しないと解決しない設計も問題 ◦ セマンティックはHTMLが担保すべき ◦ CSSも持つと開発体験も悪化してしまう アクセシビリティとしては-100点のものを 0点にしているだけ
12. まとめ • reading-flow プロパティを使えばDOMの並び順を制御できる • DOMの編集などを⾏えない場合などでは⼀つの選択肢になる • ただし、アクセシビリティ視点では根本の解決にはならない ◦ デザイン全体の⾒直し ◦ DOMの構造を⾒つめ直す
13. ご清聴ありがとうございました