At ArcStone, we design websites with accessibility in mind. After all, people with a variety of disabilities will be able to use your website without struggling. What happens, after your site is launched and your team begins making changes to your website? It's critical to follow accessibility best practices. Otherwise, a site that was once easy to use for all might become a source of frustration for some of your visitors.
Accessibility Best Practices
In this list below, we'll talk about some of the common best practices for website accessibility, so you can ensure browsing your website is an enjoyable experience for everyone. This isn't an exhaustive list; the goal isn't to overwhelm you with the minutiae of website accessibility. Instead, this list will take the biggest pain points those with accessibility needs have when browsing a website and show you how to address them.
1. Choose colors carefully
Color can be an important tool for distinguishing between logical areas on your website. But it can also be a problem for a number of people. Perhaps the most obvious problem comes for color-blind users. When color is used to convey meaning that must be understood by site visitors, it's important that they can actually distinguish those colors. There are tools available to check your website for colorblind friendliness that can help you make color decisions.
Another area of concern with color selection is contrast. While someone with good vision may be able to clearly read your page, others might not be able to make out the text or graphical elements if the contrast is too low for their eyes to pick up on easily. Use this tool to check to see if your color choices are accessible.
2. Pay attention to image sizes
Although a small image can be hard to make out, for this point, we are more concerned with images that are too large. An image that goes beyond the size needed to be comfortably viewed by anyone is going to be taking up needless bandwidth. These images will take longer to load and will slow down the user experience as they are browsing your site.
In addition to being a poor experience and something search engines will punish, slow image loading can cause accessibility problems as well. We've likely all had the experience of a poorly designed site that keeps loading images and moving the page around as we're trying to read it. People with poor vision who find it hard to focus in the first place can be especially annoyed by this.
3. Use alt-image attributes
Images can present a real barrier for people who are blind or have poor vision. Except for images that are used only for decoration, the inability to see the information contained in an image limits one's ability to understand the website. Alt-text allows you to convey the message that the image is meant to in text form. For readers who have vision problems, this is a life-saver; their screen reader will pick up on the alt-text and explain to them what the image contains.
4. Use headings
Screen readers can pick up header tags (h1, h2, h3, etc.) to aid users both in navigating the site and in understanding the content that it contains. In addition, using headers helps break up the wall of text, so even people who aren't using screen readers will be able to more easily read your content. One important note is to always use header tags in the appropriate order. Skipping from h1 to h3 can make it appear as though something is missing to someone who is relying on a screen reader.
5. Use descriptive link titles and URLs
Sighted users will scan the links of a page to see where they can go. This is easy for them, because regardless of what the link says, they can use the surrounding context to understand where it will take them. This is not always the case with people who rely on screen readers. When scanning the set of links, they will only be given the text of the link. So, they may only see 'Click here' instead of 'Click here to learn more about us.' The more descriptive link conveys more information.
The same is true of URLs. While you can control your own internal links, you can't control when people link to you. Using descriptive URLs, however, allows users of screen readers with poor link text practices to gain some context about where the link will take them.
6. Label forms properly
Some websites use placeholder text rather than proper labels when creating forms. This might seem like a good idea, but it creates two possible accessibility issues. The first is that screen readers will often not read the placeholder text, making it impossible for users to understand what they are supposed to enter. The second is that placeholder text is often a very low contrast, making it hard for those who have other difficulties seeing to understand as well. Proper, descriptive, labels should always be used.
7. Support keyboard navigation
This tip applies to forms, but also extends to other areas of the website. People with sight issues can't see your page to navigate it with a mouse. Others may have mobility issues that make it difficult for them to use a mouse. For both of those groups of users, navigation via keyboard is the only way they can browse a site.
Be sure that all of your forms flow logically from one element to the next when using the tab key. The same goes for navigation elements on your site. Menu items that are only accessible when hovering a mouse over them won't be accessible at all to some people.
8. Avoid tables when possible
Back in the day, tables represented one of the earliest ways HTML allowed web designers to layout a page. Today, HTML has progressed quite a bit, and there are better options for page layout. When a screen reader encounters a table, it will try to explain the organization of the table to the user. When used to convey tabular data, this is very helpful. However, when used for layout purposes only, this information becomes noise that will detract from their experience.
Making sure a website is accessible requires extra effort and while we can't ensure that changes you make on your own are as accessible as they should be, we can help you understand the issue so you can make informed design decisions. If you have any questions about updating your website in a way that provides the best accessibility, please feel free to contact us.