Tweet
Tweet

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であ ることを示す
    　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 暗黙のロール ● など ● マークアップを冗長にするため不要 ●
      も同様に本来は不要 補足


Slide 25

Slide 25 text

解決策 WAI-ARIA role属性によって明示的にlistであ ることを示す
    　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 暗黙のロール ● など ● マークアップを冗長にするため不要 ●
      も同様に本来は不要 補足
 リストマーカーが削除され、 セマンティクスが抑制された場合、 ロールを復元するために ulタグにrole=”list”を使用

Slide 26

Slide 26 text

解決策 WAI-ARIA role属性によって明示的にlistであ ることを示す
    　　　 魔法 ZWSP(幅0のスペース)を擬似要 素で追加するとなぜかセマンティク スが蘇生する li::before { content: "\200B"; } 暗黙のロール ● など ● マークアップを冗長にするため不要 ●
      も同様に本来は不要 補足
 - リストマーカーが削除され、 - セマンティクスが抑制された場合、 - ロールを復元するために - 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

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