Internet Explorer 8 New Accessibility Features

Windows® Internet Explorer® 8 has a lot of cool new features that make Web page browsing more accessible. I’m going to cover Caret Browsing, Zoom Version 2, High DPI, Accessibility Rich Internet Applications (ARIA) support and User Interface Automation (UI Automation) support. Caret Browsing is particularly helpful for low-mobility users. Zoom 2 and High DPI support targets low-vision users, and the new ARIA and UI Automation support targets screen-reader users. Low-mobility users prefer to use the keyboard or devices that interact with a virtual keyboard. Some low-vision users require specialized assistive software to interact with computers while others can do well with features and tools shipped with the operating system.

When you make something accessible you are not only impacting the accessibility community but the entire user base. My favorite example is the wheelchair access ramps. After the American Disability Act was passed, public gathering places, like airports, added wheelchair ramps. Airports soon noticed that mothers with baby strollers and passengers with rolling suitcases were using the ramps too, since it was easier than picking up the strollers and suitcases over the ledge. Improve the accessibility of your software and everybody wins. When you provide robust keyboard navigation to benefit users who can’t use the mouse, you are also enabling users who want to perform tasks faster, since there are now fewer tasks they need to use the mouse for.

Caret Browsing

Caret Browsing is a new Accessibility feature that allows users to navigate a Web page using a moveable cursor on the screen with the keyboard. Users can select and copy text as well as tables and images using only the keyboard.

Moving the cursor within the text of a Web page is similar to moving the cursor within the text of a Microsoft Word document, as shown in Figure 1. Pressing F7 toggles Caret Browsing on or off. You can enable Caret Browsing for one tab or for all tabs and windows. You can hold the SHIFT key down and press the arrow keys to select text.

As I mentioned before, many users prefer the keyboard to the mouse because they find it faster for certain tasks. Users can select a word or phrase, as you see in Figure 2, bring up the Accelerators through the context-menu key, select Translate with Windows Live, and see the selection’s meaning in Spanish, without ever taking their hands off the keyboard.

Zoom 2

Page zoom lets you enlarge or reduce the view of a Web page to improve readability. The feature is particularly useful on very large and very small displays, allowing for scaling of content while maintaining the intended page layout. The second iteration of the zoom feature set (the first shipped in Internet Explorer 7) focuses on providing a higher-quality, more predictable, and persistent zooming experience. Primary features in this release include the elimination of horizontal scroll bars for the majority of mainstream scenarios and the introduction of persistent zoom states. I personally find this feature useful when using my TV to browse the Web. I sit far away from the TV; using a wireless keyboard, I use the Zoom to make the pages more readable. The extensive keyboard shortcut’s list allows me to use the mouse as little as possible.

Zoom 2 works by adjusting the internal state of the dots-per-inch (DPI) calculations within Internet Explorer 8. To understand this better, consider how different display settings affect a page's layout.

Screen Resolution: Changing from a 1200 × 1600-pixel screen resolution to an 800 × 600-pixel resolution means changing the spacing between pixels. In other words, pixels are effectively bigger. A screen element of 100 × 100 pixels is now twice as big on the 800 × 600-pixel screen as it was on the 1200 × 1600-pixel screen.

System DPI: Changing from 96 DPI to 192 DPI, but keeping all other factors the same, implies more pixels in an inch. The spacing between pixels has not changed. However, more pixels are required to form a logical inch.

Zoom Factor: Changing the zoom factor from 1 to 2 means that everything should be twice as big. Figure 3 shows how to calculate the Zoom Factor.

HTML Layout Measurements: This value is always 96 DPI, as explained in the CSS 2.1 specification (http://www.w3.org/TR/CSS21/syndata.html#percentage-units). The Internet Explorer page zoom feature cannot change any of the above settings except for the zoom factor. However, it can lay out or render a page at a DPI setting that is different from the configured system DPI, thus achieving zoom results.

The sample code in Listing 1 divides the screen into quadrants of color, using absolute positioning, to show the difference between the Internet Explorer 8 adaptive page zoom and the Internet Explorer 7 optical page zoom

The boxes in Figure 4 are absolutely positioned, and they are anchored to the corners of the viewport. Each is sized using relative dimensions (%). The box in the middle is anchored to the center of the body. In Figure 5, you can see how Internet Explorer 7 displays a 175% zoom while Figure 6 shows how Internet Explorer 8 handles a 175% zoom.

You can see the importance of carefully selecting the anchor for positioned screen elements and using relative dimensions instead of absolute or device-dependent dimensions (such as pixels). If you had positioned the center DIV using pixels, the DIV would have moved from the center when zoomed.

By: JP Gonzalez-Castellan

JP is the Program Manager responsible for improving the Accessibility experience in Internet Explorer. He was born in Argentina and got his Computer Science degree at Rose-Hulman Institute of Technology in Indiana. He has been involved at Microsoft with Accessibility since 2004.

JP.Gonzalez@microsoft.com