# \#15 WP ZoomUP 【緊急開催】Re:『誰もが使える』デザインを生み出すために 懇親会質疑

## 【怒られる問題】
- [x] ぶっちゃけ、アクセシビリティどこまでやればおこられないの？
- 受託側で対応する・しない・どこまでするの共通認識がない？想定していないところで殴られると辛い。
- 案件ごとに違う。実装する人の腕力で解決。腕力で出せる勢はやっていくべき。またそれを発信していくべき。
- 品質で値段は変わる
- 「頼んでくるまでやらない」ではなく「やって発信していく」
- 社内ガイドラインのサンプル欲しい（サイバーエージェントはある）
- https://openameba.github.io/a11y-guidelines/
- https://openfresh.github.io/a11y-guidelines/
-
- [x] アクセシビリティの、標準を知りたかった（どこまでやるべきか）
- [x] 誰に怒られるの？
- 正しく広めて欲しい、検証する側の認識が違う。チェックする側は項目にしたがって検証。作る側は「いろんな事情があったのに」。アクセシビリティが"後から検証する流れ"になっているので怒られる感が出ちゃう。詳しくは#14動画みてね。
- https://wpzoomup.com/wpzoomup14-accessibility/
- http://bashalog.c-brains.jp/17/09/08-193700.php
- http://bashalog.c-brains.jp/17/10/05-173000.php
- 気にし始めた人をボコボコにする人も。注意する人にもいろんなタイプの人がいる。
- **褒め太郎！**

## 【勉強のしかた】
- [x] 仕様書を見るのが一番いいとはわかりつつ、どういうaria属性をつけたらいいのかぱっと見られるリファレンス的なものをいつも探してしまいます。Bootstrapのコードを参考にすることも多いのですが、なにかオススメのリファレンスなどはあったりしますか？
- https://www.w3.org/TR/wai-aria-practices-1.1/
- 著名なデザインシステム・コード付き
- [x] さきほど（#14）のw3.orgの「こうしたらいいよ集」のアドレスを教えていただけますか？
- https://www.w3.org/TR/wai-aria-practices-1.1/
- [x] ガイド読んでも、具体的な施策がわかりにくい。どうすればいいんだろうか？
- 「インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」
- [デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ](https://www.amazon.co.jp/dp/4862462650/ref=cm_sw_em_r_mt_dp_U_DtlSCbZD4ZYVD)
- [x] 初心者がまずやっておきたいアクセシビリティ対策があれば教えてください
- [x] 輪読会のやり方
- 事前に読んできて、感想や質問を交換しあう

## 【リーダー】
- [x] スクリーンリーダーはいろいろあると思いますが、ひとつ確認すれば大丈夫ですか？ おすすめ教えてください。Macユーザーです。
- そうではない。
- [PC-Talker](http://www.aok-net.com/screenreader/) が日本では８割。
- 「どういうラインの人にどのくらい使えればいいのか？」が本来先。
- タダで使えるものは各プラットフォームにあるので試してみてね。
- [NVDA](https://www.nvda.jp/)
- [x] VoiceOverで検証したら文字参照のローマ数字を読んでくれなかったのですが、読ませる方法はないのでしょうか？
- 制作者側でできることはない。readerが頑張るべき。
- [x] iPhoneでVoiceOverを試してみていますが、『右フリックで次を読む』しか使いこなせていません。見出しだけ読む、などもできますか？また、どこを参照したら使い方が書いてあるのでしょうか…
- 知らないジェスチャはできない
- iPhoneではVoiceOverの使い方を[練習アプリ](https://www.softbank.jp/mobile/service/visually-support-iphone/)で試せる

## 【コーディング】
- [x] 今の話の件！！ クリックするとフォーカス表示の跡が残るような気がしますが、クリックときは消すことってできますか？
- [what-input](https://yuheiy.hatenablog.com/entry/2017/08/28/185913)でできます（どういうアクションか判定できる）
- [x] カルーセルのアクセシブル対応けっこうしんどい…
- カルーセルに限らず、ウィジェットは大変。
- https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1/carousel-1.html
- ariaはUI言語！
- [x] 一般的なサイトではなくwebアプリケーションにおけるセクショニングとかマークアップはよりアクセシブルな実装が薄い感じがするのですが、支援技術以外で有用性を示すよい説得材料はあるかなと気になりました
- ウェブアプリケーションの方が実装が難しい。腕力を以ってしても補いきれない大変さ。
- 実際にSPA的なものをやってみたらWebサイトの構築とはそもそも発想が違ってた
- [既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針](https://havelog.ayumusato.com/develop/a11y/e718-a11y_atonose_sakusaku.html)
- `> 支援技術以外で有用性を示すよい説得材料`
- 現状はありません
- [x] 「ラベルがなくてもわかる」はかなりの強者の認識だとわかってもらうの結構むずい
- ユーザーテスト。ユーザーが困っているところを見せる。

## 【デザイン】
- [x] スクロールに合わせてふわっと表示する、みたいな動きもアクセシビリティ的にはよくありませんか？
- 動き続けてなくて、止まるのだったらガイドライン的にはOK。しかし、その演出いる？タメの時間があるけど、パッと見てもらう方が良くない？
- 「何か派手に」というクライアントの要望が…
- [x] そもそも、コントラストの対比ってどうやってわかるんですか？（フォトショでわかりますか？）
- コントラストアナライザー
- [x] グロナビのUI考え直そ…押せることを伝えて、hover色つけて、現在地示す色つけるのどうコントラストつければいいのか困ってしまう。しかも、メインコンテンツが目立ってほしいし…。
- [x] 文字サイズの間隔の件ですが、 文字サイズ拡大ボタンを押すて拡大させるサイトがあると思いますが、 あのような、徐々に文字サイズを拡大させる間隔のことです。こちら１０％刻みとかあるのでしょうか？？
- アクセスできない人にアクセスできるようにする目的ではこのボタンはいらない。ユーザビリティ的には、レイアウトを維持したまま文字のサイズを変えるなら、そうできた方が読みやすい人はいる。一概に否定できない。
- 刻みがどう、というよりも見やすくなればいい。刻みに意味はないが、大きく刻むと途中の段階にできなくて困る人もでてくるので、それなりに細かく刻む。

## 【その他alt】
- [x] svgってaltみたいな記述はできますか？
- [x] svgをボイスオーバーは認識できますか？これは〜の画像ですなど。
- title 要素とARIA ググったら出るぞ！
- [x] 晴眼者にとって意味のない写真でも、スクリーンリーダーユーザーにも同じように「意味のない写真」であることが伝わる方がいいのか、それは過剰なのか
- [x] 相関図みたいになってるのってどう代替テキストにすべきか
-　https://www.slideshare.net/yoshinoriohta18/webux-54366899
 48ページ以降
- [x] 代替テキストを簡潔に「図」「写真」とするのと代替テキストを「空欄にする」のをどう区別していますか？ 例えば写真が何枚もあるような場合、「写真」「写真」「…」と読み上げられるより空欄にする、などはケースバイケースだったりするのでしょうか？
- 存在を示す簡単なAltを書く。判断が割れる問題。『意味がある』をどう見なすのか、難しい。
- [x] 実装段階でalt属性を判断するのはオカシイ！という話がありましたが、デザイナが画像の説明テキストを準備したとき、どういう形式でエンジニアさんへ渡してますか？altリストみたいなのを作るんでしょうか？

## 【WordPress】
- [x] リニューアル時によくあるんですが、複数カテゴリーにチェックされている場合のパンくずリストって皆さんどうしてるんでしょう。。。毎回悩む・・・。
- 楽天などは、全部書くというアプローチ。パンくずを下に置いて、全部書く。
- 複数カテゴリにまたがるものに、そもそもパンくずが適切か？パンくずは、現在地を示すことで再探索できるようにする。ファセットに置いては、再検索できれば良い。さっき見たものの履歴が残ろう。
- [x] WordPress でアクセシブルなサイトができるのか知りたい
- できます！WordPress関係ない。（めちゃくちゃにもできる）
- [x] 伊原さんと、参加者の皆様にも聞いてみたいこと：WordPress（CMS）でアクセシブルなサイトを作るためにしている工夫はありますか？
- [x] おまけ：Gutenbergの"Needs Accessibility Feedback"
https://github.com/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback

## 【ノージャンル】
- [x] 一発当てたい
- [x] 「普通にやれば普通にできる」のは自分も実感があるので理解できるんですが、なのにわからないようになってしまうウェブサイトができてしまう原因て何でしょうね？
- 前回の動画をご覧ください
- [x] 先ほどFreeeのマニュアルのお話がありましたが、画面のキャプチャを入れる場合の代替テキストに悩みます。「画面：◯◯の◯◯画面」などでしょうか…。
- [x] 当事者として最近の現状を知りたいです
- 良くなっているけど、複雑な作りのページができて、結果的に良く分からない。（押せないタブ・アコーディオンがある、とか）
- [x] 入力内容の確認画面を挟むのは日本文化的な習慣のように思うんですが、アクセシビリティ的には良いプラクティスってことかな。
- 一回やり直せるので良いプラクティス。