サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
weba11y.jp
情報を伝えている文字の色と背景色とのコントラスト比が4.5:1以上確保されているか 解説 文字の色と背景色とのコントラスト比を4.5:1以上にします。ただし、少なくとも22ポイント又は18ポイントの太字のように、サイズの大きな文字は3:1以上あればよい(アルファベット文字の場合は、18ポイント又は14ポイントの太字)。 文字と背景のコントラストを確保することは、モバイルでのWebコンテンツ利用の比率が高まるにつれ、屋外などでも読みやすくするためにも重要性が高まっています。 ただし、「WCAG 2.0」の達成基準では、次のような文字は対象外としています。 装飾のために用いられている文字(何も情報を伝えていない文字) 写真の中に写っている文字 アクティブではない状態のUIコンポーネント(押せない状態のボタンなど) ロゴタイプとして使用されている文字 色のコントラスト比は、無償のチェックツールな
Webコンテンツのアクセシビリティを確保・向上するための基本中の基本であり、同時にさまざまなWebコンテンツでよく見つかる問題点でもある10項目です。「JIS X 8341-3:2016」や「WCAG 2.0 / 2.1」に対応する前に、まずはこの10項目のうち、できることから実践してみましょう。 この作品は、クリエイティブ・コモンズ「表示 – 継承 4.0 国際」ライセンスの下に提供されています。 1 ページの内容が分かるページタイトルを記述する ページタイトルは、どのようなウェブページなのかが分かる文言になっているか? 達成基準 2.4.2 レベル A 「ページタイトル」の基本の「キ」 ページタイトル[ページ設定] 2 見出しやリストなどの文書構造をマークアップする 見た目だけではなく、適切な要素を用いて文書構造や意味をマークアップしているか? 達成基準 1.3.1 レベル A 「文書
このWebページは、アメリカのユタ州立大学にある非営利組織WebAIMに許諾をいただき、”Using NVDA to Evaluate Web Accessibility“という記事を日本語訳したものです。 この記事のコンテンツ 以下にあるリストは、このWebページの見出しです。このリストをNVDAでスキップするには、Hを押して次の見出しへ移動してください。 イントロダクション まず最初に 読み上げ ナビゲーション クイックキー その他のナビゲーション用ショートカット 画像 データテーブル フォーム 練習 イントロダクション この記事は、NonVisual Desktop Access (NVDA)を使ったことのない方々がWebコンテンツを検証する際の基本的な操作方法を学ぶために、またNVDAを時折使う人の参考となるように書かれています。NonVisual Desktop Access (
それでは、新しい達成基準候補の日本語訳をシェアしてまいります。 なお、各達成基準を含むワーキングドラフトの正式版は、あくまでもW3Cのサイトにある英語版であり、この文書には翻訳上の間違い、又は不適切な訳語が含まれている可能性がありますのでご注意ください。 以下の日本語訳は、予告なく修正されることがあります。 レベル Aの新しい達成基準候補の日本語訳 達成基準 2.2.6 アクセシブルな認証【認知・学習】 達成基準 2.4.11 文字キーのショートカット【モバイル】 達成基準 2.4.12 名前(name)のラベル【モバイル】 達成基準 2.5.1 ポインタのジェスチャ【モバイル】 達成基準 2.5.2 ポインタのキャンセル【モバイル】 達成基準 2.6.1 動作による起動【モバイル】 達成基準 2.2.6 アクセシブルな認証[レベル A] 認証プロセスにとって必要不可欠なステップが、情報を
WebコンテンツのJIS規格である『JIS X 8341-3:2016』への対応を進めたい場合、まずはどのようなワークフローを用いるべきかを検討する必要があります。既存Webページを改修していく場合とWebサイトを全面リニューアルする場合の2つのパターンについて、基本的な進めかたの解説を順次公開していきます。 1.「ウェブアクセシビリティ方針」を作成する 「ウェブアクセシビリティ方針」を文書にしたら、Webサイトやアプリケーション内で公開します。文書にする際、少なくとも次の2項目は含める必要があります。 対象範囲 目標とするレベルと対応度 2. 対象範囲での対応を進める 既存のWebページを改修する場合 コストが必要以上にかかることも少なくない 完全な改修ができないこともある リニューアルまたは新規構築する場合 企画・設計段階から全ての前提にしておけば、コストの追加は最小限に抑えられる ア
『JIS X 8341-3:2016』レベル Aの達成基準(W3C勧告『WCAG 2.0』のレベル Aと同じ)をベースにして、エー イレブン ワイ(株式会社インフォアクシア)が独自に作成した『Webアクセシビリティ逆引きガイドライン』です。注意事項をご確認の上、Webコンテンツのアクセシビリティ向上にご活用ください。 最終更新日:2018年12月15日 注意事項 HTMLのWebページを対象にしています。 このガイドラインに沿って制作したWebコンテンツが、『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準を満たすことを保証するものではありません。 『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準が適用されるすべてのケースを網羅しているわけではありません。 また、達成基準で要求されている事項と異なるものが一部含まれています(その場合、ほとんどはユー
Webページのアクセシビリティをチェックできるツールを紹介。今後、情報を順次追加していきます。 ガイドライン対応 『JIS X 8341-3』や『WCAG 2.0』の達成基準を満たしているかどうかをチェックできるツールです。 公的機関向け 総務省が無償で配布しているチェックツール。2016年4月にアップデートされ、”Ver.2.0”として公開された。 みんなのアクセシビリティ評価ツール:miChecker (エムアイチェッカー)Ver.2.0|総務省 既存Webページのチェック ブラウザのツールバーとして提供されているアドオン。既存のWebページをブラウザで開いて、ツールバーのメニューから任意のチェックを行うことができる。 Internet Explorer Web Accessibility Toolbar 2012J Google Chrome Web Developer(Chrome
【回答】アクセシビリティ確保のためには、必ずしも必須ではありません。 Webページの文字サイズが小さいとき、ユーザーが好みの大きさに変更できるのが、Webのよいところです。近年、ブラウザはズーム機能を提供しており、Webページの表示を拡大できます。わざわざWebページ側で似たような機能を提供する必要はないでしょう。また、スマートフォンやタブレット端末で表示する際は、ユーザーが必要に応じて画面を拡大できるようにします(user-scalable=noを使用しない)。 「文字サイズ変更ボタン」というのは、Webページのヘッダー部分で良く提供されている[小][中][大]のようなボタンで、ユーザーがWebページのテキストの文字サイズを変更できます。日本のWebサイトでは、何かのランキングでこの文字サイズ変更ボタンの有無が評価項目の一つになっていたこともあり、一時期急速に普及したといわれています。
【回答】もはや必要ないのかもしれません。 結論から言うと、今後はもう実装する必要はないのかもしれません。少なくとも、『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準を満たすためには、スキップリンクを実装しなければならないということはないでしょう。これは、スクリーンリーダーのユーザーはもちろん、キーボードだけで操作しているユーザーを想定した場合も同様です。 そもそも「スキップリンク」とは? 『JIS X 8341-3:2016』や『WCAG 2.0』には、次のような達成基準があります。 2.4.1 ブロックスキップの達成基準 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる(レベル A)。 JIS X 8341-3:2016 / WCAG 2.0「2.4 ナビゲーション可能のガイドライン」 「スキップリンク」は、Webページ
よく聞かれる質問の1つに「アクセシビリティとユーザビリティの違いは何ですか?」というのがあります。 一言で説明するとしたら、アクセシビリティは「そもそもユーザーが使えるかどうか」。それに対して、ユーザビリティは「まずアクセシビリティが確保されていてユーザーが使える状態であるという前提の上で、さらにどれだけ使いやすいか、分かりやすいか」といったところでしょうか。また、ユーザビリティは特定の状況や目的のもとに評価するという点が、アクセシビリティとはやや異なるところです。 ユーザビリティとは? では、ユーザビリティとは何でしょうか? 例えば、日本工業規格の『JIS Z 8521:1999』では、次のように定義されています。 3.1使用性(usability) ある製品が,指定された利用者によって,指定された利用の状況下で,指定された目的を達成するために用いられる際の,有効さ,効率及び利用者の満足
Accessibility is the Web. 「エー イレブン ワイ」は、Webアクセシビリティの情報提供Webサイト。 ユーザーフレンドリーでみんなが利用できるWebコンテンツづくりをサポートします。
Webアクセシビリティのツール Webコンテンツのアクセシビリティをチェックするツール、アクセシビリティを確保しやすいブログやCMS、活用したいライブラリやフレームワークなどを紹介しています。
Web Accessibility Toolbar 2012J ブラウザのInternet Explorerで利用できるツールバー(無償)。対応OSは、Windows Vista以降、対応ブラウザはIE8以上。 IEのツールバー「Web Accessibility Toolbar 2012J」の詳細 カラー・コントラスト・アナライザー 2013J WCAG 2.0やJIS X 8341-3:2010の達成基準で定められたコントラスト比など、色に関するチェックツール(無償)。 色のチェックツール「カラー・コントラスト・アナライザー 2013J」の詳細 ツールがあれば全ページを自動的に検証できるのか? 「エー イレブン ワイ(WebA11y.jp)」では、無償のチェックツールを配布しています。Webコンテンツのアクセシビリティをチェックするツールには様々なものがありますが、全てのチェックを完全
Web Accessibility Toolbar 2012J[ベータ版] 「Web Accessibility Toolbar 2012J」は、WebブラウザのInternet Explorerのツールバーです。Internet Explorerで表示しているWebページのアクセシビリティを、様々なメニューでチェックすることができます。 このソフトウェアは、WAT-C(Web Accessibility Tools Consortium)が開発し、株式会社インフォアクシアが日本語版ローカライズを担当しています。 Webページのアクセシビリティ・チェック 「Web Accessibility Toolbar 2012J」では、次のような機能を提供しています。 HTMLソースコードのバリデーション(HTML5もチェック可能) h1~h6要素でマークアップされている見出しを表示 画像の代替テキ
聞いたことあるけど、そもそも何? 一応知ってるつもりというか... 基本だけは押さえておきたい! え? 「あたりまえ体操」?? そんなサイト運営者、Web制作者の皆さんを対象にした初心者向けの講座です。
「カラー・コントラスト・アナライザー」は、色のチェックツールです。前景色と背景色のコントラストをチェックしたり、色覚の違いによる見え方をシミュレーションしたりすることができます。 このソフトウェアは、The Paciello Groupが提供しており、Windows版とmacOS / OS X版があります。 色のコントラストのチェック ウェブコンテンツの前景色と背景色のコントラストが十分かどうかを判定する基準には、W3Cの『WCAG 2.0』で定義されている「コントラスト比」の計算式を用いています。このコントラスト比を用いた達成基準は、そのまま日本工業規格の『JIS X 8341-3:2016』でも採用されています。 1.4.3 コントラスト(最低限レベル)に関する達成基準 テキスト及び文字画像の視覚的提示には,少なくとも4.5:1 のコントラスト比がある。ただし,次の場合は除く(レベル
イントロダクション 2012年5月、WebAIMではスクリーンリーダー利用者の好みに関する調査を実施した。この調査の有効回答者数は、1,782名であった。今回の調査は、初回のWebAIM スクリーンリーダー利用者動向調査(2009年1月実施):英語のフォローアップ調査であり、第2回調査(2009年10月実施):英語や第3回調査(2010年12月実施):英語のフォローアップでもある。 免責及び注意事項 四捨五入により、合計が100%にならない場合があります。 各設問に対する回答者数の合計(n)は、その設問に回答しなかった回答者がいた場合には、1,782になっていません。 標本は、全てのスクリーンリーダー利用者を代表するものではない場合があります。 将来的にこのような調査をまた実施したいと考えています。推奨したいことや設問に加えてほしいことなどがございましたら、WebAIM宛にお寄せください。
このページを最初にブックマークしてみませんか?
『エー イレブン ワイ[WebA11y.jp]』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く