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.)

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.