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

by 株式会社NIJIBOX

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

達成基準 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 の内容)

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト

Slide 20

Slide 20 text

アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト定義されない事が多い 

Slide 21

Slide 21 text

アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラストエンジニアの裁量 

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

WCAG 適合をチェックするツール ● Lighthouse ● URL を入力して計測するタイプ ● 外部から css を挿入してハイライトするものまで

Slide 26

Slide 26 text

WCAG 適合をチェックするツール ● Lighthouse ● URL を入力して計測するタイプ ● 外部から css を挿入してハイライトするものまで機械には限界がある 

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

お名前送信するあメールアドレスお住まいの住所郵便番号選択してください都道府県 ︙ 書類送付先住所郵便番号選択してください都道府県 ︙ 形式が正しくありません。 aria-invalid=”true”

Slide 30

Slide 30 text

お名前送信するメールアドレスお住まいの住所郵便番号選択してください都道府県 ︙ 書類送付先住所郵便番号選択してください都道府県 ︙ <ﬁeldset> でグループ化

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

storybook-addon-a11y

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

使いにくい場面があった

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

自動化して時間が増えた

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

終わりに

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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