高齢者が使うアプリケーションのアクセシビリティデザイン｜Goodpatch Blog グッドパッチブログ
この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回アクセシビリティデザインをするために行ったことは以下です。 高齢者がスマホを使いこなせるのかを検証する 色のコントラスト比と余白の確保 色覚異常を考慮したカラー選定 数字を考慮したフォント選定 まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。 高齢者がスマホを使いこなせるのかを検証する 今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要がありました。そのため、デザイン性を高めることをあえて我慢しました。なぜならフェーズとして「
アクセシビリティに関する各種リンク
アクセシビリティに関する各種リンク 毎回検索している気がするので、自分用のメモ。 macOSのアプリ + Sketchのプラグイン Contrast: コントラストをチェックする macOS のアプリ stark-contrast/stark-sketch-plugin: 文字と背景のコントラストをチェックしたりや色覚をシミュレートする Sketch のプラグイン getflourish/Sketch-Color-Contrast-Analyser: コントラストをチェックする Sketch プラグイン DevTools + Extension + ブックマークレット ChromeLens: Web ページで色覚をシミュレーションする Chrome の拡張機能 aXe: Web ページのアクセシビリティをチェックする Chrome の拡張機能（DevTools の Audit に取り込まれ
■障害者のホームページ利用方法の紹介ビデオ
ここではウェブアクセシビリティ維持・向上の取組の必要性を強く実感していただくため、障害者の方のウェブページ利用方法を紹介した映像等をご覧いただけます。 総務省では、平成17年度に視覚障害者（全盲・弱視）、肢体不自由者の方のウェブページ利用状況を紹介するビデオを制作・公表しました。 その後、ビデオの陳腐化や「障害を理由とする差別の解消の推進に関する法律（平成25年法律第65号）」の施行等により、公的機関のウェブアクセシビリティ確保が重要になっていることを鑑み、平成28年7月1日に「視覚障害者（全盲・弱視）のウェブページ利用方法紹介ビデオ」を更新いたしました。
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
Best Accessibility Android Apps for the Blind & Visually Impaired
Android accessibility comes into the picture as it helps change the lives of disabled people, especially the visually impaired ones. This site provides honest reviews about online casino apps that visually impaired people can use easily. There is also an android for the blind, which makes the utilization of Android a lot easier. So, to the visually impaired, this is still possible. Technology is i
初心者でも使えるサポートページの作り方 (ユーザビリティ実践メモ)
お問い合わせコストを節約するため、ウェブサイトに「よくあるご質問」や「アフターサービス情報」等を豊富に掲載して、ユーザの自己解決を促すケースが多くなってきています。 一方で、インターネットに不慣れなユーザ（以下：初心者）が利用するにはハードルが高いサポートページも多く存在します。 今回は、特に初心者向けにサポート情報を提供する際のポイントをご紹介します。 サポート情報を提供する上で最も重要なことは、ユーザが目的の情報にスムーズにアクセスできるようにすることです。そこでサポートページでは、「一本道で目的の情報にたどり着ける」ように導線設計をすることが重要です。 一般的には、「商品カテゴリから探す」、「型番から探す」、「よくあるご質問から探す」など、色々な探し方が出来たほうが、ユーザビリティーが高い傾向があります。しかしこの一般則は、初心者がサポートページを利用する場合には必ずしも当てはまりま
Accessible Interface to YouTube
An accessible way to access video sharing website YouTube - screen reader users welcome!This website is designed to provide an accessible version of the popular video-sharing website YouTube. In addition to traditional accessible design practices such as semantic, well-structured markup, high-contrast colour schemes and standards compliance, newly-available technologies such as WAI-ARIA have been
アクセシビリティから考える画像のマークアップ
はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。 対象読者 XHTMLと
asahi.com（朝日新聞社）：色のバリアフリーへ２０色 色見本、デザインに活用 - 社会
よく使われる色づかい（上）と、誰でも見分けやすいように考えられた色（下）。厳密な色再現ではない＝伊藤准教授提供 誰でも見分けやすいように工夫した色見本を、東京大や日本塗料工業会などが作った。色覚障害や白内障の人のほか、一般の人にも色を実際に見てもらい、２千色以上から２０色に絞り込んだ。塗料用に続き、印刷インキ用の色見本も近く完成、デザイン業界などで使ってもらう予定だ。 東大の伊藤啓・准教授（分子神経生物学）は印刷インキメーカーのＤＩＣなどと協力、２年前から色見本づくりを進めてきた。実生活で使いそうな色を、屋外で日にあてたり、古い蛍光灯の下に置いたりして、色覚障害の人や白内障手術を受けた人のべ約４０人に見てもらった。 これまでよく使われた色づかいでは、赤と緑は色覚障害の人にとってまぎらわしく、黄色は白内障の人には明るすぎたという。そこで赤はオレンジ寄りに、緑は青みを強く、黄色は濃くした
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアクセシビリティ：チェックリスト
WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜」
Webアクセシビリティが無視されすぎで気にくわない。
http://browsersize.googlelabs.com/
IDEA * IDEA
アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス
Web標準導入キット - maccaws.org
ユーザビリティコラム：Jakob Nielsen博士のAlertbox
