ユニバーサルデザイン対応を確認する

forestgtree commented 4 years ago

サイトアクセス後のTabキー移動の時、フォーカス部分のアウトライン表示が左メニューに不足しているかも。（firefox対応にはborder指定も必要です。）

hiro-ishi commented 4 years ago

東京都のカラーユニバーザルデザインガイドラインがあります。コントラストがはっきりしない箇所があれば修正したほうが良いかもしれません。 https://www.fukushihoken.metro.tokyo.lg.jp/kiban/machizukuri/kanren/color.files/colorudguideline.pdf

MasaoYOMODA commented 4 years ago

サイトを作成しての情報発信ありがとうございます。発信されている情報が有益なだけに、残念ながら、アクセシビリティ上　大きく2点問題あります。まず1点め。

https://stopcovid19.metro.tokyo.lg.jp/ 他

スマホ表示時に出てくる左上のボタン <button data-v-38a3bad7="" type="button" class="v-icon notranslate d-inline-block d-sm-none mr-4 v-icon--link mdi mdi-menu theme--light"></button> にaccessible nameが設定されておらず、iPhone+VoiceOverで閲覧する障害の方には何のボタンかわかりません。これより、このサイトの中で最も多くの人に見てほしいであろうページ「新型コロナウィルス感染症が心配なときに」( https://stopcovid19.metro.tokyo.lg.jp/flow )へのリンクがあることがわかりません。

例えば aria-label="サイドメニュー項目へ"を付加して、 <button aria-label="サイドメニュー項目へ" ... ></button> とする、等が考えられます。

（参考：iPhoneでVoiceOverにて効果確認可能。尚晴眼者は設定→アクセシビリティ→VoiceOver→キャプションパネルをオンにしてVoiceOverで確認すると、何を読み上げているかわかりやすい。）

1点めは以上です。

MasaoYOMODA commented 4 years ago

つづいて2点めです。

https://stopcovid19.metro.tokyo.lg.jp/flow

右側のコンテンツで、レベル２の見出し「新型コロナウイルス感染症にかかる相談窓口について」からリンク「詳細を見る(東京都福祉保健局) 」の間の読み上げ順が意味をなしていません。

これより、このサイトの中で最も多くの人に見てほしいであろう新型コロナウイルス感染症にかかる相談窓口についてのフローが、VoiceOverやNVDAなど読み上げソフトを使ってホームページを見る人にはわかりません。

現在の読み上げ順は以下のとおりです。

見出し    レベル2  新型コロナウイルス感染症が心配なときに
見出し    レベル2  新型コロナウイルス感染症にかかる相談窓口について

画像    新型コロナ コールセンター
画像    午前9時から午後9時 （土日祝含む）
画像    不安に思う方
画像    専門的な助言が 必要な場合
画像    微熱
画像    感染の不安
画像    軽い咳
画像    新型コロナ 受診相談窓口
画像    帰国者・接触者 電話相談センター
画像    24時間対応
画像    平日（夜間） 午後5時から翌朝午前9時
画像    平日（日中）
画像    土日祝 終日
画像    発症前 2 週間以内 の出来ごとと症状
画像    「新型コロナウイルス感染者」と 濃厚接触をした方
画像    流行地域への渡航・居住歴がある方 ご本人か濃厚接触をした方
画像    発熱
画像    または
画像    かつ
画像    発熱 37.5℃ 以上
画像    呼吸器症状
画像    2 日程度 続いている
画像    ご高齢な方
画像    基礎疾患のある方
画像    妊娠中の方
画像    一般の方
画像    風邪 のような症状
画像    発熱 37.5℃ 以上
画像    強いだるさ
画像    息苦しさ
画像    ４ 日以上 続いている
画像    新型コロナ外来（帰国者・接触者外来） 医師による判断
画像    新型コロナ外来 受診が必要 と判断された場合
画像    検査の必要あり
画像    新型コロナ外来 受診が不要 と判断された場合
画像    新型コロナ 受診相談窓口
画像    症状が 良くならない場合は
画像    に相談
画像    自宅で安静に過ごす
画像    一般の医療機関を受診
画像    PCR検査
画像    東京都健康安全 研究センター等
画像    陽性
画像    陰性
画像    検査の必要なし
画像    感染症指定医療機関等
画像    入院となります
画像    新型コロナ受診相談窓口 による相談結果
画像    03-5320-4592
画像    リンク    各保健所の電話番号は 福祉保健局HPへ
画像    0570-550571
既読  リンク    詳細を見る(東京都福祉保健局)

（WindowsPCでスクリーンリーダーNVDAにて確認可能。　尚晴眼者はNVDA設定メニューでスピーチビューワを起動して確認すると、　何を読み上げているかわかりやすい。）

読み上げ順を正しくするのも一策ですが、例えば電話で問い合わせてきた方に、口頭にてどのような流れで、何を説明するのかを想定して説明文をつくり、フローの説明として載せるのも一案です。

2点めは以上です。サイトを作成しての情報発信ありがとうございます。発信されている情報が有益なだけに、恐縮ですが対応ご検討よろしくお願いします。

yamanoku commented 4 years ago

i18n対応されている最中ですが、 <html lang="en"> だとスクリーンリーダーで日本語が読まれません。（Android10のTalkBackでは再現されました）出来る限り早めの対応であるとありがたいです。よろしくお願いいたします。

yamanoku commented 4 years ago

@MasaoYOMODA

スマホ表示時に出てくる左上のボタン

/covid19/components/SideNavigation.vue

<v-icon
  class="SideNavigation-ListContainerIcon sp-inline-block"
  @click="openNavi"
  aria-label="サイドメニュー項目を開く"
>

こちらに関しては上記のように対応することでスクリーンリーダーで確認できました。ですが、lang指定の影響でaria-labelの値が日本語表記の場合は読まれない状態だったので、i18n対応後になりそうです。ひとまずのご報告までに。

yamanoku commented 4 years ago

あとは上記ボタンのラベルに加えて、開閉後の状態表現やフォーカス制御も必要になっています。

現在はハンバーガーメニュー開閉ボタンをクリック後、開くボタンがフォーカスされて何がどうかわったかがわからない状況です。

操作順としては

フォーカス移動する
タイトルリンク部分にフォーカスする
フォーカス移動する
閉じるボタンにフォーカスする

と4手順が必要となっております。ので最低でも開いた後に閉じるボタンにフォーカスするような修正が必要そうです。

halsk commented 4 years ago

@MasaoYOMODA さん、ご指摘感謝です！！どなたか、対応できそうなものは、個別のIssueに切り出して対応いただけると助かります！（Issueを作る際、こちらの Issue 番号を参照してください。）

masuP9 commented 4 years ago

取り急ぎ１つ issue に切り出しました。こちらの issue では全体の方針や進め方を議論するのが良さそうと思っていますがいかがでしょうか。

現在、行政のサイトに求められる基準でのチェックを有志で行っています。

=> https://docs.google.com/spreadsheets/d/1htJAZQ4ylX0jMY2SHjTEdSIQFEW-SsVqmjaJ1uB3KZ0/edit#gid=0

もしお手伝いいただける方はこちらのチェックをお手伝いいいただき、出てきた課題を個別の issue として登録（ #437 と同じく、こちらの issue を参照する形で）していくのはいかがでしょう？

magi1125 commented 4 years ago

上記の有志です。私もこの進め方に賛同しています。プラス、今後追加予定の画面とかあったらこのチェックフローに載せられるといいなと思ったりしています。

halsk commented 4 years ago

有志でチェックしていただいた皆さま、本当にありがとうございます！！！昨日のもくもく会、時々zoomで拝見してました。(途中から入ったり出たりしてたのでちゃんとご挨拶できずにすみません)

取り急ぎ１つ issue に切り出しました。こちらの issue では全体の方針や進め方を議論するのが良さそうと思っていますがいかがでしょうか。

この方針、賛成です！個別の改善については、Issue を切り出していただければ、随時対応して行きます。

ちなみに、本日(3/7)はオンラインでハッカソンをやります。 https://hackmd.io/@codeforjapan/By5DQRySU ご興味ある方は是非ご参加ください！途中退出、途中入場可です。

rikilele commented 4 years ago

グラフ内の色盲の方への配慮という点で Twitter にフィードバックが上がっていたので、ここでシェアさせていただきます。

https://twitter.com/ogtm_00/status/1236223458087845888?s=12

masuP9 commented 4 years ago

@Rikilele ありがとうございますー 💪グラフの色に関しては、改善点として把握していますがまだ issue にできていない状況です。

rikilele commented 4 years ago

@masuP9 返信ありがとうございます！グラフは取り急ぎ対応が必要かなと思ったので、 #740 に quick fix を投げました。もし issue → PR のフローが必要でしたら対応いたしますので確認よろしくお願いします 🙇

magi1125 commented 4 years ago

A11yはもう個別のissueでやっていくのが定着しているので、このissueはcloseしてもよさそうに思いました。

halsk commented 4 years ago

おっしゃるとおりですね。本当に色々改善されたと思います。感謝です。引き続きよろしくおねがいします！

Tokyo-Metro-Gov / covid19

ユニバーサルデザイン対応を確認する #65