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
960
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 ニフティ株式会社
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
2.3k
Grow on GitHub Collaboration Culture: Case Study of InnerSource Challenge - GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
31
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
260
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
130
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
130
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
160
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
220
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
220
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
480
Other Decks in Technology
See All in Technology
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
Culture Deck
optfit
0
330
SCSAから学ぶセキュリティ管理
masakamayama
0
140
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building Your Own Lightsaber
phodgson
104
6.2k
How GitHub (no longer) Works
holman
313
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing Experiences People Love
moore
139
23k
Designing for Performance
lara
604
68k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A Philosophy of Restraint
colly
203
16k
For a Future-Friendly Web
brad_frost
176
9.5k
Producing Creativity
orderedlist
PRO
343
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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 大半の部分でキーボード操作の
フォーカスが行われる 「重要」などの表示が文字で記述されている