Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティ_株式会社ニジボックス Katsuhito Karube

株式会社NIJIBOX
December 18, 2020
Programming
1
9.2k

アクセシビリティ_株式会社ニジボックス Katsuhito Karube

リクルートグループ主催！『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/

株式会社NIJIBOX

December 18, 2020
Tweet

More Decks by 株式会社NIJIBOX

See All by 株式会社NIJIBOX
モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa
nbkouhou
9
13k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
8.9k
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
nbkouhou
0
130
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
1.4k
属人化させない "UX" リサーチ_Ubie株式会社 坂田 一倫
nbkouhou
0
150
大規模組織でのUXデザイン導入メソッド
nbkouhou
0
1.9k
顧客起点の製品開発における 仮説検証思考体験ワークショップ
nbkouhou
2
640
UXデザインのニーズとメソッドについて 執行役員　丸山潤
nbkouhou
1
120
BUSINESS & CREATIVE「大規模メディアにおけるデザイナーの価値発揮」
nbkouhou
1
880

Other Decks in Programming

See All in Programming
UIKit ベースの大規模なプロジェクトへの SwiftUI 導入
kuritatu18
2
710
iOSDC2022 - iPadOSDC Japan 2022
hcrane
2
420
phpconf-2022フィーチャートグルを 使って素早く価値を検証する 早く安全に失敗し学ぶために
akki_megane
0
240
セキュリティスキャンツール cdk-nag を使ってみた
kinyok
0
180
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
820
php_mecabをFFIで実装してみよう
rsky
0
120
Git 未経験者 が GitHub Actions で もがいた話 / 20220914 git beginner uses github actions
mackey0225
1
390
watchOS におけるバックグラウンドタスクの限界
yamannnu
2
190
ローンチから16年目のWebサービスに、どうやってフィーチャートグルを導入したか、運用しているか / phpcon2022
meihei3
1
240
大学で出席管理アプリ・掲示板閲覧アプリを開発・運用している学生の話
kntkymt
0
160
レガシーなシステムのリファクタリングに取り組んで学んだこと
pbtnhan
0
470
なるべくJavaScriptを書かないで
SymfonyのUIをリッチにする Symfony UX
ippey
1
340

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
62
4k
Build your cross-platform service in a week with App Engine
jlugia
220
17k
Web development in the modern age
philhawksworth
197
9.4k
Navigating Team Friction
lara
175
11k
Visualization
eitanlees
126
12k
For a Future-Friendly Web
brad_frost
166
7.5k
We Have a Design System, Now What?
morganepeng
36
5.7k
BBQ
matthewcrist
74
8k
Building Your Own Lightsaber
phodgson
95
4.7k
A Modern Web Designer's Workflow
chriscoyier
690
180k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Building Adaptive Systems
keathley
25
1.2k

Transcript

  1. アクセシビリティ 株式会社ニジボックス 軽部 勝仁

  2. 自己紹介 会長にしごかれる日々を送っています Next.js, React などモダンな開発現場にいます アクセシビリティは3ヶ月前から

  3. 本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み

  4. 本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み

  5. ウェブアクセシビリティとは ウェブページにある情報や機能の利用しやすさを意味しま す。 引用：https://waic.jp/knowledge/accessibility/ アクセシビリティ → accessibility → a11y と略記されることもある

  6. ウェブアクセシビリティとは ウェブページにある情報や機能の利用しやすさを意味しま す。 引用：https://waic.jp/knowledge/accessibility/ とても抽象的


  7. 具体的には スクリーンリーダーで読み上げても伝わる？ カラーコントラストが低くて読みにくくない？ ♪ 読みやすい？ 読みやすい？

  8. アクセシビリティの様々な切り口 目
 耳
 体
 状況
 機械


  9. アクセシビリティの様々な切り口 目
 耳
 体
 状況
 機械
 達成基準がある


  10. 達成基準 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 の内容)
  11. None
  12. None
  13. None

  14. アクセシビリティは必要不可欠


  15. 本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み

  16. 送信に失敗しました エラー内容が入ります。エラー内容が入ります。エラー内容が入ります。エ ラー内容が入ります。エラー内容が入ります。 閉じる

  17. 要件定義 ・最大256文字の動的テキスト ・エラーが起きた時に表示 ・「閉じる」ボタンをクリックすると非表示

  18. 要件定義 ・最大256文字の動的テキスト ・エラーが起きた時に表示 ・「閉じる」ボタンをクリックすると非表示 本当にこれだけ？


  19. アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab

    キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト

  20. アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab

    キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト 定義されない事が多い


  21. アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab

    キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト エンジニアの裁量


  22. 非機能要件に いかにこだわれるかが エンジニアの真価

  23. アクセシビリティは エンジニアの力量によって 完成度が大きく変わる

  24. 本日の内容 1. そもそもアクセシビリティとは 2. 開発現場の実情 3. アクセシビリティ改善の取り組み

  25. WCAG 適合をチェックするツール • Lighthouse • URL を入力して計測するタイプ • 外部から css

    を挿入してハイライトするものまで

  26. WCAG 適合をチェックするツール • Lighthouse • URL を入力して計測するタイプ • 外部から css

    を挿入してハイライトするものまで 機械には限界がある


  27. 送信に失敗しました エラー内容が入ります。エラー内容が入ります。エラー内容が入ります。エ ラー内容が入ります。エラー内容が入ります。 閉じる

  28. お名前 送信する メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所 郵便番号

    選択してください 都道府県 ︙

  29. お名前 送信する あ メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所

    郵便番号 選択してください 都道府県 ︙ 形式が正しくありません。 aria-invalid=”true”

  30. お名前 送信する メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所 郵便番号

    選択してください 都道府県 ︙ <fieldset> でグループ化

  31. お名前 送信する メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所 郵便番号

    選択してください 都道府県 ︙ <form> の内側に設置されてる？

  32. 文章の意味 や デザインの意図 マークアップ ← 人の力が必要

  33. 機械でできることは機械に任せて 人が考えられる時間を増やす

  34. Storybook コンポーネントのカタログ

  35. storybook-addon-a11y

  36. storybook-addon-a11y WCAG 適合をチェックできる

  37. 使いにくい場面があった

  38. storybook-addon-a11y WCAG 適合をチェックできる 全体管理が難しい


  39. CLI ツールを作った エラーを報告してくれるようにした

  40. 自動化して時間が増えた

  41. None
  42. None
  43. None
  44. None

  45. 時間が増えたおかげで 人力が必要な部分に注力


  46. 終わりに

  47. 作業者的なエンジニアではなく 開発メンバーの一人として取り組める

  48. ご清聴ありがとうございました