Notes on Building Accessible and Usable Front-end Interfaces

I have been contributing to some LinkedIn collaborative articles in my field, which has been great. It's a good way to recall and reinforce knowledge. However, the 750-character limit does not give a lot of room to say everything I want to say.

For that reason, whenever I can, I'll make summary articles like this one not just for the public but as a reference point for me. Today, we will be focusing on my comments on articles talking about building accessible web interfaces.

Some Best Practices for Building Navigation Menus

The importance of semantic HTML cannot be overemphasized. Using a <nav> element as a wrapper for your navigation links is a good way to ensure that your menu is properly announced as a navigation landmark by assistive technology.

Although it is possible to use a <div> and assign it the aria role attribute of 'navigation', always favor semantic HTML over using ARIA attributes.

Use links and buttons where appropriate. "Are you building a drop-down menu in your navigation bar? You might be tempted to use an anchor tag with an empty href or no href at all for the purpose triggering the visibility of drop-down container with JavaScript when the anchor is clicked.

A general principle to keep in mind is if the element is supposed to direct the user to another page or another section of the page with a named anchor, use the anchor <a> tag.

If you're trying to change something on the current page, say show a drop-down menu, a button is much better suited for that role.

Additional Best Practices to Keep in Mind When Using Images.

An often overlooked aspect of building accessible web experiences is the use of images. Some think of it as being as straightforward as slapping on an alt attribute maybe with some text to an image and calling it a day.

However, when choosing what the content of the alt text should say for an image, consider the content of the image, its function as well as surrounding context. How would you describe the picture over the phone? Is it linked or within a button? Whatever you come up with, it should be accurate, succinct and if it has any surrounding context, should not be redundant.

Icons are another element that can easily be overlooked. We all love icons. They are useful when deciding how to manage precious screen real-estate and typically have a common meaning no matter the language.

For example 3 parallel horizontal dashes (also know as a hamburger menu icon) when used in the context of a navigation menu means you can click on the button to expand the navigation bar. However, they are only useful when the user can see them or recognize them.

So it is important to make icons visible to everyone and the user understands the purpose of every icon used.

For SVGs icons typically used with buttons, use the <title> element with an id together with the aria-labelledby attribute on the <svg> tag to make them detectable by assistive technology.

Also don't forget to support Windows high contrast mode users when making use of SVGs especially icons. You might find that for those users, some of your icons appear wonky or simply just disappear.

A trick I learned from a senior is to set the currentColor property to support visibility in high contrast theme options in operating systems.

Conclusion

Here's a quick summary of Effective Techniques for Navigation and Imagesthis article:

• Use the <nav> element when building your navigation menu.

• Use buttons and links as appropriately

• Images should have an alt attribute

• The alt attribute of images which provided additional information should be accurate, succinct and non-repetitive.

• When using icons, label them appropriately using the <title> tag.

• Finally, do not leave Windows High Contrast Mode users in the dark when it comes to icons (literally 😬).

If you would like to read the LinkedIn articles, I have provided links to them in the additional reading section below. I found some really good gems in the contributions. Let me know what you think!

Additional Reading

How can you make navigation menus and buttons more responsive and accessible?

What are the best ways to design accessible and usable front-end interfaces?