Web accessibility or eAccessibility is the practice of ensuring there are no barriers preventing access to or interaction with web sites and applications by people with physical disabilities, situational restrictions, and even limitations on bandwidth or speed. Inclusivity continues to become increasingly important, and as a result, standards are being developed and regulations put in place to protect and improve on these practices.

The Web Content Accessibility Guidelines (WCAG) are part of a series of accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium. These guidelines help developers like you and I to create web sites and applications that are accessible to everyone.

WCAG includes guidelines for things like color contrast between elements and their backgrounds, color contrast between elements of the same time, labels and other attributes to improve usage with screen readers, as well as guidelines for allowing users to zoom in on their browser window and use only a keyboard to navigate and interact with web sites.

Why Care About Accessibility?

The first reason here is because it's important to make sure we are being inclusive when we design digital products. The same way it's important to provide wheelchair access to important buildings, it's important to implement practices in our designs to ensure the ability of everyone to access these products. Not only is it the 'right' thing to do, but obviously the bigger your audience of potential users, the better. Also, as if all of that isn't enough, accessibility is a legal requirement.

According to the Americans with Disabilities Act (ADA), all public areas must accommodate people with disabilities which includes your website. Now I'm no lawyer so I have no idea how serious this can actually get, but just the idea of facing potential legal action because I thought accessibility was just not that important seems a bit silly.

How to Improve Accessibility

There are many ways to improve accessibility within your application. One of the most commonly known ways is to add the 'altText' attribute to image elements to provide a description and function of the image on the page. This is similar to the aria-label attributes and other ARIA (Accessible Rich Internet Applications) properties.

ARIA properties are a set of roles and attributes that define ways to make web pages (especially those developed with JavaScript) more accessible to people with disabilities. This includes things like labels and roles that make it easier for screen readers to tell the user about everything on the page. Another commonly know method is using semantic HTML.

Semantic HTML is use of HTML markup to reinforce the meaning of the information on web sites and web applications instead of just using it to define its appearance. This means instead of using a paragraph element tag (p) for all the text on the page, you would use header tags (h1, h2, h3, ...) for headings. This allows screen readers to better read your web page and, as a result, increases your SEO as well. Best practice is to focus on using semantic HTML to improve accessibility, and use aria as a tool only when needed. This is because adding aria attributes can be a lot of work which shifts around based on rule changes making semantic HTML the more stable option.

Keeping accessibility in the front of your mind when creating the CSS files can also make big improvements to accessibility of a website. Within the styles of the elements, ensure the text is large enough, the font style is not difficult to read, and the color/contrast of the elements make seeing them easy. So what about JavaScript?

We CANNOT forget JavaScript, mainly because there is so much going on in JavaScript for most applications. Not only can you add markup to the DOM and change/create/remove styles, but JS also handles the event listeners. This one is tricky and hard to remember as well because most developers use a mouse along with their keyboard. However, users that can't use a mouse will still need to access your web site, so make sure when adding click events, you are also adding keydown events for keyboard only access.

How to Test Accessibility

Full disclosure, I only really started to learn accessibility a couple weeks ago. I have known about it, and kind of tried to make my sites more accessible, but when you really start to dive into everything that is involved it can be a bit overwhelming. Trying to get familiar with all the guidelines and remember all the techniques and methods seems impossible. The good news is, with all the guidelines and regulation comes testing methods.

There are browser extensions like Accessibility Insights that can provide a quick rundown of your web page and provide a live report of all the issues found on it based on accessibility standards. Another great tool for testing accessibility is screen readers. Get one and use it on each page of your site to ensure that it works well. Any time it misses something or reads something incorrectly, you know you have to fix it. Finally, for all the keyboard only users, navigate and interact with you site using only your keyboard. This will give you a good feel for any issues that may arise from only using a keyboard on your site.

TLDR

Digital accessibility is incredibly important and is only continuing to become even more important. Don't make the mistake of thinking it doesn't apply to you. There are many standards and guidelines that serve to help developers and engineers make sure everyone can access their digital products and services. There are also many methods and techniques used by developers to improve accessibility and test the accessibility of their products. Let's make the world a better place... and keep your company out of trouble! :)