デザインシステムの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
Home - The A11Y Project
Marcy Sutton Testing AccessibilityA self-paced workshop designed to teach you the principles and effective patterns of accessibility, from design to deployment. Learn more about this workshop Michele Williams Introduction to Web AccessibilityUnderstanding how people use their computing devices is vital to understanding the diversity of disability in technology. In this video, Michele explains what
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
A11Y Style Guide
This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise, there are ways to help contribute to the a11y style guide. Why did this project start? We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer,
� ��KV 0 �KV p+m�KV @���KV @&I�KV
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
Introduction Pronounced "Alix". This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet. CSS files are available in French, English, Spanish, Greek, Arabic, Portuguese, Russian, Chinese and Polish — and leveled or full. How to use? Web Extension Eith
GitHub - reactjs/react-a11y: Identifies accessibility issues in your React.js elements
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
アクセシビリティを簡単にチェックするa11y.css
使用するのは、Bookmarkletから簡単に行うことが出来ます。https://ffoodd.github.io/a11y.css/ にアクセスして、Bookmarlet generatorからMinimum levelとLanguage(現在はフランス語 or 英語)を選択すると、Bookmarklet用のjavascriptのリンクが生成されます。 OptionのMinimum levelは Advices Obsoletes Warnings Errors から選びます。 Errorsは、必須の属性が抜けていたり、明らかにアクセシビリティを損なうレベルの指摘が挙げられています。 例えば、href属性が空のa要素を表示する項目no-hrefがあります。各項目には、説明と参照したアクセシビリティガイドライン、項目を抽出するCSSセレクタ、そのテストが記載されています。 Warnings
Introduction Pronounced "Alix". This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet. CSS files are available in French, English, Spanish, Greek, Arabic, Portuguese, Russian, Chinese and Polish — and leveled or full. How to use? Web Extension Eith
This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments. There are three levels of accessibility compliance in the WCAG, which reflect the priority of support: A: Essential If this isn't met, assistive technology may not be able to read, understand, or fully
GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
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
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
A11y Command-line ToolsWeb accessibility audits powered by the Chrome Accessibility Developer Tools.TweetWhy?Accessible web sites need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, sites should be usable by the broadest group of users, including those with disabilities. When designing for accessibility, there are four key areas of disability to c
次の 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...
GitHub - KittyGiraudel/a11y-dialog: A very lightweight and flexible accessible modal dialog script.
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
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
去る12/9に、株式会社サーキュレーション様のイベントスペースをお借りして『第1回 mgnアクセシビリティ公開社内勉強会 #a11y_mgn』を開催いたしました。 セッション 音声ブラウザをとおして見るウェブ このセッションでは、中根さんが普段どうウェブを使っているか、具体的にどういう状況が「使いづらい」「使えない」状況なのか、ウェブがアクセシブルであることのメリットなどを、デモを交えながらお話しいただきます。 第1回 mgnアクセシビリティ公開社内勉強会 #a11y_mgn – megane.in | Doorkeeper 中根さんのセッション。デモが圧巻でした。 最初のセッションはAccSellの主宰としてアクセシビリティの普及に尽力している中根さん。ご自身も全盲のエンジニアです。 中根さんには主に「音声ブラウザを使用したデモ」を中心にお話しいただきました。 アクセシビリティの定義を『
[登壇資料] そのアプリ、目を閉じても使えますか?〜アクセシビリティの基礎と対応の考え方〜(モバイルメソッド大阪 第3回 #mobilemethod ) #a11y ｜ DevelopersIO
はじめに クラスメソッド大阪オフィスで開催されたモバイルメソッドに登壇させていただきました。モバイルメソッドは毎月１回の頻度で大阪で行われる、モバイルに関する勉強会です。 私は、アクセシビリティに関する経験が15年程度ありますので、今回、スマートフォンアプリのアクセシビリティについて、基礎的な内容からガイドラインの一部などについてご紹介しました。 登壇資料 主な内容 アクセシビリティとは何か 自分たちが一生懸命に開発したアプリが、一部の利用者には「まったく使えない」可能性があることについて考えましょう。 より多くのユーザーが、より多くの利用環境から、より多くの場面や状況で、アプリを使えるようにすること インパクトが大きいのは障害者、高齢者だが、普段メガネをかけている人のメガネが壊れたり、効き手が骨折したなどの「一時的な障害」、音が出せないシチュエーションや、洗い物などで手が使えないなどの「
![[登壇資料] そのアプリ、目を閉じても使えますか?〜アクセシビリティの基礎と対応の考え方〜(モバイルメソッド大阪 第3回 #mobilemethod ) #a11y ｜ DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/bec80ddf22a14f54aca6d52b7b0277b80d5b76d1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F10%2Fe43390dd793bca21b1b7ee1fc719d7a6222.png)
warning Definition for rule 'jsx-a11y/href-no-hash' was not found jsx-a11y/href-no-hash · Issue #2631 · facebook/create-react-app
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
UI 実装の再考と a11y
HTML 版 http://s.aho.mu/161205-frontrend_vol8_lt/ Frontrend Vol.8 で使用したスライドです。本編5分。
GitHub - ireade/alix: Alix, a browser extension for a11y.css
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
React / Next で SVG をコンポーネントとして使うことが多かったのだけれど、SEO が必要なメディアの制作で SVG に image のような alt が設定できないか気になって調べてみたメモ img タグを使う <img src="/path/to/logo.svg" alt="ロゴ" /> font-size で大きさを変えたり、color で色を変えたりする必要のない画像であれば通常の img タグを使えば、従来どおり画像として認識され alt 属性が SEO にも効く。ロゴなど動的な変化が必要ない SVG 画像ならこのパターンがシンプルで良さそう Inline SVG f…
Web A11y for Designers ポスターのこと
2018年1月27日に開催された WCK Meeting Vol.58 「新春ライトニングトーク大会2018」で「インクルーシブに楽しむアクセシビリティ」という発表をしました。そこで参加者のみなさんに「Web Accessibility for Designers」というポスターを配りました。 この記事は、「Web Accessibility for Designers」ポスターの制作意図と補足説明を書いたものです。 なぜ作ったのか 当日のLTでは、主にウェブアクセシビリティの魅力や取り組むメリットについてお話ししました。持ち時間の10分では具体的に何をすればいいかまで伝えられなかったので、「お持ち帰り」できるポスターを作りました。 紙のポスターを配ることで、“ウェブに載るだけで圧倒的にアクセシブル”を逆説的に感じてもらおうという意図もありました。 アクセシビリティのことを知らなかった人に
Quick tip: Never remove CSS outlines - The A11Y Project
Never remove CSS outlinesBy: Guilherme Simões. Published: January 25, 2013. Removing outlines in CSS creates issues for people navigating the web with a keyboard. Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. Methods to remove it such as onfocus="blur()" resu
Figma 用のアクセシビリティ注釈キット「A11y Annotations」 | Accessible & Usable
公開日 : 2022年12月19日 (2022年12月22日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。 ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。 見出し (およびそのレベル) アクセシブルな名前 (画像の alt、アイコンの aria-label など) ランドマーク WAI-ARIA (ユーザーに動的な状況変化を伝達するためにどの aria 属性を用いるか、ユーザーの理解支
jwp-a11y
変更履歴 4.1.7 fix PHP 8.0 Deprecated errors again 4.1.6 fix PHP 8.0 Deprecated errors 4.1.5 fix docs :Array and string offset access syntax with curly braces is no longer supported 4.1.4 remove from meanless element ignore file existence check when check 2.4.4 4.1.2 document maintenance 4.1.1 fix session timing 4.1.0 fix template bug 4.0.9 fix english resource lack 4.0.8 fix some messages 4.0.7 fix a
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents
2018.07.15 WordCamp Ogijima 2018 の登壇資料です。 発表内容のテキスト版はこちら：https://bit.ly/2zNnSSR
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. Dismiss alert
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
SAWADA STANDARD DESIGN @SawadaStdDesign 明日はBootstrap 4のアクセシビリティについてとスマホのスクリーンリーダーについて、お気軽な感じの勉強会をします！このまま余震が収まっててくれますように。 | D2D アクセシビリティ勉強会 2018年・夏 bit.ly/2MC7170 #d2draft 2018-06-30 20:57:00
If you’re only here for the code, go straight to the GitHub repository. If there’s one thing I try to push forward more and more at Edenspiekermann, it’s accessibility. I can’t help but feel that we don’t care enough about assistive technology users. That’s a shame, really. It’s not that we don’t want to—it’s more like we don’t really know where to start. Almost all projects involve some form of d
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインシステムのa11y対応に役立つ新しいWeb Standard
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
UI 実装の再考と a11y - Frontrend Vol.8 LT
GitHub - infofarmer/eslint-plugin-jsx-a11y
a11y.css’ documentation | a11y.css
a11y.css’ documentation | a11y.css
Checklist - The A11Y Project
GitHub - t12t/a11y-components
a11y - Accessibility Audits For The Web
a11y を強化する ReactComponent の型推論
A11y - Focus Order | Figma Community
第1回 mgnアクセシビリティ公開社内勉強会 #a11y_mgn を開催いたしました。 – mgn (エムジーエヌ)
a11yとは ウェブの人気・最新記事を集めました - はてな
a11yとUXを向上させる4つのヒント - グラフィックスにテキストを使用してはいけないなど
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから
Introduction | a11y-dialog
D2D アクセシビリティ勉強会 2018年・夏 ツイートまとめ #d2draft #a11y
Introducing A11y Dialog