Hi Everyone.
I have a client who I have already build a website for in 2015. Both the client and myself are happy with the final results, but we need to update the website to make it compliant with the AODA (Accessibility For Ontarian’s With Disability Act). Basically it has to do with people with disabilities and their ability to access our website. The project will require Level AA eventually.
The current website is built with Foundation. Joe has already pointed me in the direct of a few Stacks that can help me. If anyone out there knows of any stacks that I could use to help with any of this criteria It would be greatly appreciated.
The website in question is www.simcoeparts.com
There are three levels of compliance – A, AA and AAA. Here’s the differentiation between them:
Level A
- Everything needs to be either HTML text, or have a descriptive Alt tag (which is text associated with the image). This will make a difference for buttons – they can’t be graphics anymore.
- Colour cannot be the only way function is determined. For examples, links should be underlined on hover as well as a separate colour).
- Visual or sound cues should not be necessary to continue.
- Form fields need to be clearly labelled. Captchas have to be visually-impaired friendly.
- For any audio or video, alternative content (like a text summary) is provided. Videos need to be closed-captioned.
- Tables are not used for site layout, and any tables in the content are understandable from top to bottom, left to right (see below for examples).
- The site is understandable if narrated from top to bottom, left to right. Content in template columns is OK, for example if your page has a main column plus a separate column for the side navigation.
- Any audio or automatically updating or scrolling content (like banner sliders) can be paused or (where applicable) muted.
- A visually impaired person needs to be able to press the Tab key on their keyboard in order to get through a page.
- A “skip to content” link needs to be added at the start of the header so that people can bypass the main site navigation if they want.
- Don’t randomly change the page in ways that could confuse the user. If clicking on a link results in a change like a popup window, you need to inform the user ahead of time.
- Forms need to help users avoid and correct mistakes. This will mean descriptive label and validation that guides the user to the issue and make it really clear what the problem is.
Level AA
- All requirements for A plus:
- Colour contrast ratio between text and anything else is 4.5 to 1 or better
- There is a way to increase the text size, and the page doesn’t break when this happens (although it generally does not look great).
- No information the user needs is embedded in text – in other words all images are strictly decorative.
- There are multiple ways to find content, like site searches, site maps, and breadcrumbs. You can’t just have the main and side navigation.
- All legal or financial data submitted by the user can be changed or deleted.
Level AAA
- All requirements for A plus:
- All videos have sign language content.
- Text has a contrast ratio of 7:1.
- There are restrictions on how text content (80 characters or more) can be presented – for example it cannot be fully justified, line spacing has to conform to requirements, etc.
- No content is timing-dependant.
- Nothing flashes more than 3 times.
- Content on the page is organized with headings and subheadings (a good practice anyway).
- Any text that is not understandable by someone with 9 years of primary education has an understandable alternative or definition adjacent to it.
- The user can prevent any content changes like pop up, and if enabled, they can control them.
Thanks Everyone!