公開日 : 2016年12月17日 (2018年1月17日 更新) カテゴリー : アクセシビリティ この記事は、Web Accessibility Advent Calendar 2016 の17日目の記事です。 ご自身が運営するウェブサイトにおいて、アクセシビリティの向上に取り組んでいるのであれば、その取り組みについて情報公開したいものです。社外に対するよいアピール (ひいては自社に対する信頼感やブランドイメージの向上) になり得ますし、内部的にもウェブサイトの品質基準を宣言し共有することにつながるからです。 具体的にどう情報を公開したらよいか、スタンダードがあれば参考にしたいところですが、幸い JIS X8341-3:2016 で「附属書 (参考)」という形で提示されています。 附属書 JA ウェブアクセシビリティの確保・維持・向上のプロセスに関する推奨事項 附属書 JB 試験方法

公開日 : 2016年2月21日 (2020年8月30日 更新) カテゴリー : アクセシビリティ 以前、「画像スライドショーの標準 UI (あったらいいな)」という記事を書きましたが、現実問題として、ウェブサイトで画像のスライドショーを実現するには、JavaScript ライブラリーを付加的に使うことになります。最近「PhotoSwipe」というスライドショーの全画面表示が可能なライブラリーを使う機会があり、アクセシビリティ面でのカスタマイズを加えることで、自分の思い描くインタラクションに近づけることができました。ひとつの実験例としてご紹介します。(この記事の最後にデモへのリンクをご用意していますので、併せてご覧ください。) PhotoSwipe の特長 PhotoSwipe には、以下の特長があります。ユーザーエクスペリエンス (特にユーザーの没入感) や、ユーザビリティ上の配慮といっ

公開日 : 2014年8月28日 (2024年7月17日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコンではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。

公開日 : 2015年10月9日 (2020年8月30日 更新) カテゴリー : アクセシビリティ ウェブサイトでボタンを設置する際、そのボタンのラベルとは別に、ボタンのすぐ下などに、追記を配置することがあると思います。たとえば、フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押ししたり、行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一押ししたり、といったケースが考えられます。 フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押しする。(例 : [送信する] ボタンの下に「メールアドレスの綴りや、お問い合わせ本文の内容を今一度ご確認のうえ、送信してください。」という追記がある。) 行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一

公開日 : 2015年9月2日 カテゴリー : ユーザビリティ ユーザー中心設計 (User Centered Design : UCD) において、ターゲットユーザー像を明確にするために、ペルソナやシナリオを用いることは多いと思います。 ペルソナやシナリオは使いかた次第で、プロジェクト内の意思疎通や意志決定に大いに役立ちますが、正しく運用するのはそれなりに大変です。思い込みやステレオタイプで作ってはいけませんし (エスノグラフィックな実地調査を通じて練り上げるのが基本)、コミュニケーションツールとして効果的に使われ続けるようにまとめるには、勘所の押さえも含め、ある程度習熟が必要です。 また、アクセスしてくるユーザーの目的やニーズが多種多様なウェブサイトの場合 (特にコーポレートサイトや自治体サイトなど、サイトの規模が大きく、提供すべきコンテンツが多岐にわたるもの)、主要なターゲットユーザ

公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって

公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア

公開日 : 2013年1月26日 (2020年8月30日 更新) カテゴリー : アクセシビリティ 先の記事「音声を伴う動画にはキャプション (字幕) を付ける」で、Web コンテンツとして動画 (音声を伴うもの) を用いる場合、アクセシビリティ上の配慮としてキャプション (字幕) を付けることが求められると書きました。キャプションにはふたつの種類がありますが (オープンキャプションとクローズドキャプション)、今回は、クローズドキャプションの作成方法について、HTML5 の <video> 要素を例に、ご紹介しようと思います。 HTML5 <video> 要素におけるキャプションの読み込み HTML5には <video> 要素があり、標準仕様として Web ページに動画を埋め込むことができます。その中に <track> 要素を書くことで、動画とは別に用意したキャプションファイル (テキスト

公開日 : 2014年4月15日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー

公開日 : 2014年1月12日 (2014年1月13日 更新) カテゴリー : アクセシビリティ 最近、ある Web サイトの構築プロジェクトで、情報アーキテクチャ (IA)、ユーザーインターフェース (UI) 設計、アクセシビリティ、といった領域で関わらせていただく中で、アクセシビリティの達成基準レベル「AA」について、改めて考える機会がありました。そのサイトデザインが海外でも使われるということで、ある国の法制面からの要求で、W3C が勧告する「WCAG (Web Content Accessiblity Guidelines) 2.0」の達成基準レベル「AA」を満たすことを視野に入れておく必要に迫られたからです。 Web サイトがアクセシビリティ対応 (厳密に言うと「WCAG 2.0 (日本の場合は JIS X8341-3:2010)」への対応) を検討するとき、どのレベルの達成基準

公開日 : 2012年6月4日 (2024年3月1日 更新) カテゴリー : アクセシビリティ Web アクセシビリティ向上のために活動している米国の非営利団体「WebAIM (Web Accessibility in Mind)」による、スクリーンリーダー (音声読み上げ支援技術) の利用に関する調査結果が発表されました。英語のレポートになりますが、WebAIM サイトの「Screen Reader User Survey #4 Results」で詳しい調査分析ご覧いただくことができます。 もはや恒例と言ってもよいこの調査ですが、今回はその第4回目ということで、2012年5月に実施されたものです (ご興味のある方は、2009年1月および10月実施の調査、2010年12月実施の調査も併せてご覧ください)。 今回 WebAIM から発表された調査分析を見ると、前回までの調査で見えた傾向が、よ

公開日 : 2010年5月29日 (2024年3月1日 更新) カテゴリー : アクセシビリティ 2010年3月に第25回目として開催されたアクセシビリティに関する国際会議「CSUN」において、Webアクセシビリティ向上のために設立された米国の非営利団体「WebAIM（Web Accessibility in Mind）」による、スクリーンリーダーの利用に関する調査結果が発表されました。米国の状況ではありますが、興味深いトレンドが浮かび上がっており、個人的には、いずれ日本にも波及するのではないかと思いますので、ご紹介したいと思います。 ちなみに私自身はCSUNには参加していませんが、セッションの資料は公開されているので、より詳しく知りたいという方は、この記事の末尾の「参考資料」をご参照ください。 WebAIMによる今回の調査は、2回にわたって行なわれたようです。第一回は2009年1月（回答

公開日 : 2009年12月21日 (2011年1月11日 更新) カテゴリー : ユーザビリティ 456 Berea Streetという、主にWeb標準やアクセシビリティ、ユーザビリティに関する話題を簡潔にまとめて発信しているスウェーデン発のサイトがあります。その中に、「Don't fear the fold -- people do scroll」という興味深い記事がありました。Webユーザーはちゃんとスクロールしてくれるもだから、「fold」を恐れるな、というものです。 ここでいう「fold」とは、折り返しという意味ですが、もう少しわかりやすく言うと、Webページの情報のうち、ブラウザに表示される部分と表示されない部分の「境目」のことを「fold」と言います。スクロールせずに閲覧できる範囲のことをWebの業界では、「above the fold」または「first view」と呼んだ

ウェブアクセシビリティ方針 Accessible & Usable (以下、当サイトといいます) は、ウェブアクセシビリティの普及および一般化を、社会の要請として捉えており、すべてのウェブサイトおよびそのコンテンツは、十分なアクセシビリティを備えているべきであると考えています。 当サイトでは、ウェブアクセシビリティ関連情報を発信するという立場からその規範となるべく、「JIS X8341-3:2016 高齢者・障害者等配慮設計指針 — 情報通信における機器、ソフトウェア及びサービス — 第3部 : ウェブコンテンツ」を遵守し、アクセシビリティの向上に積極的に取り組みます。 対象範囲 Accessible & Usable (https://accessible-usable.net) 以下すべてのページ 目標とする適合レベルおよび対応度 JIS X8341-3:2016 の適合レベル AA