Accessible Templates
Good accessibility is embedded into each step of the web development process. Designers, developers, and content specialists all have a role to play in developing accessible websites. This page explains how accessible templates can be developed to support this process.
Creating accessible wireframes (designers)
A web page wireframe is a visual design document created by designers. The wireframe shows the layout of a web page by organizing a web page into sections that will be populated later with images and textual content. The wireframe can lay out pages in a way that maximizes usability and ease of use. Using a wireframe will ensure that the web pages will have a consistent layout from page to page, improving accessibility for users with cognitive disabilities.
Creating accessible templates (developers)
Developers analyze the wireframe document created by designers and create a web page template that is coded in HTML. The code in the template must be accessible to create accessible content pages. The template code can define each section of the page to hold the content that will be supplied later by a content specialist (e.g., header, nav, main, footer, etc.)
The World Wide Web Consortium (W3C) has good resources on how to build an accessible template, including:
Creating accessible content within templates (content specialists)
While content templates can include some guard rails, like a form within a Content Management System (CMS), website content itself can also create barriers. An accessible content template makes it easier for content specialists to produce accessible content. See Document Accessibility for more details.
A content template should allow content specialists to update all content relevant to the web page, including:
- Page
<title>
(this appears in the browser tab) - Headings and their levels (
h1
,h2
,h3
, etc.) - Paragraphs
- Lists – unordered (bulleted) lists and ordered (numbered) lists
- Images and their alt (alternative) text
How to add content that is accessible
Always try to maintain web page content that is written semantically, i.e., uses standard HTML formatting. Content that is semantic will improve accessibility and works well with Assistive Technologies (ATs), like screen readers , speech recognition, and even keyboards. Some of the accessibility benefits of content that is formatted this way include:
- The page
<title>
is announced by screen readers when the page loads. - Headings and their levels (
h1
,h2
,h3
, etc.) are announced by screen readers to provide context to users with vision impairments. Headings also provide a way to navigate or scan content on a page. - Tagged paragraphs improve readability and give users more control when customizing contrast themes.
- Unordered lists (bulleted) and ordered lists (numbered) are announced by screen readers to provide context and to set expectations (how many items are in the list).
- Descriptive (alt) text for images is announced by screen readers to provide meaning for people with vision impairments.
How to request a change to the template
It’s important for content specialists to check with the developers or IT architect before making updates to the page template or wireframe. If the wireframe changes impact the page’s content, the content template may also need changes.
References:
A principle that ensures that a product, service or a system is not only accessible but also easy to use and understand.
Any impairment, or difference in physical, mental, intellectual, cognitive, learning, or communication ability. Disabilities can be permanent, temporary, or episodic (meaning that the impact of the disability can change over time). There are different types of disabilities, including physical, vision-related, hearing-related, and cognitive disabilities. The specifics of a disability vary by person and a person can have more than one disability.
World Wide Web Consortium
Anything that might hinder people with disabilities’ full and equal participation. Barriers can be architectural, technological, attitudinal, based on information or communications, or can be the result of a policy or procedure. Barriers can be financial, knowledge based, or directly related to an individual’s disability (e.g., no descriptive alternative text accompanying a photo would be a barrier for someone with a vision impairment).
Specialized hardware or software that can assist people with disabilities to perceive and interact with digital content.
A technology that helps people who have difficulties seeing to access and interact with digital content, like websites or applications via audio or touch (e.g. Braille). Screen readers include JAWS, NVDA, and VoiceOver.
Information technology