All Things Bright and Accessible: The Importance of Accessibility in Web Development

Accessibility in Technology

Dictionary.com defines technology as

the branch of knowledge that deals with the creation and use of technical means and their interrelation with life, society, and the environment, drawing upon such subjects as industrial arts, engineering, applied science, and pure science.

By this definition alone we can say that technology plays a big part in people's lives, particularly in making people's lives easier or better. In fact, the earliest technological development involved the invention of stone tools in the prehistoric era, which helped with building houses, farming, and cooking. In the next centuries after that, a lot more will be invented and will change the world: the wheel, the compass, the printing press, the telephone, and many more.

Among these inventions are those that specifically cater to people with disabilities. The wheelchair helped people navigate around on their own, hearing aids helped people hear better, the braille system helped people read through tactile means instead of visuals.

The Rise of the Internet: e-Services for Everyone

The dot-com bubble in the late 90s allowed for massive growth in internet-based companies such as Amazon, Qualcomm, and Cisco. Over the decades, many more websites and companies were born to provide services such as online shopping, video streaming, communication & sharing, and online collaboration among other things. This made people’s lives easier in many ways: people can now get an education without having to leave their homes, they can connect and communicate with their loved ones instantaneously, they can shop for things they need without having to go to the mall for it, etc.

A lot of people have no doubt benefitted from various services that internet-based companies offer, but for the minority this may not be the case. There are cases where a website may be completely accessible to abled people while also being inaccessible to people with disabilities. Inaccessibility can come in many different forms, like the following:

• insufficient color contrast, 
• font sizes that are too small, or
• images with insufficient caption or alternative text

In this article, we will take a look at what website accessibility looks like and why it is important.

Web Accessibility: What Does It Look Like?

Most front-end developers who are early into their career, especially self-taught developers, often have little to no idea about web accessibility and how to incorporate it into web development. Most online tutorials don’t bother to explain what it is.

Web accessibility basically refers to how accessible a website or web application is to all groups of people, regardless of ability and/or disability. Web accessibility ensures that the services offered by a website caters to each and every single one of their target audience or customer. For more general businesses like e-Commerce websites offering a wide variety of products, it can be expected that a portion of the customers will be people with disabilities. These customers will often use assistive technology to navigate through the website.

An example of assistive technology is a screen reader which reads out text seen on screen, some examples of screen readers are 

• NVDA by NV Access
• JAWS by Freedom Scientific
• VoiceOver for macOS and iOS
• Narrator for Windows 
• ChromeVox for Chromebook and Chrome OS
• TalkBack for Android

These screen readers will typically read out content on a webpage, announcing titles, image captions or alternative texts, or when a piece of text is also a link. So in cases when a website does not meet the essential accessibility guidelines, assistive technologies like screen readers may not be able to do its job properly, resulting in inaccessibility from the user’s end.

There are laws in place to ensure that websites are accessible, like the Americans with Disabilities Act (ADA) in the United States. However, even without the presence of these laws, developers and businesses alike must strive to make accessibility a priority instead of an aside.

The Little Things Matter: Semantics & Accessibility

HTML5 was introduced in 2008, an update which included semantic or landmark elements such as <main>, <header>, <nav>, and <footer> among others. These may seem like unnecessary additions at first—after all, the <div> tag can be used in place of these landmarks without noticeable change in the webpage—but aside from its goal to increase the semantics of an HTML document, these landmark elements also serve as indicators for assistive technologies to tell them what kind of content can be expected in the document. 

In particular, the following describes the uses of the aforementioned landmarks:

• <main> is the most important of the landmarks, and should contain the main content of the page. The main landmark should typically be present in all pages.
• <header> usually contains the logo, banner, and navigation of the website.
• <nav> contains the main navigation of the website, typically within the header landmark.
• <footer> usually contains copyright information and other related links

These elements also come with built-in functionality that helps with accessibility, especially in improving navigation throughout the page. Screen readers will use this information to allow users to jump to specific areas of the page, whether it be the main content, the main navigation, or the footer.

Another example of accessibility benefits when using proper semantic elements is when linking to another page or document, the developer should use the anchor element <a> so that screen readers can announce that this is a link and so that it can be navigable via keyboard. If we were to use a different element, say <span> with a click event handler, the link would have been inaccessible via keyboard unless we add a tabindex attribute to the element, and the screen reader may not announce that this element is even clickable.

This brings us to our next point:

If It Ain't Broke, Don't Fix It: Native HTML Elements

It’s good practice to always use native HTML elements where possible, instead of engineering a new custom element that does basically the same thing. Aside from its benefits on accessibility, it is also better on mobile and good for SEO.

A few reasons for not using native HTML elements would be if one were working with legacy code or website, but even so developers should strive to use native and semantic HTML elements as much as possible. Some developers also prefer to build custom elements so that they may achieve their desired design for the element—as of writing, some native elements like <select> are widely uncustomizable. In these cases, it is expected that the custom element should behave similarly to the native element it is modeled after, i.e. the keyboard functionality of the custom element should match that of the native element and screen readers should be able to recognize this custom element for what it is.

And Beyond: Resources to Learn About Web Accessibility

The Web Content Accessibility Guidelines (WCAG) by the World Wide Web Consortium (W3C) is mostly recognized to be the guideline to follow when it comes to web accessibility, and most laws regarding web accessibility refer to this document as well. 

To learn more about web accessibility, you can visit any of the following sites:

1. The A11Y Project
2. Deque
3. WebAIM
4. MDN