NIFTY Tech Talk #09 社内にWebアクセシビリティを取り入れていきたいなぁと思っている話

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.
 社内にWebアクセシビリティを
 取り入れていきたいなぁと思っている話
 関　歩武
 システム統括部 会員システムグループ

2. Copyright © NIFTY Corporation All Rights Reserved.
 2
 Webアクセシビリティってなんだ?
 2
 Webアクセシビリティ = Webページにある情報や機能の利用しやすさ 様々な人々 様々な状況(デバイス) どのような人、状況でも利用しやすい システムにする ↓ Webアクセシビリティを高めること
3. Copyright © NIFTY Corporation All Rights Reserved.
 3
 良い概念だなぁ
 自分の担当システムはどうなんだろう🤔

4. Copyright © NIFTY Corporation All Rights Reserved.
 4
 音声で聞くと ドロップダウンメニュー だとわからない タブメニューが キーボード操作できない 画像にaltがない
5. Copyright © NIFTY Corporation All Rights Reserved.
 5
 問題結構ありそうだけど、
 特に社内でWebアクセシビリティについて聞かないな🤔

6. Copyright © NIFTY Corporation All Rights Reserved.
 6
 広めていく活動をしていこう!!
 1. 社内ツールへ取り入れてみる
 2. 勉強会を開催してみる
 ここでの知見を
 話したい!!

7. Copyright © NIFTY Corporation All Rights Reserved.
 社内でやってみたこと①
 社内ツール作成でWebアクセシビリティを取り入れる

8. Copyright © NIFTY Corporation All Rights Reserved.
 社内ツール作成でWebアクセシビリティを取り入れる
 8
 社内ツール作成でアクセシビリティを取り入れる ボタン要素が押され、文字が変わった時に音声を鳴らす
 1
 スクロールできる要素にフォーカスできるようにする
 2
 色のコントラストに気をつける
 3
 • 文字やボタンのコントラストは全て4.5：1のコントラスト比を満たすようにした
 <span role="alert" aria-live="polite">更新中</span> <ul tabindex="0">更新中</ul> などなど…
9. Copyright © NIFTY Corporation All Rights Reserved.
 知見: JIS X 8341-3:2016 達成基準 早見表
 を活用すると良い
 9
 最も参考にすべきだが、
 複雑でぱっと見でわかりずらい
 アクセシビリティの世界的なガイドライン 
 WCAG
 WCAGから作成した日本規格のアクセシビリティガイドラインの早見表 
 JIS X 8341-3:2016 達成基準 早見表
 最新の情報ではなく網羅的ではないが、
 ぱっと見でわかりやすく取り入れやすい

10. Copyright © NIFTY Corporation All Rights Reserved.
 知見: JIS X 8341-3:2016 達成基準 早見表
 を活用すると良い
 10
 チェックリストにしやすい
 チームメンバーにも伝えやすい

11. Copyright © NIFTY Corporation All Rights Reserved.
 知見:支援ツールなどを実際の立場になって
 使ってみると良い
 11
 画像はVoice Overというウェブ操作を支援するツールです。
 Webページを音声で読み上げてくれます。
 
 実際に用いて、どうなるのか聞いてみる。
 わかりずらかったり、ボタンを押した時のフィードバックなどがわかるのでやる方が良い

12. Copyright © NIFTY Corporation All Rights Reserved.
 社内でやってみたこと②
 勉強会の開催
 

13. Copyright © NIFTY Corporation All Rights Reserved.
 勉強会の開催
 13
 社内に広めるには勉強会が良いと思っ たので開催
 実際の実装方法からアクセシビリティを学ぶ ことができる形式
 ブログ書いてます
 主催した社内勉強会の課題でアクセシビリティ的に優れている TODOリスト の課題を出した話 
 社内勉強会で出題した「アクセシビリティに考慮したツールバーとテキストボッ クス作成課題」の話 

14. Copyright © NIFTY Corporation All Rights Reserved.
 知見:オーサリングプラクティスを活用するのが良い
 14
 アクセシブルな要素の実装例がのっている ドキュメント
 
 アコーディオンメニュー、ツールバーなどの 要素をアクセシブルに実装する方法を学 ぶことができる👍
 
 実装方法を学ぶ資料としてはおすすめ
 オーサリングプラクティス?🤔

15. Copyright © NIFTY Corporation All Rights Reserved.
 知見:実際に実装を行う勉強会方式の方が良い
 15
 輪読会
 ただ読むだけになりがち
 実装を取り入れる
 実際に体験してわかるので、
 身につきやすい
 実装したものを後で見返せる
 初めはこっちだった
16. Copyright © NIFTY Corporation All Rights Reserved.
 知見: 勉強会の解説では
 ユーザーにどんな利点があるかを話した方が良い
 16
 アクセシビリティ的には
 xxxをしないといけない
 結果が見えない
 モチベーションも見えない
 〇〇というユーザを
 想定してxxするといい
 ユーザが見えるので
 納得感がある

17. Copyright © NIFTY Corporation All Rights Reserved.
 今後やっていきたいこと
 17
 担当システムの中のWebアクセシビリティ的に不足している点をリスト化する 実際にWebアクセシビリティを担当システムに取り入れていく ニフティのシステムを全ての人に
 使ってもらえるものにしたい
 Webアクセシビリティ向上施策とそのユーザへの効果をまとめる
18. Copyright © NIFTY Corporation All Rights Reserved.
 アンケートのお願い 18
 参加アンケートに ご協力ください https://forms.gle/2HCB6VhB1FMtTayY6
19. Copyright © NIFTY Corporation All Rights Reserved.

20. Copyright © NIFTY Corporation All Rights Reserved.
 質問回答1
 20
 見えにくい、読みにくい「困った!」 を解決するデザイン 
 デザイニング
 Webアクセシビリティ 
 インクルーシブ HTML+CSS&JavaScript 

21. Copyright © NIFTY Corporation All Rights Reserved.
 質問回答2
 21
 大半の部分でキーボード操作の
 フォーカスが行われる 「重要」などの表示が文字で記述されている