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
アクセシビリティ
Search
Cybozu
PRO
July 13, 2023
Technology
2
3.6k
アクセシビリティ
Cybozu
PRO
July 13, 2023
Tweet
Share
More Decks by Cybozu
See All by Cybozu
Recruitment Pitch in New Business Division
cybozuinsideout
PRO
0
12
サイボウズ Office/メールワイズチームの改善の取り組み「困りごと共有会」
cybozuinsideout
PRO
1
16
サイボウズのOSPO
cybozuinsideout
PRO
1
91
非エンジニアの私が試行錯誤の末見出したスクラムマスターの道
cybozuinsideout
PRO
2
130
Kubernetes でもJava アプリでTLS 接続を終端したい
cybozuinsideout
PRO
2
150
Google I/O - 2024 What’s new in flutter
cybozuinsideout
PRO
2
260
Waffle Festival2024(斉藤裕希)
cybozuinsideout
PRO
3
560
主体的な活動で巨大な影響範囲のテストを乗りこなしていく話
cybozuinsideout
PRO
2
360
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
40k
Other Decks in Technology
See All in Technology
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1362
200k
Designing Experiences People Love
moore
136
23k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Music & Morning Musume
bryan
43
5.9k
Facilitating Awesome Meetings
lara
46
5.8k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing for Performance
lara
604
67k
Happy Clients
brianwarren
94
6.5k
Transcript
サイボウズ 開発運⽤研修 アクセシビリティ 杉崎 信清 開発本部 アクセシビリティエンジニア
杉崎 信清 視覚障害(全盲) スクリーンリーダー・キーボードネイティブ • 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 : 1 A A A A A A A A A A
⾊のチェックツール • Spectrum さまざまな⾊覚を再現できるChrome拡張 • Color Contrast Analyzer 2つの⾊のコントラスト⽐を測定できる
やるべきこと (情報を伝える⾊の使い⽅に注意する) デザイン • ⽩⿊や⾊覚再現フィルターで表⽰して確認する • ⽂字⾊と背景⾊のコントラスト⽐を4.5:1以上に
役⽴つ⼈・役⽴つ場⾯ ⽂字を拡⼤しても情報が正しく伝わるようにする 拡⼤が必要な⼈・閲覧環境でも情報が正しく伝わる • ロービジョンの⼈・視⼒が低い⼈ • スマホなど⼩さい画⾯で閲覧しているとき
⽂字を拡⼤する⽅法 • 拡⼤する⽅法は主に3種類 • OSの拡⼤機能を使う(拡⼤鏡など) • ブラウザのズーム機能で拡⼤する • ブラウザのフォントサイズを変更する •
200%まで拡⼤でき、情報が⽋落しないようにする
拡⼤に強くするには︖ • 位置が固定された要素に要注意(ヘッダー・フッターなど) • フォントサイズ・フォントサイズに連動して変化する箇所には 相対値(%, em, rem)を使う header footer
header footer
やるべきこと (⽂字を拡⼤しても情報が正しく伝わるようにする) デザイン • 200%拡⼤したときの動作を決めておく 実装 • フォントサイズに連動して変化する箇所には 相対値(%, em,
rem)を使う
役⽴つ⼈・役⽴つ場⾯ キーボードで操作できるようにする マウスが使えない⼈・閲覧環境でもキーボードで操作できる • 怪我をしている⼈・視覚障害の⼈・肢体不⾃由の⼈ • 作業を効率的に進めたいとき、急いでいるとき
キーボード操作についての注意 • HTML標準のインタラクティブ要素はキーボードで操作できる • button, select, input要素など • 以下は⾃分でキーボード操作を実装する必要がある •
独⾃のUIパーツを作る場合 • マウスに依存する操作を提供する場合(ホバー、D&Dなど) • キーボードフォーカスしたときのスタイルをつける
やるべきこと (キーボードで操作できるようにする) デザイン • キーボード操作の⽅法を考えておく • キーボードフォーカススタイルを決める 実装 • キーボード操作できるHTML要素を選ぶ
• キーボードフォーカススタイルをもれなくつける
役⽴つ⼈・役⽴つ場⾯ • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈ ⾒出し・ランドマークなどの⽂書構造をマークアップする ウェブページがマシンリーダブルになるよう構造化する スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む 構造ごとに「読み⾶ばす」こともできる
ユーザごとの⽂章構造の把握⽅法 • 眼で確認するユーザー • ⼤きな⽂字や領域で「⾒出し」「ランドマーク」を把握する • 必要な箇所に視線を移動する • スクリーンリーダーを使うユーザー •
マークアップで「⾒出し」「ランドマーク」を把握する • 必要な箇所に「ジャンプ」する
⾒出し・ランドマークはどう読まれる︖
デザイン 実装 やるべきこと(⾒出し・ランドマークなどの⽂書構造をマークアップする) デザイン • ⾒出しはh1...h6要素でマークアップする • header, footer, nav,
aside...を使う • モックの段階で⾒出しにする箇所を決める • モックの段階でランドマークにする箇所を決める
役⽴つ⼈・役⽴つ場⾯ 画像に代替テキストを提供する 代替テキストとは、画像が伝えたいことを説明するテキスト • スクリーンリーダーは代替テキストを読み上げる • 画像のダウンロードに失敗すると代替テキストが表⽰される • 画像検索でヒットするようになる •
視覚障害の⼈ • 低速回線(画像のダウンロードに失敗した場合)、SEO
• img要素にalt属性をつける • 装飾的な画像、画像の横にテキストがある場合にはalt=""をつける • alt属性そのものを省略しない 代替テキストの提供⽅法 <img src="cybozu.png" alt="サイボウズ株式会社">
<img src=“模様.png" alt="">
やるべきこと (画像に代替テキストを提供する) デザイン • 画像の近くに説明のテキストをつける • 画像の代替テキストを決める 実装 • 意味のあるimg要素には、alt属性をつける
• 装飾的なimg要素には、alt=""をつける
役⽴つ⼈・役⽴つ場⾯ リンクテキストはリンク先がわかる⽂⾔にする • 急いでいる⼈・全盲の⼈・ロービジョンの⼈・ディスレクシアの⼈ • リンクがおおいウェブサイト、初めて訪問したとき、SEO リンク先が理解できる、説明的なリンクテキストにする 「こちら」「ここをクリック」などのあいまいな⽂⾔を使わない 流し読みしているユーザー、スクリーンリーダーのユーザーが リンクを押すべきか瞬時に判断できる
あいまいなリンクテキスト、説明的なリンクテキスト
やるべきこと (リンクテキストはリンク先がわかる⽂⾔にする) デザイン • 不明瞭なリンクテキストを使わない 「ここをクリック」「さらに表⽰」「詳細はこちら」
役⽴つ⼈・役⽴つ場⾯ フォームフィールドにラベルを関連づける クリック・タップ領域が広がる ⾳声⼊⼒でフォームをアクティブにできる スクリーンリーダーは、フォームにフォーカスしたときに 対応するラベルを読み上げる • 視覚障害の⼈、肢体不⾃由の⼈ • タッチ操作、⼩さいデバイスを使うとき、⾳声⼊⼒、⼤量のフォーム
を⼊⼒するとき
ラベルを関連づける⽅法 label要素で関連づける <label for="username">ユーザー名</label> <input type="text" id="username">
やるべきこと (フォームフィールドにラベルを関連づける) デザイン • フィールドの近くに可視のラベルをつける 実装 • フィールドとラベルをlabel要素で関連づける
(発展)マシンリーダブルにするためのHTMLの仕様
⾚字でエラー…error要素がない タブを作りたい…tab要素がない div要素とCSSで⾒た⽬を整えることはできるけど… 標準のHTML要素で表現できないとき
HTMLのセマンティクスを補う属性群 role属性と、aria属性がある lrole属性︓役割を決める l ボタン、タブ、ツリー、メニュー laria属性︓ふるまいを決める l 選択状態、チェック状態、エラーかどうか WAI-ARIAでセマンティクスを補う
マシンリーダブルなエラー 構造︓エラー、⾒た⽬︓⾚ <label for=“name” class=“error”>名前 (必須)</label> <input type=“text” aria-invalid=“true” required
id=“name”> .error { color: red; }
エラーをマシンリーダブルにすると スクリーンリーダーは、エラーのフィールドに差し掛かると、エ ラーであることを読み上げる
マシンリーダブルなタブ 構造︓タブ・選択状態、⾒た⽬︓選択を表すデザイン上の変化 <div role=“tablist”> <div role=“tab” aria-selected=“true”>タブ1</div> <div role=“tab” aria-selected=“false”>タブ2</div>
<div role=“tab” aria-selected=“false”>タブ3</div> </div> <div role=“tabpanel”>…</div> [role=“tablist”] { display: flex; }
タブをマシンリーダブルにすると スクリーンリーダーはタブであることを読み上げる 選択状態を読み上げる
アクセシビリティを検証する
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 コードレベルの検証
⾃動チェックツールで検証 axe DevTools
ページの状態が変わるごとにチェックする ポップアップが開く、トグルボタンを押すなど 機械的に検出できる問題は全体の3割程度でしかない ⾃動チェックにpassしたからアクセシビリティOKではない ⾃動チェックツールの注意事項
アクセシビリティツリーで検証 HTML CSS DOMツリー CSSOMツリー アクセシビリティ ツリー ⽀援技術 (スクリーンリーダー等)
• Name︓識別する呼び名 ボタンテキスト、フォームのラベル、など • Role︓どのような役割か ボタン、チェックボックス、コンボボックスなど • State︓どのようなふるまいか 選択状態、チェック状態など アクセシビリティツリーの⾒かた
インタラクティブ要素にName、Role、Stateが設定されているか確認
ボタンのアクセシビリティツリー HTML アクセシビリティ ツリー
タブのアクセシビリティツリー HTML アクセシビリティ ツリー
DevTools→Elementsパネル→Accessibilityペイン →Enable full-page accessibility treeにチェック (参考)DevTools の新機能 (Chrome 98) アクセシビリティツリーの表⽰⽅法(Chrome)
チェック ツリーを表⽰