Tech Tips for a Highly Accessible Site
Developing and deploying an eCommerce site can require months of an organization’s time, featuring an incredible number of tasks that cannot be pushed past the post go-live stage. There are, too, items that can be tabled, depending upon factors such as timeline, budget, or resources, and one that is tabled (and in turn, often ignored) far too frequently is accessibility.
Why You Should Care about Site Accessibility Standards
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.
Key Accessibility Tech Tips
There are key aspects to any accessibility initiative that an organization should abide by 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 that may result upon clicking.
For example, as opposed to featuring a button or link that simply reads “click here”, create a link that 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 a 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 that 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 on-site 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 that 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.
Allow Users the Opportunity to Bypass Content
Providing users with ways in which they can access content is just as necessary as providing those users with ways in which they can bypass it. Utilize landmark roles found in ARIA. These won’t affect the content visually, and it will allow users a one-key navigation system between sections. This also allows screen readers to easily move about a site.
