SD Accessibility Ebook Part 2

The spec, officially known as the Website Content Accessibility Guidelines or WCAG, were developed by the world wide web consortium (W3C), with the goal of creating precise standards for designers to help them create websites that are fully accessible to people with a range of disabilities.

Put another way, this group wanted to provide creative professionals with clear steps and guidance so that you know how to ‘design for inclusion.’ To do that, the group laid out a series of hierarchical instructions, organized by principle, guidelines and sub-guidelines (i.e. guidelines for meeting the three levels of compliance) that are fleshed out with techniques for achieving the desired results.

Part two of the Accessibility Ebook is here and yes it’s still free! It’s available to anybody and everyone because we believe it’s important to share the knowledge we’ve gained about accessibility. Download part 1 of the Accessibility Ebook here.

If you’re interested in downloading part two of this amazing ebook all we need is your email (it’s definitely worth it).

If you run into any issues downloading the ebook let us know so we can help you out.

 

Enter your email below and receive a copy of this eBook in your inbox.

Your eBook is on the way!

SD Accessibility Ebook Part 1

The team here at SD knows the importance of making a website accessible for users. We’ve given talks on it at conferences, written in-depth blog posts on it, and even practice it when posting recaps for our original web-series ‘SD Office Hours: Ask Us About Magento.’ Often when we talk about accessibility we really mean designing for disability, but accessibility is so much more than that.

So, SD decided to take accessibility to the next level and create a two-part ebook (for free!) that is available to anybody and everyone because we believe it’s important to share the knowledge we’ve gained about accessibility.

If you’re interested in downloading part one of this amazing ebook all we need is your email (it’s definitely worth it).

If you run into any issues downloading the ebook let us know so we can help you out.

 

Enter your email below and receive a copy of this eBook in your inbox.

Your eBook is on the way!

SD Blog Series

Part 4: Accessibility is the New Normal

I’m sitting down to write this blog on Global Accessibility Awareness Day. We’ve been thinking about accessibility here at SD for a few years, and we’ve been speaking about it publicly for a little over a year now – and in just that short period of time the world has changed. We are seeing a huge new round of ADA-centric lawsuits for 2nd and 3rd tier (5-25MM annual revenue) digital commerce sites. We have a retail sector in crisis in North America with bricks-and-mortar stores shuttering at a pace not seen in nearly a decade since the financial crisis. Some of those very bricks-and-mortar businesses are embattled on both sides – with major brands like Foot Locker, Toys ‘R Us and Brooks Brothers also dealing with ADA lawsuits on their websites.

And yet, digital commerce is booming. Last holiday season mobile overtook desktop for site visits for the first time; and mobile conversion is on the rise overall. Millennial shoppers in developing nations are beginning to outpace an aging Boomer population – today there are more millennials shopping on Alibaba in China than there are men, women and children in the United States, period.

A digital transformation is taking over commerce – and as a larger proportion of the marketplace becomes digital-first it’s a matter of time before accessibility becomes a de-facto requirement for ecommerce; much the way that handicap ramps and accessible bathrooms are the norm in building codes today. In 2016, over 240 lawsuits were filed against websites for lack of accessibility, the vast majority of them being class-action lawsuits. And because the cost of retrofitting sites for accessibility is being driven down across the industry these lawsuits are looking more and more attractive to those who profit for them – mostly because Title III exemptions for “undue burden” is harder and harder to claim for successful retailers; especially for those with a larger corporate backing.

In 1990, when the Americans with Disabilities Act was signed into law the World Wide Web didn’t exist; and websites weren’t considered a place of “public accommodation”. And the law hasn’t been amended to adapt to modern times, so it’s being steered by case law. And that’s not working toward the favor of the retailer today.

So how does a retailer plan for this? In the consulting realm, we seem to see a lot of parallel here in 2017 to how our clients were approaching Responsive Web Design back in 2014. Many of our clients are aware of the necessity of designing for accessibility – but the additional cost is prohibitive and they’re not feeling the pressure from their customers. We anticipate that this will shift dramatically in the next 12-24 months and retailers need to be planning an accessibility exercise in the context of their next build.

If there are downsides to the ADA being applied to websites, then there are upsides as well. Brick-and-mortar retailers have had annual tax credit incentives for the better part of 30 years to implement physical infrastructure improvements to increase accessibility – such as wheelchair ramps, striping or parking reconfiguration, signage or widening of doorways. There is a strong suggestion that the IRS’ deferral to the DOJ in the application of rules as it pertains to eligibility for website accessibility access to Capital Expenditure tax credits may have opened the door to businesses being able to apply for and receive credit for web accessibility work. Our suggestion to merchants: begin budgeting over the next 2-3 years to make continual ongoing improvements. Listen to the good advice of your trusted partners when implementing new tech or new site features and ask how they impact your accessibility. If your ecommerce platform is nearing end-of-life or it has been 4-5 years since you last replatformed, now is a good time to start thinking about accessibility.

We’ve spent a good amount of time over the last year convincing you that accessibility is necessary. In that time, we’ve seen some great resources come to the forefront for us to help continue the conversation. Microsoft recently released its Inclusive Design website detailing its vision for equitable digital experiences. We love the work happening with Microsoft across a range of platforms – not just web – and we feel there’s a lot to learn from their leadership in the space.

Salesforce has a User Experience team who have developed some thought leadership in this space as well. Their UX blog has a dedicated section to learning about and improving leadership in accessible site design.

For those of you who can’t wait 2 or 3 more years before getting started on your accessibility projects you may want to do some additional research. Thankfully there are some great resources available, the US Government’s Section 508 website is particularly helpful and has a great getting started guide.

And finally, we’ve just wrapped up a series of live events talking about this very topic. I spoke at Magento’s annual conference in April of 2017 about SD’s approach to compliance and how to budget for additional levels of compliance in your business. If you like charts and graphs as well as case studies this is the talk for you!

We hope that this has been as valuable for you as it has been for us. We hope to continue the story on Merchant to Merchant, our series of podcasts where merchants get together and talk about their struggles and successes. We hope the you’ll join the conversation – we want your feedback – tell us your story!

Written by: Phillip Jackson, Ecommerce Evangelist

 

 

SD Blog Series

Part 3: Designing for Accessibility

Welcome back to our part 3 of our 4-part series on accessibility and ADA compliance for your Magento store. In Parts 1 and 2 we built a business case for investing in ADA compliance, outlined best practices, and discussed challenges with accessibility when dealing with specific site features.

In part 3 we will discuss some of the challenges involved with building an accessible frontend theme.

Skip to Content

Content lives approximately midway between the top of our browser and the bottom, giving way to site navigation, logos, assistive links, advertising, cart management and various account management functionalities.

Someone with no sight impairments is trained to skip over this content visually to get to the “good stuff”. Assistive devices have similar features but we need to provide appropriate guidance to these devices. You’ve probably heard of “Aria” before, and if not you may have heard of new HTML 5 tags like <nav> or <header>. These provide clues for screen readers as to where the “good stuff” is!

Accessibility Example 1

HTML Markup

Designing HTML Markup that is descriptive – or semantic – is more challenging than it sounds. With HTML5 things are now a bit easier so your developers should be using more semantic elements when creating your themes.

HTML5 provides new elements for things like <nav> and <article>. These can be useful for “alternative reading orders” provided by screen readers like JAWS to give users a hotkey to jump back to a navigation element. However, as we discussed previously ecommerce sites are complex. This means any single page can have navigation for things like ‘My Account’ while simultaneously having <nav> elements for the site nav, footer nav, etc. HTML semantic elements alone aren’t enough to make the site browsable without a visual UI. For this we use Aria.

Aria

Aria – or Accessible Rich Internet Applications – is a full-blown protocol put together by the web standards body, W3C. Modern ecommerce sites utilize Aria to achieve some baby steps toward accessibility. Aria is expansive, covering everything from description of menu content such as flyouts and tree menus, to interactivity like drag-and-drop. Magento 2.0 comes with a base theme (Luma) which features some of the Aria elements like menus, navigation, and widgets. However, there are areas of most sites, like live content regions, which are open to interpretation based on the needs of the store. These are typically the types of customizations built by 3rd party developers or extension vendors.

We can tell our browser where our main content is by providing an Aria landmark to that content. Landmarks can be as simple as a <div role=”main”> wrapping the main content div in your markup. Those with screen readers usually have dedicated buttons to skip right to this content.

Accessibility Example 2

The same can be done for other landmarks on the page – and those roles are named accordingly:

– banner
– navigation
– main
– search
– article
– complementary
– contentinfo

Applying these to your content is a best practice and will help any sight impaired customers get the most out of your web experience. If you’re building on the Magento 2.0 default Luma theme you should be starting off decently, as Magento has already done some of the accessibility work for you. ShopifyPlus’ Titan theme also provides a good basis to work from.

If you’re using a 3rd party commercial theme on any platform you may want to check the source code or ask the developer about their approach to accessibility.

Keyboard Navigation

Accessibility Example 3

It is not uncommon for people with disabilities to use a normal keyboard for all of their interaction with a computer – and that includes browsing the web. Most of us who grew up with pre-Windows computers remember how this works; with a judicious use of the TAB key. When pressing tab on any web page a web browser will jump from link to link on the page, in the order that it appears in the markup.

Combine this with the HTML property “taborder” and we can create interesting ways of providing navigation assistance to those without the aid of a mouse. “Skip to Content” links are generally best practice today but we can now hide them, or display them upon a press of TAB, to target them to the audience that needs such assistance.

Accessibility Example 4

Again Magento and Shopify both do a great job of building in this functionality.

Beyond that you can use tab order to further control the experience – like taking a keyboard browser straight to the Search box and displaying the top searches, potentially saving the user some typing.

Alt Text

One of the major problems with the general advice surrounding designing and coding accessible sites is misinformation. I can think of no other area where there is more misinformation than that of alt text. “Alt text” is the text that you can provide in HTML source code to provide a visual or audible cue in the browser as to the contents of the element – for an image the alt text may describe the image as pictured.

An example of alt text:

<img src=”myimage.jpg” alt=”A man standing in the sun>

Modern browsers interpret the alt text and provide accessibility features that play back the alt text via audio browser. JAWS is the most popular of the “screen reader” applications and it can be used to evaluate your site’s accessibility. JAWS most modern operating systems like macOS and Windows provide screen reader functionality, as do all modern smartphone operating systems.

When this alt text is read by a screen reader it may simply say:

“A man standing in the sun”

But in most cases there is much more markup surrounding an image like this, and a typical practice by a web developer may be to apply this alt text elsewhere, such as in a description. Consider the following markup:

<span class=”gallery”>

<img src=”myimage.jpg” title=”A man standing in the sun” alt=”A man standing in the sun”>

<p class=”description”>A man standing in the sun</p>

</span>

In this case the screen reader would read it three separate times. This creates a repetition that can be bothersome to the user. The astute reader may notice we slipped in a “title” property in there – titles are often used as tooltips which display when hovering for a moment on an element. Screen readers often read this aloud which can create an unpleasant experience.

Accessibility Example 5

A well-designed accessible ecommerce theme removes images used for presentation from markup, where it will be read by screen readers, and instead displays them with CSS. Rather than use an <img> tag to display an exclamation point next to a form with an error, add a CSS class to the form which will style the element with the same image, but apply it as a background image.

Markup which absolutely cannot be avoided can be flagged as unreadable with Aria role=”presentation” or role=”hidden”. Neither of these are desirable, and can mostly be avoided.

Here are some tips to reduce the repetition:

Change up the content. Provide more visually descriptive content in the alt property.
– Remove duplicate content. If the content is in a label element or a nearby span or div, no need to provide it in the alt text as well.
– Images are content, too. If the image on the page is for design or aesthetic it should be placed with CSS. If the image is a product image or worthy of a description, then it should be in the HTML markup and deserves descriptive alt property.

Conclusion

Developing an online store for ADA compliance or up to standards like WCAG 2.0 can be daunting. You’re going to need a set of tools to help you. Something Digital can help you with an ADA audit to provide you with a list of objectives to help you and your business make the most of a compliance exercise.

Below are some links that helped us in writing this blog. We’d like to hear back from you! What are you doing for accessibility? What are your customers asking for? We want to know! Write to us at [email protected] or fill out our contact form.

Links / Resources:

Accessibility of Rich Internet Applications
Alex’s Blog – Aria Hidden and Role Presentation
CSS in Action
Web Accessibility: Skip Navigation Links
Don’t Do “Skip to Content” Links Wrong

Written By: Phillip Jackson, Ecommerce Evangelist – 5 minute read

 

SD Blog Series

Part 2: Designing for Accessibility

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.

Accessibility Forms Example

Forms

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!”

Accessibility Forms Example

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.

Accessibility Forms Example
Conveniences

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.

Accessibility Modal View Example

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.

Accessibility Quick View Example

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.

Quick View Example

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).

Notifications

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.

Accessibility Sale Price Example

– 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”:

<div id=”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.

Closing

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
AChecker

In part 3 we’ll cover how to architect and engineer code for the accessible web.

Want to learn more? Contact us here.

Written By: Phillip Jackson, Ecommerce Evangelist – 6 minute read

 

SD Blog Series

Part 1: Accessibility is Necessary

Often when we talk about accessibility we really mean designing for disability, but accessibility is so much more than that. To begin let’s discuss what modern accessibility looks like and how it benefits all users.

Accessibility in 2016

 

At Something Digital we approach design in a unique way. We purpose to make the user experience meaningful and personal for all users. With more people shopping online now than ever before we face myriad challenges when approaching an 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 all means we have to keep a number of things in mind.

With personalization becoming more and more prevalent on ecommerce sites it is important for us to consider how users of all abilities access our stores. Consider this: if an able-bodied person deserves to have a personalized experience on your site, shouldn’t a differently-abled person have a personalized experience, too.

Equitable Experiences

Our aim is to provide accessible site experiences that give equity to the users. Not all users use all site features, after all, so the bulk of our investment in accessible design is centered around the conversion funnel. This extends beyond the Product Detail Page and Checkout, though. It includes newsletter signup, promotions, and site search, too.

When we talk about equitable experiences we don’t intend to make the experience unified for everyone – but rather provide additional support where it is necessary for those who need it. For instance, semantic HTML tags are a great start overall, but sometimes additional Aria tagging is necessary (stay tuned for Part 2 of our series for more on Aria). 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, for instance, focus should be moved to that modal. Once dismissed focus should then be returned to the prior link or text area that it was stolen from.

The easy road would be to remove these types of difficult to navigate use cases altogether. However, it is these types of accessible features are there for those who need it, and are transparent to those who do not, that embodies equitable accessibility!

Disability isn’t always permanent

Mobile Touch Graphic

Designing for accessibility gives all users the ability to have the same experience when shopping on your site. A person with temporarily diminished eyesight will benefit just as greatly from an accessible website as another person with a permanent impairment. Not all abilities require medical or physical conditions. Using a mobile device in bright sunlight or after a few too many to drink can be just as difficult has having reduced vision.

By approaching font-size and color contrast in an accessibility-first design exercise we make sure that all users have the same experience.

By replacing iconography with simple text instructions mobile users can greatly benefit from the smaller page sizes. By implementing common keyboard navigation techniques to menus web crawlers such as Google can understand and prioritize navigation structures on your sites. By testing our designs with browser plugins that emulate common colorblindness we can find potential issues with conversion, such as drawing attention to your Call to Action.

Designing for Accessibility is just good business

Chart and Arrows

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 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 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 you improve your site’s accessibility many sites also see an uplift in traffic and conversion as a result, offsetting the initial investment. While 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 digital marketing team.

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

What can I do to become compliant? 

You can begin by performing a quick check of your site! There are many tools online to test simple ADA guidelines like font size and colors. Read more about the
guidelines.

You can get started with a quick self-assessment. After that we at Something Digital would love to talk with you about a UX audit and an Accessibility primer.

If you haven’t yet make sure to sign up for our email list and we’ll keep you up to date as we progress in this series!

What can I expect from Part 2 of the Accessibility Series?

In part 2 we will discuss the engineering challenges that surround accessibility and how you can utilize Magento to create a store that can be shopped by all of your customers.

Written By: Phillip Jackson, Ecommerce Evangelist