サイボウズ開発運⽤研修 アクセシビリティ杉崎 信清開発本部アクセシビリティエンジニア
View Slide
杉崎 信清視覚障害（全盲） スクリーンリーダー・キーボードネイティブ• 2020年 新卒⼊社→アクセシビリティチーム• アクセシビリティの啓発• 開発チームの⽀援• 2022年 kintone Design Team（兼務） デザインテクノロジスト• デザインシステムの開発、保守、普及趣味︓ワイン、読書、⿃と遊ぶこと⾃⼰紹介
この講義で学ぶこと復習• アクセシビリティとは︖• マシンリーダブル・ヒューマンリーダブルを理解する• アクセシビリティ確保の基本を理解する（7項⽬）• アクセシビリティを検証する⽅法を知る
講義のコンセプトサイボウズに新しく⼊社した社員の⽅に誰に何と⾔ってほしい「アクセシビリティを⾼める考え⽅がわかった。意識しながら取り組んでいこう︕」と⾔ってほしい
アクセシビリティとは︖復習
アクセシビリティの定義「すべての⼈」が⽀障なく製品・サービス・情報を利⽤でき、⽬的を達成できること
すべての⼈＝多様な環境・ツール・特性環境▌ ࡏۈ▌ ւ֎ۈ▌ ෭ۀ▌ ࣌ۈ▌ ిंͷத▌ ͷத▌ ਤॻؗ▌ ΧϑΣ▌ ֎▌ ؒツール▌ PC▌ スマートフォン▌ タブレット▌ モニター▌ マウス▌ キーボード▌ トラックパッド▌ ⾳声⼊⼒▌ スクリーンリーダー▌ 拡⼤鏡▌ リアルタイム字幕個⼈の特性▌ 年齢▌ 性別▌ 国籍▌ ⼈種▌ 能⼒▌ スキル▌ ⾊覚多様性▌ 視覚障害▌ 聴覚障害▌ 肢体不⾃由▌ 精神障害▌ 発達障害
ユーザ サイボウズ製品 チーム
サイボウズにとって、アクセシビリティとは「ユーザがチームにアクセスできる能⼒」
アクセシビリティを確保することは「チームに参加したい」というユーザのねがいを尊重すること
アクセシブルなウェブコンテンツを届けるには
コンテンツがユーザに届くまで制作者 ユーザハードウェア（PC・スマホ…)ソフトウェア(ブラウザ・⽀援技術)⼊出⼒機器感覚情報（視覚・聴覚・触覚…）Webコンテンツ(HTML・CSS・JS…)
アクセシビリティを⾼める2つの要素制作者マシンリーダブルヒューマンリーダブルユーザ
ヒューマンリーダブルにする考え⽅多様な感覚特性を想定する⾊を⾒分けにくいまぶしい、暗い⾳が出せない⾳が聞こえない細かい作業が苦⼿記憶が困難多様な操作⽅法を想定するマウス操作タッチ操作キーボード操作拡⼤・縮⼩印刷
⾒た⽬と構造を分離して考える打倒なHTML要素で構造をマークアップするCSSで⾒た⽬を表現するマシンリーダブルにする考え⽅
アクセシビリティ確保の基本
アクセシビリティ確保の基本(7項⽬)1. 情報を伝える⾊の使い⽅に注意する2. ⽂字を拡⼤しても情報が正しく伝わるようにする3. キーボードで操作できるようにする4. ⾒出し・ランドマークなどの⽂書構造をマークアップする5. 画像に代替テキストを付ける6. リンクテキストはリンク先がわかる⽂⾔にする7. フォームフィールドにラベルを関連づける
役⽴つ⼈・役⽴つ場⾯情報を伝える⾊の使い⽅に注意する⾊のみに依存しない表現にする⾊同⼠のコントラストを⾼くする• ロービジョンの⼈・さまざまな⾊覚の⼈• ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター• 初めて閲覧するサイト、⽂化圏の異なるサイトを⾒る場合
⾊のみに依存しない表現• ⾊以外の別の視覚情報を組み合わせる(テキスト、アイコン、記号など)
⾊のコントラスト• 2つの⾊の違いを「コントラスト⽐」で表すことができる• ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨21 : 1 4.5 : 1 1 : 1A A A A A A A A A A
⾊のチェックツール• Spectrumさまざまな⾊覚を再現できるChrome拡張• Color Contrast Analyzer2つの⾊のコントラスト⽐を測定できる
やるべきこと (情報を伝える⾊の使い⽅に注意する)デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する• ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に
役⽴つ⼈・役⽴つ場⾯⽂字を拡⼤しても情報が正しく伝わるようにする拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる• ロービジョンの⼈・視⼒が低い⼈• スマホなど⼩さい画⾯で閲覧しているとき
⽂字を拡⼤する⽅法• 拡⼤する⽅法は主に３種類• OSの拡⼤機能を使う（拡⼤鏡など）• ブラウザのズーム機能で拡⼤する• ブラウザのフォントサイズを変更する• 200%まで拡⼤でき、情報が⽋落しないようにする
拡⼤に強くするには︖• 位置が固定された要素に要注意（ヘッダー・フッターなど）• フォントサイズ・フォントサイズに連動して変化する箇所には相対値（％, em, rem）を使うheaderfooterheaderfooter
やるべきこと (⽂字を拡⼤しても情報が正しく伝わるようにする)デザイン • 200%拡⼤したときの動作を決めておく実装 • フォントサイズに連動して変化する箇所には相対値（％, em, rem）を使う
役⽴つ⼈・役⽴つ場⾯キーボードで操作できるようにするマウスが使えない⼈・閲覧環境でもキーボードで操作できる• 怪我をしている⼈・視覚障害の⼈・肢体不⾃由の⼈• 作業を効率的に進めたいとき、急いでいるとき
キーボード操作についての注意• HTML標準のインタラクティブ要素はキーボードで操作できる• button, select, input要素など• 以下は⾃分でキーボード操作を実装する必要がある• 独⾃のUIパーツを作る場合• マウスに依存する操作を提供する場合（ホバー、D&Dなど）• キーボードフォーカスしたときのスタイルをつける
やるべきこと (キーボードで操作できるようにする)デザイン • キーボード操作の⽅法を考えておく• キーボードフォーカススタイルを決める実装 • キーボード操作できるHTML要素を選ぶ• キーボードフォーカススタイルをもれなくつける
役⽴つ⼈・役⽴つ場⾯• 全盲の⼈／ロービジョンの⼈／ディスレクシアの⼈⾒出し・ランドマークなどの⽂書構造をマークアップするウェブページがマシンリーダブルになるよう構造化するスクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む構造ごとに「読み⾶ばす」こともできる
ユーザごとの⽂章構造の把握⽅法• 眼で確認するユーザー• ⼤きな⽂字や領域で「⾒出し」「ランドマーク」を把握する• 必要な箇所に視線を移動する• スクリーンリーダーを使うユーザー• マークアップで「⾒出し」「ランドマーク」を把握する• 必要な箇所に「ジャンプ」する
⾒出し・ランドマークはどう読まれる︖
デザイン実装やるべきこと（⾒出し・ランドマークなどの⽂書構造をマークアップする）デザイン• ⾒出しはh1...h6要素でマークアップする• header, footer, nav, aside...を使う• モックの段階で⾒出しにする箇所を決める• モックの段階でランドマークにする箇所を決める
役⽴つ⼈・役⽴つ場⾯画像に代替テキストを提供する代替テキストとは、画像が伝えたいことを説明するテキスト• スクリーンリーダーは代替テキストを読み上げる• 画像のダウンロードに失敗すると代替テキストが表⽰される• 画像検索でヒットするようになる• 視覚障害の⼈• 低速回線（画像のダウンロードに失敗した場合）、SEO
• img要素にalt属性をつける• 装飾的な画像、画像の横にテキストがある場合にはalt=""をつける• alt属性そのものを省略しない代替テキストの提供⽅法
やるべきこと (画像に代替テキストを提供する)デザイン • 画像の近くに説明のテキストをつける• 画像の代替テキストを決める実装• 意味のあるimg要素には、alt属性をつける• 装飾的なimg要素には、alt=""をつける
役⽴つ⼈・役⽴つ場⾯リンクテキストはリンク先がわかる⽂⾔にする• 急いでいる⼈・全盲の⼈・ロービジョンの⼈・ディスレクシアの⼈• リンクがおおいウェブサイト、初めて訪問したとき、SEOリンク先が理解できる、説明的なリンクテキストにする「こちら」「ここをクリック」などのあいまいな⽂⾔を使わない流し読みしているユーザー、スクリーンリーダーのユーザーがリンクを押すべきか瞬時に判断できる
あいまいなリンクテキスト、説明的なリンクテキスト
やるべきこと (リンクテキストはリンク先がわかる⽂⾔にする)デザイン • 不明瞭なリンクテキストを使わない「ここをクリック」「さらに表⽰」「詳細はこちら」
役⽴つ⼈・役⽴つ場⾯フォームフィールドにラベルを関連づけるクリック・タップ領域が広がる⾳声⼊⼒でフォームをアクティブにできるスクリーンリーダーは、フォームにフォーカスしたときに対応するラベルを読み上げる• 視覚障害の⼈、肢体不⾃由の⼈• タッチ操作、⼩さいデバイスを使うとき、⾳声⼊⼒、⼤量のフォームを⼊⼒するとき
ラベルを関連づける⽅法label要素で関連づけるユーザー名
やるべきこと (フォームフィールドにラベルを関連づける)デザイン • フィールドの近くに可視のラベルをつける実装 • フィールドとラベルをlabel要素で関連づける
（発展）マシンリーダブルにするためのHTMLの仕様
⾚字でエラー…error要素がないタブを作りたい…tab要素がないdiv要素とCSSで⾒た⽬を整えることはできるけど…標準のHTML要素で表現できないとき
HTMLのセマンティクスを補う属性群role属性と、aria属性があるlrole属性︓役割を決めるl ボタン、タブ、ツリー、メニューlaria属性︓ふるまいを決めるl 選択状態、チェック状態、エラーかどうかWAI-ARIAでセマンティクスを補う
マシンリーダブルなエラー構造︓エラー、⾒た⽬︓⾚名前 （必須）.error {color: red;}
エラーをマシンリーダブルにするとスクリーンリーダーは、エラーのフィールドに差し掛かると、エラーであることを読み上げる
マシンリーダブルなタブ構造︓タブ・選択状態、⾒た⽬︓選択を表すデザイン上の変化タブ1タブ2タブ3…[role=“tablist”] {display: flex;}
タブをマシンリーダブルにするとスクリーンリーダーはタブであることを読み上げる選択状態を読み上げる
アクセシビリティを検証する
eslintのアクセシビリティルールセットを使うeslint-plugin-jsx-a11yhttps://www.npmjs.com/package/eslint-plugin-jsx-a11yeslint-plugin-vuejs-accessibilityhttps://github.com/vue-a11y/eslint-plugin-vuejs-accessibilityコードレベルの検証
⾃動チェックツールで検証axe DevTools
ページの状態が変わるごとにチェックするポップアップが開く、トグルボタンを押すなど機械的に検出できる問題は全体の3割程度でしかない⾃動チェックにpassしたからアクセシビリティOKではない⾃動チェックツールの注意事項
アクセシビリティツリーで検証HTMLCSSDOMツリーCSSOMツリーアクセシビリティツリー⽀援技術（スクリーンリーダー等）
• Name︓識別する呼び名ボタンテキスト、フォームのラベル、など• Role︓どのような役割かボタン、チェックボックス、コンボボックスなど• State︓どのようなふるまいか選択状態、チェック状態などアクセシビリティツリーの⾒かたインタラクティブ要素にName、Role、Stateが設定されているか確認
ボタンのアクセシビリティツリーHTMLアクセシビリティツリー
タブのアクセシビリティツリーHTMLアクセシビリティツリー
DevTools→Elementsパネル→Accessibilityペイン→Enable full-page accessibility treeにチェック（参考）DevTools の新機能 (Chrome 98)アクセシビリティツリーの表⽰⽅法(Chrome)チェックツリーを表⽰
cybozuinsideout
bengo4com
yoshidashingo
tsukubachallenge
h1kita
poteboy
lwug
naohachi89
nwiizo
chiroito
oracle4engineer
dahatake
shibuiwilliam
maggiecrowley
colly
bcantrill
chriscoyier
holman
hursman
kevinliebholz
marcelosomers
tanoku
notwaldorf
paulrobertlloyd
eileencodes