HTML5 Accessibility Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, August 2020 Chrome 84 on Windows 10 98.5% Edge 80 on Windows 10 100% Firefox 80 on Windows 10 94% Internet Explorer 11 on Windows 10 56% Safari 13 on Mac OS 97% This site tests which newish HTML5 features are accessibly supported by major browsers. This includes if they are key
accessibilityに関するhashimoyaのブックマーク (37)
-
hashimoya 2012/02/17
-
Before and After Demonstration: Overview
Jump to beginning of the overview page Overview Before and After Demonstration Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0 About the Demo The Before and After Demonstration is a multi-page resource that shows an inaccessible website and a retrofitted version of this same website. Each web page includes inline annotations that can be activated to highlight some of the
-
見えるアクセシビリティをデザインする
先週の金曜日、アクセシビリティキャンプ東京 キックオフミーティングに参加しました。既に世界各地で開催されているアクセシビリティキャンプの東京版を始めるそうで、その最初のミーティングになります。 私自身はアクセシビリティの専門家ではありませんが、今のアクセシビリティ周りの活動や課題、そしてアクセシビリティに関わるプロフェッショナル達が抱く想いを知りたくて今回参加してみました。 見え難いアクセシビリティ 以前から奇妙だと思っているのが、コンテンツ／デザイン／機能など様々な物事において付加価値が重要視されているのにも関わらず、アクセシビリティになると付加価値ではなく、ボランティアに近いサービスとして見られる点。その要因として、健常者は省かれてアクセシビリティが捉えられている、障害者のためにある配慮になっているからかもしれません。アクセシビリティはコンテンツ／デザイン／機能の付加価値になるのですが
-
見えない「先」は存在しない。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
私の好きな話↓ 『徒然草』 第５２段．仁和寺にある法師 略すと、お坊さんがお参りに行ったのに、途中で勝手に勘違いして帰っちゃって最後まで行かなかった。マジウケル。（By兼好法師）という内容である。 シニア層のネット操作を見ていると、いつもこの話を思い出す。 Nさんは65歳男性。 インターネットを初めて2カ月になる。 「年末はインターネットをやろうと思ったのに、楽しくなくてすぐ閉じちゃった。」と仰る。 インターネッ子（笑）としては聞き捨てならない言葉である。 「どんなものを見てみたいですか？」 「何があるかわからないから、何も見れない」 「テレビとか見ていて、気になるものをとにかく入れてみればいいんですよ」 「例えば・・・」と、色々見たくなるキーワードをぶつける。 「なるほど、自分が調べたいものを出せばいいんだ。 でも、調べても、何が出てくるかわからないし ただ見ているだけだから、出来ること
-
-
アクセシビリティキャンプ東京 キックオフ
2012年1月20日に開催されたイベント「アクセシビリティキャンプ東京 キックオフ」についてのつぶやきを、ハッシュタグ（#actokyo）で検索しまとめました。
-
キヤノンはなぜ達成等級「A」を満たせなかったのか | 水無月ばけらのえび日記
7.2.4.1 ブロックスキップに関する達成基準 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップできるメカニズムが利用可能でなければならない。 注記 この達成基準は，等級A の達成基準である。 以上、JIS X 8341-3:2010 7.2.4.1 より ……これで全てです。これだけではさっぱり分からないと思いますので、対応するWCAG2.0の解説を参照することをお勧めします。JIS X 8341-3:2010の達成基準7.2.4.1は、WCAG2.0の2.4.1に対応します。 Understanding WCAG 2.0 - Understanding Success Criterion 2.4.1 (www.w3.org)WCAG 2.0解説書 - 達成基準 2.4.1 を理解する (waic.jp)ここで注意する必要があるのは、何らかの方法でブロックスキップが
-
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
-
HTML5 + WAI-ARIA: 入門篇
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
-
-
Using display:table has semantic effects in some screen readers | 456 Berea Street
Using display:table has semantic effects in some screen readers Sometimes you may want the layout properties that HTML tables have, but you don’t want the semantics of a table since you’re not really working with tabular data. A couple of examples are creating equal height boxes and making an unknown number of items flexibly occupy all available horizontal space. In situations like these you can u
-
覚え書き@kazuhi.to: font-size: 0; には気をつけて
font-size: 0; には気をつけて 一発ネタ（ネタ？）というか、それまで知らなかったので覚え書き。先日出席した2011年度第10回ウェブアクセシビリティ基盤委員会WG2で、塩尻市公式ホームページが話題に。というのも、アクセシビリティに配慮したホームページということで、 リニューアルし公開したホームページでは、総務省「みんなの公共サイト運用モデル改定版（2010年度）」に基づき、「JIS X 8341-3:2010」達成等級AAに準拠しました。 ……だそうです。話題になったポイントはそこではなく、Google Chromeでは一部のリンクにタブキーでフォーカスを与えることができないという点。具体的には、リンクがul要素でもってリストとして複数並べられている箇所でその事象が確認されており、たとえばヘッダーにある「音声読み上げ・文字拡大」「English」といったリンクラベルが並んでいる
-
-
JIS X 8341-3:2010の達成基準は難しい | 水無月ばけらのえび日記
公開: 2011年4月29日19時45分頃 こんな記事がありますね……「中央省庁Webサイトのアクセシビリティ対応はまだ不十分 日経BPコンサルティングが調査結果を発表 (pc.nikkeibp.co.jp)」。 この調査では、同社が独自に設けた20の項目について調べた（調査概要）。項目は大きく3つに分類される。知覚に関する項目（説明が必要な画像に代替テキストを付与しているか、など）、操作に関する項目（キーボードのみで適切にページ移動ができるか、など）、理解に関する項目（Webページで使われている言語が明示されているか、など）である。いずれの項目も、2010年8月に公示されたWebアクセシビリティに関する規格「JIS X 8341-3:2010」を参考にして設定されている。 JIS X 8341-3:2010という名前はちらっと出ているものの、これはあくまで独自調査です。JIS X 834
-
WCAG 2.0 解説書
【注意】 この文書は、W3C ワーキンググループノート Understanding WCAG 2.0 の 2016 年 10 月 7 日時点での最新版を、ウェブアクセシビリティ基盤委員会 (WAIC) が翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書はあくまで参考情報であり、翻訳上の誤りが含まれていることがあります。翻訳上の誤りを見つけられた場合は、翻訳に関するお問い合わせからご連絡ください。 【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 解説書 WCAG 2.0 を理解して実装するためのガイド W3C ワーキンググループノート 2016 年 10 月 7 日このバージョン: https://www.w3.org/TR/2016/NOT
-
第6回 オープンソースアクセシビリティチェックツール「ACTF aDesigner」の紹介 | gihyo.jp
Flashのアクセシビリティチェックも可能なアクセシビリティチェックツールとして、オープンソースで提供されている「ACTF aDesigner」（エーデザイナー）を紹介します。 aDesignerのインストールから基本的な使用方法を紹介した後、Flash用のチェック項目をどのようにこのツールで確認するのか紹介します。準備としてサンプルファイルをダウンロードしてください。 サンプルファイル：check_accessibility.zip インストール EclipseのaDesiner配布サイトからダウンロードしたZIPファイルを解凍するだけで使用できます。 図 ダウンロードサイトから最新版をダウンロード 図 解凍してできたファイル 使用方法 aDesigner.exeを起動します。 このツールでは「HTML」「OpenDcument」「GUI」「Flash」という４つがチェック可能で
-
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
-
アクセシビリティ講義で実際に音声読み上げブラウザを使わせてみたよ – 我流天性 がらくた屋
立候補してくれた生徒には、ホームページリーダー(ver3.01)の基本操作を教える 始めるときはノートPCの画面を隠す 目隠しだと不慣れなキーボードで操作してもらうことになるので画面を隠すだけに プロジェクタにはホームページリーダーの画面を表示し、他の生徒たちには対象生徒の手元や、実際にどこを読み上げてるかを見比べてもらう。 Webサイト上のどこをどう読み上げてるのか、どこで詰まっているかを観察してもらうのが目的 結果） 結果としてはYahoo!,@niftyともに欲しい情報は時間内に取得できなかった。 Yahoo!天気情報 では以下の点で苦労していた [本文へジャンプ]のページ内リンクがなぜか効いていなかった 日頃使ってるだろう、日本地図から地域選択する部分はFlashだったため、何もテキストで読み上げられる事が無かった ホームページリーダー ver3.01がFlashに対応していないた
-
CSS Nite in Ginza, Vol.55フォローアップ（4）：植木さんのセッション｜CSS Nite公式サイト
CSS Nite in Ginza, Vol.55フォローアップ（4）：植木さんのセッション 記事公開日：2010年12月20日（月） 2010年12月16日、アップルストア銀座で開催したCSS Nite in Ginza, Vol.55（Shift 4）フォローアップとして、『アクセシビリティといえば、JIS 改正だけ？』（植木 真／インフォアクシア）のスライドと音声をシェアします。 スライド（PDF、50ページ、5.9MB） 音声（MP3、13:26、6.5MB） メッセージ インフォアクシアの植木です、Shift 4にご参加いただき、ありがとうございました。 アクセシビリティの今年一番のトピックは、何といってもJIS X 8341-3の改正でした。 ですが、セッションのタイトルどおりで、それ以外にも注目しておきたいトピックが国内外で幾つもあった一年でもありました。その中から主なものを
-
Webアクセシビリティを高めるコツとは
アクセシビリティとは？ 今回は、Webアクセシビリティを実現するための基本的なエッセンスについて紹介します。 まず、アクセシビリティとは何かについて確認しておきましょう。 「アクセシビリティ（accessibility）」とは、「access」＋「～ible（～できる）」（の名詞形）であり、「ユーザー自らがアクセスして利用できるかどうか？」を意味します。Webサイトにおいては、例えば図1のように、さまざまな状況や環境のユーザーであっても、自らアクセスして利用できるような配慮が大切です。 よくある誤解として、「アクセシビリティって、つまり障がい者／高齢者対策でしょう？」と考える方が多いのですが、必ずしもそうではなく、さまざまなインターネット環境（通信速度やマシンスペック）も、アクセシビリティとして考慮すべき範囲であることを、確認しておきたいと思います。 こうした配慮は、恵まれたインターネット
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました