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

by takaokamenoue

Slide 1

Slide 1 text

書籍読了後の変化おすすめの技術書 LT会 - vol.4 株式会社ラクス亀ノ上孝雄 2022 年 7 月 14 日

Slide 2

Slide 2 text

目次・自己紹介・HTML解体新書について・読了後の変化・アクセシビリティ・解決策・補足説明・まとめ

Slide 3

Slide 3 text

自己紹介亀ノ上孝雄株式会社ラクス 2021年4月入社マークアップエンジニア →フロントエンドエンジニア趣味：動画鑑賞、学習

Slide 4

Slide 4 text

HTML解体新書読みました

Slide 5

Slide 5 text

■タイトル HTML解体新書　仕様から紐解く本格入門 ■難易度中級者（初級者） ■こんな方におすすめ ● HTMLのタグはわかってきた気がする ● 仕様はあまり見たことがない ● アクセシビリティにも興味がある

Slide 6

Slide 6 text

感想

Slide 7

Slide 7 text

感想 HTMLへのより深い理解を得ることができた（特にアクセシビリティ）

Slide 8

Slide 8 text

感想 HTMLへのより深い理解を得ることができた（特にアクセシビリティ） ● 各要素に対して定義からアクセシビリティについてまで詳細に扱っている ● アクセシビリティは普段あまり意識せず実装しているので、非常に参考になった ● WAI-ARIAについても解説がある。しかしARIAは他の要素へ影響を与えたり、特定の要素にしか使えなかったり複雑なので今後の課題となった。

Slide 9

Slide 9 text

やっぱり仕様は読まなきゃ

Slide 10

Slide 10 text

読了後の変化 ● 今まで以上に仕様について気にするようになった ● 都度仕様を確認する習慣がついた ● アクセシビリティについても考慮するようになった

Slide 11

Slide 11 text

読了後の変化 ● 今まで以上に仕様について気にするようになった ● 都度仕様を確認する習慣がついた ● アクセシビリティについても考慮するようになった　　　　　　　　　そんなある日のこと・・・

Slide 12

Slide 12 text

list-style-type : none

Slide 13

Slide 13 text

list-style-type : none ol / ul の discを消す ● ←まさにこれを消す ● 呼吸レベルで何も考えずに使っていた ● きっとみんな使ってる

Slide 14

Slide 14 text

でもそれって・・・

Slide 15

Slide 15 text

でもそれって・・・アクセシビリティに影響があるって知っていました？？

Slide 16

Slide 16 text

私は知りませんでした

Slide 17

Slide 17 text

概要 list-style-type: noneを使うとWebkitブラウザはlistのセマンティクスを削除する

Slide 18

Slide 18 text

概要つまり？ ● VoiceOverきかなくなる。 ● スクリーンリーダーで読まなくなる list-style-type: noneを使うとWebkitブラウザはlistのセマンティクスを削除する

Slide 19

Slide 19 text

概要つまり？ ● VoiceOverきかなくなる。 ● スクリーンリーダーで読まなくなるなぜ？ ● バグではなく仕様 ● VoiceOverユーザーから「リストの開始」「リストの終了」のアナウンスが多すぎるとの報告 list-style-type: noneを使うとWebkitブラウザはlistのセマンティクスを削除する

Slide 20

Slide 20 text

解決策

Slide 21

Slide 21 text

解決策 WAI-ARIA 明示的にlistであることをroleに示す

Slide 22

Slide 22 text

解決策 WAI-ARIA 明示的にlistであることをroleに示す

　　　魔法 ZWSP(幅0のスペース)を擬似要素で追加するとなぜかセマンティクスが蘇生する li::before { content: "\200B"; }

Slide 23

Slide 23 text

解決策 WAI-ARIA role属性によって明示的にlistであることを示す

　　　魔法 ZWSP(幅0のスペース)を擬似要素で追加するとなぜかセマンティクスが蘇生する li::before { content: "\200B"; } 補足 

Slide 24

Slide 24 text

解決策 WAI-ARIA role属性によって明示的にlistであることを示す

も同様に本来は不要補足 

Slide 25

Slide 25 text

解決策 WAI-ARIA role属性によって明示的にlistであることを示す

も同様に本来は不要補足  リストマーカーが削除され、セマンティクスが抑制された場合、ロールを復元するために ulタグにrole=”list”を使用

Slide 26

Slide 26 text

解決策 WAI-ARIA role属性によって明示的にlistであることを示す

も同様に本来は不要補足  - リストマーカーが削除され、 - セマンティクスが抑制された場合、 - ロールを復元するために - ulタグにrole=”list”を使用

Slide 27

Slide 27 text

まとめ ● HTML解体新書を読んで、今まで知らなかったタグについて知ることができた。 ● 何も考えずに使っていたタグについても、仕様について新しい知識を得ることができた。 ● アクセシビリティについて興味を持つことができた ● 興味を持つようになったことで、実装に対する意識も変化した。

Slide 28

Slide 28 text

やっぱり仕様は読まなきゃ（２回目）

Slide 29

Slide 29 text

参考 - 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/

Slide 30

Slide 30 text

ご清聴ありがとうございました