Developing An Accessible Website

3 Easy Development Practices To Make Your Site More Accessible

There are several ways to make your site accessible but here are three to start. You may want to download the NVDA screen reader to hear the results.

• Semantic markup.
• Aria-labels.
• Tabindex attribute.

Use The Markup That Fits

A good first step to making your site accessible is to use semantic markup. It might seem obvious but sometimes the rush to get a project finished forces developers to use <div> in place of something more descriptive like <main>.

As an example let’s look at a common web layout. The layout has an area at the top called the header. Inside it is a navigation. Underneath the header is the sidebar and the main content. Underneath that is the footer.

In the layout where there is no semantic markup NVDA will move between the links and buttons in the document as expected. However, when it reaches a link or button it only says, “Home link”. It lacks the context that semantic markup gives.

Using semantic markup gives screen readers like NVDA an indication of what the area in the layout is all about. NVDA calls these areas a “landmark”. If the user tabs into the links in the top navigation, it explicitly says, “Navigation landmark. List. Home link.”

Give Better Descriptions With Aria-Label

On interactive elements like buttons, anchors, input fields and sometimes non-interactive elements like images it helps to describe details with an aria-label attribute. For example, what if a button has an action that makes sense only if the user is sighted?

In our example the CTA is “View Profile”. Clicking it opens a modal. To a sighted person seeing a modal open is obvious. However, to a visually impaired user they might not understand that a modal has opened.

This is when an aria-label comes in handy. On the CTA we can add a description of what occurs when the user clicks it. We add aria-label=”Opens modal to view profile” to the button. Now, NVDA will say, “Opens modal to view profile button”.

Give Keyboard Users More Context With Tabindex

Consider adding a tabindex attribute to certain elements. When well placed the attribute can help keyboard users get a better understanding of the content.

In our example, keyboard users can tab to the links and the buttons on our page. However, moving from the top nav “Contact” link to the “View Profile” button is abrupt. To help smooth out the user experience we can add a tabindex=”0” attribute to the <h2> tag.

Once the attribute is added the <h2> tag will precede the “View Profile” button in the tabbing order. The screen reader now says “Meet Our Team” giving the user more context.

Conclusion

These are just a few first steps to making your site accessible. There’s lots of great resources on the web that discuss accessibility. The Accessibility Developer Guide is good as well as the W3C as it is the source for web accessibility.