Why the Mobile Accessibility of Your Store Is More Important Than Ever

Why the Mobile Accessibility of Your Store Is More Important Than Ever

According to the CDC more than 3.4 million Americans over age 40 are legally blind.

More broadly, 21 million Americans aged 18 or older report "functional vision problems or eye conditions that may compromise vision."

In a study publishing in 2015, the CDC reported blindness or vision impairment #4 out 5 functional impairments among adults. 

Top 5 Disablities among Americans

Infographic caption:

Percentage of adults with select functional disability types. 13.0% have trouble with mobility or serious difficulty walking or climbing stairs. 10.6% have trouble with cognition or have serious difficulty concentrating, remembering, or making decisions. 6.5% struggle with independent living or difficulty doing errands alone such as visiting a doctor's office or shopping. 4/6% of people have trouble with vision and say they are blind or have serious difficult seeing, even when wearing glasses. 3.6% of people report trouble with self-care and have difficulty dressing or bathing.

When designers talk about "accessible design," they're talking about making the web usable for the millions of people worldwide who use the web differently from the traditional means. 

While vision problems are one of the easier accessibility issues to wrap our minds around, there are many others to factor in - especially as web behavior shifts from desktop to mobile.  

Make no mistake, the mobile web is different from the world of personal desktop computers; it's not as easy to magnify text, for example, and many websites by default are not equipped to handle text to speech appropriately.

Making accessible web experiences can require a significant investment. As a result, the majority of the mobile web is not built with accessibility in mind.

Many sites even prohibit users from taking advantage of the accessibility or personalization features of modern smartphones. 

For millions who live with a temporary or even permanent disability, this means limited or non-existent online shopping experiences.

Thinking About Accessibility in 2017 and Beyond

As online shopping continues to grow, we face a multitude of challenges when approaching accessible design.

Everyone from the permanently disabled to the temporarily disabled; from an amputee purchasing running shoes to a mother holding her newborn in one arm and purchasing diapers with a free hand via her mobile device -- designing for accessibility means designing for all.

With personalization becoming more and more prevalent on ecommerce sites, it is important for all business owners to consider how users of all abilities access your online stores. An able-bodied person deserves to have a personalized experience on your site, so a differently-abled person should be given access to the same experience.

For many stores, this means providing subtle UX decisions like automatically focusing the screen selection on the “exit” link of a quick view box. It also means paying more attention to elements like your checkout text box placement and payment forms.

Creating Equitable Experiences For Different Users

Every business owner should aim to provide an equitable site experience to your visitors. That means providing additional support where it is necessary; not “make the experience unified for everyone.”

Not all site features are used the same way, so the bulk of your investment in accessible design is usually centered on the conversion funnel. This extends beyond the Product Detail Page and Checkout. It includes newsletter signup, promotions, and site search, too. Some retailers who are getting it right include:

  • Walmart provides dropdown navigation via keyboard alone, and it works intuitively
  • Walmart also provides a hidden “jump to department navigation” link for keyboard-only browsers, but misses the mark on other pages which require filling in the zip code to get local store deals
  • Amazon requires less than three presses of the tab key to get to the “search” box, which is the most prominent item on the home page
Walmart provides jump to department navigation links for keyboard only users
Using a keyboard to browse site navigation. Intuitive use of cycling through open/close menu of tabbed drop-down.

Disability is Not Always Permanent

You should strive to offer an accessible design that provides all users with the same experience when shopping on your site.

Remember, not all disabilities are medical or physical conditions. A person with temporarily diminished eyesight will benefit, as well as individuals with permanent vision loss.

Plus, using a mobile device in bright sunlight can be just as difficult has having reduced vision. A best practice is to approach font-size and color contrast in an accessibility-first design exercise to ensure that all users have the same experience.

Let’s take a look at some other best practices.

Accessibility Best Practices

Shopify Plus allows theme designers and web store owners to control these experiences without complicated theme structures that plague other platforms. Shopify’s Liquid template technology allows most store owners to begin adding accessibility features immediately and directly from within your store’s back office.

Shopify's editor makes it easy to include aria-hidden attributes
Editing a theme from within the Shopify back office to include aria-hidden attributes on the store navigation to improve accessibility

Web developers can use Aria attributes to give the web browser a hint that accessibility features are enabled. These attributes can be added to plain HTML which say “Hey browser – if you’re looking for a hint of where to start, this is the role I play on this site.”

This goes a step beyond plain old semantic HTML which describes the type of content to actually describe its purpose.

For screen readers, the most important element of site design is the ability to maintain focus. When a link is clicked and displays a modal window, for instance, focus should be moved to that modal.

An example of a modal window
Example of a modal window on a web page

Once dismissed, focus should then be returned to the prior link or text area from which it was stolen. Notice that our advice isn’t to remove modals altogether; instead consider if using them is necessary or a common practice and approach them with accessibility in mind.

By replacing iconography with simple text instructions mobile users can benefit from the smaller page sizes. Plus, by implementing common keyboard navigation techniques to menus, web crawlers such as Google can understand and prioritize navigation structures on your sites.

Plus, by implementing common keyboard navigation techniques to menus, web crawlers such as Google can understand and prioritize navigation structures on your sites.
Using a keyboard to navigate to a Quick View link, then moving the keyboard focus to the close button. After the close button is pressed the focus is returned to the previous position.

Another best practice is using browser plug-ins to test out designs that emulate common color blindness. With these plug-ins, you can find potential issues with conversion, such as drawing attention to your Call to Action.

Designing for Accessibility Is Just Good Business

At Something Digital, we're also finding that businesses who invest in an accessibility-first approach to design are making an investment in the future.

Many State and Federal laws in North America and Europe are becoming more and more sensitive to the needs of disabled citizens. Large enterprises and small to medium-sized businesses alike are facing the Americans with Disabilities Act (ADA) and Section 508 lawsuits in courts today in the United States. While the courts battle these issues in the United States, we're already beginning to see rules begin to form in Europe.

Like with most things in life, an ounce of prevention can be worth more than a pound of cure. Rather than face potential litigation now we often advise merchants to engage in an accessibility exercise and add it to your compliance calendar as part of your IT and marketing organizations.

While it will improve your site's accessibility, many sites also see an uplift in traffic and conversion. As a result, it offsets the initial investment.

Although no amount of implementation can completely indemnify a web store owner in the event of a lawsuit, taking a proactive approach and becoming familiar with the requirements of ADA and WCAG 2.0 is a good exercise for your digital marketing team.

Obvious and intentional approaches showing proactivity will likely play well when settling disputes.

Where Should Merchants Start?

Accessibility is not a black or white proposition. It is a spectrum that is in constant motion along with web design and web standards.

Today’s challenge is making sites that allow users of all abilities to purchase products from merchants. You can get started on your accessibility journey today by performing a quick check of your site. There are many tools online to test simple ADA guidelines like font size and colors.

Some of those tools include:

To learn more, you can read about the guidelines here: https://www.ada.gov/racheck.pdf

After performing a quick self-assessment, reach out to a knowledgeable agency like Something Digital to continue the conversation about a UX audit and accessibility primer.

About The Agency

Something Digital is an award-winning, multi-disciplinary team that produces innovative ecommerce experiences for leading B2C and B2B brands.

As your strategic partner, we carry projects from concept to launch, rescue works in progress, and provide ongoing support for growth. Contact us to receive more information.