HTML Markup Tips for Developing Accessible Websites

Improving HTML markup can make websites more accessible for assisted technology and help developers with automated testing.

Sep 5th, 2022 3:00am by Loraine Lawson

Featued image for: HTML Markup Tips for Developing Accessible Websites

If you want to see how accessible your website really is, visit it using a screen reader, advised JavaScript and React developer and independent contractor Cory House.

House presented “Building Accessible Web Apps” during CodepaLOU, a regional developer conference hosted in Louisville, Ky. last month.

“Screen readers are often used by people with visual impairments so if we’re gonna be real about this, how about we experience that whole situation?” House said.

He deployed VoiceOver, which is the screen reader that’s built into Macs, to read a simple website he’d designed. Despite its simplicity, it was impossible to discern images on the page or what a user was supposed to enter in the text field.

House shared HTML markup tags that, when inserted into the page, would go a long way towards making it more accessible to users. The first problem he identified in the site? The HTML tag itself is missing, tagging it as an English-language site.

The Rotor Friendly Experience

Apple's VoiceOver utility. To show how badly his sample site performed for assisted technology, House introduced the VoiceOver’s rotor. A rotor is used to quickly navigate apps and the web by moving backward and forward through links, buttons, headings and other navigation tools.

“Once I found out about the rotor, it finally opened my eyes to the fact that navigating a website can actually be done really quickly. using assistive tools,” House said.

It’s like scanning with your eyes for headings or clickable images, he said. Rotors are built into VoiceOver and other assistive technologies that allow users to view the site in different ways. To assist the rotor, be sure that all links, headings, and buttons are named. It’s also helpful if headings are nest appropriately, with only one H1 header, followed by a few H2 headers and so on if needed.

Create Landmarks

Imagine you were dropped into Washington, D.C. and there were no landmarks — no White House, no Washington Monument, nothing to identify it as the Capitol, he said.

Landmarks function in rotors the same way and identify navigations and other sections of the website. Those sections have to be identified using semantic markup.

“Now, what I also want to point out is, there’s another section that would normally show up in the rotor called landmarks,” he said. “Landmarks aren’t showing up right now, because my site is built so badly that it has no landmarks.”

Developers will often use the <div> tag but that doesn’t help assistive technologies — it basically tells users nothing about the page. Instead, a <nav> tag should be used to define a set of navigation. Then, VoiceOver can identify the navigation as such and identify it as one of the site’s landmarks.

The better the markup gets, the better the accessibility becomes.

“When I jump onto a page, yeah, maybe I’m looking for navigation, but often I’m just looking for the main content,” House said. “When I say main content, that’s a big hint to what HTML tag is missing in our markup right now, which is <main>.”

Identifying what constitutes the main content might require a conversation with UX, he added.

“Main content is the thing that changes on every page, and the stuff that stays the same is not main content, your header and your footer,” he said. Now, landmarks shows two items: Navigation and Main, he noted.

”Notice how it highlights the navigation main, or it highlights main, if I hit enter, it’s going to take me right into that section,” he said. “So already, life has gotten better here; somebody using assistive technologies can quickly jump to the section that they’re looking forward.”

When to Use ARIA

A website will often use a magnifying glass to show a textbox that can be used for search. Visually, that’s a clear sign that this is a search box.

This is one of the few situations where House recommended using an Accessible Rich Internet Applications (ARIA) tag. While he could just eliminate the magnifying glass or put the word “search” in there but that might lead to complaints from the UX team he said. Enter the ARIA tag.

“An ARIA tag is a sort of thing that I use when there is no other way for me to solve the problem,” House said.

The magnifying glass now becomes a label that’s read by the assistive technology as a search button.

“I would encourage you, if you haven’t used ARIA much, you can go out and read all the different ARIA tags, there’s a bunch of them out there,” he said.

Happy Markup, Happy Developers

Often there are more precise HTML codes that developers can use to improve both accessibility and the code, he noted. For instance, instead of just inserting a text field itself, a better approach when developing is to use a more specific type of text field. By hitting command in Visual Studio Code, he pulled up a number of other types of fields that could be used, including search. The VoiceOver read that then as a search text field.

The better the markup gets, the better the accessibility becomes, but there are additional benefits to writing better markup, he said. First, other developers can tell more about the code by simply reading the markup. Second, if the developer uses automated testing, the better the markup, the easier it is to write the automated test because the markup provides nice targets for the tests, he said.

“Your life as a developer gets easier as you make life for other people better by writing more accessible code,” he said. ”So it’s a nice virtuous cycle that occurs there.”

For more information on writing accessible code, House maintains a list of accessibility tips and an A11y audit checklist on Github.

Loraine Lawson is a veteran technology reporter who has covered technology issues from data integration to security for 25 years. Before joining The New Stack, she served as the editor of the banking technology site, Bank Automation News. She has...