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.