Web and Digital Content Accessibility Starts with HTML
The HTML structure of a website is like a roadmap. It tells your browser where elements should go on the page and denotes the relationships of those elements with other resources, such as an external CSS stylesheet or external scripts. Just like a roadmap, your HTML can either be easy to follow or very difficult to follow.
Think of the elements on your page as places on the map. On one map, you might have a symbol that denotes a gas station and the name “Rick’s Gas Station” next to it. On another, you might just have the name “Rick’s Gas Station” next to a dot. A person who can read English will probably be able to gather about the same amount of information from each of these maps. However, a person that can’t read English would probably only be able to find the gas station on the first map.
Semantic HTML tags act in the same way as our hypothetical gas station symbol. They tell the browser in a universal way, what the purpose of the element is. So that the purpose, meaning and context of the element is still conveyed–even if the device or person accessing the content can’t access the visual stylings or information contained in the elements CSS
Let the browser do the work.
People browse the web and access digital content on a dizzying number of devices. From mobile devices to gaming consoles to smart TVs to desktops to screen readers to graphing calculators. You want users to be able to access your content across all of these devices. Fortunately, so do the manufacturers of all of those devices.
When creating something unique, like a custom-styled button or some other type of input, it may seem attractive to use a generic tag and build the functionality and styling out yourself. But doing so prevents you from gaining the built-in functionality provided by the appropriate semantic tag–and from future support for new technologies.
When an iPhone’s web browser comes across a <button> element, it knows that the element needs to input a “submit” event. It also knows that the element is something that needs to be clickable and as such, needs to be rendered in a way that communicates this to the user and makes the task of doing so easy. Without this information, the element responsible for the “submit” event might be rendered in a way that is extremely difficult to use on a touch screen.
In the case of a screen reader, the browser knows that the <button> element is responsible for the input of a “submit” event, however, instead of rendering the element, it communicates the presence of such an input via audio or Braille output. If the element responsible for the input of a “submit” event were not written semantically (think <div class=“button”>), the built-in functionality of the screenreader would be ignored—and the user experience would suffer.
Looking Toward the Future
Web and digital content accessibility is not something that is going to go away—nor should it. The internet is becoming more and more essential to our daily lives. It’s important that we make sure that everyone has fair access to its contents.
What may change, however, is how we use and access the internet and digital content. Not too long ago, the internet was something that was viewed almost exclusively on desktop computers. Now, mobile devices and tablets are beginning to outnumber desktop and laptop users. In another few years there might be something completely different.
Writing good HTML today will mean a better experience for the users of tomorrow.