デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムなどの様々なプロジェクトで使う目的で作成するコンポーネントではa11yをより意識する必要があります。このセッションでは、そのa11yの対応を格段にやりやすくする新しいWeb Standardを紹介します。 2022年3月25日開催「UIT Meetup vol.15 『Relearn Modern Web Standard』」 https://uit.connpass.com/event/242359/
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y css resetの使い方 a11y css resetの特徴 a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。 CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。 参考: Writing CSS
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
React18 の useId で a11y対応する
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 を生成する必要があります。前者は面倒なので、
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ（随時更新）
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
次の Button は tag の指定により、HTML 要素を出し分ける Component です。出力結果は下段のとおりです。この Component を通し a11y を強化する型注釈を考察したので、メモとして投稿します。 <Button tag="button">+1</Button> <Button tag="a" role="button">+1</Button> <Button tag="input" type="button" value="+1" />
About this plugin The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations with engineers as part of your design. Accessibility is critical for good desig...
a11y由来のスタイリング考察
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; /* メニューの開閉表現とか */ }
GitHub - acot-a11y/acot: :gem: Accessibility Testing Framework. More accessible web, all over the world.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Web A11y for Designers ポスターのこと
2018年1月27日に開催された WCK Meeting Vol.58 「新春ライトニングトーク大会2018」で「インクルーシブに楽しむアクセシビリティ」というLTをしました。そこで参加者のみなさんに「Web Accessibility for Designers」というポスターを配りました。 この記事は、「Web Accessibility for Designers」ポスターの制作意図と補足説明を書いたものです。 なぜ作ったのか 当日のLTでは、主にウェブアクセシビリティの魅力や取り組むメリットについてお話ししました。持ち時間の10分では具体的に何をすればいいかまで伝えられなかったので、「お持ち帰り」できるポスターを作りました。 紙のポスターを配ることで、“ウェブに載るだけで圧倒的にアクセシブル”を逆説的に感じてもらおうという意図もありました。 アクセシビリティのことを知らなかった人に
Figma 用のアクセシビリティ注釈キット「A11y Annotations」 | Accessible & Usable
公開日 : 2022年12月19日 (2022年12月22日 更新) カテゴリー : アクセシビリティ / 情報設計 (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)で作成することが挙げられる。 確かに視覚的には有効な解決策だが、アクセシビリティの観点からすると、バッド
Vue A11y
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要素
GitHub - mike-engel/a11y-css-reset: A small set of global rules to make things accessible and reset default styling
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
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
Checka11y.css - CSS stylesheet to quickly highlight a11y concerns.
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ページを開く
デザインシステムのa11y対応に役立つ新しいWeb Standard
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
GitHub - t12t/a11y-components
a11y を強化する ReactComponent の型推論
A11y - Focus Order | Figma Community
a11yとUXを向上させる4つのヒント - グラフィックスにテキストを使用してはいけないなど
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから
Introduction | a11y-dialog