MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

If you play with the sample, you’ll notice that when you tab to the chat window, Narrator reads the
entire contents. When you enter a line of in the single line control, on the other hand, Narrator only
reads the new element that’s been added. This is due to a default value of false for the aria-atomic
attribute (not present in the markup). When used on an aria-live element, this tells the screen reader
to read only the changed node in that element. If you set aria-atomic to true, a change to any child
element is considered a change to the whole element such that all the contents will be read. This can
apply on multiple levels, mind you, so that if you add a child element that is atomic and add grandchild
elements within it, only that atomic child element would be read if the parent element is not atomic.
As for the markup in pages/table/table.html, this gives us an example of aria-describedby. Here’s
the relevant section, omitting the table contents:
Sample table
This table shows sample data.
...
When you set the focus to the table in the running sample (you have to use the mouse for this unless
you add a tabindex to the table), you’ll initially hear “Sample table” according to the aria-labelledby
attribute. Then press Win+Alt+F, and you’ll hear “Item described by…” followed by the
aria-describedby text. (And yes, go ahead and change it so that Narrator says some silly things. You
know you want to!)
Note, finally, that it’s essential that the title and subtitle elements also have some aria-related
attributes, such as role. Otherwise aria-labelledby and aria-describedby won’t work.
Handling Contrast Variations
Working with high contrast modes is primarily one of accommodating changes to the Windows color
theme and making sure that you apply graphics that meet high contrast requirements. Technically
speaking, high contrast is defined by the W3C as a minimum luminosity ratio of 4.5 to 1. A full
explanation including how to measure this ratio can be found on
http://www.w3.org/TR/WCAG20-TECHS/G18.html. A Contrast Analyzer (from the Paciello Group) is also
available to check your images (some of mine in Here My Am! failed the test). Do note, however, that
creating high contrast graphics isn’t required for non-informational content such as logos and
decorative graphics. At the same time, full-color graphics might look out of place in a high contrast
mode, so be sure to evaluate your entire end-to-end user experience under such conditions.
An app handles high contrast through four means. The first is to use built-in controls (both HTML
and WinJS) and let the system do the work! To see what happens, run a few of the controls samples,
such as the HTML essential controls sample and HTML essential controls sample and the HTML Rating
788