-
Notifications
You must be signed in to change notification settings - Fork 92
Usage
You can use a11y.css in multiple ways.
Thanks to @notabene, a webextension is available for both Chrome and Firefox. Check out a11y.css webextension's repository.
It provides some nice features not included in the main CSS file (for now), such as:
- force focus visibility;
- show lang attributes;
- check images' alternatives by displaying them;
- increase text spacings.
As a WebExtension, it also enables to:
- toggle CSS and change level on the fly,
- remember settings for each tab,
- automatically update in the background.
You can easily use the latest version of this stylesheet by adding this bookmarklet to your bookmarks:
javascript:(function(){a11ycss=document.createElement('LINK');a11ycss.href='https://rawgit.com/ffoodd/a11y.css/master/css/a11y-en.css';a11ycss.rel='stylesheet';a11ycss.media='all';document.body.appendChild(a11ycss);})();
You can use any of the compiled CSS files as a bookmarklet, to chose language and minimum level.
However, you'll need to refresh your page to get rid off this CSS…
CSP are awesome, but may prevent bookmarklets usage. Let’s be honest, in theory you should not update your CSP directives to allow bookmarklets.
However it appears that some browsers have bugs when implementing CSP, preventing us from simply use bookmarklets. Here are two directives you need to add, while waiting for browsers to fix their bugs:
script-src 'unsafe-inline'style-src https://rawgit.com/
And you should be good! If you want to know more about bugs I mentioned (and discover great resources to help you with CSP usage) I suggest you read issue #201 opened and documented by the awesome Nicolas Hoffmann.
You will find static CSS files in the /css folder.
CSS files are available in French, English, Spanish, Greek, Arabic, Portugese, Russian, Chinese and Polish — and leveled or full.
You can simply download it and add it to your usual stack, just like any CSS.
You may use a11y.css as any dependency, through npm:
npm install a11y.css
Or Yarn — or Bower if you're stuck in 2009.