Developing and deploying an eCommerce site can require months of an organization’s time, featuring an incredible number of to-do’s which can’t be pushed past post go-live. There are, too, items that can be tabled, depending upon factors such as timeline, budget or resources, and one retailers are tabling, (and in turn, often ignoring) far too often is accessibility.
Why adhere?
Adhering to the standards of accessibility as outlined by the Web Content Accessibility Guidelines (WCAG) and WAI-ARIA ensures not only that an organization is providing all of its users with an equally friendly experience, but that web crawlers such as Google can “read” the content as well. The primary goal of the WCAG as governed by the W3C process, is to “…provide a single shared standard for web content accessibility that meets the needs of individuals, organizations and governments internationally”. While the WCAG refers to static content, the WAI-ARIA or Accessible Rich Internet Applications Suite was created more specifically to address dynamic content, “…to instruct developers on how to create universally friendly interfaces.” Information on both WCAG and the WAI-ARIA can be found at www.w3.org.
7 Key Accessibility Tech Tips
There are 7 key aspects to any accessibility initiative which an organization should abide by in order to develop a user, screen reader and web-crawler friendly site.
Done properly and concurrent with site development and pre-deployment, ensuring your ecommerce site is accessible to every user will not only increase organic search results but more importantly demonstrate a commitment to ethical practices and all customers.
Create clear, descriptive and keyword rich links
Do this by properly identifying both the subject of the content, as well as an action which may result upon clicking. For example, as opposed to featuring a button or link which simply reads “click here”, create a link which says “learn more about accessibility for ecommerce sites”. This eliminates ambiguity, allowing screen readers and crawlers to correctly identify the link’s elements as well as providing clear description of what clicking the link will provide.
Use ALT tags on every important image
An ALT tag can easily be added within the content management system and can either be read by a screen reader or seen by web crawlers. In addition to creating a better experience for the user, ALT tags greatly improve SEO, as they provide web crawlers a way to “see” images. Following the W3C’s HTML guidelines, an organization should also opt to identify spacer graphics with a null ALT designation.
Create explicit identification of forms via HTML labels
It is the only way to ensure that visually disabled users will be able to provide the correct information within the appropriate areas, or hear the correct commands. The caveat to form labeling is that the only accepted values for these attributes are alpha or numeric characters, dashes, underscores, colons, or periods; spaces are not permitted.
Use headers to denote the beginning of a new section
This provides search engine crawlers with the ability to quickly and easily parse information. Via the content management system of any ecommerce site, create headings to indicate the start of a new section, as well as to vastly improve SEO. Be wary of overuse of these section designations; too many headers have the potential to negatively affect organic search rankings.
Design an ecommerce site which takes device independence into account
Not all users will browse via a desk or laptop computer; think in terms of tablets or mobile devices and the challenges focusing purely on mouse and/or keyboard inputs may pose for users browsing with various devices. Use HTML5 for video and audio features.
With the steadily rising popularity of multimedia and interactive elements, ecommerce organizations that include this feature onsite can ensure accessibility via the use of HTML5. HTML5 code provides the ability to directly embed audio or video without the use of a plugin. Unfortunately, HTML5 is not fully leveraged in all browsers, but there are javascript alternatives which can be used to synchronize captions for audio. A quick web search provides resources on how to accomplish this, a viable option is LeanBack Player.
Give users the opportunity to bypass content
Providing users ways in which they can access content is just as necessary as providing those users ways in which they can bypass it. Utilize landmark roles found in ARIA. These won’t affect the content visually, it will allow users a one-key navigation system between sections. This also allows screen readers to easily move about a site.
Gian Genovesi is a senior consultant with ecommerce design firm Briteskies.
View the article as it was originally published in Multichannel Merchant
Lorem ipsum dolor sit amet, consectetur adipiscing elit
For the past two decades, we've made it our business to help you work smarter. From commerce challenges to ERP customizations, we support the power of your big ideas by helping you work more strategically, more intuitively, and more efficiently.
2658 Scranton Road, Suite 3
Cleveland, Ohio 44113
216.369.3600
No Comments Yet
Let us know what you think