Writing Accessible HTML

In the field of Web Design, accessibility should never be an afterthought, it should always be on the menu.

Accessibility is a broad topic and more than deserving of a whole book, this post will serve as a summary and I will point to resources to learn more about the subject.

Slapping some divs and h1 with some p's coupled with some CSS might get you a web page but that does not mean the page will be accessible, you should strive to use the correct element for the job. Do you need a link? Use an a tag, do you need a button? Use the button tag.

The basics of writing accessible HTML is to write semantic markup and Writing semantic markup won't take much of your time and you get some built-in accessibility features for free.

Let's take an example from Mozilla Developer Network on the same topic:

<div>Play video</div>

A button will be a good candidate for this:

<button>Play video</button>

From the article linked above:

Not only do HTML <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate from button to button using the Tab key, and activated using Return or Enter.

When developing for the web there are some web pages objects that you might want to code and it will be a wonderful thing if you (the reader) take the route of developing them in an accessible way, but if I decide to write how to make them all accessible, this post will be longer than its required.

With that being said, let's list these objects, a brief description and some links for your consideration:

FORMS

Most web pages incorporate one form or the other that allow the submission of data, you will definitely create one form or the other and writing accessible forms is one thing you will want in your arsenal as a web developer.

• Anatomy of accessible forms
• Anatomy of accessible forms, best practices

IMAGES

When it comes to images giving it the alt attribute will make screen readers read it out loud, but there is more to it.

• A Simple way to make image accessible
• Contextually Marking up accessible images and SVG

LINKS

Trust me, if there are no links, navigating the Web will be a daunting task. Learning to make them accessible will give your users a good User Experience

• Accessible Links on HTML Dog
• Links are not buttons
• Accessibility for tech writers

VIDEO

Videos are everywhere and in html5 all you need to link to a video is the video tag which can be improved up.

• 6 ways to make a video Accessible To Everyone
• Complete guide to accessible video and audio for the web

NAVIGATION

Are navigation non-existent on your website? Your Users might not use your site for more than a few seconds, and they are off! never to return. That's one, do you require your user to zoom to click on your navigation when they are one mobile? They won't find that very pleasing. Take your time and design accessible navigation's and the resource below will also be of help.

• Understanding SC 3.2.3 Consistent Navigation
• Keyboard-Only Navigation for Improved Accessibility
• Better keyboard navigation with progressive enhancement

LIST

Lists are everywhere by default links should be created with li tags.

a. HTML Lists & Accessibility
b. Unordered lists: more than just bullets

SEARCH

There is a high possibility that you've searched something on the Web today, whether that's on Google, DuckDuckGo. And if you decide to implement a search on your site, you might as well get it right.

a. "<label>" for Search Field - Web Aim Thread
b. Unlabeled search fields

Some Web page objects like navigation, links, and images will be coded in our FINAL PROJECT.

Edit (May 17th, 2020):

• Grammar fixes
• Link to Final Project
• Correction of information about Web page objects implemented in the Final Project