アクセシビリティのためのデザイン

iidAdASyyLeX Le XX
This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.

英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

自閉症スペクトラムのためのデザイン

すること

しないこと

単純な色を使う

鮮やかでまぶしい色を使う

やさしい言葉で書く

比喩表現や慣用句を使う

簡単な文章と箇条書きを使うDo this.



説明的なボタンにする

添付ファイル

簡潔で一貫したレイアウトを構築するThis work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.

区切りのない長文で文字の壁をつくる

曖昧で予測不能なボタンにする

ここをクリック

複雑でごちゃごちゃしたレイアウトを構築する



英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

スクリーンリーダー
利用者のためのデザイン

すること
画像の説明、動画の書き起こしを提供する

順序立てた論理的なレイアウトにするHTML�を使ってコンテンツを構造化するキーボードだけで使えるように構築する

リンクや見出しは説明的に書く




しないこと

alt

画像や動画だけで情報を表示する



ページ全体にコンテンツをバラバラに配置する

<h1>

<nav>

<label>

文字サイズや配置に頼って構造化する

マウスや画面の使用を強制する

お問い合わせリンクや見出しを役立たずにするThis work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.

36pt, bold

Header
ここをクリック

英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Teamロービジョンのためのデザインすること


しないこと

良いコントラストと読みやすい文字サイズを使う

Aa

低いコントラストと小さい文字サイズを使う

すべての情報をウェブページ（HTML）で公開する

ダウンロードの中に情報を埋没させる

色、形、文字の組み合わせで意味を伝える

順序立てた論理的なレイアウトにするHTMLスタート ���% 拡大

ページ全体にコンテンツを広げる（拡大表示したとき、横スクロールが必要）

ボタンと通知は文脈にそって配置する

文脈と分離した操作をさせるThis work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.



色だけで意味を伝える（拡大表示したとき、文章は折り返して表示される）

送信Aa

���% 拡大

送信

英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

ディスレクシアのためのデザイン

iidA
dA
SyyLe
X Le

することしないこと理解を助けるために画像や図を使う

長い文章で大きな文字のブロックをつくる

文字揃えは左揃えで一貫したレイアウトを保つ

他のフォーマットでの情報提供を検討する（例：音声や動画）

下線を引く、斜体を使う、大文字で書く（リマインダやヒントを出しましょう）

正確なことばで入力する必要がある（予測入力や自動修正の機能を使いましょう）

This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.

DON’TDO THIS前のページを覚えておく必要がある

コンテンツを短く、明確に、簡潔にする

背景と文字のコントラストを利用者が変更できる

ひとつの場所に情報をつめこむ

dyslexia dsyle

英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

身体障害・運動障害のためのデザインすることクリック可能な範囲を大きくする精密さを要求する

Yes

操作対象のあいだを空ける

キーボードや音声だけで使えるように設計する携帯電話やタッチスクリーンを想定して設計する

ショートカットを提供する

しないこと
No

操作対象を近づけすぎるマウスをたくさん動かす必要がある

Tab


郵便番号
住所検索

This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.



短い時間制限をもうける

タイピングやスクロールで利用者を疲れさせる
12
32a2b2c 時間切れです
住所英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

聴覚障害・難聴のためのデザイン



すること

しないこと

やさしい言葉で書く

Do this.

難しい言葉や比喩表現を使う

字幕を使うか、動画の書き起こし文を提供するCC

音声や動画のみで情報提供する



順序立てた論理的なレイアウトにする

複雑なレイアウトやメニューをつくる

長いかたまりのコンテンツを読ませる

小見出し、画像、動画でコンテンツを分割する

予約や手続きの際に利用者が希望するコミュニケーション支援を利用できる

This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.

電話を唯一の連絡手段にする

英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

不安状態のためのデザイン

すること

しないこと

操作を終えるのに十分な時間があるユーザーを急がせたり、必要のない時間制限を設ける

これから何が起こるかを説明する

確認メールを送信しました

次にすることや時間制限で利用者を混乱させる

重要な情報は明確に操作の結果がはっきりわからない操作を完了するために必要なサポートを提供する

サポートやヘルプにアクセスしづらい

ユーザーが送信前に入力内容を確認できる

This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.

質問に回答したユーザーを放置しない

1

2

34?

?
? ?
??

英国内務省（UK Home Oﬃce）が制作した、アクセシビリティの啓発ポスターを日本語訳したものです。
原本は GitHub に公開されています。

https://github.com/UKHomeOﬃce/posters/tree/master/accessibility/dos-donts

thanks: A11YJ Slack Team

Home Office Digital, Data andTechnology’s goal is to makeexceptional services foreveryone.
Understanding accessibility means we canbuild services that work for everyone,whatever their access need.
These posters show how you can makeyour service accessible for different
access needs.
Email access@digital.homeoffice.gov.uk to
get involved and help make Home Officeservices accessible by default.

This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 International License. To view a copy ofthis license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.