おすすめの技術書LT - vol.4

Transcript

1. 書籍読了後の変化 おすすめの技術書 LT会 - vol.4 株式会社ラクス 亀ノ上孝雄 2022 年 7 月 14 日
2. 目次 ・自己紹介 ・HTML解体新書について ・読了後の変化 ・アクセシビリティ ・解決策 ・補足説明 ・まとめ
3. 自己紹介 亀ノ上孝雄 株式会社ラクス 2021年4月入社 マークアップエンジニア →フロントエンドエンジニア 趣味：動画鑑賞、学習
4. HTML解体新書読みました
5. ▪タイトル HTML解体新書　 仕様から紐解く本格入門 ▪難易度 中級者（初級者） ▪こんな方におすすめ • HTMLのタグはわかってきた気が する • 仕様はあまり見たことがない • アクセシビリティにも興味がある
6. 感想
7. 感想 HTMLへのより深い理解を得ることができた （特にアクセシビリティ）
8. 感想 HTMLへのより深い理解を得ることができた （特にアクセシビリティ） • 各要素に対して定義からアクセシビリティについてまで詳細に扱って いる • アクセシビリティは普段あまり意識せず実装しているので、非常に参 考になった • WAI-ARIAについても解説がある。しかしARIAは他の要素へ影響を 与えたり、特定の要素にしか使えなかったり複雑なので今後の課題 となった。
9. やっぱり仕様は読まなきゃ
10. 読了後の変化 • 今まで以上に仕様について気にするようになった • 都度仕様を確認する習慣がついた • アクセシビリティについても考慮するようになった
11. 読了後の変化 • 今まで以上に仕様について気にするようになった • 都度仕様を確認する習慣がついた • アクセシビリティについても考慮するようになった 　　　　　　　　　そんなある日のこと・・・
12. list-style-type : none
13. list-style-type : none ol / ul の discを消す • ←まさにこれを消す • 呼吸レベルで何も考えずに使っていた • きっとみんな使ってる
14. でもそれって・・・
15. でもそれって・・・ アクセシビリティに影響が あるって知っていました？？
16. 私は知りませんでした
17. 概要 list-style-type: noneを使うとWebkitブラウザはlistのセマンティクスを削除する
18. 概要 つまり？ • VoiceOverきかなくなる。 • スクリーンリーダーで 読まなくなる list-style-type: noneを使うとWebkitブラウザはlistのセマンティクスを削除する
19. 概要 つまり？ • VoiceOverきかなくなる。 • スクリーンリーダーで 読まなくなる なぜ？ • バグではなく仕様 • VoiceOverユーザーから「リ ストの開始」「リストの終了」 のアナウンスが多すぎるとの 報告 list-style-type: noneを使うとWebkitブラウザはlistのセマンティクスを削除する
20. 解決策
21. 解決策 WAI-ARIA 明示的にlistであることをroleに示 す <ul role="list">　　　
22. 解決策 WAI-ARIA 明示的にlistであることをroleに示 す <ul role="list">　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; }
23. 解決策 WAI-ARIA role属性によって明示的にlistであ ることを示す <ul role="list">　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 補足

24. 解決策 WAI-ARIA role属性によって明示的にlistであ ることを示す <ul role="list">　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 暗黙のロール • <button role=”button”>など • マークアップを冗長にするため不要 • <ul role=”list”>も同様に本来は不要 補足

25. 解決策 WAI-ARIA role属性によって明示的にlistであ ることを示す <ul role="list">　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 暗黙のロール • <button role=”button”>など • マークアップを冗長にするため不要 • <ul role=”list”>も同様に本来は不要 補足
 リストマーカーが削除され、 セマンティクスが抑制された場合、 ロールを復元するために ulタグにrole=”list”を使用
26. 解決策 WAI-ARIA role属性によって明示的にlistであ ることを示す <ul role="list">　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 暗黙のロール • <button role=”button”>など • マークアップを冗長にするため不要 • <ul role=”list”>も同様に本来は不要 補足
 - リストマーカーが削除され、 - セマンティクスが抑制された場合、 - ロールを復元するために - ulタグにrole=”list”を使用
27. まとめ • HTML解体新書を読んで、今まで知らなかったタグについて 知ることができた。 • 何も考えずに使っていたタグについても、仕様について新し い知識を得ることができた。 • アクセシビリティについて興味を持つことができた • 興味を持つようになったことで、実装に対する意識も変化し た。
28. やっぱり仕様は読まなきゃ （２回目）
29. 参考 - https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html - https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html - https://bugs.webkit.org/show_bug.cgi?id=170179 - https://momdo.github.io/html-aria/
30. ご清聴ありがとうございました