Building a beautiful, responsive yet accessible website is simple but not always easy (part 1)

In Ontario the law states. Public sector organizations, businesses and non-profit organizations that have 50 plus employees:WCAG 2.0 Certified

  1. Starting from 2014 must ensure that any new public websites and web content conform with WCAG 2.0 Level A.
  2. And from 2021 all public websites and web content posted after January 1, 2012, must conform with WCAG 2.0 Level AA.

Ok, so first lets figure out what is WCAG 2.0 Level A and Level AA? WCAG stands for Web Content Accessibility Guidelines, and there are actually three levels A, AA and you guessed it AAA. The triple A Level is the highest level of accessibility. And here is an interesting part, following WCAG guidelines should make it easier for everyone to access your website, including people without disabilities because most of these guidelines are just good practices that a good web designer and web developer does anyway.

So lets summarize them a bit and give some examples:

  • Visual

    1. Provide text alternatives for non-text content. – supplying alt attributes on non decorative img elements
    2. Provide captions and other alternatives for multimedia. – you have a video on your website, thats great, now imagine somebody deaf or a client with a broken speaker, if your video is the only way for them to get them your information, you just missed them… So either you have text and video to let the user pick one or you would be well served to to provide captions on the video. And if you host your video on YouTube as many businesses do, YouTube makes it really easy to add captions.
    3. Create content that can be presented in different ways, including by assistive technologies, without losing meaning. – If you are building a responsive website, based on Twitter Bootstrap for example, you are already implementing this without realizing. If the only way for user to understand your information is to have it positioned in three visible columns what happens when the user zooms in on you content to the point that only one column fits on the screen? With responsive design as you probably know the columns would collapse. Your job is to make sure that the content still makes sense even if columns become rows.
    4. Make it easier for users to see and hear content. – This one would fail on probably over 90% of websites, if your links in the menu just change color from light blue to dark blue on hover, it might look visual enough for you, but for somebody slightly color blind there was no effect on the screen and he has no idea that he is indeed about to click on a link. So yes those old standard underlines under the links are coming back in style…
  • Functionality

    1. Make all functionality available just via keyboard (without use of mouse) – using a bit of jQuery you could make and pixel and of course a piece of text or an image into a link, but to the browser as long as its not inside an a tag its not a link, and because of this small {semantic} difference end user without a mouse will not be able to get to your link via tabbing on keyboard, and guess what that great review that was written about your company is not read because the user never found the link. (It could also have a negative effect on your Search Engine Rankings, as Google might just nog find a way to that deep page on your website with some important keywords.
    2. Give users enough time to read and use content. – Have a fancy slider on your website? Make sure it has a pause button so a user with a disability or just a slow reader could actually pause it read the text and decide when he is ready to see the next slide
    3. Do not use content that causes seizures. – this is not only annoying but is actually dangerous if you have one of those blinking advertising ***ATTENTION*** banners on your website you need to to make sure that the color and the speed doesn’t violate a threshold, no scratch that, just delete it PLEEEEAAAASEEE!!!
    4. Help users navigate and find content. – For a general user you website header that takes up half the screen is not a major obstacle as all it takes o get to content is a scroll of a mouse, but for some that luxury is not an option they try to get through your page by tabbing and arrows on their keyboard but to get to your main content they have to get through 50 links in the header and the main menu, imagine if it they went through 10 pages until they found the information they were looking for, at this point they have wasted 10 minutes on just getting to the text on those pages, the solution is simple, add a link at the top of each page that goes directly to the main content area
  • Obvious

    1. Make text readable and understandable. – imaging you have a light grey read more link on white background, you might have not one, but two problems
      1. Light grey on white doesn’t provide enough contrast
      2. The link has to be understandable without context, client using a screen reader has no idea what is that read more is all about, a possible solution is to provide more info in a hidden span only visible to screen readers
    2. Make content appear and operate in predictable ways. – A drop down menu that redirects you that new page as soon as you focus on an item is a bad idea since somebody going through the list via keyboard will never be able to get past the second item in the list before being redirected
    3. Help users avoid and correct mistakes. – If you have a form on your website with mandatory fields make sure to communicate it visually to the user, and no changing the border of the input field from black to red if something was missed is not enough.
  • Robust

    1. Maximize compatibility with current and future user tools. – All this really means is that you should have a properly written well formed HTML that follows W3C specs

As you see most of the examples cited are pretty straight forward and simple. So why did we say it wasn’t easy, sorry work is calling, will let you know in part 2.

, , , , , , , , , ,

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu