Tooltips in the time of WCAG 2.1 | Sarah Higley
TL;DR recommendation: Narrow down your definition of "tooltip," and jump to the last section. Tooltips have been a reliable source of web accessibility woes from the very beginning; or at least from the beginning of graphical web browsers. They have gone by many names: "tooltip," "infotip," "toggle tip," "hint text," "balloon help," "info bubble," "inaccessible overlay of shame"... the list goes o
Making Disabled Buttons More Inclusive | CSS-Tricks
Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled. There are lots of use cases where a disabled button makes a lot of sense, and we’ll get to those reasons in just a moment. But throughout this article, we’ll be looking at a form that allows
ARIA Authoring Practices Guide (APG) に支援技術のサポート状況が掲載 | Accessible & Usable
公開日 : 2023年4月24日 カテゴリー : アクセシビリティ WAI-ARIA を用いたウェブコンテンツ制作のガイドとして、W3C が ARIA Authoring Practices Guide (以下、APG) ※1 というサイトを公開しています。 ※1 : もともとは WAI-ARIA Authoring Practices というドキュメントでしたが、2020年5月19日付で APG にリニューアルされています。 この APG は、「Patterns」と「Practices」というふたつのセクションをフィーチャーしていますが : Patterns WAI-ARIA を用いて作ることができるアクセシブルな UI コンポーネントのパターン (たとえば、アコーディオン、アラートメッセージ、カルーセル、モーダルダイアログ、タブ、など) を解説しています。各パターンは、概要 (Abou
Accessibility Support
Important: This website does not attempt to establish a standard for how assistive technologies must behave. Read the FAQ for more information. Additionally, this is a work in progress. Please submit feedback or suggestions. This a community driven effort. Please run some tests to help keep this project going and to learn about assistive technologies along the way.
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
Accessible SVG Icons | CSS-Tricks
The answer to “What is the most accessible HTML for an SVG icon?” isn’t one-size-fits all, because what an icon needs to do on a website varies. I’m partial to Heather Migliorisi’s research on all this, but I can summarize. Extremely quickly: hide it if it’s decorative, title it if it’s stand-alone, let the link do the work if it’s a link. Here are those three possibilities: As in, the icon is jus
RTP LIVE: Bocoran RTP Slot Gacor Hari Ini Terupdate
Kelebihan Menggunakan RTP SLOT Dalam Bermain Slot Online Pencarian keyword RTP Slot dan RTP Live sekarang meningkat sangat pesat. Apalagi pencarian tentang rtp slot pragmatic hari ini, Hampir setiap hari ada yang menanyakannya di forum, medsos dan berita. Hal ini wajar terjadi sebab para slotter berlomba-lomba mencari situs yang benar-benar memberikan rtp yang tidak di rekayasa dan benar diambil d
WAI-ARIA Authoring Practices 1.1のBreadcrumb Exampleについて思うこと
2019年7月14日 著 パンくずナビと呼ばれる存在については、過去にも何度か覚え書きしてきました。古いものから時系列に沿って並べるとこんな感じ（改めて調べてみると意外に書いている）： 第1回「アクセシビリティBAR（仮称）」初夏のパンくず祭 パンくずナビとマイクロデータ パンくずナビゲーションにまつわる議論、再び パンくずナビのマークアップ パンくずナビゲーションのマークアップ再考 BreadcrumbListの実装 でまぁ最近になってふとBreadcrumb Example | WAI-ARIA Authoring Practices 1.1を目にする機会がありました。このナビゲーションに対しnavとかol/li要素を使うことの是非については敢えてスルーするとして、不可解な点が2つあります。 <nav aria-label="Breadcrumb" class="breadcrumb"
タブUIのキーボード操作はユーザーに理解できるのか? | 水無月ばけらのえび日記
公開: 2019年7月7日22時5分頃 先日このような記事を公開しました。 なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする (webtan.impress.co.jp)いわゆるタブUIがキーボード操作できなかったので対応させたという話なのですが、結論としてはtabロールをつけない判断をしたということです。 WAI-ARIAのtabロールを使うと、WAI-ARIA対応するスクリーンリーダーに対して「タブ」という通知をすることができます。また、スクリプトで制御すれば、タブ切り替えのキーボード操作に対応させることも可能です。その対応をした場合どうなるのか、記事には以下のように書きました。 スクリーンリーダーでも「タブ」として操作可能にする OSが提供するタブの機能をWebで再現する。基本的には望ましい対応だが、タブ操作に慣れていないユーザーは逆に混乱する可能性もある。また
サイト内検索機能を開閉するボタンを「検索」ランドマークとすべきか？ | Accessible & Usable
公開日 : 2018年7月6日 カテゴリー : アクセシビリティ サイト共通ヘッダーに、サイト内検索機能を開閉するボタン (虫眼鏡アイコン) を配置して、ボタンが押されると検索窓を開く、というユーザーインターフェース (UI) をよく見かけます。関わっているプロジェクトで、この手のボタンに対して role="search" というランドマークを付けるべきか？という興味深い議論がありました。 サイト内検索機能を開閉するボタン (虫眼鏡アイコン) に role="search" というランドマークを付けるべきか？ ランドマークの利点 role="search" (以下、「検索」ランドマーク) とは、WAI-ARIA で定義されているランドマーク (Landmark Roles) のひとつです。HTML の要素の中に role 属性を書くことで実装できますが、role 属性値は「search」の
Building Inclusive Toggle Buttons — Smashing Magazine
Making toggle button inclusive is a question of language, visual design, markup, and behavior. In this inaugural post, Heydon Pickering will be exploring what it takes to make toggle buttons inclusive. As with any component, there’s no one way to go about this, especially when such controls are examined under different contexts. However, there’s certainly plenty to forget to do or to otherwise scr
aria-current design patterns
The aria-current attribute indicates the element that represents the current item within a container or set of related elements. It is an enumerated type attribute that takes one of a number of predefined tokens ("page", "step", "location", "date" or "time"), or which may be set to "true". aria-current="date" Screen readers should announce "Current date" to indicate that Saturday 16th is the curre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Not so short note on aria-label usage – Big Table Edition – HTML Accessibility
The many lives of a notification
Bot Verification
WebAIM: Semantic Structure: Regions, Headings, and Lists
ARIA Live Regions - HTMHell
Semantics and the popover attribute: what to use when?
Using HTML landmark roles to improve accessibility | MDN Blog
Patterns
