Accessibility in design, when presented online, extends far beyond the visuals. My last two blog posts in this series focused on color choice and font choice. This post will focus on some more technical aspects of accessibility. These have more to do with user interface, or UI, design and accessibility. Good UI can make or break how some people interact with your content.

UI Essential: Alt-text

I briefly brought up the use of screen readers when I wrote about font choice. Screen readers are a tool that visually impaired users may rely on to navigate the web. Their name is self-explanatory; screen readers read text aloud for users who cannot read. However, text is usually the only thing that screen readers pick up on. They cannot interpret pictures. If you want a user to know what is presented in an image, then you need to use something called “alt-text”. Alt-text is found either in the metadata of an image or in the caption of an image. Some website managers allow you to add this metadata when you upload an image. If you use WordPress, for example, you may have even noticed a box labeled “alt-text” when you upload images.

It is useful to provide alt-text for any non-decorative images. For instance, if a restaurant’s website has an image of their menu uploaded, the alt-text should list off the items on the menu. The same goes for charts or diagrams that rely on visual elements. Otherwise, the information will be inaccessible to a user with a screen reader. With images that don’t have text, you can provide a description. Aim to be as descriptive and concise as possible. A user doesn’t need every little detail, but adding some flair is nice. Using proper alt-text conveys valuable information and makes for a more inclusive experience. If you’d like to include alt-text in social media, you can do so in the description or caption of your image-based posts. It won’t affect the metadata of the uploaded image, but a screen reader will catch it.

Keyboard Access

Making a website keyboard accessible is another technical design element. Many users, both with and without disabilities, rely solely on their keyboard to use their computers. It can be a very efficient way to complete a workflow. It is important that your web page follows some basic, standard commands. For instance, every element should be selectable using the tab key and either the space bar or the enter key should activate an element. These are just a couple examples. For a much more thorough guide, you can consult with WebAIM’s guidelines for keyboard accessibility. 

This one can be a bit harder to implement on social media since you don’t own those domains and can’t edit the code. How accessible those websites are is largely out of your control. However, many people do create their own blogs and websites. If you have a website, keep this in mind when selecting a pre-made theme or customizing one through code.  

I hope this has made you more aware of some of the ways people use the web. Remember that it is, however, only a small sample of the ways you can make things more accessible. The more you think about unique user cases, the more accessible you can make your content!