IBM® Web Content Manager 7.0.0.2 and 8.0 were developed and tested to be compliant with the Web Content Accessibility Guidelines (WCAG) 2.0. These versions of IBM WebSphere® Portal neither enforce nor prevent compliance automatically. Knowing and understanding the requirements of WCAG 2.0 and incorporating them into your web pages, sites, and content is your responsibility. The suggestions in this article will help you understand how to create specific items in Web Content Manager presentation templates to ensure that they are accessible.

Prerequisites for authoring accessible content

Understanding the four principles of accessibility

A web site that is compliant with WCAG 2.0 meets these standards of accessibility:

It is perceivable.
To be perceivable, a web application must provide content and a user interface that allows assistive technology to find the necessary components and present them to the user. Providing text alternatives for images is one example of a perceivable component.
It is operable.
An operable application can be run entirely from a keyboard, allows time-based and moving components to be paused or stopped, minimizes flashing elements, and provides easy ways for users to navigate through content and find their place.
It is understandable.
An application is understandable if it provides ways for assistive technology to interpret the content in the native language, including any specialized terms. It also provides help for using the application and in recovering from errors. An understandable application also behaves consistently on similar pages, doesn't change the context without warning, and labels items in the same way throughout.
It is robust.
A robust application is coded in a way that the tagging, naming, and properties for all components can be determined programmatically.

IBM Web Content Manager 7.0.0.2 and 8.0 content can be Level A or Level AA accessible, depending on the design choices you make. Level A is the minimum level of compliance. Level AA is a more rigorous level of compliance.

About Web Content Manager templates

Web Content Manager is an application that makes it easy to develop and maintain websites. Two types of templates ensure consistency within a web site. Authoring templates provides the authoring interface for content authors and specifies the metadata fields that content authors populate. The Presentation templates determine how the authoring template fields are represented in markup. Web Content Manager also allows you to ensure a consistent design across one or more web sites by providing reusable components that contain markup fragments. These fragments are pulled from one or more presentation templates to produce the final markup for a web page. This article discusses how to build components in presentation templates that comply with WCAG 2.0 Level A and Level AA.

To create an accessible web site, keep the WCAG 2.0 guidelines in mind as you create these individual items:
Image element
Link element
File resource element
Presentation template
HTML element
Menu element
Navigation element

Image element

Guideline:
1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Technique:
When adding simple images to the web site, the component has the ability to add  alt and title tag attributes. With more complex accessibility standards, you may want to add attributes like long description or set the focus on the image through the keyboard. Follow these four steps to achieve the highest accessibility standards for images.

1. From the presentation template, use the tag helper to add a reference to an image component. The image component tag looks like this:



This code renders the image with a title and alternative text.

2. Modify the tag to include format=”url”:


This addition generates the URL to the image (imageURL). You will modify the URL in Step 4.

3. Add the HTML code for the image tag with the attribute you require:



4. Replace the imageURL generated in step 2. The final result looks like this:



You now have an image that keyboard navigation can focus on and that has a long description. You can use this method to add WAI-ARIA attributes if required.

Link element

Guideline:  
2.4 Provide ways to help users navigate, find content, and determine where they are.

Technique:
You can add more attributes to the link component or enable WAI-ARIA in the same way you modify image components.

1. From the presentation template, use the tag helper to add a reference to a link component. The link component tag looks like this:



2. Modify the tag to include format=”url”:


This addition generates the URL to the image (url). You will modify this URL in Step 4.

3. Add the href tag with the attribute you require:



4. Replace the url generated in step 2. The final result looks like this:



You can use this technique to add any other attribute you need for the link element.

File resource element

Guideline:  
2.4 Provide ways to help users navigate, find content, and determine where they are.     

Technique:
You can use the same four-step method for adding attributes to the file resource element as you did for the image and link elements. The final tag looks like this:

    

Presentation template

Guideline:  
2.4 Provide ways to help users navigate, find content, and determine where they are.

Technique:
The presentation template is the most important component because it produces the final markup for a web page. Web Content Manager administrators or site designers are responsible for providing the proper markup when using presentation templates that make the site accessible.

The following example shows basic mark-up code to help you get started implementing techniques to make your site accessible.

HTML element

Guideline:
3.2 Make Web pages appear and operate in predictable ways.
    
Technique:
You can use the HTML element to create reusable components for the website that contain markup fragments. Web Content Manager administrators or site designers are responsible for providing the proper markup when using HTML elements that make the site accessible.

Menu element

Guideline:
4.1 Maximize compatibility with current and future user agents, including assistive technologies.

Technique:
Web Content Manager administrators or site designers are responsible for providing the proper markup for a menu element. The following example shows markup code that includes some basic WAI-ARIA roles to enhance accessibility.
    

    

Navigation element

Guideline:
4.1 Maximize compatibility with current and future user agents, including assistive technologies.

Technique:
Web Content Manager administrators or site designers are responsible for providing the proper markup for a navigation element. The following example shows markup code that includes some basic WAI-ARIA roles to enhance accessibility.
    
 
    

Summary

Web Content Manager has many reusable design elements that allow you to give users accessible web sites and pages. Becoming familiar with the WCAG 2.0 and WAI-ARI specifications can be very useful in developing your own accessible web sites.

References

Web Content Accessibility Guidelines 2.0

W3C WAI-ARIA documentation

W3C Roadmap for Accessible Rich Internet Applications

W3C WAI-ARIA Authoring Practices

DOJO Accessibility Design Requirements

IBM Web Content Manager 8 Product Documentation

IBM Web Content Manager 7 Product Documentation

Developing an Exceptional Web Experience