In a world where technology moves so quickly, i often catch myself wondering who gets left behind.

Advancing technology never sleeps, and waits for no one. It seems to progress so rapidly that before an idea has been perfected, or fully formed, we've moved onto the next thing. This leads to great innovation but leaves those at a disadvantage coughing up dust.

image source: tenor.com https://tenor.com/view/internship-vincevaughn-online-on-the-line-gif-9803864
image source: tenor.com https://tenor.com/view/internship-vincevaughn-online-on-the-line-gif-9803864

This idea also rings true "on the line" (excuse The Internship reference), in the development of websites. We are entering an era that attempts to put programming into the hands of the everyday user, who does not speak the language. Multiple tools are emerging that promise an intuitive interface and are focused on the usability for the inexperienced above the quality of code that is outputted.

Why does that matter?

The most common issue I've seen amongst these tools, is the lack of attention devoted to crafting proper HTML markup (the foundation used to display a webpage in a browser on any device).  Not only does markup rely on correct syntax but also understanding the relationship between objects and their hierarchy, which is often undervalued or overlooked.  Rather than building a solid foundation, many tools are building a basic foundation and injecting their modifications after the webpage has been rendered for the viewer, using methods that not all devices are equipped to handle. 

How does the website owner benefit?

Not only does efficient markup promote faster downloads and easier maintenance, it also increases the compatibility of updates and can reduce the cost of a redesign. Proper markup ensures that all website components are accessible by all users who need special devices or use a non-typical method of navigation. As an added benefit, the webpage will be optimized at its greatest potential for search engines (SEO) to index all the content correctly. 

Subscribe to The Grid

We'll send the freshest articles straight to your inbox, once a week.

Ontario law & regulations

Often the term AODA compliance is seen in association with website accessibility. The Accessibility for Ontarians with Disabilities Act (AODA) ensures that all Ontarians have suitable access to services, which includes defining website regulations we must adhere to.

https://www.ontario.ca/page/how-make-websites-accessible<br>https://www.w3.org/WAI/standards-guidelines/
https://www.ontario.ca/page/how-make-websites-accessible
https://www.w3.org/WAI/standards-guidelines/

"New public websites, significantly refreshed websites and any web content posted after January 1, 2012 must meet Web Content Accessibility Guidelines (WCAG) 2.0 Level A."

How do I ensure my website meets Ontario laws?

For a website to comply with Ontario's laws for accessibility, I have summarized steps to review and determine changes which should be implemented. 

VISUAL BY DESIGN:

Layout

Maintain a consistent layout throughout the website, with a logical structure of headlines (h1, h2, h3, h4), understanding the hierarchy of headlines are not based on style, but on the order of appearance.  

There should only be one main heading (h1), appearing before all other headings in the reading order and only once per page.

Content

Double check that the content is readable by providing sufficient colour contrasts, using an adequate font size (default 16px/pt) & appropriate line/letter spacing while taking caution using ALL CAPS as it can be difficult to read. 

Use true texts as often as possible and limit variations of fonts which can also slow down the performance of a website.

Links

Use more than color, underline links to distinguish them within the body copy. 

Focus indicators let the user know which link is currently targeted and ready to be selected, ensure they are visually identifiable. 

Consider including a "skip navigation" link in the design of the main menu. Avoid generalizing linked text such as "click here", instead be descriptive by clarifying where the link goes. 

Function

For animation, video & audio provide visible controls and abstain from using seisure-inducing flashes or blinking. 

Use more than colour alone to convey content where colour is detrimental for clarification. 

All forms should be designed with labels identifying fields, include instructions and logical error validation messages.

PROGRAMMATICALLY USING ONLINE RESOURCES:

There are several online tools to aid in assessing an existing website or a third-party theme which provides a demo. No tools are endorsed by The Accessibility for Ontarians with Disabilities Act (AODA) but some are provided as suggestions help determine areas for improvement. When choosing an accessibility tool, verify the evaluation is based on the Web Content Accessibility Guidelines (WCAG) 2.0 (at least Level A), which most are.

Online accessibility colour checkers:

https://webaim.org/resources/contrastchecker/
http://accessible-colors.com/ (colours only, font-size not applicable)
http://colorsafe.co/ (colour pallettes)

Overall accessibility of site content:

https://wave.webaim.org/ ( also provides browser add ons )
http://aodaonline.com (free & enterprise solutions, both require sign up)

Meet ups, Webinars & additional resources: 

https://accessontario.com/events (provided by Accessibilty Ontario)
https://www.w3.org/WAI/tips/writing/
https://www.w3.org/WAI/tips/designing/
https://www.w3.org/WAI/tips/developing/

Final Thoughts

Ensuring the accessibility of a website may appear to be a daunting task, I'm hoping this article brings awareness of the simple design elements which impact the usability of a webpage. Developing for accessibility in Ontario is required by law so if your hesitant about making changes, find a developer which is capable of assessing the current site and can determine if a custom solution can be added to the existing website. Recognize that a professional assessment will incur charges and building a custom solution may not be possible depending on the current build, so this may be the time to consider a redesign for a fresh new update.

At PaintedRobot we understand the laws of AODA (Accessibility for Ontarians with Disabilities Act) and will work with you to ensure your design meets guidelines while developing your client's website to fulfill Ontario's current requirements. 

Leave a Comment

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