Creating Accessible Templates
Maximizing the Accessibility of Templates
Article Contents
- Page 1: Document Templates
- Current page: Page 2: Maximizing the Accessibility of Templates
Accessibility Features of Document Templates
The following items are helpful to usability and accessibility and are easily implemented within template-based sites:
- Accessible navigation. If the main navigation is consistent
throughout the site, then you can create the navigation structure once
within the template. Applying accessibility techniques to your template
will make each of the site's web pages more accessible.
- Skip navigation. If the site contains
lengthy navigation items or if the navigation
structure is repeated on each of the site's
pages, you should provide an option to skip that navigation
and jump directly to the main content. This can be accomplished
by providing a link to an anchor within the
page. This technique can be built into the site template
and applied to each page, regardless of the content.
Such an approach allows users to jump directly to the
main content without listening to or navigating through
the navigation items on each page. One technique which
can be used (although it is shunned by purists) is to
create a very small transparent GIF image and give it
alttext that provides additional information to users of screen readers. Thealttext might say "you are in the computer products section, on the laptops page." Be careful when using this technique. When you update your site you may forget to update the invisible information. Also, it is important not to abuse this technique by using it as an excuse not to make the rest of the page accessible. If you are concerned with a Skip Navigation link intruding on your site content, you can hide it visually with Cascading Style Sheets until the user navigates to the link using the keyboard. This approach is used on this page - press the Tab key until you come to the first link at the top of the page. Notice how it doesn't appear until you navigate to it? - Breadcrumbs and other navigation. Breadcrumbs can be very helpful for users to identify the hierarchy of the web site and how the content they are currently accessing fits into that hierarchy. Breadcrumbs also allow quick access to higher level pages within the hierarchy. Although breadcrumbs are content dependant, meaning that they will change for each content page, they can still be programmed into the document template. Other navigational items, such as 'previous', 'next', 'back to main section', 'start over', etc. can be helpful to all users. Each of this site's pages contains information about how they fit into the main site hierarchy and structure. This information is read by our server-based template program (in this case PHP), which generates the breadcrumbs and other navigational items, such as previous and next links. This navigation structure is based on the information within each content page, but the navigational items are still part of the document template.
- Skip navigation. If the site contains
lengthy navigation items or if the navigation
structure is repeated on each of the site's
pages, you should provide an option to skip that navigation
and jump directly to the main content. This can be accomplished
by providing a link to an anchor within the
page. This technique can be built into the site template
and applied to each page, regardless of the content.
Such an approach allows users to jump directly to the
main content without listening to or navigating through
the navigation items on each page. One technique which
can be used (although it is shunned by purists) is to
create a very small transparent GIF image and give it
- Customized output. Template-based design also allows customized interfaces. For instance, you could allow your end user to select what type of template they would like to view the content through. They might be able to choose various color schemes, navigation schemes, font sizes or other styles, then view the content through a template that is customized to their preferences or needs.
- Dynamic content. Template-based design which is powered by server technologies can also be used to display dynamic content. Most server-side scripting programs can add data to and read data from databases. By storing information in a database, the template program can retrieve up-to-date, dynamic content and display it to the end user.
- Easy content creation. By using templates, someone creating content can focus on the content alone and does not have to worry about or deal with other page items that are part of the template. This allows content creators to create content more quickly and easily. In fact, individuals who do not have much technical expertise or HTML knowledge can easily add content to the site. They only need to worry about the accessibility of the content they are generating.
- Proper HTML. Proper use of HTML is important
for several reasons. Proper, standards-based HTML requires
that many accessibility requirements are met (such as
alttext for every image). Proper HTML tends to be more accessible HTML. Using HTML correctly also tends to produce Web pages that work across a wider variety of technologies. Many cross-browser inconsistencies disappear when the page's HTML is valid. By using templates, much of the important HTML for each page can be designed properly. In fact, many instances of invalid HTML are located within items that are typically found in document templates.
As a trainer, you should stress the value of using a template-based approach for increasing accessibility of Web content and decreasing the amount of work that goes into developing an accessible site.
Using Document Templates
Dreamweaver templates
Dreamweaver allows you to create template-based web sites. You can create your template from scratch, adding all of the accessibility features that you need while designating areas for content. You can set parts of the template to be editable for each page, something that is handy if you have slightly different content that you want to appear for each page, such as page title, author, secondary navigation, etc. Select to create a new Dreamweaver template. Default template types have default editable areas for page title and header information such as styles and JavaScript. You can add additional editable areas to your template by selecting . There are many types of editable regions available. When your template is complete, be sure to save it as a template. For each content page you want to use that template for, select and select the template you want to use. The new page will contain everything that was in the template, but Dreamweaver will not allow you to edit parts of the page that are not set as editable in the original template. You can add content within any of the editable regions that were defined. Save each document normally and the template information will be saved with it.
If you decide at a later time to edit the template, just open it and make the changes you want. When you save the template, you will be prompted to update each page that used that template when it was created. Select and each page using that template will be updated with the changes you made. This allows you to easily make changes in one location that are reflected throughout the site.
Dreamweaver templates are somewhat complicated. Dreamweaver uses hidden information within the HTML page to determine which areas are editable and which are not. This information adds to page size. Each content page contains an exact duplicate of the template, plus the information that was added to editable regions. If you make major changes to your template, Dreamweaver may not be able to properly update each page that uses that template. Information could be lost or become unusable. For individuals that don't have access to or knowledge to use a more advanced, server-based template system, then Dreamweaver works very well.
FrontPage templates
Microsoft FrontPage also allows the creation of templates, but not in the same sense that Dreamweaver does. In FrontPage you can create a page that is the shell for your site, then save it as a template. If you create a new document using that template ( or ), the contents of the template are merely duplicated into your new document. While this feature may be very helpful in creating sites that have a shell that is accessible, updates to the original template are not reflected in each page that uses that template. Once the site has been created, if you decide to make a change or improvement to a portion of the template, you must make that change in each individual page. Still, if you have many people that are working on one site and you don't have access to a more complex server-based template system, FrontPage templates allow you to distribute an accessible shell for content pages. Those accessibility features, however, must be maintained in each page and are not protected from change or modification.
FrontPage also provides extensions or webbots, which allow the web server to put content together 'on-the-fly'. You can use features such as shared borders, includes, and themes to accomplish much of the same functionality of templates as discussed here.
Server-based templates
Learning how to use server-based templating systems extends far beyond the scope of this accessibility training. Still, the concepts of allowing a program to do the template work for you should be appealing to anyone who manages a lot of content. Learning a server-based content system takes time and effort, and is easier learned if one has a programming background. PHP, ASP, JSP, ColdFusion, Perl, and others are very powerful tools for increasing accessibility on a site-wide basis, but do require a high level of expertise to properly implement.
Advertisements
WebAIM is an initiative of:
