In this article, we will discuss:
Have you ever read a book without a table of contents, indentations or proper usage of headings to differentiate the order of hierarchy? It would feel like reading a wall of text without knowing when the paragraph will end. Without an accessible web page, a person with a visual disability feels the same way when using a screen-reader like NVDA, JAWS. These screen readers follow Web Content Accessibility Guidelines (WCAG) with guidelines for developers to ensure web contents are accessible under four principles:
Information and user interface components must be presentable to users in ways they can perceive.
But how?
Where user interface components and navigation must be operable.
But how?
Information and the operation of user interface must be understandable.
But how?
Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies like NVDA, JAWS, or ChromeVox.
But how?
Note: Did you notice I structured and listed my paragraphs with numbers and bullet-points? If I removed all this formatting, you might still be able to read but it’s much harder to read.
An employee from Digital Equipment Corporation (DEC) was referred to as “S12n” because his last name, “Scherpenhuizen” was too long to be an account name. The use of such numeronyms became part of DEC corporate culture and followed by “i18n” for “Internationalization” and “k8s” for “Kubernetes”.
Accessibility is denoted as “a11y” because there are 11 letters between the “A” and “Y” in the word “Accessibility”, a pattern known as a Numeronym.
You can do this by using ARIA landmarks tags that allow you to add content in order as appear on the page. One of the easiest ARIA features to implement that provides significant immediate benefits to screen reader users, is landmark roles. To use them, simply add a relevant role attribute to an appropriate container within your HTML allowing screen reader users to quickly jump to that section of the page. Some widely used ARIA landmark roles are:
Be careful when you are adding a wide array of colors to make your web pages visually appealing because some peoples may perceive colors in unique ways. There are plenty of online tools you can use to find and test color combinations. WebAIM has one option. We also like Contrast Checker because it gives you a score in real-time. Do not use color alone to convey information. For example, use an asterisk in addition to red color to indicate required form fields, and use labels to distinguish areas on graphs. WARNING: You also want to avoid clashing colors that could cause eye-strain like this one.
Red and Pink are Different Colors; FALSE
In WCAG, when we say color, we refer to hue. Red and pink are the same hue with different lightness.
This is important because coding things in dark red and light green would be differentiable, even to someone with color blindness, in the same way dark red and light pink can be differentiated even when presented in black and white.
After having a comprehensive understanding of accessibility, you might want to check if a page is accessible by running audit tools. There are many accessibility audit tools like Dynomapper, A11Y Compliance Platform, and PayPal’s AATT (Automated Accessibility Testing Tool). One of my favorite and fastest tools is Chrome DevTools Audits.
The process is as simple as going to the URL you want to audit and click Audits tab within the DevTools after pressing CMD + Option + J (Mac) or Ctrl + Shift + J (Windows). Click HERE to read more.
All WCAG Success Criteria are written as testable criteria for objectively determining if content satisfies them. Testing the Success Criteria would involve a combination of automated testing and human evaluation. The content should be tested by those who understand how people with different types of disabilities use the Web. As a developer, we should try our best to enable our web content to be easily accessible by a wide range of people.
For more information on WCGA Techniques, you can check the links below.
Google Developers Accessibility Fundamentals
Mozilla Developer Network’s MDN Understanding the Web Content Accessibility Guidelines
Also Read: Web Accessibility: Designing an Accessible Color Palette
Sein Tun is a Software Engineer working at Crest Data Systems. He has varied software development experience utilizing modern technologies and frameworks like React, Redux, Node.js, JavaScript, Python, and Golang to build secure high-performance systems. Before joining Crest, Sein worked as Financial Banker and Assistant Manager for 3 years with JPMorgan Chase Bank excelling in customer experience, compliance, and team management. He is a proud alumnus of the University of California Riverside with a Bachelor of Science in Management Information System. He enjoys building applications that improve and make a difference in people’s lifestyles.
