Accessibility Tips: Using the DIV and SPAN Elements

Usually, you want use HTML to convey meaning about the structure of your website. However, two HTML elements are totally generic — they group pieces of your HTML together, but don’t explain anything about the semantic meaning of those “chunks” of content.

Those two elements are <div> and <span>. They’re frequently used with CSS (Cascading Style Sheets) to control the visual presentation of content. In certain situations, this is completely appropriate.

Unfortunately, both tags are overused, which can create serious accessibility issues for people who use screen readers (software that converts text to audio or braille) and other assistive technologies.

That doesn’t mean that you can never use <div> or <span>, but you need to think about how your markup might affect users with disabilities. In this article, we’ll provide some basic tips for avoiding common mistakes.

Understand how <div> and <span> affect screen readers.

Plain, simple HTML is the best tool for building your website. HTML establishes the semantic meaning and structure of your content, which helps screen readers present that content in a way that makes sense. 

For example, a screen reader user might want to skip around a website to find the information they need. If the website uses subheadings properly, the user can “scan" each subheading without reading every word of the content. When the user tabs to an interactive element, their software will announce that they’re focused on a hyperlink, button, or something else.

Screen readers, eye-tracking systems, and all other assistive technologies support native HTML. When you use title tags, subheadings, links, buttons, and other basic HTML elements, you provide all user agents with the basic information that they need to present your content to your users.

However, <div> and <span> don’t provide any semantic information whatsoever. When a website uses <div> for a large amount of content, screen readers may announce all of the content within the wrapper as a single block of text. 

Needless to say, this isn’t a great experience for the end user. By using semantic HTML instead of generic <div> and <span> elements, you can:

• Ensure that your content works with a wide variety of user agents.
• Simplify your markup, which makes your website easier to update and maintain.
• Maintain keyboard accessibility without writing additional markup for interactive controls.

The bottom line: You should only use <div> or <span> if you have a strong reason to do so. If you need to convey meaning, semantic HTML is usually the better choice.

Related: Plain Old Semantic HTML: A Perfect Basis for Accessibility

Sometimes, you need <div> or <span> to maintain your website’s visual presentation

When used properly, <div> and <span> can improve accessibility. Yes, really!

In some cases, you need to create a wrapper for styling without using semantic HTML that affects the meaning of the content. In other words, you want to style your website, but you don’t want to announce that the wrapper itself is semantically important. 

When this is the case, <div> is used as a block-level wrapper, while <span> is for inline wrapping. While neither element is semantic, you can use WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) to fill in the blanks. 

Here are a few quick tips for using <span> and <div> while still providing semantic information to assistive technology users.

• The aria-label and aria-labelledby attributes can be used to provide the element with an accessible name. Read more about the importance of accessible names.
• <div> and <span> elements must have an appropriate ARIA role. Otherwise, screen readers might ignore aria-label. Choose an ARIA role that makes sense, and don’t add a role simply because you want to add a label.
• In general, you should avoid using <div> or <span> on interactive elements such as buttons, which are better served by the HTML <button> tag. 
• If you must use <div> or <span> on interactive elements, make sure those elements can receive keyboard focus. 
• You can specify a custom tab order with the HTML tabindex attribute. However, this is usually unnecessary. The tabindex=”0" attribute is usually a better choice for ensuring that the focus order is consistent with the meaning of the content.

By using ARIA, you’re making a commitment to test your markup, so make sure you understand how to use ARIA correctly. You should also be prepared to test your content manually with a screen reader. 

Related: How Screen Readers Are Used in Accessibility Testing

Prioritizing accessibility helps you reach a wider audience

Building inclusive content is much easier with help from an experienced accessibility partner. The Bureau of Internet Accessibility can help you create a long-term strategy to earn, prove, and maintain digital compliance. 

If you need help with semantic HTML, WAI-ARIA, or any other aspect of digital accessibility, we’re ready to assist. Send us a message to connect with a subject matter expert.