When designing small business or e-commerce websites, you shouldn’t design them for only one type of visitor. While most of us can adapt to a usable site and can navigate freely, there’s a range of users who may not have the same abilities or may approach your content differently.
This article addresses the reasons behind designing and developing your website for accessibility, and we’ll provide a few common tricks to ensure your site meets all necessary guidelines.
This article should help you understand the following:
- Why website accessibility is important to your small business
- Various groups of individuals who benefit from accessibility design
- Features of accessible websites
- A basic cheat sheet for meeting the challenge of designing accessible websites
- A list of tools and resources that may help you meet these goals
Why Is Website Accessibility Important?
- To maximize visitors
- Legal reasons
By making sites accessible to those who are differently-abled, you make your site easier to use for everyone. This improves usability and user experience (UX).
Website Accessibility Is Important To Maximizing Visitors
There are many reasons for ensuring all users can access your valuable content. These include making sure that the maximum number of customers can access your site to increase usage, profits, or many other reasons.
Website Accessibility Is Important for Legal Reasons
Accessibility is also something you must consider for legal reasons. Much like many brick-and-mortar businesses must make access to their stores available and usable by those who may have physical disabilities, the same has been determined to be true for virtual business presences.
In the United States, 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 potentially be a concern for smaller websites as well.
Regardless of legal reasons, it’s best practice to make your content available for the highest number of people possible.
How Should You Structure an Accessible Website?
Your website’s content must be:
- Perceivable by all users
- Operable with the minimum level of difficulty
- Understandable by all visitors
- Adaptable for future innovation or developments
Website Content Must Be Perceivable
When talking about the viewability of a website, all users must be able to easily identify the information presented.
Individuals with different levels of abilities should 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 that those who lack sight can perceive what content is available on the webpage.
Websites Must Be Operable
Users should be able to interact with a site and use the site with a minimum level of difficulty. This implies that there should be more than one way of interacting with content, such as your internal and external links.
Also, you should not limit your visitors to using a mouse, you should provide alternative ways of navitation 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 that it’s important to design content that is continuously accessible, no matter what software or assistive technology your visitors are using.
Groups With Accessibility Needs
- Users with sight limitations
- Visitors who are deaf or hard of hearing
- Those with physical limitations
- Users with seizure conditions
- Seniors
Users With Sight Limitations
Many users have trouble seeing visual content or reading written content. Sight limitations can affect people at various levels, ranging from partial to full blindness. It’s necessary to provide users with these limitations alternate methods of accessing your content.
One subset of users with vision problems includes those with any form of colorblindness. Color blindness exists on a spectrum, ranging from those who can distinguish between similar hues ― like red-green colorblindness ― to those who cannot see color in anything other than gray scales.
For this reason, 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, or if there’s an audio recording, a written transcription is necessary.
These alternatives are an important consideration and not just for those who have trouble hearing. Many users browse with the sound turned off for many reasons, such as not bothering others or browsing from work without headphones.
All of the considerations you might consider for the hard of hearing would also benefit the wider population.
Those With Physical Limitations
Users who have limitations in movement may have trouble navigating a site that’s solely pointer-driven. It’s essential to allow alternative navigation methods, such as keyboard-driven navigation or the ability to move around the site with voice-activated controls.
Users With Seizure Conditions
Some users can have adverse reactions to overly bright colors or flash animations. You should keep these to a minimum, or you must provide users with the ability to view an alternate version of your site without these effects to prevent a serious medical condition.
Seniors
Seniors are an important group who may have newly developed disabilities in any of the categories above. Ignoring accessibility guidelines can result in losing a major part of your potential audience.
Features of Accessible Websites
- Hypertext markup language (HTML) headings
- Keyboard accessibility
- Accessible images
- Accessible menus
- Form accessibility
- Accessible tables
- Color for accessibility
- Meaningful link text
- Accessible Rich Internet Applications (ARIA) landmark roles
- ARIA for web applications
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 that make creating accessible content for a wide range of users easier.
HTML Headings
HTML headings have a built-in hierarchical structure which enables clear information architecture within a web page. Headings in HTML all begin with <h> and are numbered in 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 that 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 a lot easier to understand whether one type of content is a subset of another type of content.
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, you should provide the ability for users to navigate a page using only the keyboard.
You should enable keyboard users to navigate between sections of the page using the “tab” key on the keyboard. Keyboard navigation helps users toggle between actionable items, such as links, form entries, buttons, and more on well-designed web pages.
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, the user should be able to use the arrow keys to navigate these items.
Your site is considered inaccessible if your pages don’t respond to the keyboard.
One crucial aspect of keyboard navigation is seeing where the focus of your visitors’ device is 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 that 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 color of 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 users of your website have the full use of sight. For this reason, 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; instead, 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 type of menu, ensure that users can adequately navigate using just their keyboard.
Form Accessibility
One of the most important areas for making sure that forms remain accessible is through the use of labels. Ensure that 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 that 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 that you should 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 significant numbers of users have some form of color blindness or have 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 guidelines, 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 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.
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, such as screen readers, to better explain 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.
It’s important to 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 that exist for ARIA:
- banner: This refers to a banner or hero image on a page
- navigation: Used commonly for link menus
- main: This refers to the main content on a web page
- complementary: This can be used for a sidebar on a page or any other complementary content
- contentinfo: This is used for 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 Applications
When using the application role, make sure you only use these if there are specific instructions for separate keyboard navigation from the rest of the page that can be used for a specific application. This can cause problems for some users so use sparingly.
Web Accessibility Cheat Sheet
Below are a few quick things to remember when you’re designing websites for accessibility.
Design
- Semantic HTML: By using elements in HTML5 which help define individual sections of the page, you help improve the accessibility of your site. This provides structure to your site and helps assist screen readers to understand the contents that are contained within.
- Always use labels for form elements: Not only does this make it easier for average users to understand the meaning of a form, but it also 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 allow users of mobile devices to scale the page themselves by setting user-scalable to “yes” in the meta viewport element. Don’t set a maximum scale value; never assume that 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, you should 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, also include icons to help users who can’t tell the difference that a particular segment of the text requires attention.
- Provide captions: If providing video or audio content, always make sure that there’s 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, such as is common with many single-page applications, make sure you use WAI-ARIA controls.
Testing
There are several accessibility tests you should run on your site before launching it:
- Zoom the screen: It’s important to ensure that your screen can be read at much larger sizes. Test it at magnifications of up to 400% to make sure that text doesn’t push off the screen and that 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. Make sure that logic flows normally, and that 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 a user who isn’t sighted.
- Turn off CSS: This is a great test to make sure that 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.
Web Accessibility Tools
- A11Y compliance platform: Get a free Accessibility Analysis from the Bureau of Internet Accessibility.
- Free checklist: Here’s a free checklist from Elsevier that you can follow to make sure that your websites are fully WCAG-compliant.
- Color tester: Here’s a convenient online color testing tool, which helps you identify whether the colors you’re using 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 levels of abilities.
- DYNO Mapper: This website provides extensive accessibility testing. It checks to make sure you adhere to a wide range of guidelines, including all WCAG levels. You can visualize all tests in a browser so that you can 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 errors in sites, 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.
What To Do Next
One thing that’s important to remember when designing for accessibility is the standards are constantly changing. Today’s standards 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.
For this reason, our understanding of accessibility must continually evolve as we gain new information and as new technologies become available.
The main point is that committing to the accessibility of your website helps you get used to the idea that not all users approach content the same way. It will increase access for those who are differently-abled and increase the usability of your site for all.
Visit our list of the best website builders of 2023 if you’re ready to begin building your website or need to choose a platform to get started. Visit our site or follow Digital.com on Twitter for more information on web accessibility and other website-building topics.