Web accessibility guidelines ensure that all visitors can use your website. You may already be aware of the risks of not making your site accessible, ranging from losing potential business to even opening yourself to lawsuits if your site provides an essential service.
Luckily, HTML is ideal for this process, especially newer versions like HTML5, which can help create semantic content to improve the accessibility of your site.
In this article, we cover how to use some of the features that are built into HTML to create a solid structure that makes your site not only easy to understand by average people but also by those who may need to rely on assistive technologies.
This article provides information about:
- What HTML techniques you should use when constructing your site
- How to structure your page for accessibility
Can You Use a CMS for Accessibility?
Regardless of whether you’re building your site from scratch or whether you’re using a content management system (CMS), creating clear structures is something you can do with a minimal level of effort.
If you don’t feel like building your website from scratch using HTML, you can always use a CMS to build your site. There are many that support accessibility automatically. Some of the most popular ones include Drupal and WordPress, but there are many other CMS solutions that you can use.
Just be aware that not all themes may support this by default, so you need to be careful when choosing one. This is especially true if you’re using any multimedia content, such as audio or video. Make sure that the plug-ins you install are capable of providing closed captioning or text transcribing.
What HTML Techniques Should You Use?
- Use HTML headings
- Always use ‘ALT’ text for images
- Use descriptive names for links
- Consider colors as part of your web accessible layout
- Use accessible forms
- Use tables correctly
- Ensure keyboard access
- Use ARIA roles for dynamic content
If you’re building your site from scratch, there are several standard HTML guidelines that you should always consider.
Use HTML Headings
Always structure your site using well-organized “H” headings. There should be one and only one <h1> heading on your site to designate the title.
Below this, separate the larger sections with <h2> headings. Also, it’s wise to create a clear structure by using h3, h4, and h5 headings wherever necessary.
A good technique is to create an outline of your content first using a tool, such as Microsoft Word or Google Documents, and assigning headings. Assign the “H” heading to each level as you write and transcribe it into your favorite code editor.
Always Use ‘Alt’ Text for Images
For users who may have some form of visual impairment, there should be some alternate text provided for any images you have on your site, particularly those that are important to the content of the site. This “alt” text is identified and read out loud by screen readers.
For example:
<img src="cat.jpg" alt="A picture of a siamese cat" />
Note: if the images are purely for decoration, such as a background image, you may leave the alt property blank as this isn’t helpful to all readers. In cases like this, it’s normal to create the alt attribute but to leave it empty so that screen readers know there’s an image but prevent the screen reader from reading the entire URL of the image out loud.
Use Descriptive Names for Links
When creating links, avoid using ambiguous link text. Always use text that refers to the item being linked. Avoid using phrasings like “click here” as this can be confusing for screen readers or those who tab through links on a page. Instead, use the name of the target location or a description of what it provides. It’s the text within the “a” tags that’s read aloud by readers.
Consider Colors as Part of Your Web Accessible Layout
