Written By: Phillip Jackson, Ecommerce Evangelist - 6 minute read
In our last installment we covered equitable design, and why creating accessible experiences is necessary for your business. Today we will focus on how to approach accessibility with specific site features. We have a lot of ground to cover, so let's get started.
Accessible Sites Can Be Beautiful
When approaching a11y it's never too early to start. At Something Digital we begin in the wireframing process - when UX is in its infancy. We use primitive elements like boxes, blocks, and placeholder text to convey order and meaning to the design. Wireframing allows us to pilot what the site would look like without any iconography and graphics. When a site is stripped down to the bare essentials, it is then that we can begin to "see" how text-only and screen reader devices experience our sites. This helps us make decisions that benefit everyone.
Accessibility begins in this stage by developing a meaningful approach to information architecture and the visual hierarchy of the site. At SD we believe that there is beauty in a well-organized ecommerce site! For example, deep information architecture is difficult to navigate and creates chaotic user experiences. This is true for all users, not just differently-abled. So try to avoid deep navigation structures and nested menus that hide content far away from those who want to find it. Hierarchy needs to clearly outline what’s important on a page. By designing without colors or fonts the real call to action jumps off the page.
Forms should be viewed as a method of conversation for an online store. Traditional retail is full of human interaction between real, live people. When shopping online the lack of "conversation" can lead to sterile sites that don't engage the customer. Web forms are often the vehicle for customers to ask questions. These questions can be full of very personal information, just like in real life, and we need to present these questions in a friendly, polite manner to gain trust … and get honest answers.
Some questions have short answers like "what are you shopping for?" and some have very long answers like "how will you be paying today?" and "where can I ship this order to?" This needs to be factored into good form design. For example, when designing a form we put the label outside of the field to visually re-reference the label. This creates less strain for the user when remembering where they are in their journey of answering our questions. A form field with an always-visible label is like a smiling customer service agent ready to help with anything at all.
Asterisks denote importance, and are visual indicators of a field that is required. This is the equivalent of an underline or an exclamation point! This pops off of the page and says "don't forget me!”
In our thorough testing we've found that forms with a lot of side-by-side information are difficult to visually digest and require a user to slow down and review more closely. This can be painful for users with screen readers as there is no relationship to the vertical columns of information - to them the content is simply out of order.
Instead, a stacked form field list for long forms like shipping address become naturally easier to use for a screen reader because there is now a natural order to the hierarchy of information, rather than an order determined by the visual presentation. As an added benefit, stacked form fields in a vertical line also tend to convert better on mobile as the mobile user is trained to scroll for more information.
Modern ecommerce sites are chock full of conveniences like live chat, hamburger menus, quick view modals, sticky headers, and more. Approaching accessibility for these conveniences can be a tricky endeavor.
In general, we try to remove anything that becomes a change of context over top of the content on the page. So, in place of a modal expand we use an in-line content section. Instead of an email popup create a site-wide eyebrow banner that is dismissible.
We also recommend placing QuickView into a flat plane. This will allow screen readers and low-vision devices understand when an action takes place outside the field of focus.
Speaking of focus, focus is incredibly important - especially for screen readers. A screen reader typically reads all content that appears, as it appears. A simple link to a QuickView could read all of the content that had just appeared but not relocate the focus, or the cursor, for the browser to the modal. This requires them to have to navigate to the modal with words like "next link" until they can find the means of closing the modal. Inline content avoids this trap by never stealing their focus, and allowing them to then skip over it in the context of where they were before.
If a modal is absolutely necessary consider placing the user's focus into the modal on open, and returning it back to their previous point of focus afterward. The polite thing to do is place their focus onto the close button so they can easily dismiss the popup if they desire.
The same approach is necessary when creating catalogs with vital information available onHover. The new Magento 2 reference theme uses onHover actions to a high degree, presenting an otherwise-accessible QuickView that is in-line with the category page content, but only able to be reached by hovering! Had they provided a text link that allows the customer to open the QuickView without needing a hover they could have had a more accessible QuickView.
The Written Word
In part 1 of this series we briefly touched on the necessity of customization for the end-user of the mobile web. Every modern smartphone allows a user to change their default font and font size. The most common cause for an end-user changing fonts is due to a visual impairment. It's important to design and test your site so that it can accommodate a user viewing your site who may be using new or different fonts.
Because fonts are central to every web experience the size of that font should be treated with care. There is no hard-and-fast rule to what size is too small. Generally, fonts with thin lines and minimal spacing between letters need to be much larger to be legible than a thicker font meant for headlines.
The same goes for the amount of contrast against the background color - if a font is thinner a larger amount of contrast will be required for it to be legible. Contrast is not just about color - but rather it conveys meaning for both color and size. Some questions to ask yourself, then, is there enough contrast between colors and size of the main call-to-actions on my site versus the size of my secondary, and tertiary, call-to-actions?
As important as *how* we write something is *what* we write. Believe it or not language, and words, matter even in an era with retina displays and 360-degree product galleries, words make or break a purchase decision. Copywriting in plain language is an often-overlooked accessibility requirement. Many accessibility experts prefer copy to be written at a 1st grade reading level. Highfalutin language lowers the ability of the average user to discover content (this is bad).
It's easy to miss notifications because we are so used to seeing them everywhere:
- "Your item was added to the cart"
- "This product is no longer available"
- "This item is out of stock"
- "Something unexpected happened"
In most cases designers convey the bulk of the meaning with color. How much a user should care about the notification is usually directly tied to whether that notification is yellow, green, or red. A more accessible approach would be to communicate these messages in plain text:
- "Success. Your item was added to the cart"
- "Notice: this product is no longer available"
- "Warning: this item is out of stock"
- "Error: An error occurred"
The same goes for sale-pricing and strike-through pricing, which are often displayed in red or with a strikethrough. The strikethrough is often not read by screen readers, so we recommend adding the label "Sale:" This will communicate that the item is on sale to those who have colorblindness.
- Before: "<span class='strikethrough'>$19.99</span><span class='sale'>$14.99</span>"
- After: "<span class='sale'>Was: $19.99</span><span class='sale'>Sale: $14.99</span>"
It's these types of small visual clues that become apparent during the wireframing process where color and other visual cues have not been added to the equation yet.
Bells and Whistles
Some things just are not accessible-friendly. For instance: Parallax scrolling, animation effects, sticky headers and footers. But providing keyboard-navigable interfaces which allow a user to traverse the important elements on a page with the tab key will get you a long way. Consider adding a "Skip to Content" link toward the top which will prevent users from having to tab through hundreds of links in your navigation before getting to "the good stuff." This can be done with a page reference, or a hypertext reference that will link into the exact portion of the page your user would like to reach:
<a href="#content">Skip to Content</a>
This is then complemented by a <div> with an id of "content":
Sliding or scrolling mastheads are extremely outdated. Animations don't translate well to non-visual browsers but allowing them to be navigated via keyboard may get you part of the way there. They also provide significant obstacles for people who suffer from learning or attention disabilities.
Does your site have videos? Make a small investment into having them closed captioned or transcribed. Transcription of a video is worth the investment for SEO content, and closed-captioning is almost to the point of being fully automated with some online speech-to-text tools.
This wraps up part 2 - and if your head is reeling, we don't blame you. Something Digital is here to help if you have any questions. There are other online resource available too to help you determine if your site is failing some of these common checks.
- 508 Checker
- Wave Web Accessibility Tool
In part 3 we'll cover how to architect and engineer code for the accessible web.
Want to learn more? Contact us here.