The first step in implementing an accessibility policy is establishing an approach to accessible design with respect to architecture and techniques. The goal is to standardize site structure and page creation to streamline workflow and eliminate frequent development mistakes. Establishing standards for site architecture and design techniques provides web content designers and developers with a common starting point for their designs as well as a common language for discussing the issues involved.
When developing an approach, two groups need to be considered: novice web content designers and developers, and those with more expertise. For novices, it is important that the approach make accessibility easy to achieve. Providing templates, library objects, and other shortcuts for creating accessible pages is an effective strategy. For advanced web content designers and developers, the approach should take advantage of this group’s skill set but should streamline the process of accessible design. Advanced designers and developers can employ CSS, XHTML, and data-driven models to provide a rich and more customizable feature set to users.
Static or dynamic
When creating an accessible site, one of the first decisions that needs to be made is whether the site should be static or dynamic. A static site does not change as the user loads it. To edit static pages, developers/designers must open the HTML document and edit the pages individually. A dynamic site connects a web page to a database. Information on the page may change depending on the user. To edit dynamic pages, developers/designers must edit the database that stores the information.
When deciding whether to make a site static or dynamic, developers/designers should consider the capabilities of the organization. Dynamic pages are more complex to set up, but easier to maintain. They also require an application server, such as Adobe® ColdFusion® 10 software. The staff’s level of expertise, the availability of hardware and software, and the availability of staff for maintenance will play a part in this decision.
The following three site design models span a continuum from completely dynamic to completely static. As expertise and experience with accessibility and data-driven design evolve, every organization needs to find the model that best fits its own needs.
Data-driven model
Data-driven websites are sites where the site content is stored in a database. Each web page is dynamically generated by retrieving content from the database. The data-driven model allows the process of accessible design to be streamlined in two ways. First, a web content designer/developer can enter content into the database using a form on a web page. This allows individuals throughout the organization to add content to the site without learning HTML or an authoring tool. It is an ideal solution when there are numerous content developers with little or no experience actually building web pages.
Second, a data-driven model automates the process of page creation and allows visitors to the site to select the content format that best serves their needs. Thus, the same page can be delivered dynamically in a text-only format, a full-graphics HTML version, or a rich media format using Adobe Flash® Professional CC software. When a static HTML site has multiple versions, the typical problem is that only one version is actively maintained. Maintaining multiple versions of a static site requires much more work than maintaining a dynamic site. With dynamic sites, all versions are dynamically updated to reflect the latest content.
An organization should choose a data-driven model only if it has the hardware and software infrastructure to support it. This infrastructure should include a server running ColdFusion 10 or another dynamic server application. In addition, there should be sufficient resources to maintain the server as well as to develop dynamic pages.
Until an organization has a sufficient level of expertise, the website administrator must be able not only to maintain the web server but also to support web content developers.
Static site model
A static website offers more simplicity up front than a dynamic site but requires a bit more maintenance in the long run. It is helpful to use the Template and Library Objects features in Adobe Dreamweaver® CC software to streamline the process of accessible static content design. Another useful authoring tool is Adobe Contribute® 6.5 software. In Contribute 6.5, website administrators can specify accessibility settings.
Using templates involves creating a set of pages in Dreamweaver CC that cover common page types within the site and incorporate accessibility features. Using templates enables the website administrator or senior designers to resolve a problem or make a design change across an entire site by fixing only the template. Templates include all the standard elements on a page, such as organization logos, navigation bars, and copyright notices. These elements are locked; novice web content developers can then add content, using Contribute 6.5, to the other parts of the page while maintaining consistent and accessible pages.
It is particularly important to provide accessibility training for the front-end web content designers and developers who will develop the templates.
Dreamweaver CC libraries provide a means of storing page elements such as images and text that will be reused or updated frequently throughout a website. When a page element is saved as a library item, it can be placed on multiple web pages, and all copies can be updated automatically from the library. Using libraries, it is easy to create and edit a full range of accessibility features across multiple pages. For example, an accessible navigation bar with the desired alt text can be created and saved in a library. The designer/developer can then drag the navigation library item onto multiple pages or templates while retaining the ability to edit them all at once.
Combined model
In circumstances where knowledge or experience with dynamic design is limited but the necessary hardware and software are available, an approach combining data-driven and static elements may be appropriate. The designer/developer should begin with a single instance of dynamic design. For example, a single page that needs frequent updating can be developed by a novice or an inexperienced designer. As organizational expertise with data-driven models increases, so can the site’s reliance on dynamic pages. Additionally, the sophistication and maturity of the dynamic techniques used in a site may increase as well. Ongoing training for both the website administrator and web content designers and developers is essential to the success of these models.
Tools and techniques
When creating an accessible site, it is important to have a standard for tools and techniques throughout the site so that web content designers and developers can be consistent in their approach. Some common benefits of standardization are described here.
Tools
An important part of implementing an accessibility policy is ensuring that designers and developers have the appropriate tools. In addition, these tools should support novice content developers as well as more sophisticated users in creating accessible pages. Dreamweaver CC with ColdFusion 10 is a good choice to support broad skill levels. Dreamweaver CC supports visual editing and drag-and-drop creation of accessibility features and still enables developers to use more sophisticated techniques as their expertise grows.
Another important reason for standardizing tools is to simplify training related to accessibility. Training should connect an accessibility issue with the related technique and give step-by-step instructions for employing that technique. Using a single application across an organization eliminates the need for superfluous explanations and enables the training to cover a greater number of issues. Time is a valuable, limited resource when it comes to accessibility, given the range of issues and techniques that merit attention.
Techniques
Standardizing techniques throughout an organization provides web content designers and developers with a concrete and consistent approach to some of the more subjective accessibility issues. Some techniques to consider are navigation, images, cascading style sheets (CSS), plug-ins, and design support mechanisms.
Navigation
Navigation poses a number of issues related to accessibility. Two issues in particular require a consistent approach. The first issue is the use of a skip navigation mechanism. According to Section 508, “a method shall be provided that permits users to skip repetitive navigation links.” A skip navigation mechanism enables screen reader users to avoid listening to every link in the navigation bar on each page. Typically, the designer/developer creates skip navigation by linking a small transparent image at the top of a page to an anchor just before the main content. The alt text description for this image would read “skip to content” or “skip navigation.”
The second key navigation issue relates to the use of JavaScript rollovers. Rollovers that display pull-down lists or disjointed images elsewhere on the page pose particular challenges. While some screen readers are now able to read JavaScript, the majority still cannot; therefore, the links and content from a JavaScript rollover are unavailable to most screen reader users. Pull-down menus are possible but require CSS layers with JavaScript rather than JavaScript alone. These techniques are complex and involve significant design planning. In addition, these tools may benefit from the use of multiple skip navigation mechanisms. Standardizing the development of accessible JavaScript rollovers in navigation significantly simplifies their consistent implementation.
Images
Images benefit from standardization in at least two areas. First, it is helpful to standardize and centrally store alt text for frequently used images across the site. Storing images as library items in Dreamweaver CC enables designers to add the appropriate alt text only once and use it consistently on all pages. Other designers and developers can then be confident that the correct alt text is there when they place the library item on a page.
Second, a long description should be used for images requiring alt text longer than 50 characters. Multiple strategies are available for adding long descriptions to images. The first is using the longdesc attribute. The longdesc attribute provides a screen reader user with a link to the long description on a separate page.
A second method places a caption next to the image and links the caption to the descriptive page. Offering the same functionality as the long description, captions may be more difficult to integrate into a design scheme.
Standardizing the implementation of long descriptions is important not only to content developers, but also to users, who will consistently know where to find descriptions.
Cascading style sheets
Cascading style sheets offer significant benefits for accessibility. When site text is formatted with CSS, users can override styles to format text to meet their needs. This allows users with limited vision or color blindness to change the size or color of text, for example. It is important to note that if HTML is used to format text, this formatting overrides all CSS styles, including user-defined styles; therefore, if the use of CSS for formatting text is standardized, it should be applied consistently across the site.
Rich media content
Flash Professional CC provides the tools for creating exciting and engaging content on the web. Adobe Flash Player 11 allows users of assistive technologies to access this content in ways not previously possible, making the best experience on the web available to all. When creating accessible rich media using Flash Professional CC, it is important to pay attention to the screen reader environment. Designers and developers need to provide text equivalents for elements within a movie that must flow in a logical sequence when read by a screen reader.
A second issue for designers of rich media content is device independence. The movie must support keyboard- and mouse-based interactions. Creating this kind of content may require guidance for novice developers. More information on this and other issues is available at the Adobe Accessibility Resource Center.
Plug-ins
Plug-ins enable browsers to display a particular file format. Each plug-in requires a distinct strategy for accessibility. The use of plug-ins must also comply with standards for software. Similar to standards for web content, the software standards also require that the plug-in function without a mouse.
Use of video and audio content requires a synchronized text alternative, typically in the form of closed captioning. If an organization frequently uses video or audio on its site, it should invest in hardware and software tools that support closed captioning.