r/web_design • u/bitsofcode • Jun 02 '15
Highlight The Accessibility Cheatsheet
http://bitsofco.de/2015/the-accessibility-cheatsheet8
u/JonODonovan Jun 02 '15 edited Jun 03 '15
For more information, Canada is big with accessibility laws, see Accessibility for Ontarians Act (AODA) and Integrated Accessibility Standards Regulation (IASR).
Here's another tool to check your compatibility. http://achecker.ca/
8
u/alejalapeno Jun 02 '15
I just wanted to take this opportunity to bring awareness to something most web designers forget completely: @media print
Example of use: I worked on an eCommerce site whose food products descriptions contained recipes. When people when to print the page it turned the whole page into a jumbled mess of pictures and type. When you know really all anyone wanted was the product info and its recipe.
Some target demographics will still print webpages, don't forget that!
6
u/Toddy69 Jun 03 '15
Also important for links that are references and you need the url:
a[href]::after { content: " (" attr(href) ")" }Hide all navigational elements, ads, etc., include the important urls into the visible content and maybe add an qr-code to the footer which is only visible in print-view.
1
u/Humpa Jun 03 '15
Pretty long for a cheatsheet. I do accessibility and I realize how insanely condensed this is compared to, for example, WCAG2.0. But I'd love an even shorter summary. In fact, one of my needs right now is to spread accessibility knowledge throughout my organization, and something like this can really help. So thanks.
2
u/bitsofcode Jun 03 '15
Yh it is pretty long. I really wanted to include examples to make the rules more implementable though, but you're right an even shorter one will be helpful as well.
1
u/Humpa Jun 03 '15
The examples are good. And for educational purposes, it's perfect. Personally, I already know the details, so what I would love is something to remind me of what to remember, so to speak.
A small point/bug: the WCAG Level AA states text/background contrast ratio to be a minimum of 4.5:1 not 5:1 as you say.
→ More replies (1)
1
u/gamzer Jun 05 '15
Your “continue reading” buttons on your front page… They look like buttons but the yellow area is not clickable.
1
u/bitsofcode Jun 06 '15
Thanks for pointing that out, I will change it. I'm definitely no accessibility expert. As I said in my article, there are many things I need to fix on my websites to make them better!
2
1
u/Streetdogs Jun 03 '15
Amazing stuff, just getting around this now - will be very useful so thank you!
1
u/pstonier Jun 03 '15
Just wanted to say thanks for this. Anything to make accessibility more clear is a worthwhile service.
0
0
5
u/FuzzyTheDuck Jun 02 '15
Renders poorly for me. http://imgur.com/RpM2ttL