The Universal Web. Why a11y Can Make a Huge Difference

Alexandru Răescu
April 6 6 min read
The Universal Web - Why a11y Can Make a Huge Difference

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.‘ – Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The Web is designed to work for and be used by all people, regardless of language, location or ability. One of the cool things about the web is that it removes any limitations of communication. However, when websites are badly designed, instead of removing barriers, it can do the opposite – it can create impracticalities that exclude people from using the WWW. 

What Is Web Accessibility (a11y)

Wiki would say that accessibility is all about an inclusive practice through which we make sure that no limitations prevent access to the holy WWW by people of all capabilities, regardless of their socio-economic status, the country they’re from or the political regime. 

To put it plainly, web accessibility means that all the people, including the one with disabilities (or temporary disabilities) should be able to use the Web. At the end of the day, we can conclude that people with disabilities can understand, use and interact with the Web.

According to the Disability Status: 2019 – Census 2019 Brief approximately 20% of Americans have one or more diagnosed psychological or physical disability.

Of course, not all disabilities make it difficult for people to use the Web, but what really matters is that anyone creating online content should understand how their audience accesses their interfaces and information. 

Inclusion for People of All Abilities

It is a popular belief that accessibility is about visually impaired users, but there are many more disabilities and situations where they apply. 

This includes those with:

  • Blindness or impaired vision
  • Deafness or impaired hearing
  • Motor difficulties
  • Learning disabilities

By today’s standards, a slow Internet connection can be considered a conditional/ situational disability. In a perpetually connected world, you’re always a step behind if your Internet access doesn’t allow you to access information at top speed and quality.

Why Accessibility Is Important

The WWW is a vital resource in almost every aspect of our life. Starting with education, going forward to employment, government to day-to-day needs like commerce, health care, recreation and many more. It’s a must to create accessible web pages in order to provide equal access and equal opportunity to people with disabilities. 

Putting aside the greater good, there is also the fact that the Internet facilitates communication between businesses and people who suffer from a disability. On your journey to make a website more accessible, you will follow some best practices associated with web design (e.g. font size, contrast ratio), usability, user experience and SEO. It’s a triple win.

All business owners should take a note of their entire viewership. 

Why Is It Good for Business?

Legal Reasons 

You don’t have to work in digital, but I’m sure you’ve at least heard of the Domino’s accessibility case from 2019

The case of Domino’s in October 2019 served as a turning point when The U.S. Supreme Court ruled in favor of Guillermo Robles and stated that ‘any digital platform which is tied to a physical location providing goods or services should also comply with accessibility standards’.

Freely speaking, this means that there can be serious legal repercussions for businesses that aren’t accessibility-compliant.

Reputation

Besides the legal implications with the new accessibility ruling, good accessibility practices can have a positive impact on your business reputation. 

If you make an effort to make your web app accessible to all the customers and users, it will make your brand stand out (not in just the eyes of the users that directly benefit from it, but also those who value social impact). Imagine just the potential of growth for a business that wins the esteem of the biggest proportion of the global consumer base: Millennials and Generation Z.

As a business, these are the customers you would like to have by your side, since these customers are the ones that are most likely to abandon a brand due to exposed bad practices. The era of cancelled people and businesses makes all the more difficult to get away with bad practices, and the social aspect of reputation is held to a different standard compared to what it was 10 years ago. 

It’s the Right Thing to Do

Building apps that are accessible is the right thing to do! Just like you would offer your seat for an elderly person, you would want the same for everyone who enters your digital environment

But we’re not living in a ‘happy happy, joy joy world’, and if you’re not doing it for ethical reasons, think about how it can affect your business. Preventing users/customers from placing an order or using your service would be the near equivalent to shooting yourself in the foot. 

How to Make Web Accessible

Image With Text Loading Accessibility

Write Meaningful HTML

Use default html tags. Use buttons for buttons, tables for table, h1,h2,h3 for titles. Not using the right tags will just confuse the screen reader since most of them use a particular way to read the elements on a page. Structural, semantic HTML is the key starting point toward good accessibility practices. HTML5 introduced a bunch of new semantic elements.

Use Alt-Tags

The alt-tag (alt) html attribute is used to describe an image. In HTML it looks something like:
<img src =”image-location” alt=”this is where your image description goes”>

Using Alt Text for Different Purposes

Of course, the alt tag can  be empty (alt=””) but I recommend that it would be better to provide a meaningful description of the image. Assume your readership were blind, and the screen reader encounters an image of a car. What would they need to know about this image? “Car” does not help much, but maybe “Green car produced by Ford starting 2008” would be better. Try to be concise in your description.

Keyboard Navigation

By default anything on a website should be easily reached using a keyboard only. Check if you do not have extra tab stops and if the active element is highlighted in a way or another.

Use Aria Tag

According to MDN:
‘Accessible Rich Internet Applications (ARIA) is a simple set of HTML attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities. For instance, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.’

Aria Tag On Code

ARIA has a set of specially designed HTML attributes, which can be added to any markup. The role attribute defines a main role for an element (button, article, alert, slider, etc.) and additional ARIA attributes can be used to provide other useful properties, like description for a form, is expanded for a dropdown, etc.

 Use Title Tag

Ensure that each of your pages has a descriptive but short title that tells the end user what the page is all about. Even though it is not displayed it is useful for screen readers and tabs title to inform the user on what page they are and it avoids extra frustration and confusion.

Web Accessibility Tools

Here are a few accessibility tools I recommend yo check and validate your website’s compliance of accessibility:

Conclusion

Always take accessibility in consideration when building a website. Make sure you’re building for everyone that has access to the web. 

More and more, good business practices and reputation go hand in hand. What would have been optional some years ago is now under close scrutiny from tech-savvy, digitally native users who have a comprehensive understanding of the WWW and can judge for themselves whether a company is in it for the money alone or it employs responsible practices every step of the journey.