DEV Community

loading...
Cover image for  What is  Web Accessibility and why it is important?

What is Web Accessibility and why it is important?

Ricardo Moreira
Creating good stuff 🖥️🍃 Coding ⌨️ Food 🥘Entrepreneurship 📚 https://twitter.com/mugas11
Originally published at gscreations.io ・5 min read

Have you heard about accessibility in websites and apps and why it’s important? So what is accessibility?
Accessibility as generally speaking can be defined as making your workplace, city, the public building where you work accessible to as many people as possible no matter what is their disability.

Does your favorite restaurant have a ramp for a wheelchair? Has the city hall building text in braille? Are people with disabilities given the same chances to work as a person with no disability?
That is accessibility in the world, right?

On the web, it works the same way. Accessibility on the web is how well prepared your website/app is for a person with a disability ( we will focus on main points on the next topic). Can a person with any disability access the website and have access to the same information as a person with no disability with the same amount of work?

If you are thinking that not many people with disabilities go to your website, think again -

"Over 1 billion people in the world live with some form of disability (around 15% of the population)”

The important thing to retain is that accessibility is having the content of your website available to anyone.
Many websites are still not improved for accessibility but every day more, developers consider that and hopefully also entrepreneurs when they decide that want a website for their business.
When it comes to the public sector, in Europe since 2016 all apps and websites are required to have an accessibility statement for each website and provide people with disabilities better access to the website.
Ok, so now that we know that accessibility is important we need to check…

How it is applied

Where and how you apply accessibility standards on your website? For example, if you go to any website can you navigate through the main points of the website without touching your mouse, using only the tab button?

That is an example of how accessibility can be applied to a website.

The accessibility topics list would be long if I would explain it all. No matter how much I am learning about this subject, there is still much more for me to learn and discover.

There are tough main topics that need to be followed when it comes to accessibility.

I will talk slightly about the most important:

  • Color choice

The color pallet of your website that you choose can be difficult to understand for many people. So it’s important to choose colors that provide maximum contrast. So between background color and text try to give enough contrast and choose colors that can be easy to read.

  • Link Style

Links should explain what the link you are pressing is about. A link saying “click here” doesn’t help much. If you use an image as a link, works the same. That image has to have an alternative text explaining what that link does.

  • Buttons

One feature that almost every website has, is buttons. And many of them when they are created, for stylish purposes, are not developed as buttons in the HTML. Therefore when a person is using the screen reader to access the website and is passing that "button", because was not created as a button, the screen reader would not say it’s a button.

The solution would be or create the button as a button, or in the case, that this is not possible ( it’s almost always is), give a role to the element created as a button.

  • Form

Almost every website has a form no matter if it's in for contact or subscription they are really important. 

Consequently, when building the form, every input should have a label for the user to know what the input is for. When grouping more than one form element, you should also label that group.

If you use checkboxes or radio buttons, tag them as what they are.

  • Alternatives

When building a website use the “alt” text on an image. So you have an image on your website, but if a person with blindness or some vision disability goes to your website might not see the image, so images must have an alternative text to it, for these cases. The same goes for audio or video content. They also need an alternative.

But accessibility is not only made for people with disability. In fact...

Accessibility for all

Let's give the example of a vision disability, it's important to reiterate that we're not only talking about people that are blind but also people that are visually impaired (e.g. low vision or color blind). The same goes for people with motor/cognitive disabilities, etc.

For example, carpal tunnel affects many people and it might not be your first thought when thinking of disability but the fact is that someone with carpal tunnel will be accessing your website mostly with the keyboard only, so is your website prepared? 

Therefore temporary disabilities should also be taken into consideration.

Even that you don’t have any disability when going to a website and if for some reason the image doesn’t load, you don’t know what is there. But if you have an alt text on it, even that the image would not show up, there will be the text about that image.

Another example is people that have a small phone with a small screen, they deserve as much to access your website as someone with a big mobile (this was also covered in last week post).

We only now need to discover about...

How it can improve the SEO

Even that you think that is a lot of work for a small website (that is not), what if I tell you that having 

a website accessible improves SEO and of course, good performance of your website leads to more clients finding you online.

 "Alt" text we talked a coupled of times here but the truth is one main topic of good SEO is having alt text on all images. The same goes for video

Using page titles and headings to define your pages. That also is accessibility has helped people with some disability know what the page they are is about.

Anchor links are also important both for SEO and for accessibility as help the user and Google 😊 know what link it is and where it leads. 

Great now if you want to know more here are some...

Links

Below are some links to test the accessibility of a website and as well know more about it.

Hope after this I may have reached someone to have another approach about accessibility on the web. Next week will be my last post for this series and will focus on SEO.

If you want to know more and follow my next projects and topics to talk about, follow me on Twitter and feel free to contact me with any questions, comments, or anything.

Discussion (0)