マークアップ / アクセシビリティのイベントに参加
Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン に参加。
継続的にアクセシビリティを高めるために
CA のアクセシビリティおじさん！
最近 FRESH! の開発に携わるようになったらしい。
この講演では、FRESH! での取り組みをもとに、アクセシビリティに対する取り組みを紹介してくれた。
はじめに
アクセシブルなサービスをつくるには、WCAG 2.0 に対応することが大事。
でも、大変。
じゃあ、どうしようか。
まずはできるところから
最初やったのは 2つだけ。
- alt 入ってるかチェック
- 発見：画像を img 要素で表示する代わりに、background-image で指定してるところを見つけた
- 問題：alt が表示されないので、画像にかわる代替手段が提供されない
- 解決：img 要素に置きかえ
- キーボードで操作できるかチェック
- 発見：hover でしか情報を表示しない要素を見つけた
- 問題：キーボードやタップでの操作ができない
- 解決：button 要素を使う
はじめは自分が手を出せるところから始める。 どんなに当たり前だと思ってることでも、調べてみると必ず発見がある。
みんなでできることをやる
ガイドラインはいま作成中。
関係者に自分事だと捉えてもらうために、みんなでつくってる。
アクセシビリティを理解してもらうために、講演者はチームメンバーに WCAG 2.0 の全項目を説明した。そのときに、WCAG 2.0 の文章そのままで伝えるとわかりづらいポイントがあったので、以下のような工夫をこらした。
- 平易な言葉に置き換えて話す
- 具体的な例を出しながら話す
また、アクセシビリティは一部の人だけに必要な対応ではないということを、チームの共通認識とする努力をしている。
まとめ
- まずはできるところから
- みんなでつくる
- 「アクセシビリティーーーーー」（ハートが強い）
マークアップの最適解を見つけ出す方法
ハツラツとした、元気な人。
この講演を聞いたことで、「HTMLでなぜその要素を使うのか？」というのをより深く理解することができた。
なんのためのマークアップ？
- Web サイトの機能を最大限に活かすために、私たちはマークアップを書いている
- マークアップエンジニアは、人と機械をつなぐ翻訳者である
マークアップの最適解とは
マークアップに正解はない
答えがないというわけではなく、答えがたくさんあるということ。
より良いマークアップ（自分にとって最高のマークアップ）を書きたいのであれば、一般的な基準を探す、つまり仕様をみることが大事になる。
- HTML Living Standard
- 有志による日本語訳
- W3C
もうひとつは、実装された機能を実際に触り、体験を通して挙動を把握すること。
挙動を把握することで、「Web サイトの機能を最大限に活かす」マークアップを書くことができる。
その他
Bootstrap には sr-only っていうスクリーンリーダー用のクラスがあるみたい。
アウトラインチョットデキル
まぼろしの TKG。
個人的には、P.22 「見出し要素だけで暗黙のセクションが作れるならセクショニング要素は不要？」の内容を聞けたのが一番嬉しかった。
アウトラインチョットデキル from o_ti
www.slideshare.net
HTML のアウトラインについて
- HTML のアウトラインは 2種類ある
- 暗黙的なアウトラインと、明示的なアウトライン
- セクショニング要素でのマークアップは「"この見出し" について説明しているのはここからここまでだよ」をUAに意図通り指示できる
- セクションをつかってアウトラインをつくれば、コンポーネントベースで考えることができる
アウトラインをチェックする
HTML 5 Outliner をつかう。
セクショニング要素を使う理由
- セクショニング要素を使うと、見出しレベルを下げた後に記述したコンテンツでも親階層に引き上げうことができる
section > h1なら無限に階層が作れる- セクションをコンポーネントとして考えられる（Web Components との親和性）
まとめ
- セクショニング要素は使える
- 「ありがとうアウトラインアルゴリズム」（ハートが強い）
その他
HTML のアウトライン、Web のドキュメントではこのあたりが詳しい。
また、近年ではこういう話題のがあったのを思い出した。
