What Makes a Website Accessible?
This is the second post in a two-part blog series about accessibility for e-commerce websites. Read Part 1 here.
Many businesses are working to make their websites easier for everyone to use, including users with a wide range of disabilities.
Accessible design and compliance with the Americans with Disabilities Act (ADA) is a growing topic in web design and development circles - partially because it’s obviously just the right thing to do, but also because, “From a strictly business point of view, your site should be accessible because driving away visitors who have disabilities means lost conversions and revenue for your clients.”
Features of Accessible Websites
People using assistive technologies like screen readers rely on a website’s structural elements to navigate through a page without being able to see it or using a mouse. There are many structural elements to consider when developing a universally accessible website, including the following:
Audio and Video
- Images, embedded objects, and audio/video content should have text alternatives/transcriptions so screen readers can pick up the meaning of the image.
- ARIA landmark roles: Use the eight ARIA (Accessible Rich Internet Applications) landmark roles to help screen reader users quickly jump to a specific section section of a page. The eight ARIA landmark roles are:
- role=”navigation” (e.g., a menu)
- role=”main” (the main content of the page)
- role=”complementary” (e.g., a sidebar)
- role=”contentinfo” (meta data about the page, e.g., a copyright statement)
- role=”application” (a web application with its own keyboard interface)
- ARIA for web applications: This is markup that can be added to HTML to help screen readers and other assistive technologies better understand the elements on a web page, and enable users to effectively interact with those elements.
- Use mark-up to convey meaning and structure using HTML5, WAI-ARIA, etc. Coordinate with designers and content writers to ensure consistency.
- Navigation can be triggered using the keyboard. For example, “enter” or “space” to trigger submenus, arrow keys to move through menus in all directions, and close menus with Escape.
- Navigational links should be grouped together in a list to add structural information to your pages.
- Provide users with the option to bypass blocks of your site, such as “Skip To Navigation” or “Skip to Main content”.
Headings, Labels, and Tags
- Form fields (like edits and buttons) require proper labels Tables should be clearly defined using HTML tags to explain the relationships between table headers and cells.
- HTML headings should follow a logical structure and substructure
- Color should not be the only characteristic used to convey information. For example, if link text is blue, it should also be underlined so users who are unable to perceive color differences can distinguish links from surrounding text.
- Color contrast should be within recommended ratios for users who have difficulty perceiving text if there is too little contrast between foreground and background. Use the Colour Contrast Analyser or WebAIM Color Contrast Checker for guidance.
- Some fonts are by design more readable than others.
- The display should respond to the user’s technology, including different zoom states and viewport sizes. Avoid horizontal scrolling and clipping content.
- Give all interactive elements such as menus, mouse-over information, or media players keyboard accessibility.
- Link text should be short, easy to say, and able to stand alone independently of its context
- Identify the primary language on every page, and indicate when the language changes
- The order of elements in the code should follow the logical order of the information presented. (Check by removing CSS styling to see if content order still makes sense.)
- Forms should help users avoid and correct mistakes by providing clear instructions, error messages, and notifications; helping users find the problem; suggesting corrections; and accepting variations in format (ex. Accept phone numbers with or without spaces or dashes).
Growth Spark recently worked with Newbury Comics, a music and pop culture retailer, to strengthen the brand’s online accessibility. The project ensured that Newbury Comics’ Shopify e-commerce store adheres to many of the accessibility best practices described in this post. The brand also added an accessibility page to their site to inform their customers of their actions.
The color contrast on the Newbury Comics Shopify e-commerce site is designed to be comfortable for visually-impaired and colorblind shoppers.
The Newbury Comics site currently uses ARIA landmark roles and markup to help screen reader users quickly jump to a specific section of a page and better understand the elements on a web page; conforms to recommended color contrast ratios; and navigation that can be triggered by a keyboard and is grouped in a list to provide on-page structural information.
Newbury Comics’ online navigation is grouped in a list to help users with screen readers understand the site organization.
How to Build an Accessible Shopify Website
Shopify has made great strides in building more accessible design into its existing platform, including developing its own design system, named Polaris. Polaris provides design guidelines for all aspects of a Shopify e-commerce site, and meets web accessibility standards. Polaris is available to Shopify Partners, along with a component library and downloadable UI kit.
The Polaris component library includes code with accessible markup, and alternative text for icons, complex images, and actions (like buttons and links) to help people with low or loss of vision. Since this code exists in a single component that gets reused, it’s easier to update. As a result, users get a consistent, accessible experience.
While using Polaris to design a site from scratch is probably best left to the pros, it’s good to know that Shopify uses its guidelines and best practices for all of its own products (themes, apps, etc.). So, when you choose to work with a Shopify product, you can be confident that it will meet web accessibility standards. (However, for third-party developers, it may be difficult to find out whether they use Polaris to design their theme or app.)
Check Your Website’s Accessibility
Just how accessible is your website right now? It’s not difficult to figure out. And once you know, you can take steps to improve it.
- Testing your application with a screen reader. There are many available screen readers, such asNVA (which is a free download).
- Checking your code with HTML validator
- Using a keyboard. You should be able to navigate your site and access all interactive features using only the keyboard (i.e. enter, space, arrow keys or other intuitive keystrokes).
- Conducting W3C validation tests for HTML
Improving website accessibility can take time and can be costly. It may be worth looking into financial incentives, including a one-time tax credit to cover up to 50 percent of eligible accessibility improvement costs. These tax credits apply to expenses between $250 and $10,250, and cover costs like acquiring or modifying equipment or devices.
Wondering whether your website meets current web accessibility standards? Or want help making the adjustments needed to ensure your online store is accessible to all of your potential customers? Give us a call. At Growth Spark, we know this online accessibility stuff inside and out.
- E-Commerce Website Accessibility [Part 1]
- What Shopify Merchants Need to Know About GDPR
- Top Shopify Store Trends for 2018 E-Commerce Success
- Creating an Intuitive UX When You Offer 100+ Products