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
4
4.2k
アクセシビリティ
Cybozu
PRO
July 13, 2023
Tweet
Share
More Decks by Cybozu
See All by Cybozu
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
6
39k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
49k
テクニカルライティング
cybozuinsideout
PRO
4
560
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
460
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
620
モバイル
cybozuinsideout
PRO
3
330
ソフトウェアライセンス
cybozuinsideout
PRO
4
300
ソフトウェアテスト
cybozuinsideout
PRO
3
510
Other Decks in Technology
See All in Technology
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
FastConnect の冗長性
ocise
1
9.6k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Larkご案内資料
customercloud
PRO
0
600
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GitHub's CSS Performance
jonrohan
1030
460k
Docker and Python
trallard
44
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
The Invisible Side of Design
smashingmag
299
50k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Facilitating Awesome Meetings
lara
51
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.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)
チェック ツリーを表⽰