HTML + Accessibility Basics For Web Developers
Use semantic HTML to make your web page easier to understand for users of your site who don’t look like you.
As a web developer you have a responsibility to write semantic HTML that will make your web page effective at conveying information not only to users like you, but also users very much not like you — robots, screen readers, SEO crawlers looking for structured data to build search rich results, humans with varying levels of disability, and many others.
The first thing is to understand, philosophically, what the imagined separation of concerns is between HTML, CSS, and JS, the building blocks of the web.
JS is for interaction/behavior and management of state (besides some very basic state that may be stored in, say, the checked state of an element in CSS). CSS is for presentation — how does the website look, and HTML is for the content and structure of the website.
This may seem like a simple concept, but it is surprising at how much of modern web development seems to forget this fact — frameworks like React tend to put all of the responsibility on JS and almost none on HTML.
Looking at the above, there is a lot of responsibility put on the HTML of your site to describe all of the website content, as well as its structure. If your site has minimal complex interaction, then your site might be primarily just structured content — which should give you a better idea of why browsers take HTML so seriously.
Writing Semantic HTML
The key is to write HTML thoughtfully, with an eye out for how browsers interpret our code. This is not exactly the same as writing html in a visually appealing way (assuming no styling) but it is close. Below I’ll describe the two categories of semantics that are important to help the browser interpret the information and interactivity of your website — content and controls.
Headings and content
The first general topic is information hierarchy. When you build a webpage you should try as much as possible to put the most important information inside the header tags, and always mark up your text with one of the following <p>, <h1>,<h2>, <h3>, etc… A well marked up page in terms of content might look like this:
<p>This is the first section of my document.</p>
<p>I'll add another paragraph here too.</p>
<li>a list for</li>
<li>you to read</li>
<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
<h2>My 2nd subheading</h2>
<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
As you can tell the content is all marked up in appropriate tags and the most important information is inside a header tag. This is incredibly important for both accessibility and also SEO.
Another topic in this category is alternative text descriptions for content. The classic example in this category is alt text for images. Users of your site without eyes, like robots or the visually impaired, will need to use this text t understand your image.
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
title="The Mozilla red dinosaur">
The final category is to use the appropriate html elements — headers, articles, and sections, to name a few. You can view the important elements here.
UI Controls: Buttons, Links, and forms
Buttons, links and forms should be treated especially carefully, as they are the primary controls with which a user will interact with your website — the ‘touchpoints’ where they can make their mark.
This means that they are very important especially for accessibility reasons. A user without access to their mouse, for example, might want to navigate over all of the controls (links and buttons) using their keyboard. <button> tags allow this behavior by default. You should read about ‘keyboard accessibility /tabbability’ if you aren’t familiar with the term.
You should also as much as possible try to use links and buttons for their intended purposes. The accessibility 101 site describes the different use cases:
A link will redirect you to a new page or a section within the same page. In VoiceOver’s rotator, it will also be collected within the “Links” window.
A button is focusable, too, and can be triggered by the space key. A button will trigger an action like opening or closing something.
Using these two elements appropriately will make your site ininitely more approachable and intelligable to disabled and non-human users.
Although your particular use case might call for more detailed examination of the HTML that you are writing, these top level guidelines should give you a good starting point to begin writing intelligible HTML for your users to consume.
Thanks for reading,