Three Basic Guidelines To Effectively Create An Accessible Website

Jig
November 21, 2016

Making the websites more engaging and elevating web experiences are among a designer or a developer’s goals. Moreover, assuring that all users including people with disabilities have equal access to information and functionality should be one of those goals. This can be done by adhering to web content accessibility guidelines (WCAG), and evaluating a website’s conformance using web accessibility tools available online.

According to Wikipedia, there are various ways to test the site compliance depending on the needs that web accessibility aims to address:

With that, here are three basic guidelines to effectively create a website that is accessible by all, along with the tools that can be used for accessibility testing.

Have Sufficient Color Contrast

Design your website that provides sufficient color contrast to meet WCAG 2.0 AA standards and better readability. There are tools to help validate the color combination and one good example is the Color Contrast Analyser.

This tool can assess your color contrast against the accessibility standard success criteria. It displays a pass or fail message if the minimum requirements for contrast ratio are met. Also, it demonstrates how your web content appears to people with visual deficiency, including color-blindness and cataracts.

It is also important to check the color combinations used, and the selection of color palettes should be done during the early design stage.

Color Contrast Analyser Results

SC 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)  Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;As seen on the displayed result, it did not meet the minimum contrast ratio for visual presentation as stated on the following WCAG 2.0 Success Criteria (SC):

  • SC 1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)  Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1

Have a Semantic Web

Develop a semantic web to improve accessibility. This means that the layout and style of web pages  should be structured in a hierarchical manner. This is so that the assistive technology can understand and process the content and adapt it for the user. For instance, by using screen reader technology, it can “read” the contents of a page to the blind user. This can be done using chrome’s screen reader, ChromeVox.

This tool helps the developer validate if the information on the website is organized into a specific sequence by exploring it using the keyboard, and check if the contents provide meaningful or generic descriptions such as link list item, external links, and  the like.

Validate Web Accessibility

Validating website accessibility is checking if the website passed or failed against accessibility success criteria. It also provides guides on how you can improve your designs and implementations.

To start off, you can use the online tool SortSite.

SortSite will scan the first 10 pages of your site and evaluate them against the WCAG, section 508, and usability.gov guidelines, check  broken links, verify browser compatibility, and validate HTML and CSS. It also provides a summary report and a detailed breakdown of the issues and errors on your site.

According to their site “You can sign up for the online edition (runs on any device, first 30 days free) or download a 30 day trial of the desktop edition for Mac OS X and Windows. And scan over 10,000 pages”.

Sort Site Scan Result

Sort Site Scan Results 2nd Page

Conclusion

This is just the beginning of learning how to design and develop a website that conforms to web accessibility standards and guidelines. The above information are just among a few of the important things that need to be considered in making our websites accessible by all, especially people with disabilities.

References:

_____

Carry on a conversation with us through the comments below, or you can send a message or inquiry about our Accessibility and User Experience Design services for several industries.

Founded in 2003 by pioneers of the Philippine Global Sourcing industry, Pointwest creates value for its list of satisfied clients — including top Fortune 100 and local companies — with world-class IT and BPM services backed by international-standards methodologies and innovative practices.