2016年2月8日 著 先週末、自分が京都プチ観光を楽しんでいるその最中、Webアクセシビリティの学校 in 福岡が催されていました。connpassのページを見る限り、残念ながら満席には至らなかったようですが、しかし懇親会含めそれなりに盛り上がったようで何より。関連するつぶやきがWebアクセシビリティの学校 in 福岡（2016/2/6）のつぶやき #a11y福岡 - Togetterまとめにまとまっていたので拝見していたところ、気になるつぶやきを発見しました： ヘッドラインのマークアップ、これ止める！ <dl> <dt>2015年1月1日</dt> <dd>記事タイトル</dd> </dl> は『用語「(dtの内容)」、説明「(ddの内容)」で読み上げるスクリーンリーダーもあるとのことなので。 具体的にどの製品のどのバージョンのスクリーンリーダーでのことかは分からないのですが、そういう
先日弊社にて、「SCRIPTY#1〜フロントエンド紳士・淑女のための勉強会〜」を行いました。 その際に発表させていただいた資料を公開いたします。 遠方の方や、ご都合によりご参加いただけなかった方はぜひご覧ください。 なお、当日はグラフィックレコーディングがなされ、発表内容がリアルタイムに可視化されていました。 そちらの内容も併せてお楽しみいただければと思います。 発表セッション 1.本当にあった怖いCSS 〜BEMのすすめ〜 発表者：小川 健史 実務で実際に遭遇した怖いCSSと、解決策の一つとして、 BEMを導入し得られた知見について発表しました。 発表スライド： http://i.yimg.jp/images/creativeblog/140916/takogawa.pdf グラフィックレコーディング 2.backbone.js 光と闇 発表者：柴田 和祈 Backbone.jsとそのプ
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
Webアクセシビリティという言葉を聞いて、あなたは何をイメージしますか？ 障害者対応？ 高齢者対応？ 自分（の作っているWebサイト）には関係ないことだとか、必要性を認識しながらもどちらかと言えば厄介な、控え目に表現しても面倒なものと捉えている人も、稀にいらっしゃるかもしれません。私の懸念は、稀にどころか、そういうややネガティブな印象をWebアクセシビリティに抱いている人の方が多数派を占めてはいないだろうか、ということです。 昨今のWebアクセシビリティへの取り組み Webアクセシビリティの確保、すなわちアクセスに用いられるソフトウェアやハードウェアによらず、誰もがWebコンテンツを利用できるようにすることは、関連するJIS規格（JIS X 8341-3）が2004年に公示されてからは特に、理解と普及のための取り組みが積極的に進められてきました。しかし、すべてのWebデザイナーや開発者がそ
WAI-ARIAとは、Web Accessibility Initiative-Accessible Rich Internet Applicationsの略で、W3Cが現在、勧告に向けて策定作業を進めているリッチなインターネットアプリケーションのアクセシビリティに関する仕様書のことです。JavaScriptやAjaxなどを使用した動的なコンテンツは、スクリーンリーダーやキーボード操作では利用できないことがあります。WAI-ARIAは、そういった問題を解決すべく、W3CのProtocols and Formats ワーキンググループ (PFWG) において策定されています。 WAI-ARIAの関連文書群の原文は英語ですが、日本におけるこの仕様への理解と普及が進む一助になればと、日立が社内用に翻訳した文書を日立のユニバーサルデザインサイトで公開します。Webサイト、Webシステムのアクセシ
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
2013年8月10日 著 多くのWebページでは、そのページが属するWebサイトの主要なコンテンツ/カテゴリーにアクセスするためのメニュー、俗にグローバルナビゲーション（以下「グロナビ」）と呼ばれるものがページの先頭近くに置かれています。もうだいぶ前から、そんなものは要らない（少なくとも「そこには」要らない）ということを自分は考えており、PCよりも物理的に小さな画面でWebを使うことが一般化した昨今においては益々、その思いを強くしています。 Googleなどの検索サービス経由でアクセスしたにせよそうでないにせよ、ユーザーの目的とするコンテンツは、あくまでもそのページ固有のメインコンテンツ（HTML5的にはmain要素内容）のハズ。であれば、それより前に余計な（メインコンテンツの一部を成さない）情報や機能はなるべく置かないほうが良い。スマートフォンの画面なんかで見たときに、そういった「余計な
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
HTML5 のマークアップで心掛けたい事を挙げてみます。 平成25年 5月16日現在、HTML5 勧告に向けて、グラフィカルなウェブブラウザの開発者は HTML5 への対応を急速に進めておりますが、そうでない環境、例えば音声出力ブラウザや CUI 環境向けテキストブラウザなどについては、殆どと言って良い程話を聞きません。 こう言った事から、HTML4/XHTML1 時代の環境でも問題なく取り扱えるようにマークアップすべきでしょう。 はじめに。 平成24年12月17日に HTML5 の勧告候補が発表され、HTML5 は勧告に向けて大きく前進しております。 特にグラフィカルなウェブブラウザの開発者は、WAHTWG に加盟していないマイクロソフト社を含めて HTML5 への対応を急速に勧めており、西暦2014年に勧告される頃には、殆どのグラフィカルなウェブブラウザが HTML5 対応になっている
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
酒井優 @glatyou @securecat 記事での言及までして頂き、ありがとうございます。改めて記事にもコメントさせていただきたいと思いますが、記事のご意見非常にありがたく思っています。口を開くと長くなるなってしまうのですが、ここでもご返答させて頂きます。 2013-03-22 08:55:51 酒井優 @glatyou @securecat まず正直なところ私もまだタンポポ係程度のコーダーでして、セマンティックというものはそれなりに勉強してはいるつもりですが、まだまだ不勉強です。ご意見の中にもまだ理解していなかった言葉もあり、恥じるところです。とはいえ、曲がりなりにも部下に指導するとき、または 2013-03-22 08:58:32 酒井優 @glatyou @securecat 同業の方に質問されたとき、こうしたことを意識して話をしているつもりです。私も、順序としてはまずHTML
[HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉しいかという話ですので）、3と6はただのエゴですし、4の標準化っていうのはセマンティック云々の文脈でいうならばruleの話ではなくstandardの話をすべきではないでしょうか。カタチの想像もできないような未来を夢見る暇があるのなら、まずWebガバナンスからどうにかする努力をしたほうが何倍も有益でしょう。 2013/3/22 09:56追記：「セマンティックで正しいコードを書く6つの目的」のような構成であると読み取ってしまって（理由の箇条書きだと思って）上
In this tutorial, you’ll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, you’ll increase the availability of your media to users with different needs and requirements, making it more accessible. This tutorial comes courtesy of the recently released HTML5 Multimedia book. Media and Potential Accessibility Issues I’d strongly encourage y
Here’s a list a accessible HTML5 Media Players—I have not tested them all—and some articles on how to build one yourself. Know any others? Please leave info in a comment. Existing Players Nomensa’s media player Flash, no longer maintained JW Player by LongTail Making Video Accessible (no longer available) by LongTail Accessible JW Player Control using Dojo (no longer available) by Ohio State Unive
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RE: アクセシビリティには金がかかるもんだ