Accessible templates

Accessible templates are the version of your site that is accessible to all users of the web.

What makes these templates accessible?

Larger font size:

  • Fonts are simple and bigger than the 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.
  • 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 the 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 fieldset.

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.

To edit templates, do the following: 

  1. Login to your WebStore Manager.
  2. Go to Design & Content > Edit Templates.
  3. Click Enable Accessible Templates.

Warning: If you are not comfortable with editing HTML and do not have experience with web scripting languages, it is advisable to seek WebSell's assistance with changes to these templates.

General overview

  • Templates allow you to customize your WebStore to your own preference.
  • Choose between two types of templates.
    • Default
    • Accessible

Accessible templates

  • 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
    • Click the Enable accessible templates button under Design & Content > Edit Templates.

Note: You may need to revert header and footer templates to branch default or manually add the following code. 

  • Footer template (before closing </footer> tag):
          <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>

  • Header template (just after opening <body> tag):
      <a class="sr-only" href="{SITE_PATH}store/store.asp?action=do&doaction=layout&layout=accessible">Switch to accessible version</a>
  • This will add link to accessible templates at the bottom of your page and a screen-reader only (not visible) link at the top of your page.