How To Structure Your HTML Properly for Web Accessibility

Web accessibility guidelines ensure that all visitors can use your website to its full functionality regardless of their abilities. You may already know the risks of not making your site accessible, ranging from losing potential business to opening yourself to lawsuits if your site provides an essential service and fails to provide it to disabled users.

HTML (hypertext markup language) offers an ideal framework for the accessibility process, especially newer versions like HTML5, which can help create semantic content that improves the overall accessibility of your site.

Some features built into HTML create a solid structure that makes your site easy to understand by those who may rely on assistive technologies and general audiences.

Key takeaways: 

• Visitors who use accessible technology deserve to appreciate what you offer. But accessibility is more than a courtesy to disabled users. You can lose business and get sued if you cannot provide reasonable website accommodations.
• There are set standards that meet accessibility needs, so you don’t have to scramble to experiment and find the right HTML techniques for boosting your site.
• HTML can be used with other web design and development elements when crafting an accessible website. You can also incorporate a CMS (content management system), CSS (cascading style sheets), and JavaScript for more robust accessibility options.

Can You Use a CMS for Accessibility?

Regardless of whether you’re building your site from scratch or using a CMS, creating clear structures is something you can do with minimal exertion.

If you can’t construct your website from scratch with HTML, you can always use a CMS to build your site. Many automatically support accessibility. The most popular ones include Drupal and WordPress, but many other CMS solutions are available.

Not all themes may support accessibility by default, so you must be careful when choosing one. This is especially true if you include multimedia content, such as audio or video. Ensure that any plug-ins you install can provide closed captioning or text transcribing.

What HTML Techniques Should You Use?

If you’re building your site from scratch, keep standard HTML guidelines that you should always keep in mind.

Accessible HTML utilizes several elements to ensure that all visitors can interact with every aspect of your website’s content, regardless of their abilities. This includes the following techniques:

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. It’s wise to create a clear page structure by using <h3>, <h4>, and <h5> headings wherever necessary.

A good technique is creating an outline of your content using a tool, such as Microsoft Word or Google Documents, and assigning headings. Assign an “H” heading to each level as you write and transcribe it into your favorite code editor.

Include alt text for images

For users with some form of visual impairment, alt text should be provided for any images you display on your site. 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 want to leave the alt property blank. Indicating these pictures is not helpful to users of all screen reader models.

In these instances, it’s still normal to utilize an alt attribute. Leave it empty so screen readers know there’s an image, but they won’t read the image’s entire URL (uniform resource locator) 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 phrasing like “click here,” as this can confuse the screen readers used by visitors who tab through your page’s links.

Instead, use the name of the target location or a description of what it provides. The text within the “a” tags gets read aloud by readers.

Consider color choices in your web accessible layout

Some users have a hard time distinguishing between different colors. This applies not just to those who are completely vision-impaired, but also individuals with some form of color blindness.

Always avoid using color for informational purposes. Consider how your page looks when rendered in grayscale.

Build accessible forms

Building forms for accessibility means using all available tags that refer to the content within.

For instance, if you have a field for “name,” use the label tag, as follows:

<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">

This helps associate the text with the specific form input. Also, make sure that your labels are meaningful and make sense to someone who cannot see the form.

Use tables correctly

When entering data for tables, it’s important to use “th,” or table header elements, so that screen readers can make sense of what content exists within a column. You can also provide “th” elements for rows.

Separated the table head from the body using “thead” and “tbody” elements. It’s also important to provide a “caption” or “summary” element so that a user can tell what the table is about.

For example:

<table>
    <caption>A brief description of the contents of the table</caption>
    <thead>
        <th scope="col">Column 1</th>
        <th scope="col">Column 2</th>
        <th scope="col">Column 3</th>
    </thead>
    <tbody>
        <tr>
                <th scope="row">Row 1</th>
                <td>Row 1 column 1 content</td>
                <td>Row 1 column 2 content</td>
                <td>Row 1 column 3 content</td>
        </tr>
        <tr>
                <th scope="row">Row 2</th>
                <td>Row 2 column 1 content</td>
                <td>Row 2 column 2 content</td>
                <td>Row 2 column 3 content</td>
        </tr>
        <tr>
                <th scope="row">Row 3</th>
                <td>Row 3 column 1 content</td>
                <td>Row 3 column 2 content</td>
                <td>Row 3 column 3 content</td>
        </tr>
    </tbody>
</table>

Ensure keyboard access

Making sure that users can interact with your content using only a keyboard is an important aspect of accessibility. Good HTML structure and well-named links go a long way toward achieving this goal. Make sure that the tab order matches the visual order of the page.

Break up the content using anchor links if you have particularly long pages. This enables someone to tab through content much more easily.

For example, this link:

<a id=“#page-location”>Page Location</a>

Will go to:

<h2 id=“page-location”>Page Location</h2>

Use ARIA roles for dynamic content

ARIA attributes can work well with dynamic content, but it’s also important to be careful not to overuse these. Many of the roles within ARIA have been replaced by newer HTML elements, such as the native HTML <button> element, as opposed to the ARIA role of “button.” Using the HTML elements and omitting the ARIA roles wherever possible is generally preferable.

Use them only for dynamic content, such as a stock ticker. It’s important to note that ARIA alone won’t necessarily make a page interactive to nonvisual users. You may need to incorporate some complex JavaScript to make it work to accessibility standards, which may be required for tools like date pickers.

How Do You Structure Your Pages for Accessibility?

There are a few standard practices that you should use when structuring your site:

Label page regions

Use HTML5 to identify individual regions within the page, such as the “header” and “footer” elements. Use the “nav” element to indicate navigation menus, and “main” to designate the area for main content. If you have any complementary content that appears on the side of the page, you can use the “aside” element.

You can also utilize the ARIA roles if for some reason you are unable to use HTML5. However, HTML is always preferable.

Use lists to help with structure

Using the embedded HTML “ul” (unordered list) and “ol” (ordered list) elements helps screen readers organize the page’s content. These can be used for navigation menus as well as any place where there are clear organized designations of the elements on the page.

Don’t use tables for layout

Another classic accessibility mistake is using tables as the framework for your layout. This causes page-rendering issues in different browser environments and may severely confuse screen readers.

Tables are meant for tabular data only. When arranging content on your page, always use CSS while ensuring your HTML is structured properly.

What To Do Next

Never assume that all users of your site possess the same abilities, backgrounds, and resources. Increasing access to your site and welcoming as many visitors as possible benefits you for legal reasons and can also improve your overall return on investment.

The aforementioned HTML techniques all help increase your website’s accessibility. However, there are no fixed rules for ensuring your site is always accessible at all times, as technologies for enabling accessibility change. By following these general rules, you can at least be somewhat ahead of the game and reach people you might not ordinarily be able to without them.

Next, you should research the best website builders to choose the best for your small business or e-commerce website.