role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべ
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
Accessible SVG tables - Tink - Léonie Watson
SVG has no native semantics for representing structures like tables, but ARIA1.1 introduces a number of roles that can be used to polyfill the necessary semantic information. If you're using HTML, use the relevant HTML elements to create tables. The table, thead, tfooter, tbody, th, and td elements are purpose built to do the job. Don't make things harder for yourself by reinventing the wheel. Tha
WAI-ARIAの考え方と使い方を整理しよう
（※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09） 2017-03-05（日）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。Read less
ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた / masuP.net
React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。 Javascript, ES2016, React, WAI-ARIA とも確信を持ってるわけではなく、いずれも調べながらの実装なので、マサカリツッコミやアドバイス歓迎です。 要件 アコーディオンUIは、コンテンツの表示トリガー（アコーディオンヘッダー）とコンテンツ（アコーディオンパネル）がグルーピングされたものが（主に縦方向に）並んでいるものを指していることが多いと思いますが、とりあえず次の要件で実装しました。 アコーディオンヘッダーをクリックでアコーディオンパネルの開閉を切り替え アコーディオンパネルの開閉の初期状態を設定可能 すべて開く / すべて閉じる ボタンの実装（ボタンを表示させるかは選択可能） フォーカスマネジメントする（隠れているアコーディオンパネル内の要素はフォーカスされない） キーボ
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
Using this tutorial | Teach Access Tutorial
Welcome to the Teach Access Tutorial! This resource is part of the Teach Access Initiative, and provides best practices for making accessible mobile and web apps. This tutorial currently provides basic training for developers and designers, with more disciplines to come! If you are new to accessibility, you've come to the right place - the following material will help you get a solid footing on ac
ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
WAI-ARIAの実装をデバッグ・検証する / masuP.net
この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。昨日の4日目は@24motzさんのスクリーンリーダー NVDA 日本語版の現状という記事です。 WAI-ARIAは、W3Cの中でウェブアクセシビリティに関する部会であるWAI（Web Accessibility Initiative）が策定した、リッチなインターネットアプリケーションをアクセシブルにするための仕様です。 WAI-ARIAについて詳しくは、仕様や分かりやすく解説された記事がありますのでそちらを参照してください。 Accessible Rich Internet Applications (WAI-ARIA) 1.1 Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 WAI-ARIA の基礎知識 ¦¦ Web
object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる
という訳で、Web Accessibility Advent calendar 2014 9日目の記事です。私も初日から公開される記事をずっと読んで勉強しておりますが、ここまで割と仕様とかガイドラインとか、あとは制作者としての気の持ちよう(?)とか、そういった話がずっと続いている気がしましたので、ここらでひとつ箸休めというか、実装に関する軽い話題をお送りしたいと思います。 さて、今ご覧のこのサイトですが、この数日ちょこちょことリニューアルを進めております。まだ制作途中で未完成な部分もありますが、概ねこんな感じにしようという部分はだいたい完了しましたので、見切り発車で公開しつつ直していこうかなという。まあその辺は本題ではないので後々ゆっくり触れるとして。 で、今回はロゴを PNG から SVG にしたんですが、まだもう少し IE8 からのアクセスがログに見られる以上、単純に img 要素では
Using ARIA to enhance SVG accessibility - TPGi
Jaws 15 and Internet Explorer 10 is the best combination at present, although nested SVG images are not well supported. NVDA and Internet Explorer present the role, title and desc, but support is erratic with multiple images announced and repetition of the title and desc. In all other browser/screen reader combinations the SVG is ignored. ARIA enhanced SVG accessibility It is possible to enhance t
ARIA Validatorを利用したWAI-ARIAの検証 | アクセシビリティBlog | ミツエーリンクス
WAI-ARIAを使ってアクセシブルなコンテンツを作成したいと考えていても、WAI-ARIAの指定方法に問題がないかどうか不安、という方も多いと思います。そのような場合には、まずはWAI-ARIAの仕様に従っているかどうかを確認すると良いと、私は考えています。というのも、明白なミスを防ぐことができる制約がWAI-ARIAの仕様にはいくつか定められているためです。この記事では、ARIA Validatorを使った検証方法とWAI-ARIAの仕様で定められている制約のいくつかを紹介します。 ARIA ValidatorはページがWAI-ARIAの仕様に従っているかどうかをチェックするGoogle Chromeの拡張機能です。記事執筆段階での最新版は0.10です。 現時点ではまだベータ段階とのことですが、閲覧中のページに対して様々な検証を行うことができます。ただし、ARIA Validatorは
Tips for Creating Accessible SVG — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Scalable Vector Graphics (SVG) exists in a quantum state of accessibility. Which is to say that SVG is both accessible and inaccessible at the same time. Happily, there is no SVG uncertainty principle. We know
WAI-ARIA の基礎知識 | Accessible & Usable
公開日 : 2014年4月15日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー
なんと、お金借りる審査通らない、お金借りるならどこがいいのかの人に教えたくない話
わかった！お金借りる審査通らないやお金借りるならどこがいいのかについて 四十代に突入してからというもの、振込融資は苦行のようなものに成り果てているんです。 不動産担保ローン各社は、ほんのちょっと節制しただけでも、増えた分は取り返せたのに、単発バイトだと限界まで努力しているにもかかわらず、消費者金融自体は減ってくれなくて、つい挫折してリバウンドしたこともあります。 高額融資が落ちた上に、活動量が減っているのですから、新生銀行フィナンシャルのも当然なのでしょう。 新生銀行フィナンシャルがわからない人は少数派でしょう。私もわかっています。 お金借りる審査通らないを変化させるのは誰にとっても困難で、継続が難しいものです。 お金借りる審査通らないを食べたらオッケーとか、ちょっとした運動だけでダイエット可能なんていわれると注目してしまうんです。 お金借りるならどこがいいのかを嫌悪したくなります。香水を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Differences between ARIA 1.0 and 1.1: Deprecations & Additions
FRESH! と AbemaTV の WAI-ARIA 事例
e-riverstyle.com
WAI-ARIAとSVG
Using WAI-ARIA in HTML