Making the SAP Design Guild More Accessible – Protocol of A Redesign Project
By Ramona Winkler, SAP AG, Product Design Center, SAP Design Guild Team – 02/18/2002
Introduction
The old design of the SAP Design Guild enchanted many of its users. The Design Guild team received a couple of emails with praising of the "look and feel" of the whole site. Nevertheless, the "pretty" old design was a tight corset not allowing for even basic accessibility recommendations such as flexible fonts. Thus, we thought that it was high time to start on the process of turning the SAP Design Guild accessible by exterminating at least the basic accessibility sins with the publication of the second edition in December, an edition that covers the very topic of accessibility. Moreover, the new design should allow the adaptation of all pages to different screen sizes (even 800x600), and should allow for easy bookmarking by employing frame-less pages; a frame-less design also plays a big role in the area of font scalability for making pages more accessible.
The first part of this article gives you a summary of the major accessibility flaws of the old design of the SAP Design Guild. The second part covers briefly how the changes and improvements have been integrated into the new design.
The Inaccessible Old Design Guild
Header Classes
Most of the header classes in the old design had special definitions in the Design Guild style sheets, such as "bluehead" or "ahead", and were referred to in the html-coding of a page. Unfortunately, support tools such as the screenreader JAWS for Windows for visually impaired users don't access individually defined header classes. A screenreader doesn't recognize a title which is not referred to in the html-coding as title by tags such as h1, h2 etc. Nevertheless, it is of great use for any user to group text areas with their corresponding titles. The recommendation here is to define titles by structural tags (h1, h2, etc.).
Identifying the Language of the Text
Screen readers can utilize the language tag of the html-coding to adapt their language setting for a better pronunciation of the contents of a Webpage. The old pages of the Design Guild didn't provide this information.
Sitemap
The sitemap link of the old design appeared at the bottom of only the homepage. In order for blind users to have a straight road to the structure and contents of a Webpage, it is necessary to provide a link to the sitemap on top of every page. Moreover, the sitemap itself should have a very simple linear layout.
Font Scaling
The most common Web browsers offer font scaling capabilities which allow users to adapt the font size to their individual needs. Unfortunately, the style sheets of the old design defined absolute font sizes such as 10pt or 12pt. The definition of absolute font sizes in style sheets renders the font scaling capabilities of browsers useless because fonts will not scale anymore. Figure 1 and 2 demonstrate the difficulties of scaling the fonts in the old design.
Figure 1: The old homepage design with the font
size normal
Figure 2: The old homepage design with the font
size large - there is no change in the font size compared to the normal
size if the style sheets contain absolute font size information
Font Scaling Within Frames
Font scaling within frames may cause problems, since frames have a specific height or width. If scrollbars are not active, frames may cause parts of the content to disappear. Figure 3 shows this effect for the current (new) design if it would utilize frames.
Figure 3: Font scaling within frames may cause parts
of the content to disappear
The top navigation of the old design was integrated into a frame, and used images
as navigation links. The worse problem here is not the navigation being integrated
into a frame, but the navigation images not allowing for font scaling as can
be seen in figure 4.
Figure 4: The use of images for navigation purposes
instead of normal text doesn't allow for scaling
Flexible Page Behavior
Flexible page behavior is offered by simplifying a page's layout, by reducing the number of intertwined tables which can distort the page layout for different screen sizes, and by designing a page thus that it can be properly used with an 800x600 screen size. The page layout of the old design was too inflexible and did not linearize properly for smaller screen sizes.
ALT-Tags For Images
Any image that appears in a Webpage contains some information for the person who sees it. Being visually impaired makes it difficult to understand or see this visual cue. Therefore, it is unremitting to translate this "visual" information into one that is understood by all users. The image tag allows for integration of an alternative tag that should provide complete and meaningful information about essential images.
Repetitive Links
The old design makes use of repetitive links such as "Read more" to give detailed information to an introductory text (see figure 5). Using repetitive links without any further specification is not recommended, because they cannot be read out of context. Screenreader tools may read out only the links listed on a Webpage, and anyone can imagine that it is useless information for a blind person to hear "Read more" 3 times in a row. The WAI recommends to "strive for clear and accurate headings and link descriptions. This includes using link phrases that are terse and that make sense when read out of context or as part of a series of links (Some users browse by jumping from link to link and listening only to link text)".
Figure 5: Repetitive link "Read more" without further
specification is useless when read out by a screenreader in a link list
The New Design Guild Improved by Basic Accessibility Features
We tried to make the Design Guild more accessible allowing for better font scaling and a flexible page behavior by getting rid of all the frame solutions. The new-design Webpages consist of single html-files. The content and even the top navigation is grouped and designed by layout tables thus ensuring font scaling. Figure 6 demonstrates the font scalability of the new design.
Figure 6: The new design of the SAP Design Guild
allows for font scaling (the top image demonstrates the font scale set to smallest,
the middle image shows the font scale set to middle, and the bottom image has
the font scale set to largest)
As the SAP Design Guild is a stage for accessing design and usability cookbooks, and guidelines, we had to decide on the integration of the frame-based layout of these cookbooks and guidelines. In order to maintain the frameless design of the new Design Guild, we decided to let the frame-based guidelines and cookbooks appear in a separate window.
Finally, all images are endowed with meaningful, "speaking" alternative texts (see figure 7).
Figure 7: The image of the SAP Design Guild logo
with a "speaking" text
We also replaced all repetitive links such as "Read more" with complete and meaningful links (see figure 8), and the language definition is set to English. Last but not least, titles are now defined by structural tags and can be recognized as titles by support tools such as Jaws.
Figure 8: Repetitive links such as "Read more" were
replaced by meaningful, "speaking" ones
Conclusions
We just started the process of making the Design Guild accessible, and we know that there are still many problems to be fixed and much work to be done. At the moment we are designing a linear sitemap, and we are working on providing more header elements and text descriptions for better identifying screen elements especially in tables. Since we - the Design Guild team - are all too human, we have probably overlooked and ignored some possibilities of improving the accessibility of the Design Guild. If you should discover any of them on our site, please be so kind and let us know by emailing your suggestions to sapdesignguild@sap.com.
Our many thanks go out to Alexander Kuban for being our first test person for the old design, showing us the behavior of a visually impaired user who is being confronted with a new Website. Moreover we are deeply indebted to Joëlle Carignan from the User Experience Group of SAP Labs for testing the old as well as the new design of the SAP Design Guild with different tools such as Bobby, Jaws, and Insight 508, and sending detailed recommendations for improvement to us.
