アクセシビリティ

Slide 1

Slide 1 text

サイボウズ開発運⽤研修アクセシビリティ杉崎信清開発本部アクセシビリティエンジニア

Slide 2

Slide 2 text

杉崎信清視覚障害（全盲）スクリーンリーダー・キーボードネイティブ • 2020年新卒⼊社→アクセシビリティチーム • アクセシビリティの啓発 • 開発チームの⽀援 • 2022年 kintone Design Team（兼務）デザインテクノロジスト • デザインシステムの開発、保守、普及趣味︓ワイン、読書、⿃と遊ぶこと⾃⼰紹介

Slide 3

Slide 3 text

この講義で学ぶこと復習 • アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する（7項⽬） • アクセシビリティを検証する⽅法を知る

Slide 4

Slide 4 text

講義のコンセプトサイボウズに新しく⼊社した社員の⽅に誰に何と⾔ってほしい「アクセシビリティを⾼める考え⽅がわかった。意識しながら取り組んでいこう︕」と⾔ってほしい

Slide 5

Slide 5 text

アクセシビリティとは︖ 復習

Slide 6

Slide 6 text

アクセシビリティの定義「すべての⼈」が⽀障なく製品・サービス・情報を利⽤でき、⽬的を達成できること

Slide 7

Slide 7 text

すべての⼈＝多様な環境・ツール・特性環境 ▌ ࡏ୐ۈ຿ ▌ ւ֎ۈ຿ ▌ ෭ۀ ▌ ࣌୹ۈ຿ ▌ ిंͷத ▌ ޻৔ͷத ▌ ਤॻؗ ▌ ΧϑΣ ▌ ԰֎ ▌ ໷ؒ ツール ▌ PC ▌ スマートフォン ▌ タブレット ▌ モニター ▌ マウス ▌ キーボード ▌ トラックパッド ▌ ⾳声⼊⼒ ▌ スクリーンリーダー ▌ 拡⼤鏡 ▌ リアルタイム字幕個⼈の特性 ▌ 年齢 ▌ 性別 ▌ 国籍 ▌ ⼈種 ▌ 能⼒ ▌ スキル ▌ ⾊覚多様性 ▌ 視覚障害 ▌ 聴覚障害 ▌ 肢体不⾃由 ▌ 精神障害 ▌ 発達障害

Slide 8

Slide 8 text

ユーザサイボウズ製品チーム

Slide 9

Slide 9 text

サイボウズにとって、アクセシビリティとは「ユーザがチームにアクセスできる能⼒」

Slide 10

Slide 10 text

アクセシビリティを確保することは「チームに参加したい」というユーザのねがいを尊重すること

Slide 11

Slide 11 text

アクセシブルなウェブコンテンツを届けるには

Slide 12

Slide 12 text

コンテンツがユーザに届くまで制作者ユーザハードウェア（PC・スマホ…) ソフトウェア (ブラウザ・⽀援技術) ⼊出⼒機器感覚情報（視覚・聴覚・触覚…） Webコンテンツ (HTML・CSS・JS…)

Slide 13

Slide 13 text

アクセシビリティを⾼める2つの要素制作者マシンリーダブルヒューマンリーダブルユーザ

Slide 14

Slide 14 text

ヒューマンリーダブルにする考え⽅多様な感覚特性を想定する⾊を⾒分けにくいまぶしい、暗い⾳が出せない⾳が聞こえない細かい作業が苦⼿記憶が困難多様な操作⽅法を想定するマウス操作タッチ操作キーボード操作拡⼤・縮⼩印刷

Slide 15

Slide 15 text

⾒た⽬と構造を分離して考える打倒なHTML要素で構造をマークアップする CSSで⾒た⽬を表現するマシンリーダブルにする考え⽅

Slide 16

Slide 16 text

アクセシビリティ確保の基本

Slide 17

Slide 17 text

アクセシビリティ確保の基本(7項⽬) 1. 情報を伝える⾊の使い⽅に注意する 2. ⽂字を拡⼤しても情報が正しく伝わるようにする 3. キーボードで操作できるようにする 4. ⾒出し・ランドマークなどの⽂書構造をマークアップする 5. 画像に代替テキストを付ける 6. リンクテキストはリンク先がわかる⽂⾔にする 7. フォームフィールドにラベルを関連づける

Slide 18

Slide 18 text

役⽴つ⼈・役⽴つ場⾯情報を伝える⾊の使い⽅に注意する⾊のみに依存しない表現にする⾊同⼠のコントラストを⾼くする • ロービジョンの⼈・さまざまな⾊覚の⼈ • ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター • 初めて閲覧するサイト、⽂化圏の異なるサイトを⾒る場合

Slide 19

Slide 19 text

⾊のみに依存しない表現 • ⾊以外の別の視覚情報を組み合わせる(テキスト、アイコン、記号など)

Slide 20

Slide 20 text

⾊のコントラスト • 2つの⾊の違いを「コントラスト⽐」で表すことができる • ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨 21 : 1 4.5 : 1 1 : 1 A A A A A A A A A A

Slide 21

Slide 21 text

⾊のチェックツール • Spectrum さまざまな⾊覚を再現できるChrome拡張 • Color Contrast Analyzer 2つの⾊のコントラスト⽐を測定できる

Slide 22

Slide 22 text

やるべきこと (情報を伝える⾊の使い⽅に注意する) デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する • ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に

Slide 23

Slide 23 text

役⽴つ⼈・役⽴つ場⾯⽂字を拡⼤しても情報が正しく伝わるようにする拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる • ロービジョンの⼈・視⼒が低い⼈ • スマホなど⼩さい画⾯で閲覧しているとき

Slide 24

Slide 24 text

⽂字を拡⼤する⽅法 • 拡⼤する⽅法は主に３種類 • OSの拡⼤機能を使う（拡⼤鏡など） • ブラウザのズーム機能で拡⼤する • ブラウザのフォントサイズを変更する • 200%まで拡⼤でき、情報が⽋落しないようにする

Slide 25

Slide 25 text

拡⼤に強くするには︖ • 位置が固定された要素に要注意（ヘッダー・フッターなど） • フォントサイズ・フォントサイズに連動して変化する箇所には相対値（％, em, rem）を使う header footer header footer

Slide 26

Slide 26 text

やるべきこと (⽂字を拡⼤しても情報が正しく伝わるようにする) デザイン • 200%拡⼤したときの動作を決めておく実装 • フォントサイズに連動して変化する箇所には相対値（％, em, rem）を使う

Slide 27

Slide 27 text

役⽴つ⼈・役⽴つ場⾯キーボードで操作できるようにするマウスが使えない⼈・閲覧環境でもキーボードで操作できる • 怪我をしている⼈・視覚障害の⼈・肢体不⾃由の⼈ • 作業を効率的に進めたいとき、急いでいるとき

Slide 28

Slide 28 text

キーボード操作についての注意 • HTML標準のインタラクティブ要素はキーボードで操作できる • button, select, input要素など • 以下は⾃分でキーボード操作を実装する必要がある • 独⾃のUIパーツを作る場合 • マウスに依存する操作を提供する場合（ホバー、D&Dなど） • キーボードフォーカスしたときのスタイルをつける

Slide 29

Slide 29 text

やるべきこと (キーボードで操作できるようにする) デザイン • キーボード操作の⽅法を考えておく • キーボードフォーカススタイルを決める実装 • キーボード操作できるHTML要素を選ぶ • キーボードフォーカススタイルをもれなくつける

Slide 30

Slide 30 text

役⽴つ⼈・役⽴つ場⾯ • 全盲の⼈／ロービジョンの⼈／ディスレクシアの⼈⾒出し・ランドマークなどの⽂書構造をマークアップするウェブページがマシンリーダブルになるよう構造化するスクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む構造ごとに「読み⾶ばす」こともできる

Slide 31

Slide 31 text

ユーザごとの⽂章構造の把握⽅法 • 眼で確認するユーザー • ⼤きな⽂字や領域で「⾒出し」「ランドマーク」を把握する • 必要な箇所に視線を移動する • スクリーンリーダーを使うユーザー • マークアップで「⾒出し」「ランドマーク」を把握する • 必要な箇所に「ジャンプ」する

Slide 32

Slide 32 text

⾒出し・ランドマークはどう読まれる︖

Slide 33

Slide 33 text

デザイン実装やるべきこと（⾒出し・ランドマークなどの⽂書構造をマークアップする）デザイン • ⾒出しはh1...h6要素でマークアップする • header, footer, nav, aside...を使う • モックの段階で⾒出しにする箇所を決める • モックの段階でランドマークにする箇所を決める

Slide 34

Slide 34 text

役⽴つ⼈・役⽴つ場⾯画像に代替テキストを提供する代替テキストとは、画像が伝えたいことを説明するテキスト • スクリーンリーダーは代替テキストを読み上げる • 画像のダウンロードに失敗すると代替テキストが表⽰される • 画像検索でヒットするようになる • 視覚障害の⼈ • 低速回線（画像のダウンロードに失敗した場合）、SEO

Slide 35

Slide 35 text

• img要素にalt属性をつける • 装飾的な画像、画像の横にテキストがある場合にはalt=""をつける • alt属性そのものを省略しない代替テキストの提供⽅法サイボウズ株式会社

Slide 36

Slide 36 text

やるべきこと (画像に代替テキストを提供する) デザイン • 画像の近くに説明のテキストをつける • 画像の代替テキストを決める実装 • 意味のあるimg要素には、alt属性をつける • 装飾的なimg要素には、alt=""をつける

Slide 37

Slide 37 text

役⽴つ⼈・役⽴つ場⾯リンクテキストはリンク先がわかる⽂⾔にする • 急いでいる⼈・全盲の⼈・ロービジョンの⼈・ディスレクシアの⼈ • リンクがおおいウェブサイト、初めて訪問したとき、SEO リンク先が理解できる、説明的なリンクテキストにする「こちら」「ここをクリック」などのあいまいな⽂⾔を使わない流し読みしているユーザー、スクリーンリーダーのユーザーがリンクを押すべきか瞬時に判断できる

Slide 38

Slide 38 text

あいまいなリンクテキスト、説明的なリンクテキスト

Slide 39

Slide 39 text

やるべきこと (リンクテキストはリンク先がわかる⽂⾔にする) デザイン • 不明瞭なリンクテキストを使わない「ここをクリック」「さらに表⽰」「詳細はこちら」

Slide 40

Slide 40 text

役⽴つ⼈・役⽴つ場⾯フォームフィールドにラベルを関連づけるクリック・タップ領域が広がる⾳声⼊⼒でフォームをアクティブにできるスクリーンリーダーは、フォームにフォーカスしたときに対応するラベルを読み上げる • 視覚障害の⼈、肢体不⾃由の⼈ • タッチ操作、⼩さいデバイスを使うとき、⾳声⼊⼒、⼤量のフォームを⼊⼒するとき

Slide 41

Slide 41 text

ラベルを関連づける⽅法 label要素で関連づけるユーザー名

Slide 42

Slide 42 text

やるべきこと (フォームフィールドにラベルを関連づける) デザイン • フィールドの近くに可視のラベルをつける実装 • フィールドとラベルをlabel要素で関連づける

Slide 43

Slide 43 text

（発展）マシンリーダブルにするためのHTMLの仕様

Slide 44

Slide 44 text

⾚字でエラー…error要素がないタブを作りたい…tab要素がない div要素とCSSで⾒た⽬を整えることはできるけど… 標準のHTML要素で表現できないとき

Slide 45

Slide 45 text

HTMLのセマンティクスを補う属性群 role属性と、aria属性がある lrole属性︓役割を決める l ボタン、タブ、ツリー、メニュー laria属性︓ふるまいを決める l 選択状態、チェック状態、エラーかどうか WAI-ARIAでセマンティクスを補う

Slide 46

Slide 46 text

マシンリーダブルなエラー構造︓エラー、⾒た⽬︓⾚名前（必須） .error { color: red; }

Slide 47

Slide 47 text

エラーをマシンリーダブルにするとスクリーンリーダーは、エラーのフィールドに差し掛かると、エラーであることを読み上げる

Slide 48

Slide 48 text

マシンリーダブルなタブ構造︓タブ・選択状態、⾒た⽬︓選択を表すデザイン上の変化

タブ1

タブ2

タブ3

…

[role=“tablist”] { display: flex; }

Slide 49

Slide 49 text

タブをマシンリーダブルにするとスクリーンリーダーはタブであることを読み上げる選択状態を読み上げる

Slide 50

Slide 50 text

アクセシビリティを検証する

Slide 51

Slide 51 text

eslintのアクセシビリティルールセットを使う eslint-plugin-jsx-a11y https://www.npmjs.com/package/eslint-plugin-jsx-a11y eslint-plugin-vuejs-accessibility https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility コードレベルの検証

Slide 52

Slide 52 text

⾃動チェックツールで検証 axe DevTools

Slide 53

Slide 53 text

ページの状態が変わるごとにチェックするポップアップが開く、トグルボタンを押すなど機械的に検出できる問題は全体の3割程度でしかない⾃動チェックにpassしたからアクセシビリティOKではない⾃動チェックツールの注意事項

Slide 54

Slide 54 text

アクセシビリティツリーで検証 HTML CSS DOMツリー CSSOMツリーアクセシビリティツリー⽀援技術（スクリーンリーダー等）

Slide 55

Slide 55 text

• Name︓識別する呼び名ボタンテキスト、フォームのラベル、など • Role︓どのような役割かボタン、チェックボックス、コンボボックスなど • State︓どのようなふるまいか選択状態、チェック状態などアクセシビリティツリーの⾒かたインタラクティブ要素にName、Role、Stateが設定されているか確認

Slide 56

Slide 56 text

ボタンのアクセシビリティツリー HTML アクセシビリティツリー

Slide 57

Slide 57 text

タブのアクセシビリティツリー HTML アクセシビリティツリー

Slide 58

Slide 58 text

DevTools→Elementsパネル→Accessibilityペイン →Enable full-page accessibility treeにチェック（参考）DevTools の新機能 (Chrome 98) アクセシビリティツリーの表⽰⽅法(Chrome) チェックツリーを表⽰