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

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

View Slide

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

View Slide

良い概念だなぁ 
自分の担当システムはどうなんだろう🤔 

View Slide

音声で聞くと
ドロップダウンメニュー
だとわからない
タブメニューが
キーボード操作できない
画像にaltがない

View Slide

問題結構ありそうだけど、 
特に社内でWebアクセシビリティについて聞かないな🤔 

View Slide

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

View Slide

社内でやってみたこと① 
社内ツール作成でWebアクセシビリティを取り入れる 

View Slide

社内ツール作成でWebアクセシビリティを取り入れる 
8 
社内ツール作成でアクセシビリティを取り入れる
ボタン要素が押され、文字が変わった時に音声を鳴らす 
1 
スクロールできる要素にフォーカスできるようにする 
2 
色のコントラストに気をつける 
3 
● 文字やボタンのコントラストは全て4.5：1のコントラスト比を満たすようにした 
更新中
更新中
などなど…

View Slide

知見: JIS X 8341-3:2016 達成基準早見表 
を活用すると良い 
9 
最も参考にすべきだが、 
複雑でぱっと見でわかりずらい 
アクセシビリティの世界的なガイドライン  
WCAG 
WCAGから作成した日本規格のアクセシビリティガイドラインの早見表  
JIS X 8341-3:2016 達成基準早見表 
最新の情報ではなく網羅的ではないが、 
ぱっと見でわかりやすく取り入れやすい 

View Slide

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

View Slide

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

View Slide

社内でやってみたこと② 
勉強会の開催 
 

View Slide

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

View Slide

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

View Slide

知見:実際に実装を行う勉強会方式の方が良い 
15 
輪読会 
ただ読むだけになりがち 
実装を取り入れる 
実際に体験してわかるので、 
身につきやすい 
実装したものを後で見返せる 
初めはこっちだった

View Slide

知見: 勉強会の解説では 
ユーザーにどんな利点があるかを話した方が良い 
16 
アクセシビリティ的には 
xxxをしないといけない 
結果が見えない 
モチベーションも見えない 
〇〇というユーザを 
想定してxxするといい 
ユーザが見えるので 
納得感がある 

View Slide

今後やっていきたいこと 
17 
担当システムの中のWebアクセシビリティ的に不足している点をリスト化する
実際にWebアクセシビリティを担当システムに取り入れていく
ニフティのシステムを全ての人に 
使ってもらえるものにしたい 
Webアクセシビリティ向上施策とそのユーザへの効果をまとめる

View Slide

アンケートのお願い
18 
参加アンケートに
ご協力ください
https://forms.gle/2HCB6VhB1FMtTayY6

View Slide


View Slide

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

View Slide

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

View Slide

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

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

ニフティ株式会社

More Decks by ニフティ株式会社

Other Decks in Technology

Featured

Transcript