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 の基本
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
ARIA使用の1番目のルールは、どんなに強調してもしすぎることはない
2019年1月28日 著 タイトルがすべて。先日、インフォアクシアの植木さんと同僚の辻さんが共同で登壇するというので、Backlog World 2019に参加しました。関連記事はこちら： 辻ちゃん・ウエちゃんのアクセシビリティPodcast「Backlogのアクセシビリティを斬る！」 | アクセシビリティBlog | ミツエーリンクス Backlog World 2019でアクセシビリティとスーパーマリオの話を聞いてきた | 馮富久のブログ - Tomihisa Fuon's Blog お二人のセッションの中で、本来であればselect要素でマークアップされるべきところが、別の要素でマークアップされている箇所があって、中の人はWAI-ARIAで改善しようとしている......みたいなお話があって。まさにそれって、ARIA使用の1番目のルールを思い出すべき事案なわけです。今はUsing A
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて 2015年1月20日 著 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3Gを読んでの感想。文章中に「WAI-AREA」という誤記が何度か登場するの（正しくはもちろんWAI-ARIA）、いまだに修正されていないのはさておき（ [ 2015-01-20 追記 ] 既に修正していただけました）。 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。 音声読み上げ環境は、あくまで多種多様にあるWeb閲覧環境のひとつでしかありません。
スクリーンリーダーに対応するための CSS 設定
スクリーンリーダーとは盲目の方などが PC を操作するために用いるソフトウェア(プログラム)の総称です。 現在フォーカスしているテキストを音声で読み上げ、ユーザに伝えます。 スクリーンリーダーに対応するために求められる取り組みの 1 つとして、画像などに alt 属性を与えることが挙げられます。 スクリーンリーダーは、画像がどのような内容を示すかを理解して、それを音声にすることができません。 したがって、画像の代わりになるテキストが必要になる、ということです。 CSS 設定が必要な具体例 画像以外にも注意しなければならないケースがあります。前後にテキストがなければ上手く意味が伝わらないコンテンツです。 あるいは、アイコンなどの画像・フォントだけを表示しているコンテンツです。 例えば「次のページ」や「前のページ」を表現するために矢印のような画像や記号を使っているとき、 スクリーンリーダーは何
セマンティックなマークアップをするメリット（WebアクセシビリティPart2） | 株式会社グランフェアズ
Posted by HATTORI on Jul 13th, 2017 こんにちは、チカッパであります(◉∀◉ )ゞ 前回はWebアクセシビリティっていったいなんだろう？というタイトルで、アクセシビリティの概要についてお話しし、ヒューマンリーダブル（人が理解できること）とマシンリーダブル（機械が理解できること）の2つの対象があることをお伝えしました。 今回はマシンリーダブルにするための対応のひとつを取り上げセマンティックなマークアップについて考えてみたいと思います。 マシンリーダブルとは？ マシンリーダブルとはその名称の通り「機械」に対する配慮、専門的に言うと「機械可読性」を上げることを指します。 また、マシンリーダブルのマシンとは「ユーザーエージェント」のことを指します。 ユーザーエージェントとは、Webサイトへのアクセスの際に使用されるプログラムのことである。 HTMLを解釈して画像化
第4回 D2D アクセシビリティ勉強会：プルダウンメニューとカルーセル - CodingMania
今回のお題は、いつも議論の的「プルダウンメニューとカルーセル」でした！ 過去の勉強会で質問があったり議論をしたりするものの、時間切れ～となっていたこのテーマを今回しっかりやりました！ 勉強会のツィートまとめ ↑ 今回は、誰かがやってくれてて、、、あざます。 最初に気をつけるべきことの説明がありました どちらにもいえる基本 マウス操作だけを前提とせず、キーボードやタッチパネルでも操作できるようにしよう。 キーボード用／マウス用のイベントを両方使えるようにしよう。 キーボードだけを使ってアクセスできますか～？ メモ：onClickは機器に依存しないから便利☆ フォーカス順序は、HTMLソースの順序（親子関係）と見た目の順序をあわせよう。 フォーカス順序がイケてない場合はtabindexを使う css無効時にちゃんと、文書構造が保たれていますか？ フォーカス移動だけで勝手に遷移させないようにしよ
カルーセルとWAI-ARIA | アクセシビリティBlog | ミツエーリンクス
Webアクセシビリティに関する情報発信を行っているWeb Axeのエントリー、About Carousels and ARIA Tabsでは、ページ内でカルーセルを使用する際にアクセシビリティの観点から注意すべき事柄が紹介されています。 記事を執筆したDennis氏は、カルーセルはそれほどひどいものではないとしながらも、彼が目にしたものにはアクセシビリティやユーザビリティを考慮せずに作成された物が多く、加えてモバイルデバイスで利用する際にも問題があるとしています。そのうえで、どうしてもカルーセルを使用しなければならない場合には、以下のようなことに注意したほうが良いと述べています。 カルーセルのアニメーションは利用者が開始できるようにする 利用者がカルーセルを一時停止できるようにする コントロールにはテキストによるラベルがあることを保証する 表示中のパネルとそのコントロールが、視覚的にも機械
カルーセル | 第4回 D2D アクセシビリティ勉強会 準備資料
第4回 D2D アクセシビリティ勉強会 準備資料カルーセル ※ ここでは、複数枚の画像にリンク機能を持たせ、順次表示できるナビゲーションについて「カルーセル」として説明する。（くどい） アクセシビリティ上の問題点 マウスやタッチパネルでの操作を前提としたUIで、キーボードで操作できないものが多い。 スクリーンリーダーでの音声読み上げに対応していない（構造が伝えられない）ものが多い。 切り換えられる画像上の情報（特に文字情報）を理解するだけの時間が足りないものが多い。 チェックポイント、および満たすべき達成基準 ※ JIS X 8341-3:2010 達成等級：Aに準拠することを前提とした場合 ※ 実装方法は、あくまで事例 ★ 特に大事なポイント マウスだけではなくキーボード（やタッチパネル）でも操作できること 7.2.1.1 キーボード操作 H91（リンク箇所にはちゃんとa要素を使う） G
カルーセル | Accessible & Usable
公開日 : 2014年3月16日 カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのユーザーインターフェース (UI) に「カルーセル (carousel)」と呼ばれるものがあります。文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。 Amazon の「この商品を買った人はこんな商品も買っています」が有名な例です。 Amazon (amazon.co.jp) における「この商品を買った人はこんな商品も買っています」のカルーセル また最近では、Web ページのメインビジュアルにカルーセルを採用している例もよく見られます。タッチジェスチャとの親和性が高い (左右方向へのフリックやスワイプで容易にパネルを切り替え
WAI-ARIAの考え方と使い方を整理しよう
（※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09） 2017-03-05（日）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
わぁいアリア（WAI-ARIA）大好き | れいぶろぐ
（CV：三上枝織） はい、『ゆるゆり』は全く関係ないね。 『ARIA』も『緋弾のアリア』も関係ないね。ごめんね。 しかし、WAI（わぁい）といい、ARIA（アリア）といい、オタク心をくすぐるネーミングだぜ…… という冗談はさておき。 WAI-ARIAとは、Web Accessibility Initiative - Accessible Rich Internet Applications の略で（長い……）、Webにおけるアクセシビリティの向上を目的に制定された規格だ。 Web開発者にとっても聞き慣れない言葉かもしれない。 そんなの見たこともないって人も多いだろう。 何しろ、はっきりいって、これを使わなくても一般人は全く困らない。 俺も、たぶんあなたも。 しかし、俺たちは五体満足に生まれたことに感謝しつつも、「アクセシビリティ」という概念に思いを馳せるってのもたまにはいいかもよ？ ※ W
折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WAI-ARIA accordion
http://blog.e-riverstyle.com/2013/12/waiariajquery-1.html
アコーディオン要素のWAI-ARIAついて - yamaScrapbox