Accessibility Ebook

5 Accessibility Features Built into Something Digital’s SDK Accelerator

More and more the activities of daily living occur online. We shop, bank, request a ride, check in with friends and schedule appointments via the web. The convenience of the digital ecosystem is compelling, especially at times when we feel harried, or inclement weather makes us want to stay inside. More than that, web-enablement is so wide spread that for many brands, it’s the only way to interact with them.

But what happens if your eyesight is poor, or your muscles lack the dexterity needed to operate a mouse? Such conditions can bar you from engaging in the activities of daily living the majority of us take for granted.

Recognizing the role of the web in today’s society, unfettered access to web-based services is now the law of the land. Specifically, Title III of the Americans with Disabilities Act (ADA) requires that businesses help disabled people access the same services as able-bodied people, including those services offered via a website. And with 51.2 million Americans with disabilities, allowing all people to buy from your website makes good economic sense.

No doubt, designing an ecommerce site so that it is accessible to the widest possible audience can be complex. To eliminate that complexity, Something Digital created an SDK accelerator that offers five functionalities — all absent in baseline Magento —  that make ecommerce sites accessible to consumers with disabilities.

These functionalities include:

Keyboard Navigation

For a variety of reasons, many people find it difficult or impossible to navigate a website using a mouse, and must rely on their keyboards to accomplish all website functions, including selecting menu options, accessing desired content, and moving between elements on a page. For this reason, SD’s Accelerator provides functionality that allows users to navigate your website via their keyboards.

Convenience & Assistive Cues

Most people don’t need instructions on how to navigate a website or access the content we want. Decades of going online have taught us a common vocabulary. We instinctively know how to accomplish the tasks we want to accomplish, even if we are first time visitors to a site.

For instance, most website content is placed approximately in the middle of the browser to provide space for site navigation, logos, assistive links, advertising, and so on. People with good eyesight, by habit, skip over these elements and go straight to the good stuff. But if your eyesight isn’t strong, or you rely on a keyboard, you need a way to go straight-to-content or back to the top of the page.

Our Accelerator includes assistive cues that allow people with disabilities to take advantage of these conveniences.

Voice Over Support

People with disabilities often rely on assistive technology when going online to shop or access other services. These devices may be screen readers (i.e. programs that read text aloud for the user), text enlargement software, or software that allows users to control their computers via voice commands.

Screen readers literally read the contents of the screen to the user, which offers obvious benefits, as well as some surprising challenges. For instance, a screen reader must read the menu options and navigation options for the user, which means it will read all of the text contained ARIA-rolls, alt-tag, title tags and so on. As a result, the same text can be repeated over and over, causing confusion and creating a poor brand experience for the visitor.

SD’s Accelerator identifies when text is redundant, and instructs the screen reader to skip it.

Focus Management

Focus management is a big deal in creating accessible websites, and it took up the bulk of our efforts when developing SD’s SDK Accelerator. Focus, as it applies to web page accessibility, is the outline that highlights an item or element that is selected by a person who doesn’t use a mouse.

Focus management addresses challenges people with disabilities encounter as they navigate sequentially through content. Here’s a prime example: Let’s say you’re on an ecommerce site and you place an item in a shopping cart. Many sites will have an overlay or pop-up image of the mini-cart, which now becomes the center of focus. You can either interact with that mini-cart, or you can go back to page content by simply clicking outside of that mini-cart, which automatically dismisses it. Or let’s say you continue to browse products after you’ve placed an item in your cart. At any point, you can access the mini-cart pop-up by clicking on the shopping cart icon, typically located in the top navigation bar. Once clicked, the mini-cart becomes the focus of your screen, but you can easily dismiss it by clicking on the surrounding page.

Such conveniences are difficult and confusing to people who use a keyboard or screen reader. If using a keyboard, there’s no way to click on the surrounding content to close the overlay. If using a screen reader, the content is out of the expected sequence, andthere is no way to click on the original content.

The challenge, therefore, is to allow disabled people to close the overlay easily. To accomplish this, our Accelerator inserts an X for closing the overlay, and it puts the focus (i.e. outlines) on that X. (The X is a universal cue for closing a page or document.)

We also capture the focus so that the overlay is truly captive, meaning that users are prevented from accidently tabbing through the navigation, which can result in them closing the overlay without realizing it, and getting lost in the page.

Images Embedded in Text

Magento 2 has a new default theme named “Luma,” which is a clean and elegant theme that that features better usability practices than its predecessor, the “Madison Island” theme.

The Luma theme encourages website designers to embed text within hero, masthead and other images. Such text often conveys important information to visitors, but because it is part of an image, it can’t be selected. Assistive devices, such as braille displays and screen readers can only read text that’s selectable. Therefore, a person relying on an assistive device is unable to access any text that’s embedded in an image.

To overcome this challenge, the Accelerator includes numerous CMS content widgets for the drag-and-drop editor in Magento’s visual page builder tool. Essentially, the approach is to allow website designers to create images with text that is overlaid onto the image, not embedded into it. The text can match your brand typography so that the overall impact of the text and image is equally beautiful as if it had been created it in the Luma theme.

And there are additional benefits to this approach. Because the text is actionable, search engines can read it as easily as assistive devices, which means it has SEO value. It also means that the text will load on the page faster than the entire image, which means allvisitors will be able to see the message sooner.

Seamless Accessibility

All of the functionality described here are seamless to your website visitors. If they don’t rely on a keyboard or assistive device to navigate websites, they’ll never know you’ve built accessibility into your ecommerce store. Creating a website that allows more people to use it doesn’t require you to make design sacrifices at all.

Written by: Phillip Jackson, Ecommerce Evangelist

EYEO Festival Takeaways Banner

Something Inspiring: EYEO Festival Takeaways

I’ve been to forums in the past where speakers onstage serve up Kool-aid, in the form of flashy innovation, the illusion of collective harmony, or myths of the illusive work-life balance. And, I admit, I’ve drunk it when I’ve been thirsty for something, anything, to get me out of a design funk. But now I know there’s someplace better. In EYEO, I found a festival in which speakers serve up the human side of technological innovation, the power of critical mass, and first-person accounts of successfully, and industriously, making space in life for work that excites us.

This summer, I attended what I hope to be the first of many EYEOs, and the takeaways still feel fresh and refreshing, like the life water we all need to reenergize our careers and reevaluate our creative choices.

EYEO is an interdisciplinary tech conference that encourages collaboration across industries, borders, and cultures. The festival draws driven thinkers and leaders from all over the world, including visual and audio artists, designers, developers, engineers, data scientists, educators, and social activists. Its mission is to show how those identifiers are fluid, how our curiosities overlap, and how our communities can be more inclusive. EYEO encourages participation and the forging of new partnerships; their slogan is “converge to inspire.”

At EYEO, speakers present ideas that rise above sterile case studies or sales pitches. We’ve heard that all before and we sign up for EYEO because we know we deserve better. EYEO attendees instead get eye-opening humility, humanity, transparency, storytelling, comedy, and calls to action. Talks range from academic — like a social history of the American hardware store — to deeply personal —a first-person account of how a tragic event can alter one’s life course — to curated panel discussions that spark a fire in those of us who see injustice in the industries in which we work. Every captivating talk, roundtable, and meetup asks us to think about how we can leverage technology for good, and why we should be.

There is no marketplace and almost no corporate swag, which in itself says a lot about the principles of the event organizers. Instead, EYEO gave attendees a single notebook in which they could memorialize quotes, ideas, and sketches. Classic. Understated. But the magic is how it was designed. Prior to the conference, attendees completed a survey of short questions about their personalities. Are they optimists or skeptics? Are they adventurers or do they play it safe? Then, Accurat, an information design company lead by speaker Giorgia Lupi, transformed the submissions into an abstract data visualization that is printed on the cover, like a secret code.

The brightly-colored notebook is not only a vehicle for ideas, but also an icebreaker, an artifact, and a reflection of how each of us plays a role in a greater community, which can’t be overstated. Now it’s my turn to give back, so I’ll start by sharing my notes from the conference as they can be applied to the working environment and the work that we do at Something Digital.

Notebook + Book
Left: The EYEO notebook designed by Accurat and Pitch Interactive.; Right: “Dear Data”, an amazing book on soft data written by two EYEO speakers and friends, Giorgia Lupi and Stephanie Posavec.

Humanize Data

We have unlimited data plans with which we listen to playlists curated to our tastes, order products that are recommended for us, and monitor our health stats. Data science is literally on the pulse of everything that happens in our lives and we’re producing data all the time. Everything we do, say, hear, and see is data. Although we may not be aware of it, we’re making and processing data, from the moment we wake up to the moment we go to bed — even while we’re sleeping. Data can be for us to help us measure our own progress, or it can be for a corporation to market products and services to us tailored to our predictable behavior.

From a personal perspective, because of its deeper technological applications, data can often seem out of our control, or like an unreal, mysterious ‘other’ (I know I’m being watched by the device in my hand and on my wrist, but that’s just the world we live in). From a business perspective, because my work is about designing better user experiences based on data analysis —monitoring click-through rates, traffic, and popular searches — data can seem tactical, a means to an outcome.

But a common call to action among many of the speakers at EYEO is to rethink what we classify as data. Slowing down, being present, observing, and taking note: that’s data. Sources of data are everywhere. It could be as banal as the minutes a subway train arrives off schedule each morning or as critical as documenting the daily side effects of the medications we take. Counting something means it matters. Spending time reviewing this kind of data — sometimes referred to as ‘soft’ or ‘folk’ data for its lack of social currency — means spending time with ourselves.

How can this humanistic approach to data be applied in commerce? One way is to allow people to see themselves in data. We create personas by observing real behaviors of real people, making predictions based on their lifestyles and interests, and designing with the intention to show them that their needs are valuable. Data becomes a way to communicate intention. UX design is an industry driven by subjective data, like user feedback. In user testing, we ask questions to lend visibility to data that otherwise goes unseen and unmeasured.

Soft data in the marketing world can be found in social sharing and user generated content. For example, the eyewear store Tens.co features a widget showing visitors in real-time which products other customers are purchasing in that very moment. Instead of promoting only the cross sells or upsells stakeholders think customers should buy, the widget enables customers to see what appeals to the people within their affinity community and be persuaded — or not — by their own observations, giving them credit and entitlement.

Ten.co ExampleTens.co provides a visualization of what other customers are buying in real-time.

The term ‘soft’ data underestimates its merit. Observed data, in conjunction with numerical data, can be more impactful on a human level, because it reminds us that we aren’t nameless hash marks; our personalities, opinions, and stories are as important as our buying power.

Data, after all, is people.

Get Empowered

Another big talking point for speakers was to mix up power structures. Fear, paranoia, the feeling as though we are being violated by giving up data without consent — when nearly our every move is always recorded, it’s hard to not feel disempowered by technology. Add on disenfranchisement and biases that stem from a lack of diversity among the engineers who write algorithms, and it’s no wonder that an atmosphere of mistrust is brewing. And yet! We all still carry our little glowing rectangles with us everywhere anyway.

The message from many speakers at EYEO is that objects of power are only powerful when we put them in the right hands. But how do we make data less disempowering and more empowering?

Or, as Carmen Aguilar y Wedge of Hyphen-Labs asked: “What is it you need from me to see you as human?”

Vimeo Still of Hyphen-Labs ProjectOne of many inspiring projects by the women at Hyphen-Labs.

One way is to think of data analysis as a service rather than self-serving. Use data to diagnose actual problems and identify the right tools and people to fix them, instead inventing solutions to problems that weren’t there to begin with and may produce even more problems over time.

For example, when we take on clients with existing sites at SD, we evaluate their site data as it is and recommend technical debt remediation before launching new marketing initiatives. Broken components and security breaches make customers feel confused and unsafe. We show the clients the holes in their system and offer a step-by-step roadmap to fill them. By tackling the backend problems first — issues customers can’t see but that hinder them from completing tasks — we’re indirectly improving the front-end user experience and flexing our expertise to serve our client’s and their customer’s best interests first.

Another way to do good by data is to mix up power structures. If advancements in technology are predicated on the confines of the platforms and languages we use, how do we use that technology to tell stories that are not written by the marketing department of larger corporations? How do we tell new stories?

Start by bringing new voices to the table, listening, collaborating, and giving those voices due credit. In a panel on diversity, one speaker noted that HR departments don’t have a pipeline problem, they have an effort problem. One reason I’m personally proud to work at SD is that while at first I had little web experience, the managers who interviewed me saw my perseverance and history of work ethic as an advantage, and that as an outsider, I brought another perspective to the creative team. Over the course of my tenure here, I’ve witnessed SD making great strides in recruitment and retention, giving all employees the freedom to directly interact with clients, communicate their ideas, and release their code, strategies, and designs out into the wild right away. New voices that cross cultural, racial, gender, and age lines help organizations approach problem solving at multiple angles, because how each of us sees the world is path dependent and, most importantly, valuable.

Diversity — and openly discussing diversity — within an organization equips teams to be more aware of the needs of users who might otherwise go unnoticed. EYEO speakers also called on those who represent the majority to assert their privilege to protect users who don’t always get the same protections. As a web agency specifically, we need to think about the safety of every community and every individual interacting with our work by:

1. Building accessible sites.

2. Prioritizing data security.

3. Designing not just for personas, but for representation.

What if frequent visually distracting pop up notifications distress users with PTSD? What if we QA test a site on broadband internet, but it is intended to be used in a region wherein access is more limited? What if a brand aims to market their products to ‘everyone’, but the lifestyle images they display on their product pages persistently only show models of one demographic?

This leads me to:

4. Ask questions. A lot of them.

It’s a mistake to assume anything is instantaneously understandable. Coming up with a thorough checklist as a team and asking as many questions as we can is how we break free from expert mind — what we already know or think we already know — and how we prevent faceless data from amplifying our biases. This is how we get closer to actual personalization, the kind that isn’t invasive or creepy, but is humble and constructive. Questioning leads to iteration. Iteration lead to prototyping. Prototyping leads to an evolving product that continually becomes more usable for everyone. It is yet one more argument for making slow observation and human feedback a part of our professional practice.

Go Forth and Do Better

For their encouragement to humanize data, get empowered, play with new people, and to find as many ways into a problem as possible — overall, to just do better! — I can’t thank the EYEO festival speakers and organizers enough. And I encourage you to visit eyeofestival.com to meet the speakers and watch videos of past talks.

I leave you with one last scribble from by trusty yellow notebook: Find delight in the work that you do. For me the delight comes from being able to inventory the data of my own life and add a point on that graph, however its modeled, for the invaluable learning opportunity EYEO afforded me to become a better designer and advocate for SD, our clients, their users, and you.

Written by: Gina Angelotti, Interactive Designer

Accessibility Ebook

SD Accessibility Ebook Part 2: Click for Free Ebook

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!

Accessibility Ebook

SD Accessibility Ebook Part 1

The team here at SD knows the importance of making a website accessible for users, so we created an Accessibility Ebook. 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, 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!

Summer Hires- Culture

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

 

 

Summer Hires- Culture

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

 

Summer Hires- Culture

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

 

Summer Hires- Culture

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