WAI-ARIAを学ぶときに整理しておきたいこと
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
WAI-ARIAの考え方と使い方を整理しよう
（※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09） 2017-03-05（日）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。Read less
目が見えない状態を想定したUI設計
視覚がない、弱い人はどのようにサイトを利用しているのか、使っているのはどんなインターフェイスなのか。ずっと気になっていたというのもあり、「目が見えない状態を想定したUI設計」という内容で、主催した勉強会 Design Casual Talks #1 で発表をしました。 インターフェイスとは目で見えるものだけではなく、音声だけで構成されるインターフェイスもある。では僕らがページを作るとき、具体的にどうすればいいのか？ 出典・参考文献 すべて2016年9月時点（スライド作成時）の情報を参考にしました。 視覚障害者 - Wikipedia 視覚障害とは - 公益財団法人 関西盲導犬協会 視覚障害とは - 高知県立盲学校 ２－１ 視覚障害とは - 秋田県立視覚支援学校 厚生労働省 統計情報・白書 平成18年身体障害児・者実態調査結果 視覚障害者 全盲者と弱視者の割合 統計みたいなものが欲しい… -
アイコンフォントのアクセシビリティと適切な利用方法
アイコンフォントは多くのウェブサイトでも使用されていますが、そのまま使用するだけではアクセシビリティを損なう可能性もあります。アクセシビリティを確保しながらアイコンフォントを利用する方法について解説します。 モバイル端末をはじめとして高解像度ディスプレイを搭載した端末が普及したことにより、ウェブサイトでも高解像度でも劣化しないで表現が可能なベクター形式のデータが用いられることが増えてきました。 ベクターデータの中で最も用いられているのはフォントデータではないでしょうか。フォントデータは複雑な色の表現が難しいとはいえ、スタイルシートのみで大きさや色をコントロールしやすいということもあり、アイコンなどの形状をフォントとして登録したアイコンフォントも多く使われています。 独自のフォントデータを配信するウェブフォントも、古くからブラウザにて実装されていたことや Font Awesome など、使用
アイコンフォントのアクセシビリティ向上 | Accessible & Usable
公開日 : 2014年8月28日 (2024年7月17日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコンではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。
ボタンに対する追記がある場合のマークアップ | Accessible & Usable
公開日 : 2015年10月9日 (2020年8月30日 更新) カテゴリー : アクセシビリティ ウェブサイトでボタンを設置する際、そのボタンのラベルとは別に、ボタンのすぐ下などに、追記を配置することがあると思います。たとえば、フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押ししたり、行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一押ししたり、といったケースが考えられます。 フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押しする。(例 : [送信する] ボタンの下に「メールアドレスの綴りや、お問い合わせ本文の内容を今一度ご確認のうえ、送信してください。」という追記がある。) 行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一
折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
ARIA in HTML
This specification defines the web developer rules (author conformance requirements) for the use of [[!wai-aria-1.1]] attributes on [[!HTML51]] elements. It also defines requirements for Conformance Checking tools. This is a draft document and its contents are subject to change without notice. Web developer requirements for use of ARIA in HTML Web developers MAY use the ARIA role and aria-* attrib
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
Using WAI-ARIA in HTML