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
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
2
390
SCSAから学ぶセキュリティ管理
masakamayama
0
140
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Site-Speed That Sticks
csswizardry
3
370
Bash Introduction
62gerente
610
210k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building Applications with DynamoDB
mza
93
6.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
137
6.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
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 大半の部分でキーボード操作の
フォーカスが行われる 「重要」などの表示が文字で記述されている