New Accessible (ADA-compliant) Templates

WebStore
1

Templates that help you make your content accessible to everyone are now available. You can enable Accessible Templates in two ways:

  • WSM Config option ‘Enable accessible templates’
  • ‘Enable accessible templates’ button under Design & Content > Edit Templates in WSM

Please note: you may need revert header and footer templates to branch default or manually add this code:

Footer template (before closing </footer> tag):

      {nsIf:AccessibleTemplatesEnabled}
      <div id="switch-to-accessible">
        <a class="btn btn-default" href="{SITE_PATH}store/store.asp?action=do&doaction=layout&layout=accessible">Accessible Version</a>
      </div>
      {/nsIf:AccessibleTemplatesEnabled}

Header template (just after opening <body> tag):

{nsIf:AccessibleTemplatesEnabled}
  <a class="sr-only" href="{SITE_PATH}store/store.asp?action=do&doaction=layout&layout=accessible">Switch to accessible version</a>
{/nsIf:AccessibleTemplatesEnabled}

This will add link to accessible templates at the bottom of your page and screen-reader only (not visible) link at the top of your page.

What makes these templates accessible?

Larger font size

Fonts are simple and bigger than default. Using larger fonts, we aim to reduce the reading load for partially sighted users.

Skip to main content

A link is present which allows users to skip over navigation or other content. A link that provides functionality for the user to jump over navigation or other elements or jump to the main content of the page greatly assists keyboard users in navigating the web page.

Less Javascript

JavaScript jump menus are not present - every dropdown has its submit/update button to avoid making navigation difficult for screen-reader users.

Heading structure

Documents have correct structure, so that heading levels are not skipped. Headings facilitate page navigation for users of many assistive technologies.

Accessible forms

Every form element has a text label. Groups of related checkboxes and radio buttons are enclosed in a fieldsets.

Meaningful alternative text

Every image has meaningful alternative text. Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.

What else you can do?

  • Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.

  • Caption and/or provide transcripts for media

  • Ensure adequate contrast that is necessary especially for users with low vision

  • Set auto play option to false and navigation text to ‘Previous slide’, ‘Next slide’ in carousel builder for carousels used on accessible templates

  • You can edit accessible templates using Edit Template in WSM

Laws and standards

Accessible templates are compliant with Web Content Accessibility Guidelines (WCAG) 2.0 - international set of guidelines developed by the Worldwide Web Consortium (W3C), the governing body of the web. These guidelines are the basis of most web accessibility law in the world.

If you live in the United States, applicable laws include The Americans with Disabilities Act (ADA) and the Rehabilitation Act of 1973 (Sections 504 and Section 508).

Webstore evaluated by WAVE shows 0 errors and 0 alerts on every page. Google Accessibility Audit also shows close to 100% score depending on your site’s contrast.

This feature in now available on Early Adopters version for responsive templates only. As usual, please feel free to provide us with any feedback.

2 Likes