Writing Accessible HTML
Tags: beginners, html
Published: 2019-10-21 11:34:54

---
title: Writing Accessible HTML
published: true
description: A primer on writing accessible HTML 
tags: beginner, html
series: FrontEnd Development Zero to Hero
---
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](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) on the same topic:

```html
<div>Play video</div>
```
A button will be a good candidate for this:

```html
<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](https://www.deque.com/blog/anatomy-of-accessible-forms-required-form-fields/)
* [Anatomy of accessible forms, best practices](https://www.deque.com/blog/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](http://blogaccessibility.com/a-super-simple-way-to-make-images-accessible-alt-text-versus-title-explained/ )
* [Contextually Marking up accessible images and SVG]( https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html)

##__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]( https://htmldog.com/guides/html/advanced/links/ )
* [Links are not buttons]( https://karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans )
* [Accessibility for tech writers]( https://4syllables.com.au/articles/accessibility-writers-links/) 

##__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](https://blog.ai-media.tv/blog/6-ways-to-make-a-video-accessible)
* [Complete guide to accessible video and audio for the web](https://codepen.io/Stefany93/post/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](https://www.digitala11y.com/3-2-3-consistent-navigation/)
* [Keyboard-Only Navigation for Improved Accessibility]( https://www.nngroup.com/articles/keyboard-accessibility/ )
* [Better keyboard navigation with progressive enhancement]( https://christianheilmann.com/2016/08/15/better-keyboard-navigation-with-progressive-enhancement/)

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

a. [HTML Lists & Accessibility](https://www.maxability.co.in/2014/09/20/html-lists-accessibility/)
b. [Unordered lists: more than just bullets] (https://www.w3.org/QA/Tips/unordered-lists)

##__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]( https://webaim.org/discussion/mail_thread?thread=4222 )
b. [Unlabeled search fields ]( https://adactio.com/journal/10910 )

Some Web page objects like _navigation_, _links_, and _images_ will be coded in our [FINAL PROJECT](https://dev.to/ziizium/series-final-project-55m0).

_Edit (May 17th, 2020)_:

* _Grammar fixes_
* _Link to Final Project_
* _Correction of information about Web page objects implemented in the Final Project_