Extra! Extra! Read all about it! When you have important news for your website audience, you want them to do just that: read all about it. However, if your website isn’t accessible to all people, even those who may have a visual impairment or disabilities that prevent them from understanding your content in visual form, then you’re isolating an entire group of people.
Remember, accessibility concerns affect everyone who has a website, including both nonprofits and businesses. If your site is not accessible, you lose out on valuable audience members who will navigate to a site they can understand.
Earlier in our accessibility series, we talked about the importance of website accessibility and expanded on the importance of using alt-text throughout your site. Today, we’re diving into the world of accessible site structures and headlines to ensure everybody can understand your true intent with the content on your website, regardless of how they consume the details.
The importance of HTML tags
When it comes to navigating the content on your site, headlines and how you structure your website help provide clarity to the viewing experience. They help break up large bodies of text or separate complex ideas into categories. That’s why it’s important to ensure your HTML tags are inputted correctly to your website. If done correctly, screen readers will be able to use headlines and site structures in the appropriate way versus delivering a jumbled experience for the end-user.
Consider how you might jump around on a page based on headings. When you input an <h2> heading tag for various headings, (and so on for smaller heading tags) it allows a person who is using a screen reader to jump around between those h2 tags.
Screen readers can also rely on HTML tags to tell them various intuitive information based on the tag. For example, a screen reader would be able to tell that <p> means a new paragraph, and <img> means an image is there.
Firespring’s new themes are built with accessibility in mind using “landmarks,” so you don’t have to worry about the underlying structural foundation of your site. Landmarks provide more information to help with the ease of navigating via a keyboard or screen reader. Common landmarks in our themes include:
- Banners
- Primary navigation
- Search
- A masthead region
- Main
- Secondary navigation
- Footer
These built-in landmarks give screen reader users one more way to understand the layout and structure of a page. It helps them to scan the content structure to quickly get to the most important parts of the page.
Avoid using false headlines
Text that is simply styled to look like a headline without the use of an <h1> – <h6> HTML tag can be problematic for screen readers.
When the text is missing the structural HTML meaning, screen reader users are left without the functionality that structure provides. They may be forced to listen to all of the content and may skip important information because of frustration. If the headline is styled visually to look like a headline, make sure to apply the <h1> through <h6> headline tag to provide the same information to all users.
If any of this sounds confusing, remember that we can help you navigate the world of accessibility!
Structuring your lists
When creating lists, use the pre-formatted bullet and numbered options instead of trying to format them yourself so that the screen readers and keyboard tabbing can pick up on the list structure. Consider this—if you use an HTML numbered or bulleted list, the reader will hear 1 of 10 and so on so the listener understands how long the list is and can skip parts if necessary or navigate back to an important point. They will be able to easily flip to the list information that is most important to them.
How to check screen reader compatibility
There are ample online tools that can help you determine if your website is easily scannable for those with disabilities. However, one fail-proof suggestion is to test the ease of navigating using your keyboard and a screen reader to truly test for yourself. Check out this article for tips and tricks to navigate using a keyboard, including hitting “SHIFT” and “TAB” to navigate backward.
Ensure your website’s accessibility
We’re proud to offer accessibility consultations, and we’d love to talk about how we can make your website accessible. You’ll get a review of your site by an accessibility specialist. From there, we’ll supply a report to identify issues and provide recommendations to help improve accessibility. Learn more here.