2014年7月13日のブラウザエンジン先端観測会での発表内容です。 http://atnd.org/events/52121
アクセシビリティオブジェクトについて
2014年7月13日のブラウザエンジン先端観測会での発表内容です。 http://atnd.org/events/52121
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
31. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 31 それぞれのレイヤーでアクセシビリティ的なケアが必要な分野 • 利用者のリテラシー • 支援技術 • CSS • コンテンツ （テキスト／画像／音声／映像） • HTML • JavaScript等プログラム • ユーザーエージェント • OS • ハードウェア 教育／啓蒙 etc. スクリーンリーダー／ズーム／翻訳 etc. UIデザイン／コントラスト／表示順序／背景画像 etc. コントラスト／代替コンテンツ／表現 etc. 文書構造／要素の意味／フォームコントロール etc. キーボード操作／フォーカス制御／DOM追加位置 etc. UIデザイン／代替コンテンツへのアクセス／ スタイル（色／サイズ／速度 etc.）変更／ 文書構造とmeta情報／API etc. U
WAI-ARIAの考え方と使い方を整理しよう
（※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09） 2017-03-05（日）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
WCAG 2.1 (First Public Working Draft) | Accessible & Usable
公開日 : 2017年3月3日 (2018年6月9日 更新) カテゴリー : アクセシビリティ W3C が勧告している WCAG (Web Content Accessibility Guidelines) 2.0 の次期バージョンとされている、WCAG 2.1 の First Public Working Draft が、2017年2月28日に開示されました (ドラフト原文 : WCAG 2.1 - W3C Working Draft)。3月末までコメントを受付中とのことです。 気になる WCAG 2.0 との差分ですが : In this draft the WCAG 2.0 Success Criteria remain unchanged. This does create some redundancy but the Working Group seeks review of
altはつけるだけじゃなくて - 実践アクセシブルHTML 第一回
この記事は、2003年6月17日発売の技術評論社「Web Site Design Vol.8」での連載記事「実践アクセシブルHTML」第1回の元原稿を、著者自身が公開しているものです。 画像にalt属性を よく「画像にはalt属性をつけましょう」というフレーズを耳にするかと思いますが、これはサイトのアクセシビリティ改善における対応のうち、もっともメジャーなものであるといえます。WAIのアクセシビリティガイドラインであるWCAG1.0には「テーブルをレイアウトに使ってはいけません」というような内容の項目もありますが、これに対して「よっしゃ、テーブルを使うのをやめよう」とあっさりと決断してサックリとそのように作り変えることなど、ほとんどのサイトにおいて無茶な話でしょう。しかし「すべての画像にalt属性をつけよう」というのはアクセシビリティの対応要件に必ずといって良いほど含まれます。これなら、た
Developer's guide to accessibility mechanics
From The Front, Bologna 2016 @LeonieWatson Platform controls Role is "checkbox" Accessible name is "Bold" State is focused, checked, focusable Web control <input type="checkbox" id="bold"> <label for="bold">Bold</label> Role is "checkbox" Accessible name is "Bold" State is focused, checked, focusable HTML Accessibility API Mappings (AAM) The relationship between platform objects and web objects is
15分でわかるモバイルアクセシビリティ
2016年8月に株式会社サイバーエージェントで開催された社内勉強会で使用したスライドです。Read less
JIS X 8341-3:2010 達成基準7.3.1.5の日本語実装と「やさしい日本語」の研究
2015年12月21日 はじめに この記事は、Web Accessibility Advent Calendar 2015の20日目の記事です。 この記事では、JIS X 8341-3:2010の制定以来、僕がずっと悩んできた達成基準7.3.1.5の日本語での実装方法について、研究した内容を書きたいと思います。 Webアクセシビリティと言うと、マークアップに関する話題がほとんどという印象がありますが、より本質的に「理解可能なコンテンツ」とするための方法を探ります。 Photo credit: Chasing Daisy / Visualhunt.com / CC BY 達成基準の内容 まず、達成基準7.3.1.5とはどのような達成基準でしょうか。WAICによる日本語訳には以下のように書かれています。 3.1.5 読解レベル: テキストが前期中等教育レベルを超えた読解力を必要とする場合は、補
ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
CEATEC JAPAN 2019で、10月17日（木）に開催した、アクセシビリティセミナー2019の記録動画より7件をYouTubeで公開しました。日本語字幕が設定できますのでご活用ください。
診断・検証 － 株式会社インフォアクシア
JIS X 8341-3:2010 に対応するには、Webコンテンツが規格の要件を満たしているかどうかを検証する必要があります。 6.4 検証 ウェブページ一式の責任者は，ウェブコンテンツを制作・開発した後，対応する達成等級の達成基準が満たされていることを検証しなければならない。 アクセシビリティ診断 ウェブサイトやウェブアプリケーションなどのウェブコンテンツが、JIS X 8341-3:2010 の達成基準を満たしているかどうかを診断し、その結果をレポートにまとめてご報告します。短期間、低コストで全体的な問題点を把握することが可能です。 主に、以下に挙げる4つのタイミングで実施すると効果的です。 企画・設計：リニューアル前に既存サイトの問題点を把握したいとき 開発・制作：新規に制作したデザインテンプレートが完成したとき 開発・制作：新規コンテンツを公開するとき 保守・運用：既存サイトの
Do you have a role in web accessibility? (Spoiler alert: yes)
HomeWeb AccessibilityDo you have a role in web accessibility? (Spoiler alert: yes) Maybe you’ve heard about web accessibility on a podcast or heard a developer friend talking about it. Maybe you’ve thought to yourself you should learn more and start implementing web accessibility standards on your site. Maybe you were gung-ho to get started, but were stopped dead in your tracks when you hit the ma
障害者差別解消法の概要とWebアクセシビリティ
2015年2月13日に開催された「Web担当者のためのアクセシビリティセミナー [2015年2月] 〜国内・海外動向を踏まえたJIS X 8341-3:2010の活用〜」のセッション2 講演「障害者差別解消法の概要とWebアクセシビリティ」の資料です。講師および資料作成をご担当いただいたのは、内閣府障害者政策委員会委員長、静岡県立大学国際関係学部の石川 准 教授です。Read less
JIS X 8341-3:2016 解説
2016年4月版（2016年4月7日公開） 作成者：情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会 目次 はじめに 改正における主なポイント 規格票の構成 各箇条の解説 はじめに JIS（日本工業規格）とは JIS（日本工業規格）とは、日本国内における工業標準化の促進を目的とする『工業標準化法』（昭和24年）に基づいて制定される国家規格である。「JIS」は"Japanese Industrial Standards"の頭文字をとったものであり、「日本工業規格」が正式名称である。 JIS X 8341-3とは 『JIS X 8341-3:2016』の正式名称は、『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』という。この規格でいう「ウェブコンテンツ」は、ブラウザや支援技術などのユーザエージェントを介して利用者に提供されるあら
ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
alt属性の良い事例(つけ方・書き方)｜情報バリアフリーポータルサイト
第１章.画像 この事例集はWCAG2.0解説書に基づき、WCAG 2.0 実装方法集を図解することを趣旨としています。「悪い例」と書いてある事例以外はJIS X 8341-3:2010の実装チェックリストで適合の欄に○をつけることができる事例ばかりです。このページでは特に画像に関するWCAG 2.0 実装方法集を集めています。 ※WCAG 2.0やJIS X 8341-3:2010の解説については「JIS X 8341-3:2010とは」ページをご覧ください。 画像に関する図解（1-1から1-4までの項目名をクリックすると、ページ内の該当項目にジャンプします） 1-1.alt属性 1-2.文字を画像化する時の注意 1-3.画像化された文字の色 1-4.アニメーションgif、又はアニメーション ウェブサイト制作時、alt属性値の書き方について悩んだことはないでしょうか。この章ではWCAG2.
アクセシビリティからはじめる、WebサイトのUXデザイン
デザイニングWebアクセシビリティ刊行記念イベント <http: /> で使用したスライドです。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mya-ake.com
FRESH! と AbemaTV の WAI-ARIA 事例
Extended HTML - WAI-ARIAとMicrodataでHTMLを拡張する
