モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
aria-expandedのよくある間違い | masuP.net
WAI-ARIAの中で、コンテンツが展開されているかどうかの状態を表すaria-expandedは、WAI-ARIAの中でもよく使われている属性のうちの一つ[注1]ですが、誤った使い方をみかけることも少なくありません。また私自身も間違った理解のまま使用していた時期もありました。 [注1] : 出典 Usage of ARIA attributes - Analysis - Discuss - HTTP Archive そこでaria-expandedのよく見かける間違いと、仕様に基づいた正しい使い方をまとめました。 間違いその1：aria-hiddenとaria-expandedを混同する aria-expanded は要素、または要素が制御する別のグループ化要素が、現在展開されるまたは折りたたまれるかどうかを示す。ステートです。要素そのものが隠れているかどうかを示すaria-hidden
ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリティユーザー調査の結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
いよいよユーザーテストに入ります。テストの結果どうなり、何がわかったのでしょうか。今回は、ユーザーテスト本番の様子をお伝えします。 中根さん登場！前回の記事でもご紹介した中根さんに、実際に当社までお越しいただきました。中根さんは、アクセシビリティの専門家です。かつてはW3CのWAI (Web Accessibility Initiative) でアクセシビリティガイドラインの策定にも関わっており、現在ではアクセシビリティの情報サイト「AccSell」を主催して、Webに限らず、アクセシビリティ全般の情報を積極的に発信されています。 弁護士ドットコムの社内からは、20名ほどの参加者が集まりました。テストに先立ち、まずは視覚障害者の一般的な環境や、中根さんの普段の利用方法をご紹介いただきました。この内容は第1回、第2回の記事で触れた内容と重複しますので、そちらをご覧いただければと思います。 い
NVDAを使ってWebアクセシビリティをテストする方法｜実践ノウハウ｜エー イレブン ワイ［WebA11y.jp］
このWebページは、アメリカのユタ州立大学にある非営利組織WebAIMに許諾をいただき、”Using NVDA to Evaluate Web Accessibility“という記事を日本語訳したものです。 この記事のコンテンツ 以下にあるリストは、このWebページの見出しです。このリストをNVDAでスキップするには、Hを押して次の見出しへ移動してください。 イントロダクション まず最初に 読み上げ ナビゲーション クイックキー その他のナビゲーション用ショートカット 画像 データテーブル フォーム 練習 イントロダクション この記事は、NonVisual Desktop Access (NVDA)を使ったことのない方々がWebコンテンツを検証する際の基本的な操作方法を学ぶために、またNVDAを時折使う人の参考となるように書かれています。NonVisual Desktop Access (
ラジオボタンに初期値をおくべきかという議論 | バシャログ。
近ごろ職場近辺で「モーニングがある」「きちんと分煙されている」「携帯電話の電波が入る」の3条件をいずれも満たすようなカフェを探している kagata です。2つまではわりとどこも満足できるのですが、3つすべてとなるとなかなか難しいようです。 さて、先日弊社内で「ラジオボタンには初期値を設けるべき」とごく軽い気持ちで発言したところ、社内外で思いのほか活発な議論が巻き起こるということがありました。その際に調べた前提的な話を備忘のためここにまとめるとともに、今考えている疑問や課題をご紹介します。「そんなことも知らないの？」ということがあったら、ご教授いただければ幸いです… m(__)m HTML の仕様を確認する 「ラジオボタンには初期値を設けるべき」だとわたしが最初に学んだのは10年くらい前のことです。当時はプログラミングでなく主に HTML を書いて生計を立てていました。そのころに次の記事を
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
Ameba Accessibility Guidelines
概要 Ameba Accessibility Guidelinesは、Amebaのサービスを利用するユーザーの「誰もがいつでも迷わずコンテンツを楽しむことができる」ようにするための、制作指針集である。 Amebaのサービスに携わるコンテンツや開発者は、高品質なサービスを提供するため、ガイドラインに沿った制作/開発を強く推奨する。 本ガイドラインで掲載している事例や実装方法はAmebaでの事柄である。失敗例で実装していても、WCAG 2.0（2.1）の各項目に適合できる場合もあり、適合・不適合の判断はWCAG 2.0（2.1）を参照のこと。 対象となるサービス 本ガイドラインに準拠するサービス一覧。 各サービス毎に、アクセシビリティ改善プロジェクトの目的と対象とする範囲を定義する。 アメブロ 各項目の構成 適合レベル 達成基準を対応する目的と意義、対応すると得られるメリットなど 具体例 実装
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
D2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～を開催しました。 - White Stage
2017年3月5日日曜日の14時00分から開催されたD2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～で、いつものように私は司会進行と説明を務めました。 まず、講師の澤田(@SawadaStdDesign)さんから「WAI-ARIAの考え方と使い方を整理しよう」をテーマにお話ししていただきました。その時に使用された澤田さんの資料です。 澤田さん曰く早口の弾丸トークだったらしいのですが、誰も早口だという事には気づかないくらい、いつも通り分かりやすい説明をしていただきました。 グループに分かれて「タブメニューと新着情報」か「アコーディオンと新着情報」かを選んでアクセシブルにしてみよう 4グループに分かれてもらい(1グループ4名)、事前に用意しておいたWAI-ARIAの記述が入っていないタブメニュー、アーディオン、新着情報それぞれにWAI-ARIAの記述を追記してアク
インクルーシブデザインの原則（「Inclusive Design Principles」日本語訳）
この「インクルーシブデザインの原則」は、利用者を最優先に考えることです。永続的な障害がある利用者、一時的または状況的な困難に直面している利用者、あるいは能力が変化してゆく利用者 (つまり、私たちみんな) のニーズに合わせてデザインすることです。 ここに掲げた原則は、デザイナー、ユーザーエクスペリエンスの専門家、開発者、プロダクトオーナー、プランナー、イノベーター、アーティスト、思想家など、ウェブサイトやアプリケーションの設計と開発に携わるあらゆる人に向けて、インクルーシブデザインに対する幅広いアプローチを提供することを目的としています。 あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、コンテンツ品質が損われることなくタスクを達成できるようにしましょう。 詳しい説明 置かれている状況、選択する手段、利用する文脈など
aria.html
ARIA の達成方法このウェブページは、「WCAG 2.0 達成方法集 : WCAG 2.0 の達成方法と失敗例」におけるARIA の達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般 (General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般 (General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。 ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。 達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコン
ARIA in HTML
ARIA in HTML W3C Recommendation 07 May 2024 More details about this document This version: https://www.w3.org/TR/2024/REC-html-aria-20240507/ Latest published version: https://www.w3.org/TR/html-aria/ Latest editor's draft:https://w3c.github.io/html-aria/ History: https://www.w3.org/standards/history/html-aria/ Commit history Implementation report: https://w3c.github.io/html-aria/results/implement
PDF版 WCAG 2.0 (JIS X 8341-3:2016, ISO/IEC 40500:2012) 解説書 + 達成方法集 要約(HTML+CSS+js 編) - 有限会社時代工房
PDF版 WCAG 2.0 (JIS X 8341-3:2016, ISO/IEC 40500:2012) 解説書 + 達成方法集 要約(HTML+CSS+js 編) 2018年07月10日 更新 2018年5月に作った、「WCAG 2.0 (JIS X 8341-3:2016, ISO/IEC 40500:2012) 解説書 + 達成方法集 要約(HTML+CSS+js 編)」のPDF版です。 PDF版 WCAG 2.0 (JIS X 8341-3:2016, ISO/IEC 40500:2012) 解説書 + 達成方法集 要約(HTML+CSS+js 編) 2018年5月版（PDF版, 313KB） 姉妹品のPDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表もあります。 技術 Adobe InDesignでタグ付けしています。その後、Adobe Acrob
ウェブユーザビリティ向上を支援するWebsite Usability Info
ウェブをはじめとするデジタルコンテンツの、アクセシビリティ、ユーザビリティ、情報設計 (IA) に関する話題をマイペースに発信。世の中のサイトやアプリがあまねく、インクルーシブで使いやすいものになることを願って。 お仕事のご依頼・ご相談 Accessible & Usable では、ウェブサイトやアプリケーションのアクセシビリティ向上を支援させていただきたく、お仕事のご依頼、ご相談を承っております。詳しくは「お仕事のご依頼・ご相談」をご覧ください。 新着記事 ダークパターン – 人を欺くデザインの手口と対策 公開日 : 2024年8月27日 (2024年8月29日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 「ダークパターン – 人を欺くデザインの手口と対策」を読みました。ダークパターンの現状、撲滅に向けての動き (主に欧州および米国における法規制)、今後の課題、がコンパ
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)
WCAG 2.1 Recommendation (勧告) | Accessible & Usable
公開日 : 2018年6月8日 (2020年4月16日 更新) カテゴリー : アクセシビリティ W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.1 が、2018年6月5日に正式な Recommendation (勧告) になりました。旧バージョン (2.0) で十分にカバーできていなかったとされる領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化されています。 この勧告のひとつ前の段階として、先に「WCAG 2.1 Proposed Recommendation (勧告案)」という記事を書きましたが、そこで挙がっていた達成基準と内容的には同じです。(細かいところでは、新達成基準 2.5.3 で若干の言い回しの変更がありますが、文意には影響ありません。) なお、旧バージョン (2.0) と
JIS X 8341-3:2010 「第三者によるコンテンツ」とは何か？
WCAG2.0 には、「部分適合に関する記述 － 第三者によるコンテンツ」、JIS X8341-3:2010 には、「8.1.3 第三者によるコンテンツにおける例外」という概念がある。注意深く読めば、JIS X8341-3:2010 の該当個所は、WCAG2.0 の箇所と同じであることはすぐわかる。細かい言い回しは JIS 流儀になっているものの、考え方は同じである。WCAG2.0では「部分適合」が可能であるという説明になっているのに対して、JISでは試験方法で説明されており、これは試験を行う時に第三者のコンテンツを例外的に除外してよいと言っているだけである。もちろん、除外してよいと書いてあるのだから試験結果がOKなら、該当する達成基準を満たしていると言ってもよいわけだ。 たとえば掲示板のようなシステムを作るとしよう。その掲示板システムはWebサイトを公開した時点では記事は投稿されていない
ウェブアクセシビリティへの取り組みを公開する (JIS X8341-3:2016 を基に) | Accessible & Usable
公開日 : 2016年12月17日 (2018年1月17日 更新) カテゴリー : アクセシビリティ この記事は、Web Accessibility Advent Calendar 2016 の17日目の記事です。 ご自身が運営するウェブサイトにおいて、アクセシビリティの向上に取り組んでいるのであれば、その取り組みについて情報公開したいものです。社外に対するよいアピール (ひいては自社に対する信頼感やブランドイメージの向上) になり得ますし、内部的にもウェブサイトの品質基準を宣言し共有することにつながるからです。 具体的にどう情報を公開したらよいか、スタンダードがあれば参考にしたいところですが、幸い JIS X8341-3:2016 で「附属書 (参考)」という形で提示されています。 附属書 JA ウェブアクセシビリティの確保・維持・向上のプロセスに関する推奨事項 附属書 JB 試験方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアクセシビリティ対応するにあたって知っておきたい用語 ｜ トーテックビジネスサポート株式会社 ウェブチームブログ
The Blog | Welcome to Adobe Blog
