wtorek, 17 stycznia 2012

Notatki o Windows 8 - odc. 22

Koncepcje i architektura aplikacji Metro - dostępność aplikacji JavaScript, kryptografia i obsługa certyfikatów, obsługa ustawień lokalizacji w systemie Windows 8, aplikacje Metro dla urządzeń.

Accessibility in Metro style apps using JavaScript

Support for accessibility is built into the Metro style app using JavaScript platform. As the Metro style app using JavaScript host renders an application UI, accessibility information that is defined in the application markup is exposed through Microsoft UI Automation - the Microsoft accessibility API—and made available to assistive technology tools such as screen readers.

Because all HTML tags and Microsoft Metro style app using JavaScript controls are already accessible, implementing Metro style app using JavaScript accessibility typically involves setting just a few HTML attributes.

Accessible name

Static text

For text and other HTML tags, the accessible name is based on the visible (inner) text. Examples include the p and h1 tags.

Images
For images, the alt attribute is used as the accessible name. This applies to images that you specify with the img tag, image buttons that you specify with <input type="image">, and area tags that you use with image maps.
Form fields
The accessible name for a form field such as <input type="text| password| checkbox| radio|...">, or for a select or textarea tag, should be the same as the label that is displayed for the field. The preferred way to associate a label with an input field is to use the label tag and set the for attribute. When the user clicks the label tag, the focus moves to the associated control.
Buttons and links

By default, the accessible name of a button or link is based on the visible text. For a and button tags, the accessible name is based on the inner text of the tag. For an input tag of type="button", the accessible name is based on the value attribute.

Tables

The accessible name of a table is typically defined with a caption tag in the table.

Labeling structure and landmark elements

Giving labels to structure and landmark elements is important because screen readers use the labels to navigate a document. Elements that need labels include forms, frames, regions, and other elements with landmark roles such as "main", "navigation", and "search".

All elements

For all elements that are typically defined by using a div tag, including custom elements, you can set an accessible name by using one of the following attributes:

  • aria-labelledby—to refer to the element that contains the text to use as the accessible name.
  • aria-label—to set the accessible name directly.
  • title—to create a tooltip that is also used as the accessible name.

You should use the previous attributes with custom UI elements (for example, with div tags), and when you want to override the default HTML attributes.

<h1 id="formLabel">Personal Information</h1>

<form aria-labelledby="formLabel" ... >

<label for="fullname">Full Name</label>

<input id="fullname" type="text" accesskey="N"/>

For Metro style app using JavaScript controls, you can use data binding to set the accessible name.

Value

If a UI element has an associated value that is important for understanding the condition of the UI element, you need to expose this information to accessibility users.

For example, a JavaScript control that is hosted in a div tag that has its role attribute set to "slider", "progressbar", or "spinbutton", must expose the aria-valuemax, aria-valuemin and aria-valuenow attributes. In addition, your app must dynamically maintain the aria-valuenow attribute to reflect the changes in the element. A good practice is to set the aria-valuetext attribute to provide the text string that corresponds to the current value of the aria-valuenow attribute. 

<div id="sl" role="slider" ...

     aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"…>

</div>

State

Sometimes it is important to set and maintain the accessibile state of a UI element (for example, by using the aria-disabled attribute). Setting and maintaining the accessibility state is particularly important for custom UI elements. The system has built-in support for maintaining the accessible state for all standard UI elements and Windows controls.

<div id="folders" role="tree" aria-label="Folders" ...>

   ...

</div>

 

<script>

    var fodlers = document.getElementById('folders');

    // Ensure keyboard navigation/operation with arrow keys

    folders.addEventListener('keydown', function(e) {

        var itm = e.srcElement;

        if ( e.keyCode === Win.Utilities.Key.leftArrow) {

            // The node is collapsed if it has children

            e.srcElement.setAttribute('aria-expanded', false );

        } else if ( e.keyCode === Win.Utilities.Key.rightArrow) {

            // The node is expanded if it has children

            e.srcElement.setAttribute('aria-expanded', true );

        }

    });

</script>

To remove an element and all if its content from the Microsoft UI Automation tree, use the aria-hidden attribute with the value set to true.

Role

You should assign a valid (non-abstract) Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) role to custom UI elements.

<div id="folders" role="tree" aria-label="Folders" tabindex="0"

        aria-activedescendant="n-0" >

    <div id="n-0" role="treeitem" aria-expanded="true" onclick="…" >Libraries</div>

    <div role="group" >

        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="…">Docs</div>

        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="…">Music</div>

        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="…">Pics</div>

    </div>

</div>

Keyboard navigation among UI elements

You should set the tabIndex attribute to a value that is greater than or equal to 0 for all interactive UI elements that are not in the tab order by default.

Note that focusable HTML tags like a href="…", input, and select are in tab order by default.

The following rules apply to the tabIndex attribute.

  • UI elements with tabIndex equal to 0 are added to the tab order based on document order.
  • UI elements with tabIndex greater than 0 are added to the tab order based on the tabIndex value.
  • UI elements with tabIndex less than 0 are not added to the tab order, but can receive keyboard focus.

Keyboard navigation within a UI element

For composite elements, it is important to ensure proper inner navigation among the contained elements. You can implement inner navigation for a composite element in several ways.

A composite element can manage its current active child to reduce the overhead of having all children be focusable. Such a composite element is included in the tab order, and it handles keyboard navigation events. The composite element exposes information about the currently active child element by using the aria-activedescendant attribute.

<!-- Custom tree view element. –>

<div id="folders" class="tree" role="tree" aria-label="Folders" tabindex="0"

        aria-activedescendant="n-0" >

    <div id="n-0" class="selected" role="treeitem" aria-expanded="true"

            onclick="...">

        Libraries</div>

    <div role="group" >

        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="…">Docs</div>

        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="…">Music</div>

        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="…">Pics</div>

    </div>

</div>

 

<script>

    var fodlers = document.getElementById('folders');

    // Ensure keyboard navigation/operation with arrow keys.

    folders.addEventListener('keydown', function(e) {

        var itm = e.srcElement;

        if ( e.keyCode === Win.Utilities.Key.upArrow) {

            // Update aria-activedescendant with the previous node id.

            // Update the class attribute to mark the selected node.

        } else if ( e.keyCode === Win.Utilities.Key.downArrow) {

            // Update aria-activedescendant with the next node id.

            // Update the class attribute to mark the selected node.

        }

    });

</script>

An alternative approach is to dynamically manage the tabIndex attribute for the node. This method is known as providing a "roving index".

<!-- Custom tree view element. –>

<div id="folders" role="tree" aria-label="Folders" >

    <div id="n-0" role="treeitem" aria-expanded="true" tabindex="0">Libraries</div>

    <div role="group" >

        <!-- Child tree items: Documents, Music, Pictures ... -->

        <div id="n-0-1" role="treeitem" aria-expanded="false" tabindex="-1">Docs</div>

        <div id="n-0-2" role="treeitem" aria-expanded="false" tabindex="-1">Music</div>

        <div id="n-0-3" role="treeitem" aria-expanded="false" tabindex="-1">Pics</div>

    </div>

</div>

 

<script>

    var fodlers = document.getElementById('folders');

    // Ensure keyboard navigation/operation with arrow keys.

    folders.addEventListener('keydown', function(e) {

        var itm = e.srcElement;

        if ( e.keyCode === Win.Utilities.Key.upArrow) {

            // Update tabindex attributes.

        } else if ( e.keyCode === Win.Utilities.Key.downArrow) {

            // Update tabindex attributes.

        }

    });

</script>

Keyboard activation

Ensure that UI elements that can be clicked can also be invoked with the keyboard. For UI elements that can be invoked, implement keyboard event handlers for the Space and Enter keys. This makes the basic keyboard accessibility support complete and enables users to accomplish basic app scenarios by using only the keyboard; that is, users can reach all interactive UI elements and activate the default functionality.

<!-- Custom tree view element. –>

<div id="folders" role="tree" aria-label="Folders" aria-activedescendant="n-0"

        tabindex="0" >

    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>

 

    <div role="group" >

        <!—Child tree items: Documents, Music, Pictures ... -->

        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>  

        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>

        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>

    </div>

</div>

 

<script>

    // Ensure keyboard activation

    folders.addEventListener('keydown', function(e) {

        if (e.srcElement && (e.keyCode === Win.Utilities.Key.enter ||

                e.keycode === Win.Utilities.Key.space)) {

            e.srcElement.click(e);

        }

    });

</script>

Live regions

To enable screen readers to announce UI changes as they happen, set the aria-live attribute for important content that changes dynamically. One example where setting the aria-live attribute is important is in the classic master-detail scenario in which selecting an item in the master control dynamically loads the corresponding content in the detail area.

<div class="…" data-win-control="Win.UI.ListView" aria-label="Master"

    data-win-options="{…}" ></div>

</div>

<div class="…" data-win-bindsource="…" role="region" aria-label="Detail"

    aria-live="assertive" aria-atomic="true" >

</div>

Another good example is when displaying Really Simple Syndication (RSS) feeds or chat communication. In this case, the content container element also includes the role="log" attribute.

<div id="chat" role="log" aria-live="polite" aria-atomic="false" ></div>

Tables

The main purpose of the table tag is to represent data that has more than one dimension. In addition, the table tag is often used for page layout, although that is no longer recommended.

The accessibility information includes the following.

  • An accessible name provided by a caption tag in the table.
  • An accessible description provided by the summary attribute.
  • Optionally, table headers that use th tags with the scope and headers attributes.

<p id="tableDesc">This table describes the travel expenses broken by ...</p>

<table border="1" aria-describedby="tableDesc">

   <caption>Travel Expense Report</caption>

   <thead>

     <tr>

       <th></th>

       <th>Meals</th>

       <th>Hotels</th>

       <th>Transport</th>

       <th>Subtotals</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <th>San Jose</th>

       <td>65.02</td>

       <td>224.00</td>

       <td>90.00</td>

       <td>90.00</td>

     </tr>

     ...

   </tbody>

</table>

For complex tables, use the scope and headers attributes to better define the relationship between cells and headers. Use the scope attribute in a th tag to further define the purpose of the header. Use the headers attribute in corresponding td tags in complex tables if multiple headers apply to a single cell.

<table border="1">

   <caption>Travel Expense Report</caption>

   <thead>

      <tr>

         <th></th>

         <th id="c2">Meals</th>

         <th id="c3">Hotels</th>

         <th id="c4">Transport</th>

         <th id="c5">subtotals</td>

      </tr>

   </thead>

   <tbody>

        ...

      <tr>

         <td id="r3" >25-Aug-97</td>

         <td headers="c2 r2 r3">37.74</td>

         <td headers="c3 r2 r3">112.00</td>

         <td headers="c4 r2 r3">45.00</td>

         <td></td>

      </tr>

        ...

   </tbody>

</table>

The Metro style app using JavaScript platform and Narrator do not expose the headers attribute, but some third party screen readers or assistive technology tools might leverage this information by looking directly into the Document Object Model (DOM).

High contrast

The Metro style app using JavaScript platform supports high contrast themes by default for all apps. When a user switches to a high contrast theme, the Metro style app using JavaScript framework automatically replaces all the colors and Cascading Style Sheets (CSS) settings with the high contrast look. You don't need to do an additional work in your app to support high contrast.

In some cases, you might need more control over the high contrast look for your app. For example, if you set a button’s image as a CSS background, the button is invisible in high contrast because the Metro style app using JavaScript platform removes all CSS background images. To override the default high contrast behavior for a specific element, use ms-high-contrast-adjust: none on the parent element. You can also use CSS media queries to customize for high contrast.

/* Back button style setting. */

.backButton {

    ...

}

 

@media screen and (-ms-high-contrast)

{

    .backButton {

        -ms-high-contrast-adjust: none;

        ...

    }

}

 

/* Back button additional customization for white high contrast theme. */

@media screen and (-ms-high-contrast:black-on-white)

{

    .backButton {

       ...

    }

}

You also need to consider how your images look in high contrast. If image colors don't look good in high contrast themes, provide high contrast versions of your images, and follow the recommended file naming conventions. For example, the "back.png" image file would have a version named "back.contrast-high.png” for use with any high contrast theme, "back.contrast-black.png" for use with black high contrast themes, or "back.contrast-white.png" for use with white high contrast themes.

The Metro style app using JavaScript platform also lets you use JavaScript to take specific action if a high contrast theme is on.

// Take a specific action if the user has chosen a high contrast theme.

if (msMatchMedia("screen and (-ms-high-contrast)").matches) {

  // A high contrast theme is active.

                 ...

}

Accessible description

An accessible description provides additional accessibility information about a particular UI element. You typically provide an accessible description when an accessible name alone does not adequately convey an element's purpose. Narrator reads an element's accessible description only when the user requests more information about the element by typing Windows logo key + Alt + F.

The best way to provide an accessible description is to use the aria-describedby attribute. This attribute refers to one or more other UI elements whose text content the system will use as the accessible description. Alternatively, you can provide the accessible description by implementing a tooltip that includes the title attribute.

<!-- Declaring visible text as the accessible description of a table. –>

<p id="tableDesc">This table describes travel expenses organized by destination and dates.</p>

<table aria-describedby="tableDesc">...<table>

Tooltips

Standard HTML tooltips

A standard HTML tooltip is a special case because you can use it as both an accessible name and an accessible description. You create a tooltip by setting the title attribute. If you want to use the title attribute to create a tooltip but not an accessible name, use , the aria-labelledby or aria-label attribute. These attributes take precedence over the title attribute when the system retrieves the accessible name.

<!-- Narrator reads: "Title attribute" -->

<button title="Title attribute">Inner text</button>

<!-- Narrator reads: "ARIA label" -->

<button title="Title attribute" aria-label="ARIA label" >Inner text</button>
Metro style app using JavaScript tooltips

A Metro style app using JavaScript tooltip does not affect the accessible name or the accessible description. A screen reader announces a Metro style app using JavaScript tooltip when it appears, but if you want to use the same text for a tooltip and for an accessible name or description, you need to do so explicitly.

<!-- The P element holds the text to use for the tooltip and description. –>

<p id="backTooltipText">Use this button to navigate back</p>

<button id="back" aria-describedby="backTooltipText">Back</button>

<script>

    var back = document.getElementById('back');

    var backTooltipText = document.getElementById('backTooltipText');

 

    var myTooltip = Win.UI.Tooltip(back);

    myTooltip.innerHTML = backTooltipText.innerHTML;

</script>

If the text should not be displayed, you can use Cascading Style Sheets (CSS) to make the P element invisible.

Keyboard shortcuts

In addition to implementing keyboard navigation and activation for your app, it is a good practice to implement keyboard shortcuts to your app's functionality. Keyboard shortcuts enhance productivity by providing an efficient way for the user to access the functionality.

It is imperative that you provide an easy way for users who rely on screen readers and other assistive technology to discover your app's keyboard shortcuts. You should declare shortcuts in your app's HTML markup by using the accesskey attribute (Alt+key), and communicate shortcuts by using a tooltips, accessible names, accessible descriptions, or some other form of on-screen communication. At a minimum, shortcuts should be well documented in your app's help content.

The Metro style app using JavaScript platform supports access key functionality for setting focus or invoking elements, but you must implement shortcut keys in JavaScript by using keyboard event handlers.

<script>

    var sendButton = document.getElementById('sendButton');

    sendButton.addEventListener('keyup', function(e) {

        var itm = e.srcElement;

        if (e.ctrlKey && e.keyCode === 83 ) {

            // Invoke save functionality.

        }

    });

</script>

You must also consider shortcut keys during localization. Localizing access keys is especially important because selecting an access key typically depends on the label for the given element.

Logical navigation

In general, you should split all page content into logical regions and optional subregions, and you should mark each region and subregion with an appropriate landmark role and accessible name. Specifically, each page should contain at least one region marked with role="main" that represents the main content of the page. Other important landmark roles are "navigation" and "search", which should mark areas that have navigation or search functionality. Other landmark roles for marking page content include "banner", "contentinfo", and "complementary".

If your app contains regions that do not correspond to an existing landmark role, mark the regions by using the structure role of "region". Finally, you should label all HTML forms, frames, and iframes with accessible names.

When labeling a region, use the aria-labelledby attribute to refer to some visible text to use as the region label. Whenever possible, use a header element to label a region, either by using an HTML heading tag such as <h1>, <h2>, or <h3>, or by marking referenced text with role="header" and the corresponding aria-level attribute. If there is no visible text to use as the region label, set the accessible name by using the aria-label attribute or the title attribute (typically for frames and iframes). In some cases, a region can also have an additional description marked with an aria-describedby attribute. 

  <div id="title" role="banner" aria-labelledby="label_title">

    <a href="..."><img class="logo" alt="Home Page" src="..." /></a>

    <h1 id="label_title">...</h1>

  </div>   

 

  <div id="nav1" >

    <h2 class="nav" id="nav1_label">...</h2>

    <ul id="navigation1" role="navigation" aria-labelledby="nav1_label">

      <li><a href="...">...</a></li>

      <li><a href="...">...</a></li>

      <li><a href="...">...</a></li>

    </ul>

  </div>

 

  <form id="search" ...>

    <div role="search" aria-labelledby="search_box">

      <label for="search_box">Search for ...</label>

      <input type="text" id="search_box" >

      <input type="submit" value="Bing Search">

    </div>

  </form>

 

  <div id="contact-info" role="complementary" aria-labelledby="contact_label">

    <h4 id="contact_label">contact info</h4>

  </div>

       

  <div id="content-col-1" role="main" aria-labelledby="main_label">

    <h1 id="main_label">Welcome to ...</h1> 

    ...

  </div>

 

  <div id="copyright" role="contentinfo">Copyright ...</div>

Media

If your app includes media content, ensure that you also provide captions for the content. Captions are visible text equivalents of the speech and essential non-speech audio portions of a media presentation. They include all of the spoken material, as well as any audio effects that are required for understanding the media. Note that captions are not just for traditional video-based material; they are also required for audio-only media, such as podcasts, voice-overs in animations (including games) and presentations (including screen captures), and so on.

Captions can be open (the display of the captions can be switched on and off by the user) or closed (the captions are always visible to all users - typically burned in as part of a video track).

<video src="conent.webm">

   <track kind="captions" src="content.en.vtt" srclang=en label="...">

</video>

Canvas

Because HTML5 doesn't include a way to expose canvas content, you should use the CANVAS element only as a last resort. If you must use CANVAS, we recommend that you use Accessible Rich Internet Applications (ARIA) attributes to describe the nature, behavior, and properties of the canvas. The most straightforward case is when the CANVAS element directly corresponds to a single ARIA role.

Typically, the CANVAS element is dynamic and you need to do more work to make application scenarios accessible. In particular, you need to implement a parallel Document Object Model (DOM) representation that is dynamically tied to the canvas content and stays in sync with it.

The elements in the grid must be maintained from JavaScript as the canvas content changes.

<!-- A canvas that draws a chessboard has an alternate grid representation. –>

<canvas id="chessBoardCanvas" width="300" height="300" role="grid"

      tabindex="0" aria-label="Chess board" aria-activedescendant="a8">

    <div id="r8" role="row" aria-label="Row 8">

        <div id="a8" role="gridcell" aria-label="a8">

            <div role="img">black rook</div>

        </div>

        <div id="b8" role="gridcell" aria-label="b8">

            <div role="img">black knight</div>

        </div>

        ...

    </div>

    <div id="r7" role="row" aria-label="Row 7">

        <div id="a7" role="gridcell" aria-label="a7">

            <div role="img">black pawn</div>

        </div>

        ...

    </div>

    <div id="r6" role="row" aria-label="Row 6">

        <div id="a6" role="gridcell" aria-label="a6"></div>

        <div id="b6" role="gridcell" aria-label="b6"></div>

        ...

    </div>

</canvas>

Practises to avoid

  • Avoid building custom UI elements if you can use standard HTML tags or the controls included with the Metro style app using JavaScript framework. Building a custom UI element, typically by using the div tag, requires more work for accessibility.
  • Don’t set the role attribute to an arbitrary value because that does not take advantage of the accessibility support that is built into the Metro style app using JavaScript platform.
  • Avoid using custom Cascading Style Sheets (CSS) absolute positioning of UI elements. Whenever possible, lay out UI elements in document or logical order to ensure that screen readers can read the UI elements in the correct order. If the visible order of UI elements can diverge from the document or logical order, use the aria-flowto attribute to define the correct reading order.
  • Don’t use color as the only way to convey information. Include other visual cues, preferably text, to ensure that information is accessible.
  • Don’t automatically refresh an entire page. If you need to automatically refresh page content, update only certain areas of the page, and mark the areas as live regions.
  • Don’t use UI elements that flash more than three times per second. It is best to avoid using UI elements that flash.
  • Context or activation changes should occur only when the user takes a direct action on a UI element that has focus. Changes in user context include changing focus, displaying new content, and navigating to a different page. Making context changes without involving the user can be disorienting for users who have disabilities. The exceptions to this requirement include displaying submenus, validating forms, displaying help text in another control, and changing context in response to an asynchronous event.

Testing a Metro style app for accessibility

The Windows Software Development Kit (SDK) for Metro style Apps includes accessibility testing tools called Inspect and UI Accessibility Checker that help you verify the accessibility of your app. You can launch the accessibility testing tools either from Microsoft Visual Studio 11 Express for Windows Developer Preview command prompt or from the Windows SDK for Metro style Apps tools folder (<install_dir>\Program Files\Windows Kits\8.0\bin\x86).

Inspect

Inspect enables you to select any UI element and view its accessibility data. You can view Microsoft UI Automation properties and control patterns and test the navigational structure of the automation elements in the UI Automation tree.

image

UI Accessibility Checker

UI Accessibility Checker (AccChecker) helps you discover accessibility problems at runtime. When your UI is complete and functional, use AccChecker with ARIA Web verifications to test different scenarios, verify the correctness of runtime accessibility information, and discover runtime issues. You can run AccChecker in UI or command line mode.

If you intend to declare your app as accessible in the Windows Store, you need to address all priority 1 errors reported by AccChecker with ARIA Web verifications.

Test keyboard accessibility

The best way to test your keyboard accessibility is to unplug your mouse or use the On-Screen Keyboard if you are using a slate device. Test keyboard accessibility navigation by using the Tab key. You should be able to cycle through all interactive UI elements by using Tab key. For composite UI elements, verify that you can navigate among the subelements by using the arrow keys. Finally, make sure that you can invoke all interactive UI elements with the keyboard, typically by using the Enter or Spacebar key.

Verify the contrast ratio of visible text

Verify your app in high contrast

Verify your app with "Make everything on your screen bigger"

Verify main app scenarios by using Narrator

Use Narrator to test the screen reading experience for your app by performing the following steps.

  • Start Narrator by pressing Windows logo key + Enter.
  • Navigate your app with the keyboard by using the Tab key, the arrow keys, and the Windows logo key + Alt + arrow keys. Navigate with touch if your app is running on a slate device that has four or more touch points.
  • As you navigate your app, listen as Narrator reads the elements of your UI and verify the following.
    • For each control, ensure that Narrator reads all visible content. Also ensure that Narrator reads each control's name, any applicable state (checked, selected, and so on), and the control type (button, check-box, list item, and so on).
    • For each table, ensure that Narrator correctly reads the table name, the table description (if available), and the row and column headings.
    • For each live region, ensure that Narrator announces live region changes as specified in the HTML markup through aria-live attributes, aria-atomic attributes, and so on.
  • Verify that you can invoke Narrator for all interactive elements by pressing Windows logo key + Alt + Spacebar.
  • Press Windows logo key + Alt + Enter to search your app and verify that all of your controls appear in the search list, and that the control names are localized and humanly readable.
  • Turn off your monitor and try to accomplish main app scenarios by using only the keyboard and Narrator. To get the full list of Narrator commands and shortcuts, press Windows logo key + Alt + F1.

Accessibility in the Windows Store

While onboarding your app to the Windows Store, you can declare your app as accessible. Declaring your app as accessible makes it easier to discover for users who are interested in accessible apps, such as users who have visual impairments. Users discover accessible apps by using the Accessible filter while searching the Windows Store. Declaring your app as accessible also adds the Accessible tag to your app’s description.

By declaring your app as accessible, you state that it meets the baseline accessibility support that users need to accomplish key scenarios using one or more of the following.

  • The keyboard.
  • A high contrast theme.
  • A high dots per inch (dpi) setting.
  • Assistive technology such as the Windows accessibility features, including Narrator, Magnifier, and On-Screen Keyboard.

Mapping HTML and ARIA properties to UI Automation

Cryptography and PKI

Windows.Security.Cryptography

Contains the CryptographicBuffer class and static methods that enable you to:

  • Convert data to and from strings
  • Convert data to and from byte arrays
  • Encode messages for network transport
  • Decode messages after transport
Windows.Security.Cryptography.Certificates

Contains classes, interfaces, and enumeration types that enable you to:

  • Create a certificate request
  • Install a certificate response
  • Import a certificate in a PFX file
  • Specify and retrieve certificate request properties
Windows.Security.Cryptography.Core

Contains classes and enumeration types that enable you to:

  • Encrypt and decrypt data
  • Hash data
  • Sign data and verify signatures
  • Create, import, and export keys
  • Work with asymmetric key algorithm providers
  • Work with symmetric key algorithm providers
  • Work with hash algorithm providers
  • Work with machine authentication code (MAC) algorithm providers
  • Work with key derivation algorithm providers
Windows.Security.Cryptography.DataProtection

Contains classes that enable you to:

  • Asynchronously encrypt and decrypt static data
  • Asynchronously encrypt and decrypt data streams
Cryptography support

You can perform the following cryptographic tasks. For more information, see the Windows.Security.Cryptography.Core namespace.

  • Create symmetric keys
  • Perform symmetric encryption
  • Create asymmetric keys
  • Perform asymmetric encryption
  • Derive password based keys
  • Create message authentication codes (MACs)
  • Hash content
  • Digitally sign content

The Windows Software Development Kit (SDK) for Metro style Apps also provides a simplified interface for password-based data protection. You can use this to perform the following tasks. For more information, see the Windows.Security.Cryptography.DataProtection namespace.

  • Asynchronous protection of static data
  • Asynchronous protection of a data stream
Encoding support

A Metro style app can encode cryptographic data for transmission across a network and decode data received from a network source. For more information, see the static methods available in the Windows.Security.Cryptography namespace.

PKI support

A Metro style app can perform the following PKI tasks. For more information, see the Windows.Security.Cryptography.Certificates namespace.

  • Create a certificate
  • Create a self-signed certificate
  • Install a certificate response
  • Import a certificate in PFX format
  • Use smart card certificates and keys (sharedUserCertificates capabilities set)
  • Use certificates from the user MY store (sharedUserCertificates capabilities set)

Additionally, you can use the manifest to perform the following actions:

  • Specify per application trusted root certificates
  • Specify per application peer trusted certificates
  • Explicitly disable inheritance from system trust
  • Specify the certificate selection criteria
    • Hardware certificates only
    • Certificates that chain through a specified set of issuers
    • Automatically select a certificate from the application store

Creating a private key on the client and enrolling

You can make a Metro style app that creates a certificate request, submits the request to a specific certification authority (CA), and installs the certificate response to the app container certificate store. The CreateRequest method generates a private key and stores it in the app specific store.

Note  There is no enrollment method in the CertificateEnrollmentManager class. To submit the request and obtain the issued certificate, you must use one of the following: XMLHttpRequest (JavaScript), HttpWebRequest (C#), IXMLHttpRequest (C++).

Your Metro style app can enroll for certificates on a smart card in a similar manner.

Creating a private key on the server

A website may require the use of client certificates for strong user authentication. The website can generate a private key and certificate on the server and then send them to the client for installation. Your Metro style app can require the user to authenticate by using a one time password upon first use. Then your app can obtain the certificate and key from the server and install them into the app container. The user can subsequently authenticate to the site by using the certificate without a password. If the user moves to a different computer or loses the certificate and key, your app can provide the client a copy from the server.

SSL server authentication using system trusted roots

A Metro style app can establish an HTTPS connection to a secure web service and verify that the server certificate chains up through a system trusted root. By default, a Metro style app can read system trust stores, except for the user MY and REQUEST stores.

SSL server authentication using application specific trusted roots

You can write a Metro style app that uses its own trust anchor rather than inheriting from system trust. When your app is installed, you can use the manifest to specify that the root certificate also be installed in a private store, and the app can use the root certificate to establish a secure HTTPS connection to the web server. The root need not be trusted through the Microsoft root program. The root is trusted only for your app and does not affect trust for other applications on the system.

SSL client authentication using smart cards

Some financial institutions require that their customers use smart cards to authenticate to a secure server before performing financial transactions online. The institution creates a Metro style app that requires the certificate selected for user authentication be hardware-based.

SSL client authentication using application specific software-based certificates and keys

Some financial institutions issue account holders software-based certificates rather than smart card-based certificates. The Metro style app from such institutions enrolls for the certificate from the institution's web server and installs the certificate and private key to a per-app specific store. The certificate authenticates a user to the financial institution web server.

Encryption

You can create, import, and export keys in a Metro style app, but you cannot store the keys you create or import.

You can use a SymmetricKeyAlgorithmProvider object to specify a symmetric algorithm and create or import a key. You can use static methods on the CryptographicEngine class to encrypt and decrypt data by using the algorithm and key.

You can use an AsymmetricKeyAlgorithmProvider object to specify an asymmetric algorithm or a signing algorithm, to create or import an ephemeral key pair, or to import the public key portion of a key pair.

The DataProtectionProvider class in the Windows.Security.Cryptography.DataProtection namespace provides a simplified way to encrypt and decrypt digital data. You can use the class to protect data to any of the following:

  • You can use a SID to protect data to an Active Directory (AD) security principal like an AD group. Any member of the group can decrypt the data.
  • You can protect data to the public key contained in an X.509 certificate. The owner of the private key can decrypt the data.
  • You can protect data by using a symmetric key. This works, for example, to protect data to a non-AD principal such as Live ID.
  • You can protect data to the credentials (password) used during logon to a website.

MACs

You can use the MacAlgorithmProvider to enumerate the available MAC algorithms and generate a symmetric key. You can use static methods on the CryptographicEngine class to perform the necessary encryption that creates the MAC value.

Hashes

You can use the HashAlgorithmProvider class to enumerate the available hash algorithms and create a CryptographicHash value.

Digital signatures

You can use an AsymmetricKeyAlgorithmProvider object to enumerate the available signature algorithms and generate or import a key pair. You can use static methods on the CryptographicHash class to sign a message or verify a signature.

Certificates

Certificates are typically issued by CAs but they do not need to be. If, for example, you have created a web service and a Metro style app client and you want them to be able to communicate over HTTPS, the server must be able to authenticate to the client. Your Metro style app does not need to go to a CA to obtain a server certificate. Instead, you can use the manifest to specify that you want the certificate installed with the client.

You can use the Windows.Security.Cryptography.Certificates namespace to create certificate requests and install or import an issued certificate.

Some of X.509 fields and extensions can be specified directly when you use the CertificateRequestProperties class to create a certificate request. Most cannot. These fields can be filled by the issuing authority or they can be left blank.

Shared certificate stores

Certificate storage per app container

Certificates that are intended for use in a specific app container are stored in per user, per app container locations. A Metro style app running in an app container has write access to only its own certificate storage. If the application adds certificates to any of its stores, these certificates cannot be read by other Metro style apps. If a Metro style app is uninstalled, any certificates specific to it are also removed. A Metro style app also has read access to local machine certificate stores other than the MY and REQUEST store.

Cache

Each app container has an isolated cache in which it can store issuer certificates needed for validation, certificate revocation lists (CRL), and online certificate status protocol (OCSP) responses.

Shared certificates and keys

When a smart card is inserted into a reader, the certificates and keys contained on the card are propagated to the user MY store where they can be shared by any full-trust application the user is running. By default, however, app containers do not have access to the per user MY store.

To address this issue and enable groups of principals to access groups of resources, the app container isolation model supports the capabilities concept. A capability allows an app container process to access a specific resource. The sharedUserCertificates capability grants an app container read access to the certificates and keys contained in the user MY store and the Smart Card Trusted Roots store. The capability does not grant read access to the user REQUEST store.

Manifest capabilities and extensions

Capabilities and extensions are of particular importance to certificates used with Metro style apps. Capabilities can be used to define whether a Metro style app can share certificate stores outside of the app container in which it is running. Extensions can be used to install certificates along with the application, specify whether to inherit from system trust, and set certificate selection criteria.

Certificates extension sample

<Extensions>

  <!--Certificates Extension-->

  <Extension Category="Microsoft.Windows.Certificates">

    <Certificates>

        <Certificate StoreName="Root" Content="Certificates\Root\myroot1.cer"/>

        <Certificate StoreName="Root" Content="myroot2.cer"/>

        <Certificate StoreName="TrustedPeople" Content="mypeer1.sst"/>

        <Certificate StoreName="Issuer" Content="myissuer.cer"/>

        <TrustFlags ExclusiveTrust="true"/>

        <SelectionCriteria HardwareOnly="true" AutoSelect="true"/>

    </Certificates>

  </Extension>

</Extensions>

Location awareness

Windows Location Provider

In Windows Developer Preview, the built-in Windows Location Provider supplies apps with accurate location data based on wireless network and IP address data.

Windows 7 introduced the Windows Sensor and Location Platform, which can determine the best data from multiple installed location providers and supply the data to applications using the Location API. However, the only built-in location provider for Windows 7 was the Default Location Provider, which supplied location based on user input in Control Panel. Additional location providers had to be installed if applications needed location data without requiring manual input from the user. In Windows Developer Preview, the Windows Location Provider replaces the Default Location Provider.

The Windows Location Provider uses data from Wi-Fi access points to calculate the latitude and longitude. Locations calculated from Wi-Fi data are accurate to within 350 meters in urban areas.

When Wi-Fi data is not available, the Windows Location Provider uses IP address resolution to get approximate location with an accuracy of 25km.

Latitude, longitude and accuracy are provided to applications. The Windows Location Provider does not provide information about heading, speed, altitude or street address - other installed location providers may supply this data to applications.

You can help improve Microsoft location services and let Windows periodically send GPS and other location information to Microsoft when you use location-aware apps. We will not use this information to identify or contact you.

In Windows Developer Preview, since the Windows Location Provider replaces the Default Location Provider, the Default Location Provider is no longer part of Control Panel. However, the country/region is populated by the user during initial Windows setup.

Although the Default Location Provider is removed from Control Panel, you can still create an enhanced Default Location Provider using the Win32 Location API to set a default location from your own custom user interface, or to provide pre-installed location data for your country or region. This user interface will only be available through the desktop.

Location settings

The different settings for enabling location in Windows Developer Preview are simplified. There is a setting available to administrators that can disable location for all users, a per-user setting to enable or disable location, and for Windows Metro style apps, users can apply per-app location settings. Each setting applies to all location services as a whole, rather than any individual location provider.

Administrator location settings are available from the desktop Control Panel. By default, the Windows Location platform is enabled, so that users can choose their own location settings. Administrators can also optionally allow anonymous wireless access point data to be used for improving the Windows Location Provider.

image

User settings. Geographic location is considered personally identifiable information (PII), so to protect user privacy, location is off by default for each user. The user must enable location services in Control Panel. In Windows Developer Preview, the user only needs to make one choice and does not need to have knowledge of specific location providers. By making one selection in Control Panel, the user can enable or disable all available location providers, including the Windows Location Provider.

private

Location settings for Windows Metro style apps

In Windows Metro style appsMetro style apps, the user can change an app's location settings through the Settings charm.

image

Dialogs for enabling location

The first time an a Windows Metro style app tries to access location data, the user is prompted to grant location access to the app.

Metro style device app

The Metro style device app gives the user access to their device's unique functionality. When the user installs their device, this app is either downloaded from local media, or, from the Windows Store. This installation is seamless: it requires no extra work on the part of the user to obtain the software that they'll use to configure and control their device.

IHVs and OEMs develop Metro style device apps to expose their device's functionality in Windows Developer Preview. Metadata on the device itself associates it with the app.

Metro style device apps can be written for common devices (printers, web cams, or portable devices that support the WPD API). In addition, Metro style device apps can be written for specialized devices like credit-card readers, eBook readers, and health or fitness devices.

A Win32 API used to build Metro style device apps for custom devices.

c.d.n

Brak komentarzy: