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
アクセシビリティ 2021 / Accessibility 2021
Search
Cybozu
PRO
May 17, 2021
Technology
6
9.5k
アクセシビリティ 2021 / Accessibility 2021
Cybozu
PRO
May 17, 2021
Tweet
Share
More Decks by Cybozu
See All by Cybozu
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
44k
テクニカルライティング
cybozuinsideout
PRO
4
240
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
220
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
280
モバイル
cybozuinsideout
PRO
3
150
ソフトウェアライセンス
cybozuinsideout
PRO
4
140
ソフトウェアテスト
cybozuinsideout
PRO
3
220
自動テスト
cybozuinsideout
PRO
3
230
Docker入門2024
cybozuinsideout
PRO
3
390
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
590
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
490
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.4k
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
Shift-from-React-to-Vue
calm1205
3
1.2k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Building an army of robots
kneath
302
42k
The Language of Interfaces
destraynor
154
24k
Speed Design
sergeychernyshev
24
570
Optimizing for Happiness
mojombo
376
69k
Visualization
eitanlees
144
15k
BBQ
matthewcrist
85
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building Applications with DynamoDB
mza
90
6.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Transcript
サイボウズ 開発運⽤研修 アクセシビリティ ⼩林⼤輔 デザイン&リサーチ アクセシビリティエキスパート
• アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する この講義で学ぶこと 復習
アクセシビリティとは︖ 復習
アクセシビリティ=障害者・⾼齢者のための特別対応︖
アクセシビリティとは 障害者・⾼齢者を含めて「すべての⼈」が 製品やサービスを⽀障なく利⽤できること
⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア
集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我
⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア
集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我 ⼩さい画⾯ 電⾞内 マスク 海外出張 在宅ワーク ⽇光下 急な予定 育児中 満員電⾞ 運転中 英⽂ 騒⾳ 静⾳環境
ユーザ サイボウズ製品 チーム
サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能⼒」
アクセシビリティを確保することは 「チームに参加したい」という ユーザのねがいを尊重すること
アクセシビリティに取り組むには︖
コンテンツがユーザに届くまで 制作者 ユーザ ハードウェア (PC・スマホ…) ソフトウェア (ブラウザ・⽀援技術) ⼊出⼒ 機器 感覚情報
(視覚・聴覚・触覚…) Webコンテンツ (HTML・CSS・JS…)
アクセシビリティを⾼める2つの要素 マシン リーダブル ヒューマン リーダブル 制作者 ユーザ
アクセシビリティ確保の基本
1. ⾒出し・ランドマークなどの⽂書構造をマークアップする 2. リンクテキストはリンク先がわかるようにする 3. 画像に代替テキストを提供する 4. 情報を伝える⾊の使い⽅に注意する 5. ⽂字を拡⼤しても情報が正しく伝わるようにする
6. キーボードで操作できるようにする 7. フォームフィールドにラベルを関連づける アクセシビリティ確保の基本
役⽴つ⼈・役⽴つ場⾯ ⾒出し・ランドマークなどの⽂書構造をマークアップする スクリーンリーダーは⾒出し・ランドマークなどの⽂書構造を読む 構造ごとに「読み⾶ばす」こともできる • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈
デザイン 実装 やるべきこと • モックの段階で⾒出しにする箇所を決める • モックの段階でランドマークにする箇所を決める • ⾒出しはh1...h6要素でマークアップする •
header, footer, nav, aside...を使う
役⽴つ⼈・役⽴つ場⾯ リンクテキストはリンク先がわかる⽂⾔にする スクリーンリーダーには「リンク」にジャンプする機能がある 同じリンク⽂⾔が続くとリンクが表す内容を理解しづらい(デモ) • 全盲の⼈/ロービジョンの⼈/ディスレクシアの⼈
やるべきこと デザイン • 不明瞭なリンクテキストを使わない 「ここをクリック」「さらに表⽰」「詳細はこちら」 • どうしてもテキストを変えられない場合 ⾒出しと組み合わせる ツールチップで補⾜する
役⽴つ⼈・役⽴つ場⾯ 画像に代替テキストを提供する スクリーンリーダーは代替テキストを読み上げる 画像のダウンロードに失敗すると代替テキストが表⽰される • 視覚障害の⼈ • 低速回線の⼈(画像のダウンロードに失敗した場合)
• img要素にalt属性をつける 代替テキストの提供⽅法 <img src="cybozu.png" alt="サイボウズ株式会社">
alt属性はどう読まれる︖ https://jsfiddle.net/sukoyakarizumu/qL5sf7r1/show
やるべきこと デザイン • 画像が何を表しているのかテキストで説明する • 画像につける代替テキストを決める 実装 • 意味のあるimg要素には、alt属性をつける •
装飾的なimg要素には、alt=""をつける
役⽴つ⼈・役⽴つ場⾯ 情報を伝える⾊の使い⽅に注意する ⾊のみに依存しない表現にする ⾊同⼠のコントラストを⾼くする • ロービジョンの⼈・さまざまな⾊覚の⼈ • ⽩⿊印刷した場合・屋外で閲覧した場合・プロジェクター
• ⾊以外の別の視覚情報を組み合わせる ⾊のみに依存しない表現
• 2つの⾊の違いを「コントラスト⽐」で表すことができる • ⽂字⾊と背景⾊のコントラスト⽐には 4.5:1 以上を推奨 ⾊のコントラスト 21 : 1
4.5 : 1 1 : 1 " " " " " " " " " "
• 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パーツを作る場合
• マウスに依存する操作を提供する場合 • キーボードフォーカスしたときのスタイルをつける キーボード操作についての注意
やるべきこと デザイン • キーボード操作の⽅法を考えておく • キーボードフォーカススタイルを決める 実装 • キーボード操作できるHTML要素を選ぶ •
キーボードフォーカススタイルをもれなくつける
役⽴つ⼈・役⽴つ場⾯ フォームフィールドにラベルを関連づける スクリーンリーダーには「フィールド」にジャンプする機能がある フィールドに⼊⼒すべき値が理解できる(デモ) • 視覚障害の⼈
• label要素で関連づける • 可視のラベルがない場合はaria-label属性かtitle属性をつける ラベルを関連づける⽅法 <label for="username">ユーザー名</label> <input type="text" id="username">
<input type="text" aria-label="ユーザー名">
やるべきこと デザイン • フィールドの近くに可視のラベルをつける 実装 • フィールドとラベルをlabel要素で関連づける • 可視ラベルがないときはaria-label属性をつける
1. ⽂書構造をマークアップする 2. リンクテキストはリンク先がわかるようにする 3. 画像に代替テキストを提供する 4. 情報を伝える⾊の使い⽅に注意する 5. ⽂字を拡⼤しても情報が正しく伝わるようにする
6. キーボードで操作できるようにする 7. フォームフィールドにラベルを関連づける アクセシビリティ確保の基本
• アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保の基本を理解する この講義で学んだこと 復習
アクセシビリティに より深く取り組むには︖
• デザイニングWebアクセシビリティ アクセシビリティ教科書の決定版 • コーディングWebアクセシビリティ よりマシンリーダブルなHTMLを書くために • インクルーシブHTML+CSS&JavaScript 優れた書籍を読もう
• Web Content Accessibility Guideline 2.1 https://waic.jp/docs/WCAG21/ • W3Cが勧告しているアクセシビリティ基準リスト •
各国のアクセシビリティに関する法律は、この基準を採⽤ ガイドラインを読んでみよう
多様なユーザの使い⽅を知ろう