| By Matt Long, Gale Software Engineering Manager |
Web accessibility is about ensuring equal access to content on the web to people with and without disabilities. At Gale web accessibility matters. And while for a variety of reasons equal access can be challenging in certain situations, there are some simple things developers and designers should always do to help lay a foundation for an accessible user interface.
One of the simplest things developers and designers can do is use proper semantic HTML.
A Sea of DIV’s
Consider the following HTML that solely uses the <div> element:
<div class=”header”>
<div class=”title”>The DIV Tag</div>
<div class=”intro”>The DIV element is the most versatile in HTML.</div>
</div>
<div class=”main”>
I love to use DIV tags whenever I can. They are so great! Here’s some
reasons why I love them.
<div class=”list”>
<div>Its name is only 3 letters long.</div>
<div>They’re so flexible—I can style them however I want.</div>
<div>DIV elements are supported by all browsers.</div>
</div>
</div>
<div class=”footer”>
Copyright 2017
</div>
This is bad! According to the World Wide Web Consortium (W3C) the <div> element:
“…has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.”
Similarly, regarding the span element:
“The span element doesn’t mean anything on its own…”
What You Need Is Structure
The HTML elements you use should describe the content and how it’s organized. The previous HTML markup can be rewritten to look like this:
<header>
<h1>The DIV Tag</h1>
The DIV element is the most versatile in HTML.
</header>
<main>
I love to use DIV tags whenever I can. They are so great! Here’s some
reasons why I love them.
<ul>
<li>Its name is only 3 letters long.</li>
<li>They’re so flexible—I can style them however I want.</li>
<li>DIV elements are supported by all browsers.</li>
</ul>
</main>
<footer>
Copyright 2017
</footer>
Why This Matters To Accessibility
Using semantic HTML elements doesn’t just benefit other developers by helping them understand the content better, it also allows people using assistive technologies, like screen readers, to better understand and navigate the content.
Some elements are treated as landmarks in an HTML document, such as <header>, <main>, and <footer>. Some assistive technologies can use these elements to quickly jump from landmark to landmark.
Proper use of other HTML elements provide people using assistive technologies either expected and/or additional behavior and functionality. For example, the <ul> element can inform users how many items are in a list and allow them easily navigate through each item. Assistive technologies can also enable users to navigate the <h1>…<h6> hierarchy or all of the <a> links on a page.
The Anchor Button
It’s possible to incorrectly use HTML elements. On the surface, doing so may seem harmless, but to someone relying on assistive technologies, this can be problematic. A common mistake is the misuse of the <a> element as a button instead of using a <button> element. The following HTML snippets can all be styled to visually look like the same button:
<a class=”btn” href=”#”>I’m a Button</a>
<div class=”btn”>I’m a Button</div>
<span class=”btn”>I’m a Button</span>
Unfortunately, none of these have the same out of the box functionality and experience that a <button> element has.
- <div> and <span> elements won’t be included in the tab order without specifying a tabindex attribute value; <a> elements aren’t included without an href attribute value.
- Visual focus states are not implemented consistently by default using *:focus across browsers.
- Expected SPACE and ENTER keyboard functionality need to be implemented consistently for <div>, <span>, and <a>
- <div> and <span> elements will simply be identified as plain text to someone using assistive technologies; <a> elements will be identified as links.
The Duck Test
Using proper HTML is simple and can go a long way to keep your content accessible, and while the issues above can be addressed through the use of things like WAI-ARIA, CSS, and javascript, it’s just a lot easier to use a <button> for a button and a <header> for a header. If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck…and should be a duck.
Stay tuned for more Tech Tuesday blogs on the third Tuesday of every month!
About the Authors
Matt long is a technology leader and developer with over 15 years of experience currently working at Gale, a Cengage Learning company as a Software Engineering Manager and Developer. He thrives on being surrounded by highly motivated people and is passionate about continued self-improvement, the web, standards, and making content accessible to everyone. He has spoken at conferences and meet-ups about web development and accessibility, contributed to open source software projects, and occasionally volunteers time to work with a non-profit web accessibility organization. Web development is definitely not just his day job.
In addition to all things web development, Matt and his wife have a great life with their 2 young boys and 2 old pugs. Any remaining time in the day he tries to spend cranking up the guitar in the basement attempting to sound like some of his favorites—Page, Hendrix, Greenwood, Corgan, White, and Auerbach.