デザインシステムのa11y対応に役立つ新しいWeb Standard
デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムな…
デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムな…
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
GitHub - ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking
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
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のユースケー
Figma 用のアクセシビリティ注釈キット「A11y Annotations」 | Accessible & Usable
公開日 : 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)で作成することが挙げられる。 確かに視覚的には有効な解決策だが、アクセシビリティの観点からすると、バッド
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.
Linterからはじめるa11y
Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。 ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-p…
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
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
GitHub - vue-a11y/eslint-plugin-vuejs-accessibility: An eslint plugin for checking Vue.js files for accessibility
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
Platform News: Using :focus-visible, BBC's New Typeface, Declarative Shadow DOMs, A11Y And Placeholders | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There’s a whole lot of accessibility in this week’s news, from the nuances of using :focus-visible and input placeholders, to accessible typefaces and a Safari bug with :display: contents. Plus, a snippet for a bare-bones web component that supports style encapsulation. Now may be a good tim
Creating an Accessible Range Slider with CSS | a11y with Lindsey
Note: this blog is an archive and not actively maintained. Some information may be out of date. If you'd like to see what I am working on or work with me in a consulting capacity, visit my website lindseykopacz.com. April 29, 2020I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS s
Background: Should I use an accessibility overlay? - The A11Y Project
Should I use an accessibility overlay?By: The A11Y Project Team. Published: March 8, 2021. Due to their technical, social, and moral issues, The A11Y Project does not recommend using permanent overlay plugins. We view these kinds of products as actively harmful, and a step backwards for digital accessibility efforts. BackgroundAccessibility overlays have become a controversial topic recently. Let’
Use the tabindex attributeBy: Eric Bailey. Published: January 28, 2021. tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way. When tabindex’s value is set to zero or a positive number, the element can be navigated to via the keyboard’s Tab key. When it is set to a negative number, its elemen
EPUB 3.3 とアクセシビリティ対応 2023/07/12 KADOKAWA 生産管理局 電子出版制作部 兼 DX戦略アーキテクト局 慶應義塾大学SFC研究所 Advanced Publishing Laboratory W3C Publishing Maintenance Working Group Co-Chair Shinya Takami, Ph.D. KADOKAWA CORPORATION APL・JEPA共同開催セミナー 1 1. EPUB 3.3 とは ○ EPUB 3 の歴史 ○ EPUB 3 Working Group 2. EPUB 3.3 の特徴と変更点 ○ EPUB仕様としての主な変更点 ○ 日本市場向けの対応について ○ Publishing Maintenance Working Group 3. EPUB向けアクセシビリティ対応 ○ EPUB Acces
ESLint 2022.07.08 kito こんにちは。 今回はESLintのプラグインであるeslint-plugin-jsx-a11yの導入手順について紹介します。 こちらを導入することでアクセシビリティに考慮された構文かチェックしてくれるので、対応漏れなど減らすことができるかと思います。
Earlier this year I gave a talk at the John Lewis Partnership Tech Profession Conference 2023 on the topic of automating web accessibility (a11y) testing. In this series I will cover the contents of this talk, kicking off with insights into the Axe suite of tools, followed by articles covering the wider a11y testing landscape: from visual regression testing for magnification and visual deficiencie
Background: A guide to troublesome UI components - The A11Y Project
A guide to troublesome UI componentsBy: Martin Lexelius. Published: February 14, 2023. A common opinion is that accessibility is expensive, and that if you think accessibility is expensive, you can deal with it later. Here’s the twist: it will be expensive if you deal with it later. However, accessibility is not expensive if you discuss it as a team early in the process. It is possible to build ju
アクセシビリティツリーを読む 見えない要素・読めない要素 小林大輔 @sukoyakarizumu サイボウズ株式会社 デザイン＆リサーチ みなさんこんにちは、サイボウズの小林大輔と申します。 本日は、「アクセシビリティツリーを読む〜見えない要素・読めない要素」というタイトルで発表させていただきます。よろしくお願いします。 まず最初にタイトルにある「アクセシビリティツリー」と「見えない要素・読めない要素」の意味について解説します。 1
ESLint のプラグイン "eslint-plugin-jsx-a11y" は、jsx(tsx) にアクセシビリティのルールを追加する。 https://github.com/evcohen/eslint-plugin-jsx-a11y ESLintのルールについて ESLint は、構文から AST を作成し、rules(以下： ルール）を元にチェックを行なう。 AST(抽象構文木）については、下記が参考になる。 JavaScript AST を始める最初の一歩 | Web Scratch ルールの実装はシンプル。 情報を記載する meta オブジェクトと、context を受け取る create 関数を export するだけ。 create 関数の context は、様々なユーティリティ関数を含むオブジェクト。 その中では node を仮引数として受け取っていて、メソッド内で n
XR やクローラーについて話した次世代 Web カンファレンス A11y セッションが無事終了しました - ARTICLES
2023年の暮れも迫る12月16日、東京で 次世代 Web カンファレンス 2023 というイベントがありました。 セッションの動画もあがっているので、報告記事を書きます なお、この動画は Bar エリアで行われた全セッションが詰まっていますので、ピンポイントで見たい方は A11y セッションに再生開始時間をセットした 次世代 Web カンファレンス2023 Bar からご覧ください。 僕はこんなポジションで A11y セッションに参加しました。 次世代 Web カンファレンスの a11y セッションに出場します - ARTICLESセッションは1時間半という長丁場で、始まる前はこんなに時間があって話すことそんなにあるだろうかと不安でしたが、ふたを開けてみると話足りないくらいな状態で、話せなかったネタを一つ別記事で投稿したのでした。 静岡のやさしい日本語講座関連情報についてしらべてみる -
はじめに Webアクセシビリティは、ウェブサイトやアプリケーションがすべてのユーザー、特に障害を持つ人々にとって利用しやすくなるように設計されていることを指します。 アクセシビリティを考慮した設計は、視覚障害、聴覚障害、運動障害、認知障害などのさまざまな障害を持つユーザーにとって使いやすさを提供します。 次に、Webアクセシビリティの具体例をいくつか挙げます。 Webアクセシビリティ 13のポイント 1. キーボード操作: すべての操作をキーボードだけで行えるようにすることで、運動障害を持つユーザーやマウスが使えない状況のユーザーに対応します。 例えば、タブキーでフォーカス可能な要素を移動し、エンターキーでクリック操作を実行できるようにすることが重要です。 2. キーボード操作に対応したカスタムコントロール: カスタムUIコントロール（例: カスタムドロップダウンメニューやスライダー）を作
Stimulusとは Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。 有名どころだとStack Overflowが採用していたりします。 最近巷で話題のStimulusですが、バージョン3.2が11月29日にリリースされました。 私は中でもキーボードイベントのフィルタリング構文がとても使いやすいと思っていて、StimulusはHTMLを見ただけで大体の振る舞いが分かるよう実装されるので、アクセシビリティを考慮した実装がさらにやりやすくなったと感じています。 ハンバーガーボタンとは よく右上とか左上とかにある三本線のアレです。 ハンバーガーボタン、みんな大好きですよね。 でも実装方法は人によって様々あるように感じています。 今回はこのハンバーガーボタン（とハンバーガーメニュー）を、アクセシビリティを考慮しつつ、Stimulusで実装してみたいと思いま
Awesome japanese a11y companiesの取り組みと今後について | yamanoku Advent Calendar 2023
Awesome japanese a11y companiesの取り組みと今後について この記事はyamanoku Advent Calendar 2023の21日目の記事になります。 Awesome japanese a11y companiesとは何か Webアクセシビリティのまとめサイトとしてaccrefs.jpというものがあるのですが、日本企業の取組事例を抽出してそれをいつでも参照できるようにしたいというモチベーションがきっかけとなり、2021年9月に誕生したyamanokuによるAwesome listsです。 yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ（随時更新） A11YJ Slack1やウェブアクセシビリティのDiscordサーバーでも情報共有チャンネルがあるのですが、Sl
Gatsbyのアクセシビリティテスト用プラグイン「gatsby-plugin-a11y-report」 - Qiita
Gatsbyのアクセシビリティテスト用のプラグインを書きました。 gatsby-plugin-a11y-reportです。 gatsby develop 時の表示イメージ。 もともとGatsbyにはgatsby-plugin-react-a11yというreact-axeを使ったプラグインがあるのですが、その元となったreact-axeがviolationsしか表示してくれないので、incompleteも表示するように書き直したりしているうちに差分が大きくなりすぎたので独立したような感じです。 また、gatsby develop 時だけでなく、build時にはaxeのレポートを以下のようにlogsディレクトリに出力します。 {"title":"Gatsby Build: A11y Check Start","pages":14,"logging":["violations","incompl
はじめに a11yを意識し始めた今日このごろ。 なんとなくこうした方が良いと言うのはわかるものの素人目線でしかないため、a11yを検証してくれるツールを導入し改善をできるようにしていきたい。 そこで今回はどのようなツールがあり、使い勝手はどんなもんか試してみる。 TL;DR. 今回作ったコード 準備 # reactのプロジェクトを作成するところから $ npx create-react-app a11y-react --template typescript # eslint設定 $ npx eslint --init > react、typescriptを使うように選択 > その他ブラウザ用、import/exportを使うなど選択 eslint-plugin-jsx-a11y a11yについて静的解析してくれるeslint-plugin。 導入方法 $ yarn add eslint-
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの25日目の記事です。 「アリックス」と発音するそうですが、a11y.cssという名前の、一種の品質チェックツールについてご紹介します。 a11y.cssの概要 accessibilityの省略表記として「a11y」という表記が英語圏を中心に根づいている昨今、あたかもアクセシビリティ品質に特化したチェックツールかと思われるかもしれませんが、そういうわけではありません。アクセシビリティに関わるものを含め、マークアップに潜むリスクや間違いを指摘するものです。 Firefox用のアドオンやChrome用の拡張のほか、後述するレベルと言語（英語のほかロシア語、中国語、アラビア語、ポルトガル語、ギリシャ語が選択可能）を組み合わせて生成するブックマークレットから使用することができます。 指摘の対象はエラー（Errors）、警告（Wa
Stimulusとは Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。 有名どころだとStack Overflowが採用していたりします。 StimulusはHTMLを中心に考えられていて、JavaScriptで書かれた振る舞いをHTMLから呼び出せるように設計されています。 それゆえ私のようなHTMLコーダー上がりの人間にとっても、とっつきやすいライブラリだと思います。 また、アクセシブルな実装は基本HTMLありきなので、その辺の親和性も高いと思っています。 タブとは 1画面に収まり切らない、または同時に見せるべきではない複数の情報のまとまりを、（画面遷移やスクロールを発生させずに）すばやく表示するためのUIです。 ソシオメディア | タブの並列切替にて詳細な説明が見れます。 a11yを考慮したタブ ARIA Authoring Practices
オーギュスト・ロダン「花子のマスク」画像引用元 2022年6月11日から9月4日まで、神奈川県立近代美術館・鎌倉別館において開催された特別展「これってさわれるのかな？―彫刻に触れる展覧会」へ行ってきました。 これは、同館の収蔵品から選ばれた24点の作品に実際に触れて鑑賞することができるというコンセプトの展覧会です。展示されている作品は全てレプリカではなくオリジナル。つまり作者が意図したそのままの状態の作品に触れられるのです。教科書に乗っているような有名な作品こそありませんが、これだけの数のアートに（文字通り）触れられる、めったにない貴重な機会ではないかと思います。 鑑賞にあたっては、受付で配布される使い捨ての手袋（ゴムかシリコン？）の装着が求められます。これは作品の保護に加えて感染症対策の意味もあるようです。最初かなりの密着度にややひるみましたがすぐに違和感なく触察することができました。
みらる🖖HTMLが好き @miral_kashiwagi テストに3か月 → issue化（具体的なやり方や、ユーザーへの影響の洗い出しなど）→改善（無理せずコツコツ） →3年くらいかけて全項目レベルA達成！ 3年くらい！すごい！ #a11y_findy
Meet UB Tech #4 「a11y（アクセシビリティ）とSaaSとNewsPicks」を公開しました - Uzabase for Engineers
こんにちは、Tech Brandingの山田です。 ユーザベースのエンジニアカルチャーをゆるっとお伝えするPodcast、Meet UB Tech #4 のテーマは「a11y（アクセシビリティ）とSaaSとNewsPicks」。B2B SaaS事業とNewsPicks事業の垣根を超えて、アクセシビリティに興味のある3人に語り合ってもらいました。 [URL] open.spotify.com #4 のゲストと見どころはこちら。 タイトル： a11y（アクセシビリティ）とSaaSとNewsPicks 出演者： 小玉祐輝 @kuy （ユーザベース B2B SaaS事業 Fellow / INITIAL CTO） 八木悠輔 aka J @yajiji（NewsPicks UIデザイナー） イイダユカコ @becyn （NewsPicksエンジニア／パーソナリティ） トークテーマ： SaaSプロダク
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - t12t/a11y-components
a11y を強化する ReactComponent の型推論
A11y - Focus Order | Figma Community
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
a11yとUXを向上させる4つのヒント - グラフィックスにテキストを使用してはいけないなど
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから
Introduction | a11y-dialog
How-to: Use the tabindex attribute - The A11Y Project
EPUB 3.3 and EPUB-A11Y 1.1 - 2023-07-12
アクセシビリティ検証ツールのeslint-plugin-jsx-a11yを導入する方法
Automating a11y testing: Part 1 — Axe
TechFeedNight-a11y-アクセシビリティツリーを読む〜見えない要素・読めない要素
eslint-plugin-jsx-a11yを少し調べる | きるこの日記帳
a11y（accessibility）13のポイント - Qiita
Stimulusでa11yを考慮したハンバーガーボタンを実装する - Qiita
Reactでa11y検証ツールを試してみる - 水無瀬のプログラミング日記
a11y.cssによるマークアップの品質チェック | フロントエンドBlog | ミツエーリンクス
Stimulusでa11yを考慮したタブを実装する - Qiita
Drafts about A11Y
ウェブアクセシビリティ テストと自動化における挑戦と失敗 #a11y_findy