EightShapes Contrast Grid
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2F2F2 #DDDDDD #CCCCCC #888888 #404040, Charcoal #000000, Black #2F78C5, Effective on Extremes #0F60B6, Effective on Lights #398EEA, Ineffective Use distinct rows & columns values Use the same rows & colum
Reasonable Colors
Rose Raspberry Red Orange Cinnamon Amber Yellow Lime Chartreuse Green Emerald Aquamarine Teal Cyan Powder Sky Cerulean Azure Blue Indigo Violet Purple Magenta Pink Gray Reasonable Colors is free and open source. The annotated source-code is available on Github (mirrored on Gitlab) and released under the MIT license. Anyone can use these colors for anything. Reasonable colors are accessible. The co
A11yAutomation
A11y Automation Tracker A more thorough way to track the potential accessibility violations and the automated linters and tests currently available. Accessibility Automation Catch potential a11y violations faster. It can be hard to keep track of the potential accessibility violations in your code. More automation is being created for linting rules and tests-- and now there is a single site to trac
a11yphant
Learning web accessibility made easyallyphanta11yphant teaches web accessibility, one step at a time, broken down into manageable pieces. We call these challenges. You won't need to read large amounts of text to complete those. Instead, you will learn by applying the concepts in code. Get started with your first web accessibility challenge and improve your skills. Start CodingSign up to save your
APCA Contrast Calculator
Click on a color patch next to "Text" or "Background" above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list). PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. This is the APCA
A Complete Guide To Accessible Front-End Components — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. Table of ContentsBelow you’ll find an alphabetical list of all accessible components. Skip the table of contents, or j
Standardizing Focus Styles With CSS Custom Properties | CSS-Tricks
2021 → 2022 We asked web builders that we admire the same question... Thanks to our major sponsors in 2021. They are a big part of making this site possible. Automattic Makers of Jetpack, WooCommerce, WordPress.com, and many other great software products we use. Frontend Masters The best front-end engineering courses out there to advance your skills. Take two minutes right now and visit your curre
freee Accessibility Training
はじめに このサイトでは、Web サイトを実装する際に作ってしまいがちなアクセシビリティ上の問題と、それが起きにくくなるような実装の例を紹介しています。 freee アクセシビリティー・ガイドラインとあわせて見ることで、Web アクセシビリティへの理解を促進することを目的としています。 ただ各ページを見ていくだけでなく、キーボードのみによって操作したり、スクリーンリーダーで操作したり、開発者ツールで DOM の状態を見たりしてみてください。 キーボードで操作してみよう スクリーンリーダーを使ってみよう 画像 リンク ボタン フォーム 見出し 言語 ランドマーク ステータスメッセージ アクセシビリティチェックの練習ページ
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / swnjp
デザイナーの沢登です。 以前、コンテンツに関するアクセシビリティ勉強会をPRチーム森本さんに開催してもらいましたが、今回もアクセシビリティアドバイザーのfreee 伊原さんに協力いただきエンジニア向けの勉強会を開催しました。当日参加されたみなさん、伊原さん、ありがとうございました！ この記事では、目的や結果をオープン社内報でお届けします。 ❓ オープン社内報とは 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。 当日の勉強会資料 勉強会資料を確認 なぜやったのかアクセシビリティチームには、エンジニア・CS・ディレクターなど様々な職種・メンバーがサイドプロジェクトとして関わっています。しかし、ウェブエンジニアのアサインは深谷さん1人となっており、ウェブ版noteを1人でアクセシビリティ向上を行っていくことに限
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The State of Digital Accessibility: Three Key Challenges
Peering into the accessibility of Dark Mode
Alt writing
Just How Long Should Alt Text Be? | CSS-Tricks
How to Fix Your Low-Contrast Text
Accessible Icon Buttons
The endless search for “here” in the unhelpful “click here” button
Huetone • Make colors accessible
Modals | Accessibility Guidelines
#26 HTMHell special: tasty buttons - HTMHell
More accessible markup with display: contents