CODE Magazine - Article: Internet Explorer 8 New Accessibility Features

Reader rating:
Click here to read 1 comment about this article.
Article source: CoDe (2008 - Vol. 5 - Issue 4 - Windows Accessibility Focus)

Article Pages: < Previous - 1 2

Internet Explorer 8 New Accessibility Features (Cont.)

High DPI

You can use the Windows DPI Scaling (https://windowshelp.microsoft.com/Windows/en-US/help/454f5078-2b51-4cda-b4c0-6391e870c41d1033.mspx) feature to scale up Windows fonts and user interface (UI) elements (such as buttons, icons, input fields, and so on) by a given percentage. This is different from the scaling that occurs when you lower the display resolution because in the DPI Scaling case, Windows is providing fonts and UI elements that are drawn with more pixels, resulting in a larger, higher fidelity, and sharper Windows experience.

Like Windows Vista, the Internet Explorer 8 user interface is entirely DPI Scaling-aware, and you will notice that all UI elements and fonts are scaled accordingly. Additionally, larger and higher fidelity icons are used. Notice the difference in the Internet Explorer chrome when Windows DPI Scaling is set to 96 DPI (Figure 7) and 120 DPI (Figure 8).

Click for a larger version of this image.

Figure 7: Internet Explorer Chrome at 96 DPI.

Figure 8: Internet Explorer Chrome at 120 DPI.

ARIA syntax is a great mechanism to unlock your dynamic, rich Web applications for everyone.

By default, Internet Explorer 8 will zoom the content of the Web to match your Windows DPI Scaling settings. (Please note that this is a change from Internet Explorer 7, which did not zoom to match Windows DPI Scaling settings.) For example, if you set your DPI Scaling to 120 DPI, Internet Explorer 8 will zoom the content of Web pages by 125%.

For more information, especially for developers who want to take advantage of High DPI in their Web pages and WebOCs, please see: Making the Web Bigger (http://go.microsoft.com/fwlink/?LinkID=125391&;clcid=0x409)

ARIA and UI Automation Support

In the latest release of Internet Explorer 8, Microsoft has made a big investment in Accessible Rich Internet Applications (ARIA). The W3C defines ARIA as a syntax for making dynamic Web content and custom UI accessible. Windows Internet Explorer 8 recognizes the ARIA role, state, and property information from controls and exposes it to assistive technologies. Assistive technologies can then use Microsoft Active Accessibility® and/or UI Automation Accessibility APIs, which are supported for the first time in Internet Explorer, to retrieve the information. Instead of building separate simplified Web pages for accessibility, you can use ARIA to mark up your rich Web applications with roles, states, and properties. For example, to match the behavior you create through script, you can define a DIV element as a button, check box, or another ARIA role.

ARIA syntax is a great mechanism to unlock your dynamic, rich Web applications for everyone. Today Web pages with dynamic content and custom UI controls (such as TreeView controls) have to reuse existing HTML controls. For example, you can make custom TreeView controls accessible by defining each item as an HTML list element. This approach can add complexity to the code, make it more difficult to implement, and prevent all users from getting the same rich behavior.

Code Sample: Create an Interactive TreeView Control Using ARIA

The code sample in Listing 2 uses ARIA to create an interactive TreeView control using HTML and JavaScript. Users of Internet Explorer 8 using an assistive technology (such as a screen reader) can interact with this control and experience the same rich behaviors users without vision impairments do. If you don’t have access to a screen reader you can use the Inspect32 testing tool available at http://www.microsoft.com/downloads/. You can experience the benefits of ARIA first hand by hovering with the mouse or tabbing with the keyboard through the TreeView. The role displayed in Inspect 32 is “treeview item” instead of “outline item”. Similarly a screen reader will speak out “treeview item” instead of “outline item”.

Conclusion

With Internet Explorer 8 and its support for ARIA and UI Automation, developers have a number of useful tools for developing accessible, rich Web pages. With Caret Browsing, the new Zoom functionality, and High DPI support, Internet Explorer 8 helps make content more accessible to your users.

Users of Internet Explorer 8 using an assistive technology (such as a screen reader) can interact with a custom the TreeView control and experience the same rich behaviors users without vision impairments do.

JP Gonzalez-Castellan

Resources and References

You can learn much more about ARIA and how to use it in your Web content from the following W3C resources:

Introduction to ARIA http://www.w3.org/TR/wai-aria-primer/

ARIA Roles, States and Properties http://www.w3.org/TR/wai-aria/

ARIA Best Practices http://www.w3.org/TR/wai-aria-practices/

To learn more about Windows Accessibility APIs go to http://msdn.microsoft.com and search for Microsoft Active Accessibility and UI Automation.

Listing 2: Creating an interactive TreeView control.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    
   <head>
      <title>TreeView ARIA Example</title>
      <style type="text/css">
         li
         {
            list-style-type: none;
         }
      </style>
      <script type="text/javascript">
         // Function to expand and collapse tree items by referencing the ariaExpanded attribute.
         function Toggle(root, itemId)
         {
            var el = document.getElementById(itemId)
            var treeitem = document.getElementById(root)
            if (el)
            {
               if (treeitem.ariaExpanded == "true")
               {
                  treeitem.ariaExpanded = "false";
                  el.style.display = "none";
                  treeitem.childNodes[0].innerText="+ ";
               }
               else
               {
                  treeitem.ariaExpanded = "true";
                  el.style.display = "block";
                  treeitem.childNodes[0].innerText="- ";
               }
            }
         }
      </script>
   </head>

   <body style="margin: 0px">
      
      <ul id="Tree" role="tree">

         
         <li role="treeitem" id="A1" aria-expanded="false" title="Transportation">
            <a href="javascript:Toggle('A1','sub1')">+</a>
            <a href="http://en.wikipedia.org/wiki/Transportation">Transportation</a>
            
            <ul style="display:none" id="sub1" role="group">
              <a href="http://en.wikipedia.org/wiki/Car" role="treeitem" title="Car"><li> Car </li> </a>
              <a href="http://en.wikipedia.org/wiki/Boat" role="treeitem" title="Boat"><li> Boat </li> </a>
              <a href="http://en.wikipedia.org/wiki/Bike" role="treeitem" title="Bike"><li> Bike </li> </a>
            </ul>
         </li>
      </ul>
   </body>
</html>

Article Pages: < Previous - 1 2

Page 1:

Internet Explorer 8 New Accessibility Features

Page 2:

High DPI

How would you rate the quality of this article?

	1	2	3	4	5
Poor						Outstanding

Tell us why you rated the content this way. (optional)

Average rating:
3.6 out of 5

36 people have rated this article.