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.3k
アクセシビリティ
Cybozu
PRO
July 13, 2023
Tweet
Share
More Decks by Cybozu
See All by Cybozu
PSIRTでAIテストを実施するまでの道のり
cybozuinsideout
PRO
0
45
無理なく続けるサイボウズの社内勉強会
cybozuinsideout
PRO
1
530
kintone開発組織のAWSエンジニアの紹介
cybozuinsideout
PRO
0
92
kintone開発組織のサービスプラットフォームチームの紹介
cybozuinsideout
PRO
0
68
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
6
40k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
440
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
52k
テクニカルライティング
cybozuinsideout
PRO
4
680
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
570
Other Decks in Technology
See All in Technology
非エンジニアにも伝えるメールセキュリティ / Email security for non-engineers
ykanoh
13
4k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
490
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
130
年末調整プロダクトの内部品質改善活動について
kaomi_wombat
0
210
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
290
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
1
240
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
680
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
410
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Unsuck your backbone
ammeep
670
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Faster Mobile Websites
deanohume
306
31k
Facilitating Awesome Meetings
lara
53
6.3k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
A Tale of Four Properties
chriscoyier
158
23k
Building Your Own Lightsaber
phodgson
104
6.3k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Adopting Sorbet at Scale
ufuk
75
9.3k
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)
チェック ツリーを表⽰