Agenda
オープニング
自己紹介
- SUGI(@blindsoup2p1)
- デザイン&リサーチ ポカリ（Poca11y）チーム
- 視覚障害の全盲、日常生活でも仕事でもスクリーンリーダーを利用している
- プロダクトのアクセシビリティ向上と社内外への啓発をしている
- アクセシビリティについて質問・相談・要望などは、
皆さんが作ったウェブコンテンツは、適切に伝わっているでしょうか。
知らぬ間に、一部のユーザーを排除したり、閲覧しにくいなどのストレスを与えたりしてはいないでしょうか。
以下のユーザーに伝わっているでしょうか
- スクリーンリーダーユーザー
- ロービジョン
- キーボードユーザー
- 肢体不自由
- モバイル・タッチユーザー
より多くの人にコンテンツを届けるために
✓ セマンティックな HTML を書く → アクセシブルになる
- セマンティックな HTML とは
- 文章の意味に基づき、適切な用途のタグで意味付けされた HTML
コンセプト
誰に：HTML にかかわるエンジニア・ウェブ制作者の方々 何を：アクセシブルな HTML を書く利点と方法がわかった、普段から意識してみよう、と言って欲しい
すぐ実践できる基本的で汎用的な考え方やテクニックについて、
スクリーンリーダーのデモをしながら進めていきます。
スクリーンリーダーはウェブページをどう読むのか
スクリーンリーダーとは
- 画面の情報を合成ン音声や点字として出力するソフトウェア
- 全盲だけでなく、ロービジョンやディスレクシアの人にも使われている
- スクリーンリーダーにはいくつか種類がある
身の回りにあるスクリーンリーダー
デフォルトで組み込まれています。
- iOS : VoiceOver
- MacOS : VoiceOver
- Android : TalkBack
- Windows : ナレーター
スクリーンリーダーの挙動
スクリーンリーダーはウェブページをどのように読むのでしょうか。
- HTML のタグを解釈して構造情報を読む
- 文字情報だけを読むわけではない
- タグの意味に基づいて、構造情報もフィードバックする
- 基本的にタグの順番道理にシーケンシャルに読む
- ２次元構造ではなく、ページの先頭から最後までの１本の直線のイメージ
- 右や左といった視覚的なレイアウトは読み上げからはわからない
HTML の書き方がスクリーンリーダーの読み上げに影響する
- タグの意味を解釈して構造情報を読む
- タグの出現準に読む
→ 適切な HTML を書くとアクセシブルになる
より多くの人にコンテンツを届けるために意識すること
HTML のタグを正しく使うこと
- 適切な要素を用いてマークアップする
- 見た目だだけにとらわれず、構造的なマークアップを意識する
本講座では 4 つ紹介します
- 見出しは見出しタグ
- ボタンは button タグ
- フォームのラベルは label タグ
- 領域はランドマークのタグ
1. 見出しは見出しタグ
○ h1-h6 タグを使う
× div と CSS や b タグで見出しっぽく見せる
○ 見出しレベルをスキップしない
× 見出しレベルが飛び飛び（h2 の次に h4 など）
見出しのメリット
見出しタグでマークアップすることで
- スクリーンリーダーの見出しジャンプ機能が使える
- <h1>-<h6>要素でマークアップされた見出しだけを拾い読みすることができる
- 数字の 1 ～ 6 のキーを押すと特定の見出しレベルの見出しだけを拾い読みすることができる
- ページのアウトラインを把握できる
- 見出しジャンプ機能で見出しの階層関係を意識しながらたどれる
見出しに関する悪いユーザー体験
- 見出しがまったくない
- アウトラインが把握できない
- 目的の場所を探すのに上から下まで読み進めないといけない
- 見出しが多すぎる
- 領域全体が見出しになっている
- 見通しが非常に悪く、見出しジャンプも意味をなさない
見出しのユーザー価値
- スクリーンリーダーユーザー
- 検索エンジン
- ウェブ制作者
○ button タグを使う
× span や a タグを使う
ボタンのメリット
button タグでマークアップすることで
- スクリーンリーダーがボタンであることを通知する
- タブキーでフォーカスできる
- （フォーカスできるので）エンターでボタンを押せる
- フォーカスインジケーターが表示される
ボタンに関する悪いユーザー体験
- span 実装のボタンが乱用されている
- ボタンを見つけるのに苦労する
- そもそもクリックできることがわからず行き詰まる
- span/a/button 実装のボタンが混在している
ボタンのユーザー価値
- スクリーンリーダーユーザー
- キーボードユーザー
- ウェブページの制作者
- フォーカスやフォーカスインジケーターを別途実装しなくて済む
- タグ名からボタンを実装していることが一目瞭然
3. フォームのラベルは label タグ
○ ラベルを label タグでマークアップする
× ラベルを span でマークアップする
フォームラベルのメリット
ラベルを label タグで実装することで
- スクリーンリーダーでコントロールにフォーカスした時に、対応するラベル内容を読み上げる
- 何を入力するコントロールなのかが読み上げ内容から理解できる
- ラベルをクリックすることで、コントロールをアクティブにできる
フォームラベルの悪いユーザー体験
- チェックボックスやラジオボタンのラベルが label タグでマークアップされていない
- 入力項目がたくさんあるフォームで label タグでマークアップされていない
- ラベルとコントロールの対応関係を見失う
- 入力ミスが起き、時間がかかる
フォームラベルのユーザー価値
- スクリーンリーダーユーザー
- ラベルとコントロールの対応関係がわかるので入力しやすい
- ロービジョン、肢体不自由、広い意味でのウェブ閲覧者
4. 領域はランドマークのタグ
○ ヘッダーは header
○ ナビゲーションは navigation
○ コンテンツは main
○ フッターは footer
× それぞれ div でマークアップする
ランドマークのタグのメリット
- スクリーンリーダーのランドマークジャンプ機能が使える
- ページのアウトラインが把握できる
- ランドマークジャンプで見出しよりも大きい単位でページ移動できる
ランドマークのタグのユーザー価値
- スクリーンリーダーユーザー
- 検索エンジン
- ウェブ閲覧者
- ウェブ制作者
まとめ
セマンティックな HTML を書くことで、多くのユーザーの価値を向上させられる
最低限意識すると良い基本的なこと
- 見出しは見出しタグ
- ボタンは button タグ
- フォームのラベルは label タグ
- 領域はランドマークのタグ