Read the Blog

What is web accessibility and why is it important to developers?

Before we dive into what web accessibility is, we should first understand what the word ‘Accessibility’ entails.

From my knowledge, “Accessibility means the ability of everyone regardless of their condition to have access to something (e.g internet, transport system).”

Wikipedia says, “ Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities.”

So we could eventually say that Web Accessibility is a way to make everyone including the disabled have access to the web and internet as a whole.

what is web accessibility?

To put it differently, we could also say:

Web accessibility means that people with disabilities can use the Web.

At the end of the day, we can conclude that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefit those with temporary or conditional disabilities which in some cases maybe aging, slow internet connection, broken arm, etc..

In general I would say web accessibility is basically the idea to build stuff that just works for everybody.

Like When I take myself as an example, I’m a completely able person that can hear everything, can control websites with a mouse and can see everything. This becomes harder for people that are maybe blind or cannot hear properly. And

And why is it needed?

Well, I think the web is a pretty cool place and everybody should be able to use it.

The state of web accessibility today is not perfect yet. But I think we’re getting better. When I started entering the web industry, basically not a lot of people cared about web accessibility. But now, companies like Google and Microsoft release tools that always include an accessibility score.

So, how do you build an accessible product today?
You have to have certain knowledge on how to build stuff for the web. But building accessible products very often boils down to using the stuff that the web is built upon anyway. A lot of time people just misuse or make some nasty thing with technology to make it look pretty, which then harms accessibility.

I personally believe that making things accessible is definitely not a waste of money and time. Because when you start caring about accessible products, you will discover that when your product is accessible it will be a better product at the end anyway.

And this can start with the contrast ratio! A really famous example is that —  a lot of people today — well, I have this really subtle color differentiation that looks fancy but might not be visible to everybody. I think I have pretty good sight, but it won’t be visible to me when I sit in the sunlight!

Another example: alt text for images. A lot of people don’t set these, but having an alt text — a good alt text describing what is visible in an image — makes a huge difference for people that use this technology.

So accessible products are better products by default. And that’s why I believe we should all invest in web accessibility.

To check if your product is accessible, you can use tools that are out there. Microsoft and Google are pushing their tools: for example, Lighthouse or Webhint. They give you technical information about what state your website is in.
In addition to that, there’s the WCAG guidelines, which is a specification for what you have to do to build accessible stuff, and there are online checks for this too.

Making the web accessible depends on the developers building for the web. Making your website accessible to people with disabilities, will end up making it accessible to everyone.

The alt-tag or alternative (alt) html attribute is basically used to describe an image. In HTML, it looks the same thing like this:

<img src =”image-location” alt=”this is where your image description goes”>

Even if you are using a visual tool that hides your HTML code to build website, you will always have a chance to enter an image description.

Of course the (alt=” “) can be empty but it would be better to give each a helpful description for screen readers. Assuming you were blind, what would you need to know about the image? “Woman” isn’t much help, but maybe “Woman drawing design flow chart including accessibility, usability, branding, and design” with the use of screen readers would be better

You should add captions to your tables using the caption tag in order to make them easier to understand by screen readers rather than just making the title of a table in bold text.

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>  
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

You should also add the “scope” element and neatly label new rows and columns in your table as seen above so that screen readers don’t simply rattle off a series of table cells without giving any context.

By default anything you put on your website should be something that could be conceivably carried out using a keyboard only. Which means you shouldn’t mess with your navigation buttons. For instance don’t animate navigation buttons as dropdown buttons if you can’t use them with a screen reader.

Please for web accessibility, don’t mess with the default html tags. Use buttons for buttons not anchors for buttons. To make anchors work the same way as buttons you need to add additional javascript event which is a very dumb approach when you could easily use the normal naked button. Use buttons for buttons, anchors for links, “table, tbody, td, th” for tables, “h1, h2, h3, …” for titles and so on.

Messing up with them will confuse screen readers entirely because all screen readers follows a particular way to read the elements on a web page.

The videos or audio elements on your website, should have captions. Closed captions are very useful not only for accessibility (permanently and temporarily disabled users) but also for users who may be using your website somewhere where they can’t play audio, such as in an office or in a noisy location.

Consider providing a text transcript for podcasts or other audio elements. The text transcript will not only make it easier for Google and other search engines to index the content and help your Google ranking, but also useful for people who can’t listen to the audio.

Having captions on your media files will make it accessible to disabled users which will eventually be accessible by everyone.

ARIA has a set of special accessibility HTML attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines a specific role for type of object (such as an article, alert, slider or a button). Additional ARIA attributes provide other useful properties, such as a description for a form or the current width of a progress bar. ARIA attributes can also be used to specify active or disabled state for objects(especially buttons).

Browsers don’t always display the HTML title tag in the webpage body, but it is helpful for screen readers and tabs title. So ensure each of your website’s pages has a descriptive but short title that tells visitors what the page is all about.

Web Accessibility Tools

Here are some online website accessibility checking tools that you can use to check and validate your website’s compliance to accessibility:

  1. A11Y Compliance Platform by Bureau of Internet Accessibility
  2. Accessibility Checklist by Elsevier
  3. Accessibility Developer Tools by Google Accessibility
  4. ColorTester by Alfasado Inc.
  5. Contrast-Finder by Tanaguru
  6. DYNO Mapper by Indigo Design Company LLC
  7. WAVE by WebAIM

You can also use accessiBe, a web accessibility solution that uses AI to make websites fully compliant according to all of the aforementioned regulations. You should check that out.

Conclusion

Always have web accessibility at the back of your mind when building a website. That is ensure you are building for everyone that have access to the web.

But for accessibility you always have to keep in mind that there can never be one tool that gives you all the hints. Because very often it is not easy to figure out if something is accessible or not, and people have to check by themselves.

So, the guidance here is:

  • Use a tool to get a quick overview;
  • Get a green score there;
  • And then jus test, test it yourself,
  • And look for certain use cases or certain people with certain disabilities, and check if it’s still usable for them.

So I think we’re on a good track here and people care more about building good products that just work, and hopefully in the future everybody knows and cares about building accessible products! »

This website uses cookies to ensure you get the best experience on our website.

This website uses cookies to ensure you get the best experience on our website.

This website uses cookies to ensure you get the best experience on our website.