第83回「WEB TOUCH MEETING」まとめ

えいる @eielh

フォーカスインジケータが表示されないサイトがある #wtm83

えいる @eielh

> フォーカスインジケータを非常時にするのはやめろ < #wtm83

にしもつ @24motz

キーボードで操作したい。フォーカスインジケーター非表示化はやめよう。ブラウザのデフォルトがおすすめ #wtm83

にしもつ @24motz

今日の事例、公共系のサイトが多いのが闇の深さを感じる #wtm83

えいる @eielh

li要素にはフォーカスがあたらない。 #wtm83

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

a要素でメニューをマークアップすることでフォーカスを当てやすくしよう #wtm83

にしもつ @24motz

JS のコードにマウス操作のイベントしか設定されていない。li 要素にはキーボードのフォーカスが当たらない。テレビでリモコンを操作しても押せないボタンに。まずは a 要素でメニューを。"mouseenter focus" でメニューを開く #wtm83

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

$(elm).on("mouseenter focus", function(){ なるほど。 #wtm83

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

マウス、キーボードに両対応したドロップダウンメニューを作る。 プラグインは1回作れば使いまわせる。 #wtm83

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

ARIAのあの世界観好きだ #違う #wtm83

えいる @eielh

WAI-ARIAの3キーワード #wtm83 * role * aria-controls * aria-expanded

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

音声案内がちゃんと読んでくれるタブメニューすごい #wtm83

にしもつ @24motz

WAI-ARIA でタブ選択状況を読み上げるデモ #wtm83

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

「ちょっとカッコいいグラフ」 #wtm83

にしもつ @24motz

自分以外の人が NVDA を実演するデモはハラハラする。。 #wtm83

えいる @eielh

SVGのグラムもよみあげられる #wtm83

にしもつ @24motz

読み上げが止まるのはブラウズモードの1行の文字数の設定かな。。 #wtm83

にしもつ @24motz

iPad で VoiceOver の例。ハンバーガーメニュー「拡大」「隠されました」これは NVDA だと「展開」「折りたたみ」と翻訳している。。 #wtm83

にしもつ @24motz

「 デザイニングWebアクセシビリティ」「コーディングWebアクセシビリティ」の紹介 #wtm83

にしもつ @24motz

そういえば自分も紹介してた。デザイニング Web アクセシビリティ d.nishimotz.com/archives/1850 #wtm83

えいる @eielh

Webに関わる人みんなによんで欲しい本らしい。 > デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ amzn.to/1KfzeqL #wtm83

えいる @eielh

こちらもおすすめな参考書籍 > ヘイドン・ピカリング の コーディングWebアクセシビリティ amzn.to/1VYRssD #wtm83

𝕞𝕦𝟚𝕚𝕟🏝️@むじん @mu2in

Q.「最近よく見るブログのアイキャッチはどうするの？」 A.「単なる飾りであればalt=""。状況による」 #wtm83

えいる @eielh

広島市のサイトとか表計算ツールでかいたテーブルをコピーしただけのようなテーブルとかあったような。 #wtm83

にしもつ @24motz

ブログの途中にかっこいい画像を差し込むと？本文に関係あるかどうか？単なる飾りだといらない？利用者に聞いてみたいかも？ #wtm83