Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NIFTY Tech Talk #09 社内にWebアクセシビリティを取り入れていきたいなぁと...
Search
ニフティ株式会社
PRO
March 08, 2023
Video
Resources
Technology
0
870
NIFTY Tech Talk #09 社内にWebアクセシビリティを取り入れていきたいなぁと思っている話
ニフティ株式会社
PRO
March 08, 2023
Tweet
Share
Video
Resources
SvelteKit, Next.jsの導入事例紹介など 〜ニフティのフロントエンドの今とこれから〜 - NIFTY Tech Talk #9
https://nifty.connpass.com/event/273568/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
1
50
モニタリングダッシュボード に表示しておきたい情報 / NIFTY Tech Talk #21
niftycorp
PRO
1
82
PagerDutyを導入して変わったシステム運用とこれから / NIFTY Tech Talk #21
niftycorp
PRO
1
80
ゼロからボトムアップで始めるインナーソース ニフティのリアル事例 - InnerSource Gathering Tokyo 2024
niftycorp
PRO
2
180
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
7
5.2k
AWS Summit Japan 2024, AWS Game Day 振り返り - NIFTY Tech Talk #20
niftycorp
PRO
2
330
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
52
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
240
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
220
Other Decks in Technology
See All in Technology
LeSSはスクラムではない!?LeSSにおけるスクラムマスターの振る舞い方とは / Scrum Master Behavior in LeSS
toma_sm
0
160
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
220
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
230
【shownet.conf_】革新と伝統を融合したファシリティ
shownet
PRO
0
280
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
250
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
1
1.2k
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
290
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
330
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
180
トークナイザー入門
payanotty
2
830
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
120
ドメインと向き合う - 旅行予約編
hidenorigoto
4
530
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Done Done
chrislema
181
16k
The Mythical Team-Month
searls
218
43k
Building Your Own Lightsaber
phodgson
102
6k
Typedesign – Prime Four
hannesfritz
39
2.3k
A Modern Web Designer's Workflow
chriscoyier
692
190k
What's in a price? How to price your products and services
michaelherold
243
11k
A better future with KSS
kneath
236
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
RailsConf 2023
tenderlove
28
840
Transcript
Copyright © NIFTY Corporation All Rights Reserved. 社内にWebアクセシビリティを 取り入れていきたいなぁと思っている話 関 歩武
システム統括部 会員システムグループ
Copyright © NIFTY Corporation All Rights Reserved. 2 Webアクセシビリティってなんだ? 2
Webアクセシビリティ = Webページにある情報や機能の利用しやすさ 様々な人々 様々な状況(デバイス) どのような人、状況でも利用しやすい システムにする ↓ Webアクセシビリティを高めること
Copyright © NIFTY Corporation All Rights Reserved. 3 良い概念だなぁ 自分の担当システムはどうなんだろう🤔
Copyright © NIFTY Corporation All Rights Reserved. 4 音声で聞くと ドロップダウンメニュー
だとわからない タブメニューが キーボード操作できない 画像にaltがない
Copyright © NIFTY Corporation All Rights Reserved. 5 問題結構ありそうだけど、 特に社内でWebアクセシビリティについて聞かないな🤔
Copyright © NIFTY Corporation All Rights Reserved. 6 広めていく活動をしていこう!! 1.
社内ツールへ取り入れてみる 2. 勉強会を開催してみる ここでの知見を 話したい!!
Copyright © NIFTY Corporation All Rights Reserved. 社内でやってみたこと① 社内ツール作成でWebアクセシビリティを取り入れる
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> などなど…
Copyright © NIFTY Corporation All Rights Reserved. 知見: JIS X
8341-3:2016 達成基準 早見表 を活用すると良い 9 最も参考にすべきだが、 複雑でぱっと見でわかりずらい アクセシビリティの世界的なガイドライン WCAG WCAGから作成した日本規格のアクセシビリティガイドラインの早見表 JIS X 8341-3:2016 達成基準 早見表 最新の情報ではなく網羅的ではないが、 ぱっと見でわかりやすく取り入れやすい
Copyright © NIFTY Corporation All Rights Reserved. 知見: JIS X
8341-3:2016 達成基準 早見表 を活用すると良い 10 チェックリストにしやすい チームメンバーにも伝えやすい
Copyright © NIFTY Corporation All Rights Reserved. 知見:支援ツールなどを実際の立場になって 使ってみると良い 11
画像はVoice Overというウェブ操作を支援するツールです。 Webページを音声で読み上げてくれます。 実際に用いて、どうなるのか聞いてみる。 わかりずらかったり、ボタンを押した時のフィードバックなどがわかるのでやる方が良い
Copyright © NIFTY Corporation All Rights Reserved. 社内でやってみたこと② 勉強会の開催
Copyright © NIFTY Corporation All Rights Reserved. 勉強会の開催 13 社内に広めるには勉強会が良いと思っ
たので開催 実際の実装方法からアクセシビリティを学ぶ ことができる形式 ブログ書いてます 主催した社内勉強会の課題でアクセシビリティ的に優れている TODOリスト の課題を出した話 社内勉強会で出題した「アクセシビリティに考慮したツールバーとテキストボッ クス作成課題」の話
Copyright © NIFTY Corporation All Rights Reserved. 知見:オーサリングプラクティスを活用するのが良い 14 アクセシブルな要素の実装例がのっている
ドキュメント アコーディオンメニュー、ツールバーなどの 要素をアクセシブルに実装する方法を学 ぶことができる👍 実装方法を学ぶ資料としてはおすすめ オーサリングプラクティス?🤔
Copyright © NIFTY Corporation All Rights Reserved. 知見:実際に実装を行う勉強会方式の方が良い 15 輪読会
ただ読むだけになりがち 実装を取り入れる 実際に体験してわかるので、 身につきやすい 実装したものを後で見返せる 初めはこっちだった
Copyright © NIFTY Corporation All Rights Reserved. 知見: 勉強会の解説では ユーザーにどんな利点があるかを話した方が良い
16 アクセシビリティ的には xxxをしないといけない 結果が見えない モチベーションも見えない 〇〇というユーザを 想定してxxするといい ユーザが見えるので 納得感がある
Copyright © NIFTY Corporation All Rights Reserved. 今後やっていきたいこと 17 担当システムの中のWebアクセシビリティ的に不足している点をリスト化する
実際にWebアクセシビリティを担当システムに取り入れていく ニフティのシステムを全ての人に 使ってもらえるものにしたい Webアクセシビリティ向上施策とそのユーザへの効果をまとめる
Copyright © NIFTY Corporation All Rights Reserved. アンケートのお願い 18 参加アンケートに
ご協力ください https://forms.gle/2HCB6VhB1FMtTayY6
Copyright © NIFTY Corporation All Rights Reserved.
Copyright © NIFTY Corporation All Rights Reserved. 質問回答1 20 見えにくい、読みにくい「困った!」
を解決するデザイン デザイニング Webアクセシビリティ インクルーシブ HTML+CSS&JavaScript
Copyright © NIFTY Corporation All Rights Reserved. 質問回答2 21 大半の部分でキーボード操作の
フォーカスが行われる 「重要」などの表示が文字で記述されている