Building a loading bar component | Articles | web.dev
Building a loading bar component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a color adaptive and accessible loading bar with the <progress> element. In this post I want to share thinking on how to build a color adaptive and accessible loading bar with the <progress> element. Try the demo and view the source! Light
WAI-ARIA ランドマークを暗黙的に実装する | Accessible & Usable
公開日 : 2021年12月13日 カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2021 の13日目の記事です。 ウェブアクセシビリティを高めるための実装方法のひとつに、WAI-ARIA があります。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、ウェブアクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。 WAI-ARIA によって、ユーザーインターフェースオブジェクトの「Roles (役割)」「States (状態)」「Properties (特性)」を動的にスクリーンリーダーなどの支援
Element.focus vs aria-activedescendant | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/element-focus-vs-aria-activedescendant. We hope to fix this soon!). When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage
short-note-on-what-css-display-properties-do-to-table-semantics
The CSS display properties are powerful. You can change the visual display of elements to match your desired styling, but sometimes doing this can have an unintended effect of nuking the semantics of the elements, as conveyed to screen reading software, in the browser accessibility tree. Screen readers and other assistive tech, in general, do not have direct access to the HTML DOM, they are provid
Tables, CSS Display Properties, and ARIA
Tables, CSS Display Properties, and ARIA This post has two separate but related things going on. One is an example of one of my responsive tables with ARIA added, and the other is the Twitter conversation that started this along with some generalized responses. Responsive Table with Semantics Retained by ARIA The Tweet What You Can Do Responsive Table with Semantics Retained by ARIA See the Pen Re
WAI-ARIA - Screen reader compatibility · PowerMapper Software
Shows how different WAI-ARIA attributes behave in commonly used screen readers. The results include two types of test: Expected to work - these tests show support when accessibility features are used correctlyExpected to fail - these tests show what happens when accessibility features are used incorrectly (marked with ) ARIA support by user agent ARIA role and attribute support in different screen
わぁいアリア（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 キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
role 属性を正しく設定してアクセシビリティを高める
role 属性は、要素が示す役割を明確にするための属性です。 例えば、header 要素はコンテンツの header か、あるいはサイト全体の header を示すことなどができますが、 どちらの header であるかを明確に区別する手段はありません。 しかしながら、role 属性の値 banner によって、コンテンツ固有の header ではなく、サイトの持つ header であることを示すことができます。 HTML5 以降の HTML は、ある役割を示す要素が多く存在しますが、role 属性はより強く役割を示します。 role によって役割を明確にする意味 role 属性は HTML などで使いますが、role 属性に与える値や役割は HTML とは切り離された ARIA と表記される区分に定義されています。 Accessible Rich Internet Application
ARIA Bones: Simplifying WAI-ARIA
About ARIA Bones is a series of templates which aim to show how WAI-ARIA can be used to make HTML more accessible. Inline comments explain how and when to use some of the most common WAI-ARIA roles and properties. Native HTML elements are given preferential use where appropriate. It can also be used as a guide when building your own pages from scratch. JavaScript is only used when necessary, and i
W3C HTML5仕様に見るアクセシビリティーに関する記述 - 血統の森+はてな
この記事はWeb Accessibility Advent Calendar 2014 - Adventarの6日目のエントリーです。このエントリーのタイトルからは、やれW3Cだやれ仕様だとお堅いイメージがぷんぷん漂いますが、易しいめに書くことを心がけてみました。そのため、ガチ勢には物足りなさを感じるかもしれません。 ウェブ業界の人にとっては周知のことだと思いますが、去る10月28日付けでHTML5仕様（以下単に仕様と書きます）が勧告されました。この仕様の意義はさまざまな切り口で捉えることが考えられますが、アクセシビリティーという観点から1つ前のバージョンのHTMLであるHTML4と比較して、この仕様で特に目立って強化されたと思われる点を挙げるとすると、 img要素のalt属性が大幅に拡充されている WAI-ARIA1.0を取り込んでいる 映像や音声のための要素（video要素、audio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2013/12/waiariajquery-1.html
Home
