Apple「ポッドキャスト」アプリのトランスクリプト自動生成 | Accessible & Usable
公開日 : 2024年3月17日 カテゴリー : アクセシビリティ 音声によって伝達されるコンテンツは、そのままでは聴覚障害者が利用できないため、視覚的に見えるテキストの形で代替コンテンツを提供することが、アクセシビリティの観点で求められます。たとえば動画であればキャプション (字幕)、ポッドキャストのようなオーディオコンテンツであればトランスクリプト (書き起こしテキスト) が、こうした代替コンテンツに該当します。 YouTube、Chrome ブラウザ (Windows および Mac) 、Android OS といった Google 系のプロダクトでは既に、自動の字幕起こし機能が用意されていて、便利に利用されている方も多いかと思います。これに対して、このほど Apple でも iOS (および iPad OS) のバージョン17.4で、Apple 純正「ポッドキャスト」アプリにおいて
Figma 用のアクセシビリティ注釈キット「A11y Annotations」 | Accessible & Usable
公開日 : 2022年12月19日 (2022年12月22日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。 ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。 見出し (およびそのレベル) アクセシブルな名前 (画像の alt、アイコンの aria-label など) ランドマーク WAI-ARIA (ユーザーに動的な状況変化を伝達するためにどの aria 属性を用いるか、ユーザーの理解支
Figma プラグイン「Axe for Designers」 | Accessible & Usable
公開日 : 2022年12月13日 カテゴリー : アクセシビリティ ウェブサイト/アプリケーションの UI デザインツール「Figma」のプラグインとして、Deque Systems が「Axe for Designers」を公開しました。ウェブアクセシビリティ検証ツール「axe」の開発元として知られている同社が、プロダクト開発におけるアクセシビリティの意識づけを上流工程に前倒し (シフトレフト) すべく、実装前のワイヤーフレームやプロトタイピングの段階で、アクセシビリティに関連するチェックをある程度できるようにしたプラグインです。 Axe for Designers (FREE) – Figma 現時点でこのプラグインは、Figma 上の任意のフレームに対する Auto Scan (自動検証) によって、以下のアクセシビリティ要件を検証できるようになっています。 文字色と背景色のコント
WCAG 2.2 Candidate Recommendation (勧告候補) | Accessible & Usable
公開日 : 2022年9月8日 (2023年10月6日 更新) カテゴリー : アクセシビリティ W3C が勧告している WCAG (Web Content Accessibility Guidelines) の次期バージョンである WCAG 2.2 が、Candidate Recommendation (勧告候補) として2022年9月6日に開示されました。 Web Content Accessibility Guidelines (WCAG) 2.2 - W3C Candidate Recommendation Snapshot 06 September 2022 勧告候補ということで、盛り込まれる達成基準の内容は概ねこれでフィックスされ、最終的な勧告 (2022年末？) の前に、個々の達成基準の実効性を最終確認する段階となります。この記事では、WCAG 2.2 で新しく追加される (
「ユーザーとの向き合いかた」を深化させるアクセシビリティ (iCARE Dev Meetup #33) | Accessible & Usable
公開日 : 2022年5月22日 カテゴリー : アクセシビリティ 2022年5月18日に開催された「iCARE Dev Meetup #33」に登壇させていただき、『「ユーザーとの向き合いかた」を深化させるアクセシビリティ』というテーマでお話をしました。 開発者をメインターゲットとしたイベントで、テーマが「デザイナー目線のユーザーとの向き合い方」ということで、UX デザインにまつわる様々なセッションが繰り広げられました。この中で私は、ユーザー中心設計 (UCD) のプロセスにおいてアクセシビリティをどうチーム内で共有認識化し、UX デザインを深化させてゆくかについて、「インクルーシブなペルソナ拡張」というフレームワークを用いながらお話をさせていただきました。 折しも、5月第3木曜日 (2022年は5月19日) に全世界で展開される GAAD (Global Accessibility A
Twitter の「ALT」バッジ | Accessible & Usable
公開日 : 2022年5月6日 (2023年7月19日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) 2022年4月8日付で、Twitter は「ALT」バッジをグローバルにリリースしました (参考 : @TwitterA11y によるアナウンス)。ツイートとして投稿された画像に代替テキストが付いている場合、このバッジが表示され、クリックまたはタップすることで代替テキストの記述内容を展開して見ることができる、という機能です。具体的な使用方法は、Twitter ヘルプセンターの記事「画像の説明を追加する方法」で紹介されています。 視覚障害者 (スクリーンリーダーの利用者) が画像内容を音声読み上げを介して理解できるよう、ツイートとして投稿された画像に代替テキスト (<img> 要素の alt 属性) を付ける機能は、以前からありましたが、今回「ALT」バッジが表示されるよ
一貫性のあるフォーカスインジケーター | Accessible & Usable
公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解
ウェブの情報設計 (IA) とアクセシビリティ | Accessible & Usable
公開日 : 2020年10月31日 カテゴリー : アクセシビリティ / 情報設計 (IA) ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) はウェブデザインの要であると言えるでしょう。 ことウェブにおいては、同内容の情報であっても、ユーザーひとりひとりが抱える多様なコンテキスト (利用デバイス、シチュエーション、障害や加齢などに伴う身体特性、好ましい情報入出力のモダリティ、など) に応じてコミュニケートのしかたを柔軟に変えることが可能であり、こうしたウェブの特性を踏まえると、IA はアクセシビリティと密接に関係があると言えます。私自身、ウェ
アクセシビリティ要件「色だけに依存しない」をスマートフォンで手軽に検証する | Accessible & Usable
公開日 : 2020年2月22日 (2021年7月17日 更新) カテゴリー : アクセシビリティ ウェブコンテンツのデザインにおいては、ユーザーに情報を識別させる手段として、色だけに依存しないことが重要です。W3C が勧告している WCAG (Web Content Accessibility Guidelines) (日本語訳) でも下記のとおり達成基準が設けられています。 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 出典 : WCAG 2.1 達成基準 1.4.1 「色の使用 (レベル A)」 言い換えれば、グレースケール (色を排除した状態) で表示しても、情報が十分に識別できる必要があります。そうすることで、様々な色覚特性を持ったユーザーや、モノクロの印刷または画面表示 (電子ペーパーなど) を介して閲覧するユーザ
Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド | Accessible & Usable
公開日 : 2019年12月19日 (2023年5月17日 更新) カテゴリー : ユーザビリティ / アクセシビリティ この記事は、Web アクセシビリティ Advent Calendar 2019 の19日目の記事です。 このたび監訳で関わらせていただきました「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」が、このクリスマスシーズンに出ることになりました。2018年にドイツの Smashing Magazine から刊行された、Adam Silver 著「Form Design Patterns - A practical guide to designing and coding simple and inclusive forms for the web」の日本語訳です。 言うまでもなく、ウェブにおけるフォームは、インタラクションの
ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版 | Accessible & Usable
公開日 : 2019年7月20日 カテゴリー : アクセシビリティ 先の記事でご紹介した、英国内務省 (UK Home Office) によるウェブアクセシビリティの「べき/べからず」ポスター ですが、このほど @onouchidebe さん によって日本語化されました。 ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版 障害の種類 (以下の7種類) ごとに、アクセシビリティ担保のためのデザインとして「すること」と「しないこと」が、コンパクトにまとめられています。 自閉症スペクトラム スクリーンリーダー利用者 ロービジョン ディスレクシア 身体障害 / 運動障害 聴覚障害 / 難聴 不安状態 日本語化されたことで、とても読みやすくなりました。英国政府機関の資料という位置づけになりますが、あらゆるウェブサイトやアプリケーションに応用できる内容なの
WCAG 2.1 日本語訳が公開 | Accessible & Usable
公開日 : 2019年6月20日 (2020年4月16日 更新) カテゴリー : アクセシビリティ 私も作業協力者として参加しているウェブアクセシビリティ基盤委員会 (WAIC) の翻訳作業部会にて、W3C 勧告「WCAG (Web Content Accessibility Guidelines) 2.1」の日本語訳が行なわれ、このほど公開されました。 Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳 旧バージョン (2.0) に含まれている達成基準はそのままに、新バージョン (2.1) では新たに17の達成基準が追加され、これまで十分にカバーできていなかったとされる領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化されています。 なお、新たに追加された達成基準 (の日本語訳) は、以下のとおりです。 1.3 適応可能
Colour Contrast Analyser (WCAG 2.1 対応) | Accessible & Usable
2019年6月9日追記 : この記事でご紹介している Colour Contrast Analyser は、その後マイナーアップデート (バージョン 1.1.2) によって UI が一部変更されました。下記「感想と改善案」で提起した UI 改善案を反映していただいた形になっています。詳しくは「Colour Contrast Analyser (WCAG 2.1 対応) の UI 改善」をご参照ください。 ウェブアクセシビリティを担保するうえで重要な前景色と背景色のコントラスト比について、チェックするツールはいろいろありますが、私自身は、Mac および Windows の両方で使える (プロジェクト関係者で共有しやすい)、使いかたが簡単 (スポイトで調べたい色の部分をクリックするだけでよく、16進数を知らなくても使える)、無料、という理由で、The Paciello Group が公開してい
ロービジョンのユーザーのウェブ利用の様子 : 2018年9月実施の WebAIM 調査より — Website Usability Info
公開日 : 2018年11月3日 (2018年11月5日 更新) カテゴリー : アクセシビリティ ウェブアクセシビリティ向上のために活動している米国の非営利団体「WebAIM (Web Accessibility in Mind)」が、2018年9月に、ロービジョンのユーザーを対象にしたウェブ利用に関する調査を実施しました。2013年2月から3月にかけて実施された第1回に続く、第2回目となる調査です。 英語のレポートになりますが、WebAIM サイトの「Survey of Users with Low Vision #2 Results」で詳細をご覧いただくことができます。この記事では WebAIM 発表の調査結果の中から、私自身が興味深く感じた事項をピックアップします。 回答者のデモグラフィック 有効回答数は248。(英語を理解する人の全世界からの回答を受け入れているが、回答者の国や地
グラフや図解の説明テキスト | Accessible & Usable
公開日 : 2018年8月4日 (2020年6月13日 更新) カテゴリー : アクセシビリティ ウェブコンテンツの中で、視覚的な情報提示としてグラフや図解を用いる場合、アクセシビリティ (特に視覚障害者に対する情報保障) はどのように両立したらよいでしょうか。主宰しているウェブアクセシビリティの勉強会で、質問が寄せられたので、考えてみました。 グラフも図解も「画像」なので、alt 属性で代替テキストを記述すれば...とまずは思うかもしれません。ただし、alt 属性内に要約をコンパクトにまとめられればよいのですが、多くの場合、グラフや図解は情報量が多いため、テキストに起こしてみると記述は説明的で長くなりがちです。また、alt 属性内のテキストはセマンティックに構造化することができず、長いテキストでも平坦な記述 (情報の優先度付けなどのない「べた書き」) にならざるを得ないため、スクリーンリ
Mac OS X における音声読み上げ (VoiceOver) | Accessible & Usable
公開日 : 2010年11月23日 (2018年1月20日 更新) カテゴリー : アクセシビリティ Mac OS X には、VoiceOver（ボイスオーバー）という音声読み上げ機能（スクリーンリーダー）が搭載されています。エクストラなコストをかけてスクリーンリーダーソフトを別途購入しなくてもよいということもあり、Webアクセシビリティ関係者の間では注目を集めています。たとえば、当サイトの記事「スクリーンリーダー利用に関するトレンド : 2009年10月実施の WebAIM 調査より」でも触れましたが、2010年3月に開催されたCSUN（アクセシビリティに関する国際会議）において、WebAIM（Web アクセシビリティ向上活動をしている米国の NPO）による研究発表があり、VoiceOver を含む無料のスクリーンリーダーのユーザーが急増しているというレポートもあります。 今回の記事では
ブロックスキップを考える | Accessible & Usable
公開日 : 2018年3月2日 カテゴリー : アクセシビリティ ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0 に、「ブロックスキップ」という達成基準があります。 2.4.1 ブロックスキップ: 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。 (レベル A) 出典 : WCAG 2.0 解説書「達成基準 2.4.1 を理解する」 グローバルナビゲーションなどサイト共通のブロック (塊) を任意で読み飛ばせるようにして、メインコンテンツにスムーズにアクセスできるようにしましょう、というものです。達成方法には大きく分けて、1) スキップリンクを設置する方法と、2) 見出し要素や WAI-ARIA ランドマークを適切にマークアップする方法、のふたつがあります (参考 : WCAG 2.0 解説書「達成基準 2.
スクリーンリーダー利用に関するトレンド : 2017年10月実施の WebAIM 調査より | Accessible & Usable
公開日 : 2017年12月27日 (2024年3月1日 更新) カテゴリー : アクセシビリティ ウェブアクセシビリティ向上のために活動している米国の非営利団体 WebAIM (Web Accessibility in Mind) による、恒例のスクリーンリーダー利用者調査 (第7回) の結果が発表されました。英語のレポートになりますが、WebAIM サイトの「Screen Reader User Survey #7 Results」で詳細をご覧いただくことができます。 この記事では WebAIM 発表の調査結果の中から、私自身が興味深く感じた事項を中心に、スクリーンリーダー利用に関するトレンドについてまとめたいと思います。 調査の概略 本調査は2017年10月にウェブアンケート形式で行なわれました (前回は2015年7月)。有効回答数は1,792人で、回答者の地域属性は、北米が60.0
JIS X8341-3 の実装チェックリストを上流工程から使う | Accessible & Usable
公開日 : 2014年7月22日 (2018年1月17日 更新) カテゴリー : アクセシビリティ ウェブアクセシビリティの JIS 規格「JIS-X8341-3:2010 (高齢者・障害者等配慮設計指針 – 情報通信における機器、ソフトウェア及びサービス – 第３部：ウェブコンテンツ)」には、「8. 試験方法」という章があります。ウェブサイトが、JIS 規格と照らし合わせてどの程度準拠しているのか、を明確にするための試験のしかたが規定されています。 その試験の成果物のひとつとして、「実装チェックリスト」の作成が求められています。JIS X8341-3:2010 の「7. ウェブコンテンツに関する要件」が定める達成基準ごとに、具体的な実装方法を列挙し、各々の実装方法がきちんと満たされているか (適合しているか) 否かをチェックする (◯印を付ける)、というリストです。 実装チェックリストの
「インクルーシブデザイン」の二つの視点 — UX デザインの土台としてのウェブアクセシビリティ | Accessible & Usable
公開日 : 2017年12月21日 (2018年6月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ この記事は、Web Accessibility Advent Calendar 2017 の21日目の記事です。 12月16日に開催された「CSS Nite LP55 / Shift11 : Web デザイン行く年来る年」で、インフォアクシアの植木さんと一緒に「アクセシビリティ」セッションに登壇させていただきました。(フォローアップが公開されていますので、当日のスライドや動画をご覧いただくことができます。) 撮影 : サン・スタジオ 鍋坂樹伸様 「アクセシビリティ 改め インクルーシブデザイン？」というセッションタイトルで、欧米のウェブアクセシビリティコミュニティを中心に「インクルーシブデザイン (inclusive design)」というキーワードが広まりつつあること、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
