User Assistance and Accessibility...

This article shall examine what is involved with implementing online user assistance and implementing accessibility features, somewhat initially opaque objectives. Both are concerned with usability of web applications - providing an interface that makes it as easy as possible for a user to achieve the tasks the application functionality facilitates.

By: Chris Sully

Date: July 29, 2003

Introduction

Two of the objectives of .NET certification exam 70-305 Developing and Implementing Web Applications with Visual Basic .NET and Visual Studio .NET are:

Implementing online user assistance
Implementing accessibility features

which come under the general heading of Creating User Services.

This article shall examine what is involved with these somewhat initially opaque objectives. Both are concerned with usability of web applications – providing an interface that makes it as easy as possible for a user to achieve the tasks the application functionality facilitates. There are several strands to usability but these two objectives focus on two areas: providing help to users to guide them through the possibly complex application and ensuring that people with disabilities can use (access) your application.

Implementing user assistance

While there are accepted standards for providing help to users of desktop applications there is no such standard for web sites and applications. Options you may choose to implement include providing help in a separate browser window or embedding help within the application itself. For example you might implement a help link that displays a hidden label control within the page populated by additional information. Or to avoid the server postback you might opt for a DHTML solution.

Such features would be in addition to any guidance information available as part of your application interface. In actual fact the quality of a user assistance solution is as much about the quality and relevancy of information you present than the mechanism with which you choose to deliver it.

Although Microsoft does not offer a standard browser-based help solution several companies do: these might be appropriate options for consideration if you do not want to implement a bespoke solution.

Finally, in this short consideration we are focussing on end user help delivered as part of the application. There are other forms of user assistance:

readme files
printed, online or electronic documentation
e-mail, telephone or onsite support
wizards or other user interface components to guide the user through complex processes

Implementing accessibility features

There are strong ethical, economic and legal arguments for ensuring your software is accessible to individuals with disabilities. There are 5 main principles of accessible design:

Flexibility: the user interface should be flexible and customisable, so that users can adjust it to their own individual needs and preferences.
Choice of input methods: different users have different abilities and preferences as regards to choosing an input device whether these be manually operated devices, voice operated devices or other alternatives.
Choice of output methods: similarly you should not depend on a single method of output, e.g. sound, colour, text for important information.
Consistency: your application interface should be consistent with accepted standards ... with Microsoft web applications this means the Windows/ Internet Explorer interfaces and general web interface standards.
Compatibility with accessibility aids: such aids include screen readers or Windows accessibility aids such as the onscreen keyboard. Your application should not circumnavigate these accessibility aids. In particular the HTML code generated by your application should not obviate such requirements.

In fact Microsoft has made accessibility key to attaining 'Windows logo certification'. Their implementation of the above principles in this regard includes:

Supporting the standard system size, colour, font and input settings.
Ensuring compatibility with the high contrast display setting where the application can only use colours from the control panel or colours explicitly chosen by the user.
Providing documented keyboard access to all features.
Ensuring it is obvious where the keyboard focus is located – this is necessary for magnifier and narrator accessibility aids to function properly.
Do not convey information by sound alone.

To address web sites and applications more specifically below are some further guidelines:

ALT text
Every non-text element should have an alternative textual representation specified and this text should convey the most important information concerning the element. This text may be used by screen reader software.

Link text
Link text should be useful in isolation. E.g. 'click here' should not be used for link text as in 'click here' for further information. Consider using the title attribute of the link to provide a more descriptive string.

Imagemaps
Do not depend on image maps for navigation; include a set of links for those who cannot use the images.

Keyboard navigation
The tab key will move between all links and imagemap areas in the order they are defined in HTML. Use the TABINDEX attribute where appropriate to override this.

Access Keys
All controls and links that act as controls should have an ACCESSKEY attribute. Underline the access key in the control's label.

Control identification
Use the TITLE attribute or LABEL tags to associate a name with every control.

Frames
Provide alternative pages that do not use frames.

Support formatting options
Do not assume that text will be in a specific font, colour or size – breaking of this assumption can severely compromise the appearance of your pages. Do not explicitly format text, e.g. use relative fonts sizes rather than specific. This will inconvenience users who have changed the standard browser font sizes.

Style sheets
Make sure your site will work even if the style sheet is turned off. If it doesn't, offer alternative pages that will work without a style sheet.

Audio and Video
Provide captions and / or transcripts for audio and video content.

There are other accessibility standards, for example notably W3C standards, as follows.

W3C Guidelines

The World Wide Web consortium (W3C) is the body that governs web standards and they have plenty to say on the topic of accessibility – see http://www.w3.org/wai/. If interested in exploring accessibility issues this is an excellent place to start. Among their many recommendations are guidelines deemed 'priority 1' which the W3C suggest are mandatory requirements. These are summarised below. Note that I have omitted any items overlapping significantly with the previous recommendations except where important new information is introduced.

Provide a textual equivalent to every non-text element, for example via the use of ALT or LONGDESC. Such elements include simple images but may also be graphical representations of text, imagemaps and imagemap regions, animations, programmatic objects, frames, scripts, spacer images, button images, audio and video. This also extends to dynamic content – the textual equivalent should also be updated to reflect changes to the main element.
Don't use colour or any single attribute to convey information – always provide an alternative in content or markup.
Avoid causing the display to flicker.
Use the clearest and simplest language appropriate to the site's content.
Provide clientside imagemaps instead of server side imagemaps where the regions cannot be defined by an available geometric shape.
Identify row and column headers in tables.
Use markup to associate data cells and header cells.
Use TITLE tags for all frames.
Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible provide equivalent alternately presented information via another facility. In fact generally, if a page fails any of the recommendations an alternative that does not should be provided that is accessible, has equivalent information and/ or functionality and is updated as often as the original page.

There is a further set of standards, termed Section 508 standards, that are required by law for federal web sites in the US. I shan't enter into details here (partly as I'm sitting in the UK!) but you may want to undertake a quick search on Google if interested. The standards are based largely on the W3C guidelines.

You may also be interested in an automated tool (called Bobby) that will validate your pages against W3C and section 508 standards – see http://bobby.cast.org.

Testing Accessibility

Apart from using Bobby or devising complex test plans involving disabled users and their computing equipment here are a few simpler tests you may like to perform.

Try navigating your UI using just the keyboard. Can you access all application functionality?
View your page with graphics turned off (Tools – Internet Options – Advanced in IE)– are the ALT tags good substitutes?
If using sound, turn it off – is any important information lost?
Turn on the high contrast option in control panel (display) – are the pages still readable?
Alter the page's font size (View, text size in IE) – has the text changed or have you errantly fixed font sizes? Is the design still OK? Is the page still readable? Is all the necessary information still conveyed?
Does resizing the browser window (within sensible limits) impact in the usability or accessibility of the application.

A few examples

Let's look at just a few simple ways we can implement some of the recommendations above.

Using tooltips

Create a web form and add some ASP.NET web server controls to it; specify text for the tooltip property of each control. For example:

<%@ Page Language="VB" %>
<script runat="server">

  ' Insert page code here
  '

</script>
<html>
<head>
</head>
<body>
  <form runat="server">
    <p>
      <asp:TextBox id="TextBox1" runat="server" ToolTip="Enter your data here"></asp:TextBox>
    </p>
    <p>
      <asp:Image id="Image1" runat="server" ToolTip="This is a broken image"></asp:Image>
    </p>
  
  </form>
</body>
</html>

Browse the web form and see what happens when you hover over the rendered control. Look at the HTML for the page; for the above this is:

You can see from the above that the ToolTips are rendered as HTML titles.

Somewhat similar is the use of ALT tags with images within your HTML code. Further the AlternateText property of the ASP.NET image web server control (and related controls) renders as an HTML ALT tag.

Row and column headers for tables

Create a web form and add an HTML table to it. Typically, you will enter something similar to:

<%@ Page Language="VB" %>
<script runat="server">

  ' Insert page code here
  '

</script>
<html>
<head>
</head>
<body>
    <table width="400" border="1">
        <tbody>
            <tr>
                <td>
                </td>
                <td>
                    Column Heading1</td>
                <td>
                    Column Heading2</td>
            </tr>
            <tr>
                <td>
                    Row Title1</td>
                <td>
                    Item 1-1</td>
                <td>
                    Item 1-2</td>
            </tr>
            <tr>
                <td>
                    Row Title2</td>
                <td>
                    Item 2-1</td>
                <td>
                    Item 2-2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

This is also similar to the code that will be generated if you let VS.Net generate the HTML for you.

However, you can make this code more accessible by amending it to the following:

<%@ Page Language="VB" %>
<script runat="server">

  ' Insert page code here
  '

</script>
<html>
<head>
</head>
<body>
    <table width="400" border="1">
        <tbody>
            <tr>
                <th>
                </th>
                <th scope="col">
                    Column Heading1</td>
                <th scope="col">
                    Column Heading2</td>
            </tr>
            <tr>
                <td scope="row">
                    Row Title1</td>
                <td>
                    Item 1-1</td>
                <td>
                    Item 1-2</td>
            </tr>
            <tr>
                <td scope="row">
                    Row Title2</td>
                <td>
                    Item 2-1</td>
                <td>
                    Item 2-2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

What makes this implementation more accessible? Using the <th> tag for the table header row explicitly indicates that it is such which accessibility software may process. Additionally, a specific CSS style may be applied to the <th> tag to display such rows prominently as required. Further, the scope attribute associates row and column headers explicitly with data in the rows and columns. Again accessibility software such as screen readers can use this additional information to the benefit of the end user.

Parting Thought

One of my pet hates when it comes to web sites is the tendency that graphic / web designers have of getting carried away with the aesthetic impact of their sites to the detriment of usability and accessibility. This can manifest itself in many ways including:

Over use of spacer images which severely compromise downloads times of pages and hence the usability of the application.
Fixing the design at a set minimum resolution thus decreasing usability by minimising the space available for application content.

As a consequence of 2 often the text font size will be set to a specific small size thus alienating the x% of the user population who cannot view the text (a higher percentage than you might think) and further meaning they cannot change the size via the client web browsers inbuilt facilities.

Of course it is not just graphic / web designers who are at fault. Web developers as well do not pay sufficient respect to the usability and accessibility of the code their applications generate. They need to for several reasons, including possible future legal necessity.

References

Developing and implementing web applications with VB.Net and VS.Net
Mike Gunderloy
Que