When designing small business or e-commerce websites, it’s best to consider all visitors. While users often can adapt to a usable site and navigate freely, many users may not have the same abilities or may approach your content differently.
See why you need to develop your website with accessibility and provide a few common tricks to ensure your site meets all the necessary guidelines.
Key takeaways:
- Website accessibility is important to your small business because you will attract more visitors and be legally compliant.
- Various groups of individuals benefit from accessibility design, from those with sight and physical limitations to people with seizure conditions.
- Websites must include various features such as keyboard accessibility, meaningful link text, accessible menus, and more.
- You can use many web accessibility tools like a checklist, a color tester, and a contrast finder.
Why Is Website Accessibility Important?
By making sites accessible to those with accessibility needs, you make the site easier to use for everyone. This improves usability and user experience (UX).
Accessibility can maximize your visitors and revenue, and it’s essential for legal compliance.
Much like many brick-and-mortar businesses must make access to their stores available and usable by those with physical disabilities, the same has been determined true for virtual business presences.
In the U.S., there are federal guidelines for making websites accessible, namely the Web Content Accessibility Guidelines (WCAG) standards. While large companies have been sued over a lack of accessibility, it could also be a concern for smaller websites.
Regardless of legal reasons, making your content available to the most people possible is best practice.
How Should You Structure an Accessible Website?
There are various things to remember when putting together your accessible website.
- Website content must be perceivable: When talking about the viewability of a website, individuals with different abilities must be able to identify and distinguish the on-screen content. Images should not make up the majority (or all) of your site, even if the content is graphical. Text should always accompany your graphics and images so those lacking sight can perceive what content is available on the webpage.
- Websites must be operable: You should be able to interact and use the site with minimum difficulty. This implies there must be multiple ways of interacting with content, such as your internal and external links. Also, it is best not to limit your visitors to using a mouse; provide alternative ways of navigation with keyboards or other assistive devices.
- Web content must be understandable: If users cannot make sense of your website content, your site is failing in its purpose. Visitors should navigate the site easily, understand what information can be obtained from it, and interact with it easily.
- Web content must be adaptable: Web browsers, tools, and other technology behind websites often change. This is a natural attribute of technology, and new tools are developing regularly. However, this means it’s important to design content that is continuously accessible, no matter what software or assistive technology your visitors are using.
Groups With Web Accessibility Needs
- Users with sight limitations: Many users have trouble seeing visual content or reading written content. Sight limitations such as partial to full blindness or color blindness can affect people at various levels, ranging from partial to full blindness. It’s important to display visual content that uses color with significant enough color contrast to be discerned by those who cannot distinguish hues.
- Visitors who are deaf or hard of hearing: If you’re providing content that requires sound, you must include a text alternative, such as closed-captioning on videos. If there’s an audio recording, a written transcription is necessary. These alternatives may be helpful for users who browse with the sound turned off for many reasons, such as not bothering others or browsing from work without headphones.
- Those with physical limitations: People who have limitations in movement may have trouble navigating a solely pointer-driven site. It’s essential to allow alternative methods such as keyboard-driven navigation or the ability to move around the site with voice-activated controls.
- Users with seizure conditions: Some people can have adverse reactions to overly bright colors or flash animations. Keep these to a minimum, or provide the ability to view an alternate version of your site without these effects.
- Seniors: Seniors may have newly developed disabilities in any of the categories above. Ignoring accessibility guidelines can result in losing seniors in your potential audience.
Features of Accessible Websites
You can use several methods to ensure that your website is accessible to all groups of users. Additionally, several tools have been built into HTML, which makes creating accessible content for a wide range of users easier.
Hypertext markup language (HTML) headings
HTML headings have a built-in hierarchical structure that enables clear information architecture within a web page. Headings in HTML all begin with <h> and are numbered in the order of their specified hierarchy.
While it’s possible to style these headings using cascading style sheets (CSS) to behave and look in different ways, for accessibility purposes, it’s considered best practice to structure content so it’s always hierarchically organized.
The site’s structure can be understood by those who see the difference in size and those using various assistive devices using these headings. This structure makes it much easier to understand whether one type of content is a subset of another.
Keyboard accessibility
Some users may have trouble using a mouse or prefer not to use one because navigating with a mouse may be painful or difficult. For this reason, provide the ability for users to navigate a page using only the keyboard.
Enable keyboard users to navigate between page sections using the “tab” key. On well-designed web pages, keyboard navigation helps users toggle between actionable items, such as links, form entries, buttons, and more.
Instead of requiring a click, actionable entries should respond to the “enter” key. Similarly, if there’s movement within the page, such as on a widget or a slider, you should be able to use the arrow keys to navigate these items. Your site is inaccessible if your pages don’t respond to the keyboard.
One crucial aspect of keyboard navigation is seeing where your visitors’ device focuses on the page. The visibility of links and actionable items must be clear using CSS. For example, links within the text should maintain the default setting of being underlined.
It should also be apparent to the user they’re focusing on a specific link by changing this behavior. One way of handling this is by changing the color of the link, although this may be problematic for color-blind users. Another way is by removing the underline.
Here’s a simple example of the default behavior for a link, making sure it has the common blue color:
a {
color: blue;
background-color: white;
text-decoration: underline;
}
When focus on the link is activated, you can change the text to another color, and change the background and remove the underline, like so:
a:hover, a:focus {
color: red;
background-color: gray;
text-decoration: none;
}
This way, users navigating with the keyboard get a clear visual cue as to whether they have focused on a link.
Accessible images
Not all your website visitors have full use of sight. Graphic content, such as images ― particularly those that are key to the content ― should be modified so that users who cannot see them are presented with alternative text that screen readers can read aloud.
You can do this using the “alt” attribute to the img tag. For example:
<img src="cat.jpg" alt="picture of a cat" />
There are no noticeable changes to the layout for users who can see images, but for those who don’t see graphic content well or if the image doesn’t load properly, the text “picture of a cat” is read aloud or displayed.
If an image exists for only decorative purposes, such as a background image in the header bar, it shouldn’t use the HTML IMG tag. Use CSS, and the screen readers will ignore the image.
Accessible menus
Make sure to markup your menus with a recognizable structure. Using unordered lists (“ul”) and “li” tags is an acceptable method of organizing menu structure. You can style these any way you like using CSS.
Avoid using flyout or accordion-type menus, as these can cause problems for many users, particularly those who have trouble navigating with a mouse. If you’re using this menu type, ensure users can adequately navigate using just their keyboard.
Form accessibility
One of the most important areas to make sure that forms remain accessible is through the use of labels. Ensure all fields have an accurate label using the <label> field so that screen readers know what a field is for.
For related fields that belong to each other, it’s also a good idea to use the <fieldset> and <legend> elements. Group elements together using a fieldset and apply a legend to them to ensure it’s possible to identify why these fields are related.
Accessible tables
Only use tables for tabular data. While it’s tempting to use them for layout, beyond accessibility, this causes problems with rendering content on mobile devices.
Tables are useful for presenting data in rows and columns. However, for accessibility purposes, there are a few fields to always use: “<th>” table headers.
This should be done for all tables, regardless of whether they’re simple or complex. For complex tables, use a <th> for each grouping of rows or columns, and use unique ids for each <th> element.
Color for accessibility
Because many people have some form of color blindness or trouble differentiating between different colors, it’s unwise to use color for conveying information.
When using colors, make sure you’re using considerable contrast so that users can differentiate between them. According to WCAG, the color contrast ratio in most cases should be at least 4.5:1, except for large text, which can have a 3:1 ratio.
Meaningful anchor text
Always make the anchor text (clickable text) meaningful when providing text links. Avoid using ambiguous phrases like “click here,” and instead use language that describes what information or resource clicking on the link provides. Using relevant anchor text is also a best practice for website search engine optimization (SEO).
Clickable text isn’t only helpful for regular users, it provides more information for text reading software so that users with sight disabilities can understand the purpose of the link.
Accessible Rich Internet Applications (ARIA) landmark roles
ARIA is a World Wide Web Consortium (W3C) specification for various markup tags that you can add to HTML documents to ensure your site is accessible by assistive technologies. An example would be screen readers to explain better the elements appearing on a web page and how best to interact with these elements.
ARIA roles, when specified in the HTML, cause screen readers to interrupt the user to let them know what sort of content appears in each of these elements.
Note that many of the features of ARIA have been incorporated into HTML5 so ARIA is being deprecated. But you can still use it for backward compatibility purposes when coding for older browsers and heavily dynamic content.
These features can be identified by placing a few attributes into specific elements, identified by the “role” property. For example:
<div role="banner"></div>
Eight ARIA landmark roles
Landmark roles exist to identify blocks of content that often appear on web pages. There are eight basic landmark roles for ARIA:
- Banner: A banner or hero image on a page
- Navigation: Link menus
- Main: The main content on a web page
- Complementary: A sidebar on a page or any other complementary content
- Contentinfo: Metadata on the page or content about content, such as copyright information about a page, an author, and so on
- Search: For search boxes and more
- Form: Forms for user input
- Application: Any separate application on the field which may have a separate interface
Often, roles may be used more than once on a page, so it makes sense to include an “aria-label” property to identify the specific purpose. For example:
<div role="form" aria-label = "contact information"> <div role="form" aria-label = "user interests">
ARIA for web apps
Only use the app role if there are specific instructions for keyboard navigation separate from the rest of the page that can be used for a certain app. This can cause problems for some people, so use sparingly.
Tips for Web Accessibility
Below are a few quick things to remember when designing websites for accessibility.
Design
- Semantic HTML: By using elements in HTML5 that help define individual sections of the page, you help improve the accessibility of your site. This provides structure to your site and helps screen readers understand the contents contained within.
- Always use labels for form elements: This makes it easier for average users to understand the meaning of a form and assists screen readers with correctly accessing individual elements. For example: <label for=”search”>Search</label><input id=”search”>
- Make sure colors contrast correctly: Follow WCAG standards whenever possible.
- Descriptive links: Never link the words “click here” but instead link the actual target name or the subject of the page.
- Allow pinch scaling: Always let mobile device users scale the page by setting user-scalable to “yes” in the meta viewport element. Don’t set a maximum scale value; never assume there’s an outer limit for what’s required for a user to access your content.
- Use text: When providing nontextual content, always include some additional text. This should apply to images, videos, or sound recordings. This way screen readers can help interpret this content.
- Show focus: Provide visual cues for users who navigate your site using a keyboard. It should be possible to see where the cursor is on the screen by looking at it. Add visible highlights for this purpose. Also, ensure that elements are placed in a logical order to be understood by screen readers.
- Don’t rely on color for meaning: Many users cannot discern differences between hues. If text needs to be highlighted in red for urgent messages, include icons to help people who can’t tell the difference that a particular text segment requires attention.
- Provide captions: If providing video or audio content, always ensure a textual alternative. If there’s an audio recording, provide a transcript. For video, always provide the option of subtitles.
- Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA): If your site is dynamic, as is common with many single-page applications, make sure you use WAI-ARIA controls.
Testing
There are several accessibility tests to run on your site before launching it:
- Zoom the screen: It’s important to ensure your screen can be read at much larger sizes. Test it at magnifications of up to 400% to ensure text doesn’t push off the screen and content can still be gleaned at larger sizes.
- Test with a keyboard: Unplug your mouse and attempt to navigate your site with only a keyboard. Ensure that logic flows normally and all aspects of your site can be accessed.
- Use a screen reader: It’s best to do this with your monitor completely turned off. This way you can truly replicate the experience of someone who isn’t sighted.
- Turn off CSS: This is a great test to ensure your site’s HTML is structured well enough. Does the page still make sense?
- Lighthouse: Chrome has built-in accessibility checks. Go into your development tools and choose “Lighthouse” from the audit section to generate a report. Make sure you check it against its built-in accessibility criteria.
What Are Some Web Accessibility Tools?
- A11Y compliance platform: Get a free Accessibility Analysis from the Bureau of Internet Accessibility.
- Free checklist: Elsevier shows you how to ensure your websites are fully WCAG-compliant.
- Color tester: Here’s a convenient online color testing tool that helps you identify whether the colors on your site meet varying levels of WCAG compliance.
- Contrast finder: Are you looking for good colors which successfully contrast against your existing color palettes? You can enter foreground and background colors to determine whether they’re easy enough to read by people with varying abilities.
- DYNO Mapper: This website provides extensive accessibility testing. It checks to ensure you adhere to a wide range of guidelines, including all WCAG levels. You can visualize all tests in a browser to see how people with different abilities perceive a site. You can sign up for a free trial.
- WAVE: This is a suite of website accessibility evaluation tools. Beyond checking for site errors, it can help make a human evaluation of sites easier. You can enter a URL, and it checks the site for accessibility.
- Screen readers: Get a copy of a screen reader to test out your sites. If you’re using a Macintosh, you can use VoiceOver. If you’re using a Windows PC, there’s Narrator.
When designing for accessibility, remember that standards constantly change. What is required today may not be ideal given future needs, or more advanced discoveries may help us improve our understanding of how best to meet the needs of different individuals.
Committing to the accessibility of your website helps you get used to the idea not all users approach content the same way. It will increase access for differently-abled people and increase your site’s usability for all.
Check out our list of the best website builders if you’re ready to create your website or need to choose a platform to get started.