Introduction

Early this year, a friend asked me if there was a way to make more people know and use his website. All he wants is to improve his website accessibility. I told him I’d help, and the dude gave me the job.

This article will talk about my experience from the project, the problems I encountered, and how I was able to fix them.

Accessibility Problems and Solutions

Semantic tags

I discovered that the headings, footer, and sections on the page were written with <div> and <p>. This is an awful practice. I added the <h1> tag for the heading of the hero section of the website and used <p> it for the description. However, I used the <main> tag for the container of that section. I removed the <div> in the footer section and added the <footer> tag. The website has an article section that talks about the services offered. Rather than sticking with the <div> tag, I changed it to the <article> tag.

Alt text

I noticed that the images on the website had no alternative texts that screen readers could read aloud. To correct this, I used the <img alt=""> attribute to add the image's description. This will ensure that screen readers say loud the alt text for blind people.

Video captions

There was a video on the website; this video has no caption. I decided to use the <track> tag to add the subtitle file. After adding the <track> tag, the video showed subtitles. People with hearing problems could now read the video's text version.

I also made the file available in other languages to make non-English speakers understand the video.

Meta tag

In the content attribute of the <meta description="" content=""> tag, I described what the website is all about. It is important because search engines use the information on the <meta> tag to display the website in search results. Thanks to this, it helped to improve the website's Search Engine Optimization(SEO).

Navigate the website with the keyboard

I added the tabindex=0 attribute to the form section of the website. Once a user presses the Tab key on their keyboard, the cursor focuses on the next text field.

Conclusion

From my experience, improving the accessibility of a website is important because more people get to use the website. The website also becomes accessible to screen readers and technologies.