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:
- Login to your WebStore Manager.
- Go to Design & Content > Edit Templates.
- 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):{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 a screen-reader only (not visible) link at the top of your page.