This chapter is from the book
This chapter is from the book
This chapter is from the book
About Accessibility
Accessibility is a way of producing applications accessible to the broadest range of people. This includes people with disabilities such as poor eyesight, motor impairments, and so on, and also to people who prefer to use keyboards for fast access, people with limited bandwidth, with older computers, people using applications such as text-only browsers, screen readers, and other devices to access applications. To learn more about adding accessibility to an application, visit the Microsoft Accessibility Developer Center at http://msdn2.microsoft.com/en-us/accessibility/default.aspx.
For a Sidebar gadget, accessibility relates to theme colors, high color contrast, and HTML accessibility in general. Adding accessibility to a gadget means taking care of gadget design in terms of the following:
- Keyboard access
- HTML accessibility
- Theme colors and contrast
Keyboard Access
One of the fundamental accessibility scenarios is that some users use only their keyboards. This is also a requirement from power-users who love the speed of using the keyboard rather than a point-and-click device such as a mouse. So, specifically, the Sidebar and the gadgets themselves should be accessible from the keyboard.
The keyboard support listed in Table 3.2 is provided by the Sidebar
Table 3.2. Shortcut Keys to Access Sidebar Gadget
|
Keyboard Access |
Action |
|
Windows logo key + Spacebar |
Brings all gadgets to the front and puts focus on the Windows Sidebar |
|
Windows logo key + G |
Cycles through the gadgets |
After your gadget is in focus, you have to make sure all its features are accessible through the keyboard. The following lists important points to keep in mind when adding accessibility:
- Focus should be put on the gadget when it is loaded.
- Users should be able to tab through the controls and links in the gadget.
- The Enter key should act like a mouse click to push a button or follow a link and should call the onclick event of the control or link.
- The onfocus and onfocusout functions should be called to simulate the mouse hover effect.
- Apart from the gadget main page, a gadget's Flyout and Settings page should also be accessible from the keyboard.
The, "About Accessibility," section in Chapter 6, "Design Patterns and Standard Practices," shows you how to implement these in a gadget.
General HTML accessibility
Because all the pages used in a gadget (the main gadget window, Flyout, and Settings pages) are HTML pages, accessibility rules apply to them as well. To adhere to these rules you should attend to the following:
- Provide text alternatives for images and links. Set the ALT tag in the image and Title tag in the Anchor element. The alt text as well as the title act as a short description of the image that serves the same purpose as the image or the link itself. If the image is purely a decoration, then set alt="". For example, if the gadget has a weather image, then set alt="Cloudy" or alt ="Partly sunny". Reflecting what the image conveys fulfills this requirement.
- Create content in a modular way so that the structure of the page (HTML), presentation (CSS), and behavior (JavaScript functionality) are in separate pages and the HTML page is accessible without the CSS file.
These guidelines are from the W3C Initiative Web Content Accessibility Guidelines 2.0, which can be found at http://www.w3c.org/TR/WCAG20/.
Theme Colors and Contrast
When adding accessibility to a gadget, you next need to consider the colors used in the background, images, HTML page elements, and so forth.
- Pick contrasting foreground and background colors to make your gadget information more visible. This is especially important for the color of the text against the background color. Contrast is a function of lightness, hue, and saturation. Here's a resource from the Lighthouse for the Blind, an expert in vision disabilities: http://www.lighthouse.org/accessibility/effective-color-contrast/.
- Avoid using red and green combinations because people with red-green colorblindness cannot distinguish between red and green. There are other types of colorblindness, but red-green is the most common.
- Do not use color alone to convey information.