Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

6 Steps for a More Accessible Web

DZone's Guide to

6 Steps for a More Accessible Web

Developers are responsible for making sure everyone can access and navigate their site. Read on for some great accessibility tips from a seasoned web dev.

· Web Dev Zone ·
Free Resource

Building real-time chat? Enroll in a Free Course on Mobile Chat Development. 

Introduction

Imagine a brand new public access library is being built in your city. Everyone is invited to the opening day ceremony and there is a great atmosphere.

Everyone is cheering as the building opens to the public for the first time. Then you notice that there’s a set of a few steps you must climb up to get inside the building. Normally it wouldn’t be such a big deal but you happen to have broken your foot last week while playing a soccer match and you’re still in a cast.

Now, with a lot of effort, you can climb up the stairs but you’re upset because there really should be an elevator to allow you easy access. There’s no way you were getting in if you were in a wheelchair!

Now that wouldn’t happen in the real world, which is governed by laws which fortunately enforce the requirement for easy access to people with disabilities.

However, the digital world is much younger, and not as evolved just yet. In a way, it’s a wild wild west when it comes to rules or regulations. It’s a free for all. There are no laws forcing developers to make their apps and websites accessible to anyone.

I am not suggesting that there should be laws introduced telling programmers how to work. What I’m suggesting is that you, the developer, should occasionally put yourself in the shoes of a person with a motor or visual disability and try to navigate your own product.

In a quest to make the web a more accessible place with fewer barriers, I’ve prepared a short, and most certainly not definitive, list of things you can do to ensure your website is slightly more accessible. And if I convinced you to dig a little deeper, in the conclusion you can find a link that will give you more in-depth knowledge on how to make your digital products accessible to a wider range of potential customers.

Suggestions

  1. Provide text alternatives for non-text content (e.g. images): All the images you attach to your website should make use of the alt HTML tag, in which you describe the contents of the image in plain English. Try to be as descriptive as possible. Any blind person visiting your site will appreciate it. Here’s an example:

Cute, grinning Yorkshire Terrier sitting in front of a green tennis ball.

<img src="max.jpeg" alt="Cute, grinning Yorkshire Terrier sitting in front of a green tennis ball.">

2. Handle text size adjustment gracefully: Anyone who is visually impaired will have to zoom in to see the content of your website. You do not want this to happen:

Zoomed in website with overlapping and illegible text.

What you do want is the following, and it can be achieved by properly designing your website.

Zoomed in website with clear layout.

Make sure you use em units for specifying the height of text instead of absolute units (px or pt) which will allow for correct text proportions when a user increases the text size on your website.

3. Do not use images for text (e.g. in logos): Images of text do not allow for correct scaling/zooming, therefore, you should always use actual text and then style it correctly by applying CSS style (font, color, weight, etc). And do not forget about the alt tag.

4. Test for Keyboard Compatibility: Whether someone has a broken mouse, broken arm, or permanent physical disability, they should be able to navigate your website using the keyboard. For example, pressing tab should allow you to navigate between the links and form elements. Test your website now and see if all parts of your website are easily accessible using the keyboard only. If you use labels for all your input elements your forms will be straightforward to navigate.

5. Provide transcripts for media used on your site: Just as images aren’t available for people who can’t see, audio is not available for people who can’t hear. Therefore, whenever you attach audio or video to your website, a text transcript should also be included.

6. Contrast ratio: This one is common sense, but make sure the contrast between your text and the background is rather high. Nobody likes to squint their eyes to read light grey text on a white background.

Conclusion

There are 39 million blind people in the world and they like to surf the web just as much as you. Let’s try and make our products more accessible for all. You can learn more on the World Wide Web’s Consortiums website (W3C).

Power realtime chat, IoT and messaging apps at scale. Pubsub realtime messaging, functions, chat, presence, push, notifications, blocks catalog and more.

Topics:
web accessibility ,accessibility testing ,web dev ,web application development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}