WCAG accessibility during design and how it’s important

WCAG accessibility was created to offer standardized guidelines for developers to use when building a page. The standards were implemented to ensure accessibility for all people, regardless of ability or limitation. Accessibility does can be built into a page without sacrifice to design of the page.

There are a wide range of tools available to check for compatibility on a web page. Many of these tools can be run as plug-ins for a browser, allowing for continuous verification of meeting standards while testing a site during build out.

In 1973 the U.S. federal government enacted the Rehabilitation Act, legislation to ensure equal rights for people with disabilities. In 1998 the Rehabilitation Act was updated to require “…that when Federal agencies develop, procure, maintain, or use electronic and information technology,…” it will be compliant for accessibility for all users. In 2017, the Act was further refined to align it with WCAG standards.

Accessibility is of grave importance and it is easy to design without taking it into account. This isn’t done from willful maliciousness, rather it is a product of unintentional ignorance. Any public facing website must be accessible. There is precedent from the United States Supreme Court, upholding a verdict against Domino’s and stating that all websites need to be compliant for accessibility.

Coding with a mindset towards accessibility can become part of a holistic approach to design and coding of a page. During the design phase, if an image of text is supplied, determine whether the image might instead be recreated through HTML and CSS instead. For instance, this image is an image of text, using the same font as the rest of the page it appears on.

The image could have been designed with the leaf as an image and the rest as text. The image, being purely decorative, it would be given an empty alt attribute (alt=“”). The heading coloring and sizing and the centering of the block in its section, could have been coded in CSS. This would have created an out of the box accessibility for users of assistive technologies, like a screen reader. Instead, the page was implemented to use CSS to hide an element on the page that is just text that can be read by a screen reader, that has been pointed to it using accessibility tag aria-describedby in the img tag.

While the above solution can be achieved, the extra time to research and code the workaround solution could have been saved, while also ensuring the code is more easily maintainable. W3C has a list of tools available for testing that can be used during development to ensure accessibility, linked here.

Note: I cop to the fact that this page is far from fully accessible, which becomes a hypocrisy, and I felt pulled in too many directions to address and get this work done.

Leave a Reply