A11y.css provides warnings about possible risks and mistakes that exist in HTML.

Latest Version

Version

2.0.2

Update

November 6, 2024

Size

611KiB

Developer

a11y.css Extension

First a11y.css was a bookmarklet inserting a stylesheet into the page.

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.

This extension does the same, plus adds some tools:

— Outline focus (keyboard navigation)
— Show languages used (relies on lang attributes)
—Check alt and title attributes on images

You can submit your bugs on github.

Original bookmarklet code: Gaël Poupard
Extension code: Stéphane Deschamps
Thanks to Anthony Ricaud and Mathieu Pillard for their help!

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "a11y.css", "description": "a11y.css provides warnings about possible risks and mistakes that exist in HTML.", "version": "2.0.2", "default_locale": "en", "minimum_chrome_version": "93", "permissions": [ "activeTab", "tabs", "storage", "scripting" ], "action": { "default_title": "a11y.css", "default_popup": "popup/index.html", "default_icon": { "19": "icons/a11y-css_19.png", "38": "icons/a11y-css_38.png" } }, "background": { "service_worker": "/scripts/background/main.js", "type": "module" }, "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "/scripts/injected/alt.js" ], "css": [ "/scripts/injected/alt.css" ], "run_at": "document_end" } ], "icons": { "16": "icons/a11y-css_16.png", "48": "icons/a11y-css_48.png", "128": "icons/a11y-css_128.png" }, "web_accessible_resources": [ { "resources": [ "icons/info.svg", "icons/ko.svg", "icons/ok.svg", "scripts/injected/*", "css/*" ], "matches": [ "*://*/*" ] } ]}

Download CRX(611KiB)

Similar Extensions

Alix for Chrome Extension · Developer Tools 2,000+ 7 ★ 124KiB

WAVE Evaluation Tool Extension · Accessibility 2,000+ 143 ★ 344KiB

Color Contrast Analyzer Extension · Accessibility 2,000+ 66 ★ 58.27KiB

HeadingsMap Extension · Developer Tools 2,000+ 70 ★ 575KiB

WCAG Color contrast checker Extension · Developer Tools 2,000+ 26 ★ 163KiB

Ostendo - l'Accessibilité des sites français Extension · Accessibility 2,000+ 7 ★ 397KiB

A11Y - Color blindness empathy test Extension · Accessibility 2,000+ 6 ★ 16.34KiB

axe DevTools - Web Accessibility Testing Extension · Accessibility 2,000+ 114 ★ 2.89MiB

Tanaguru webext Extension · Accessibility 2,000+ 1 ★ 1.03MiB

IBM Equal Access Accessibility Checker Extension · Developer Tools 2,000+ 16 ★ 29.19MiB

Assistant RGAA Extension · Developer Tools 2,000+ 7 ★ 2.46MiB

A11y quick check Extension · Accessibility 2,000+ 4 ★ 465KiB

A11Y HTML5 Validator Extension · Developer Tools 2,000+ 0 ★ 68.97KiB

ARC Toolkit Extension · Accessibility 2,000+ 24 ★ 645KiB

NerdeRegion Extension · Accessibility 2,000+ 0 ★ 63.61KiB

taba11y Extension · Developer Tools 2,000+ 15 ★ 205KiB

Visual ARIA Extension · Accessibility 2,000+ 4 ★ 314KiB

Orange Confort+ Extension · Accessibility 2,000+ 3 ★ 657KiB

ARIA DevTools Extension · Developer Tools 2,000+ 32 ★ 491KiB

Landmark Navigation via Keyboard or Pop-up Extension · Accessibility 2,000+ 9 ★ 67.37KiB

Siteimprove Accessibility Checker Extension · Accessibility 2,000+ 21 ★ 1.43MiB

Accessibility monitor Extension · Accessibility 2,000+ 0 ★ 96.89KiB

Accessibility Insights for Web Extension · Developer Tools 2,000+ 37 ★ 3.62MiB

GreenIT-Analysis Extension · Developer Tools 2,000+ 10 ★ 270KiB

User reviews

Jonathan PANSIOT (ID: 0000000db18fff60) Voted 5 ★ - Updated 08/31/2022 handy little tool for wcag audits

Lukasz Teranet (ID: 00000024012b8f31) Voted 5 ★ - Updated 05/05/2022 Great, except with the extension you have to toggle it a few times depending on what state you last left it in or you won't see anything.

Paul Stoute (ID: 000000485716b1e5) Voted 4 ★ - Updated 03/06/2021 This is a great effort and it tackles a good amount of details that are commonly missed but it doesn't (from our testing) account for color contrast issues and other commonly found issues when doing audits.

Mariia Parfeniuk (ID: 0000001c920cdac4) Voted 1 ★ - Updated 10/06/2020 Didn't work

Get source code (.Zip)

Drop .crx file here or click
the button to choose the file

a11y.css