Written By: Phillip Jackson, Ecommerce Evangelist - 5 minute read
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!
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 - 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.
The same can be done for other landmarks on the page - and those roles are named accordingly:
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.
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.
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.
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:
<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>
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.
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.
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 firstname.lastname@example.org 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