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
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
Search
株式会社NIJIBOX
December 18, 2020
Programming
1
9.6k
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/
株式会社NIJIBOX
December 18, 2020
Tweet
Share
More Decks by 株式会社NIJIBOX
See All by 株式会社NIJIBOX
モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa
nbkouhou
9
13k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
9.2k
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
nbkouhou
0
240
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
1.9k
属人化させない "UX" リサーチ_Ubie株式会社 坂田 一倫
nbkouhou
0
200
大規模組織でのUXデザイン導入メソッド
nbkouhou
0
2.3k
顧客起点の製品開発における 仮説検証思考体験ワークショップ
nbkouhou
2
1.1k
UXデザインのニーズとメソッドについて 執行役員 丸山潤
nbkouhou
1
210
BUSINESS & CREATIVE「大規模メディアにおけるデザイナーの価値発揮」
nbkouhou
1
1.1k
Other Decks in Programming
See All in Programming
Apple Vision Pro購入RTA 1泊3日弾丸ハワイツアー / RTA: Purchase Apple Vision Pro in Hawaii
yutailang0119
0
480
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
meihei3
0
190
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
2
490
「プログラマーのためのCPU入門」は入り口として丁度よい!
forrep
25
22k
見せ算をScalaで実装してみた / Scalaわいわい勉強会 #2
arthur1
0
1.1k
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.1k
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
品質が高いコードって何?Rev2.1
ickx
1
370
Flutterアプリを GitHub Actions & Xcode Cloud で社内配布する / Distribute Flutter apps internally
takasfz
0
120
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
810
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
170
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
4 Signs Your Business is Dying
shpigford
174
21k
Side Projects
sachag
451
41k
The Language of Interfaces
destraynor
150
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Into the Great Unknown - MozCon
thekraken
10
810
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.5k
The Invisible Customer
myddelton
114
12k
Typedesign – Prime Four
hannesfritz
36
2k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.5k
Transcript
アクセシビリティ 株式会社ニジボックス 軽部 勝仁
自己紹介 会長にしごかれる日々を送っています Next.js, React などモダンな開発現場にいます アクセシビリティは3ヶ月前から
本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み
本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み
ウェブアクセシビリティとは ウェブページにある情報や機能の利用しやすさを意味しま す。 引用:https://waic.jp/knowledge/accessibility/ アクセシビリティ → accessibility → a11y と略記されることもある
ウェブアクセシビリティとは ウェブページにある情報や機能の利用しやすさを意味しま す。 引用:https://waic.jp/knowledge/accessibility/ とても抽象的
具体的には スクリーンリーダーで読み上げても伝わる? カラーコントラストが低くて読みにくくない? ♪ 読みやすい? 読みやすい?
アクセシビリティの様々な切り口 目 耳 体 状況 機械
アクセシビリティの様々な切り口 目 耳 体 状況 機械 達成基準がある
達成基準 WCAG (Web Content Accessibility Guidelines) W3C の Web Accessibility
Initiative (WAI) が勧告 WCAG 2.1 が最新(2.2 の勧告は2021年の予定) 国際的には ISO/IEC 40500:2012 (WCAG 2.0 の内容) 国内では JIS X 8341-3:2016 (WCAG 2.0 の内容)
None
None
None
アクセシビリティは必要不可欠
本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み
送信に失敗しました エラー内容が入ります。エラー内容が入ります。エラー内容が入ります。エ ラー内容が入ります。エラー内容が入ります。 閉じる
要件定義 ・最大256文字の動的テキスト ・エラーが起きた時に表示 ・「閉じる」ボタンをクリックすると非表示
要件定義 ・最大256文字の動的テキスト ・エラーが起きた時に表示 ・「閉じる」ボタンをクリックすると非表示 本当にこれだけ?
アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab
キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト
アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab
キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト 定義されない事が多い
アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab
キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト エンジニアの裁量
非機能要件に いかにこだわれるかが エンジニアの真価
アクセシビリティは エンジニアの力量によって 完成度が大きく変わる
本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み
WCAG 適合をチェックするツール • Lighthouse • URL を入力して計測するタイプ • 外部から css
を挿入してハイライトするものまで
WCAG 適合をチェックするツール • Lighthouse • URL を入力して計測するタイプ • 外部から css
を挿入してハイライトするものまで 機械には限界がある
送信に失敗しました エラー内容が入ります。エラー内容が入ります。エラー内容が入ります。エ ラー内容が入ります。エラー内容が入ります。 閉じる
お名前 送信する メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所 郵便番号
選択してください 都道府県 ︙
お名前 送信する あ メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所
郵便番号 選択してください 都道府県 ︙ 形式が正しくありません。 aria-invalid=”true”
お名前 送信する メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所 郵便番号
選択してください 都道府県 ︙ <fieldset> でグループ化
お名前 送信する メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所 郵便番号
選択してください 都道府県 ︙ <form> の内側に設置されてる?
文章の意味 や デザインの意図 マークアップ ← 人の力が必要
機械でできることは機械に任せて 人が考えられる時間を増やす
Storybook コンポーネントのカタログ
storybook-addon-a11y
storybook-addon-a11y WCAG 適合をチェックできる
使いにくい場面があった
storybook-addon-a11y WCAG 適合をチェックできる 全体管理が難しい
CLI ツールを作った エラーを報告してくれるようにした
自動化して時間が増えた
None
None
None
None
時間が増えたおかげで 人力が必要な部分に注力
終わりに
作業者的なエンジニアではなく 開発メンバーの一人として取り組める
ご清聴ありがとうございました