Why Is It Important To Structure Your Visual Content for Web Accessibility?
Approximately 20% of the population within the United States suffers from some form of disability. This includes a wide range of individuals and a variety of impairments. These can include vision impairment of some form, difficulty hearing, cognitive and/or learning disabilities, or physical or motor limitations.
You need to ensure that all of these groups can access and use your content, or your site could be considered guilty of discrimination.
Building accessible websites may seem complicated, however, as long as you adhere to a few guidelines, you can go a long way toward making sure the widest range of people can use your site.
In this article, we cover
- How to structure your content for accessibility
- How to structure the visual appeal
- Several websites and tools that help you improve your site’s accessibility
How To Structure Your Content
- Use short sentences and paragraphs
- Make good use of H2 and H3 headings
- Use ALT IMG tags
- Use blockquotes and citations
- Use data tables
- Use text content as a supplement to multimedia content
Use Short Sentences and Paragraphs
Accessibility means more than providing content for people with some form of disability. It means that your website should be accessible and the important information in it is conveyed to visitors in a way that they can make sense of it. Use short sentences. Make sure that your paragraphs are no longer than three or four sentences.
The reason behind this is it’s easier for people to digest the meaning. This goes beyond style recommendations. Users must be able to discern what your content is and what it means.
From an accessibility standpoint, it also makes things easier for people with attention deficit issues to be able to get your point. It can also help people who suffer from some sort of cognitive difficulty consume the content better.
Make Good Use of H2 and H3 Headings
HTML, which is the language of the web, has built-in tools to help make your content structured, not just for the majority, but also for those with disabilities. Typically, your site has one top-level header, or H1 heading. Next, there are the main sections of your site, which can be designated with H2 headings, followed by any subsections which are organized under H3 headings.
Make sure you nest your content logically. This also helps screen readers organize the content for those who may have visual disabilities. One of the nice features from using headings like this, such as with WordPress, is that you can create a simple clickable table of contents for your readers and any screen reading software automatically.
Use Image Alt Tags
If you have pictures on your site, people who have some form of blindness may be unable to identify what the content is that’s represented unless you use the HTML “alt” tag for all important images. Within this attribute, you can include a brief description of what’s in the picture, which is read aloud by screen readers when they’re used.
You don’t need to use these for purely decorative images. However it’s good to create an alt tag and leave the content blank (e.g. alt=””) so that screen readers don’t just read out loud the image URL.
Use Blockquotes and Citations
If you’re using any quotations, make sure you place these inside blockquote elements as this separates them from the text. If you’re quoting a specific source, refer to the citation using the “cite” element.
Use Data Tables
If you have data that’s summarized better in tabular form, place these inside HTML tables. However, for screen readers, it’s important to remember to use the table header (“th”) elements both for rows and columns so that the content within your tables makes sense when read out loud.
Conversely, avoid using tables for layout purposes. This can confuse screen readers and result in content being read out of order. Use clearly structured HTML and use Cascading Style Sheets (CSS) to organize the layout of your page.
Use Text Content as a Supplement to Multimedia Content
If you have audio or video elements, accessibility rules dictate that you should have some text content, including a transcript of what’s being displayed. This way, readers who may have a hearing disability or have the sound turned off can consume the content.
Beyond this, many people surf the web with the sound off ― particularly when they’re at work. People make use of closed captioning for videos a considerable amount of time, even if they don’t suffer from a hearing disability. Text goes a long way to making sure that your content is consumed by the greatest number of people.
Structure the Visual Appeal
