デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー(以下a11y)の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムな…
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか?どのように書くべきか?」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
aria-controlsやaria-errormessage・aria-labelledbyは、一意の ID 属性で 2 つの異なる要素を紐づける必要があります。 エラー文言付き Textbox 例として、以下の様な「errorMessageを与えた時にエラー表示する」Textbox コンポーネントを見ていきます。 <Textbox title="お名前" inputProps={...register("name")} errorMessage="正しく入力してください" /> 対象となるのは「input 要素・エラー文言要素」です。この 2 者を紐づけるためには、エラー文言要素を指す ID 属性が必要です(aria-errormessageとして input 要素に指定)これを達成するには、props で ID 指定するか、内部的に ID を生成する必要があります。前者は面倒なので、
aria属性 や role属性 を用いたスタリング実例は、まだあまり聞くことがありません。例えば CSS Modules の場合次の様な指定が可能であり、a11yとスタイリングを両立できるため、アプローチとして良さそうと考えています。 .text { color: #000; } .text[aria-invalid=true] { color: #f00; /* エラーの表現とか */ } .menu[aria-expanded=false] { display: none; /* メニューの開閉表現とか */ } .menu[aria-expanded=true] { display: block; /* メニューの開閉表現とか */ }
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
公開日 : 2022年12月19日 (2024年6月19日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。 ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。 見出し (およびそのレベル) アクセシブルな名前 (画像の alt、アイコンの aria-label など) ランドマーク WAI-ARIA (ユーザーに動的な状況変化を伝達するためにどの aria 属性を用いるか、ユーザーの理解支援
9月7日、dev.toに「a11yとUXを向上させるフロントエンドの4つのヒント」が公開された。 The 4 Frontend tips for improving a11y and UX - dev.to この記事では、スクリーンリーダーの読み上げを意識した実装など、アクセシビリティ、UX向上のヒントを4つ紹介している。 目次 グラフィックスにテキストを使用してはいけない aria-labelでは、動詞を使って要素が行動につながることを伝える パスワードの表示・非表示には、ボタン要素を使う 正しいバーチャルキーボードを表示する グラフィックスにテキストを使用してはいけない テキストを使ってグラフィックを作成する方法がある。 よくある例として、クローズボタンの十字アイコンを乗算記号(x)で作成することが挙げられる。 確かに視覚的には有効な解決策だが、アクセシビリティの観点からすると、バッド
Examples Several examples of how to apply ARIA, the techniques of WCAG and the best practices in your Vue.js components. Packages Developing and helping the most used Vue.js components to keep their components accessible. A11y contents Useful links, articles, videos, Web accessibility events, both in the context of Vue.js and in others.
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから はい、DOMDOMタイムスです。知ってるよって?この挨拶は、まあ準備体操みたいなものなので。いつだって欠かさずやっていきます👶 さて、今日はcanvas-based renderingとa11yの話です。この前のJSConfセッションの最後のあたりで話したことと重複が大きいですが、面白がってくれる方が多かったので文章にしておこうと思いました。 (一応JSConfセッションの資料へのリンクも載せておきますね) canvas-based renderingの波 canvas-based renderingという言葉は、この記事では「canvasをゴリゴリに使ってwebコンテンツをレンダリングすること」ってくらいの意味で使います。通常のform要素やdiv要素ではなくて、canvas要素
a11y-dialog is a lightweight yet flexible script to create accessible dialog windows. Follows the Dialog (Modal) pattern from the ARIA Authoring Practices Guide (APG)Supports alert dialogs as per the WAI-ARIA specificationsSupports nested dialogs (however questionable)Exposes events to react to changesProvides both a DOM and a JavaScript APIPlays nicely with Shadow DOMIs unopinionated with styling
View error/warning codes Getting started To get started using Checka11y.css in your project, all you need to do is: Install checka11y-css via CDN, npm or yarn Ensure you're not using Checka11y.css in production Usage CDN In the below CDN links: Replace :version with a version listed here (latest version is always recommended). If you always want to get the latest stylesheet, remove @:version compl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く