Skip to main content

Building a more accessible web platform

Written By published April 20, 2016



In February we shared our roadmap for empowering all Microsoft Edge customers through accessibility and inclusive design. Today, we’re excited to share more about Microsoft Edge’s native support for the modern UI Automation accessibility framework, coming with the Windows 10 Anniversary Update. UI Automation enables Windows applications to provide programmatic information about their user interface to assistive technology products such as screen readers, and enables a comprehensive ecosystem.

New Microsoft Edge accessibility architecture

Providing a great experience for users of all abilities requires the right architecture. Over the last year we’ve rethought our approach, and designed an accessibility system which inherently supports modern web standards including HTML5 and CSS3. Let’s take a look at the simplified browser pipeline that follows the webpage content into an accessible presentation layer:

Flowchart showing the simplified browser pipeline. Figure 1. Content transformed to the engine model is projected into visual and accessibility views that are presented either as visual or accessible presentation.
Content transformed to the engine model is projected into visual and accessibility views that are presented either as visual or accessible presentation.

In our previous architecture, accessibility objects were generated and tightly associated with the DOM tree, in fact it was a subset of the tree itself. This presented many engineering challenges to maintain and evolve.

With Microsoft Edge an accessibility view is now generated from the same engine model used for visual presentation. Our accessible view creates native accessible objects which can be mutated and invalidated with script changes, just like visual view elements.

Our new accessibility architecture is available in the latest public flight behind the “Enable experimental accessibility features” flag under about:flags, and assistive technologies can take advantage of this using the “MicrosoftEdge” UIA_FrameworkIdPropertyId.

Try it today and let us know what you think!

Navigating web content faster with document structure and landmark roles

To transform content, styles and attributes into accessible objects browsers use HTML and Core Accessibility API mapping specifications. These define how semantic HTML elements gain ARIA roles and are transformed into accessibility entities, such as UI Automation objects.

Using semantic elements, developers can greatly improve the content navigation experience. Microsoft Edge and Narrator now support document structure and landmark role elements in heading, paragraph and landmark navigation modes.

For example, using the <main> elementdevelopers can provide a hint to assistive technology indicating where the primary content is. This makes it easier for their users to get to this content quickly from anywhere on the page. This experience will light up in Microsoft Edge and Narrator, and in other browsers, with assistive technologies supporting those roles.

Getting more information with accessible names and descriptions

Site authors commonly use ARIA attributes and well known patterns and techniques to enhance presentation of the elements on the page. Browsers then take the available information on that element, including contextual elements nearby, and compute accessible name and description. Microsoft Edge now supports the computation algorithm, providing users access to the full information available in the markup.

Better user experience with forms, controls and new semantic elements

Form data entry is a core scenario on the web, and based on user feedback we’ve greatly improved the form entry experience including:

  • Improved accessibility of the error validity states
  • Made <datalist> element accessibile
  • Improved accessibility of all the controls that support lists, including <select>
  • Improved keyboard experience for input types, including Up and Down keys to change the input type=number value
  • Implemented input type=color, which stores the value in computer readable form, and which now presents the information in human readable percentages of Red, Green and Blue.

Code: <input type="color" value="#ff0000" />

Result: UIA Value: “100% Red 0% Green 0% Blue”

Improved web legibility in high contrast

Microsoft Edge provides full support for the Windows high contrast themes, including custom user themes. Many modern web sites use background images as foreground content, which doesn’t provide a great experience for users who need increased contrast.

Screen capture showing xbox.com in IE's high contrast mode. The main foreground content is entirely blacked out with only a heading and secondary content elements visible.
Xbox.com in the legacy high contrast mode.

After working closely with visually impaired users and prototyping different solutions, we decided to try something different for high contrast mode in this release. Microsoft Edge will no longer remove background images, and instead will render an opaque layer behind text to improve legibility while maintaining the site design.

These improvements speak for themselves:

Screen capture showing Xbox.com in the updated high contrast mode. Only the area immediately surrounding each text block is blacked out, allowing the page structure and imagery to show through without impairing readability.
Xbox.com in the redesigned high contrast mode.

Along with the changes we have retained full developer control over browser implicit enhancements with -ms-high-contrast media feature and -ms-high-contrast-adjust property.

These high contrast improvements are available in current Windows Insider releases, enabled by default. Users can disable the “Render backgrounds in high contrast” feature under about:flags to get the previous behavior.

More improvements and platform features

Alongside these platform, user experience, and legibility improvements, we’ve had a chance to add a few user experience features and fixes:

  • Implemented the Web Speech Synthesis API
  • Improved caret browsing on Windows Phone with external keyboards
  • Improved Microsoft Edge frame-to-content focus transitions

Journey towards a more accessible web platform

As we finalize these features on the road to the Windows 10 Anniversary Update, we’ve also begun work on a few additional areas targeting a future release. Below are some of the features we’re currently considering:

  • Improving the UIA TextPattern reading experience based on user feedback
  • Enabling the web platform to take into account the “Text size” slider, available in Ease of access > More options on Windows 10 Mobile
  • Improvements to input controls and scrollbars in high contrast mode
  • Improvements to the text contrast ratios of controls
  • Improvements to touch and keyboard experience with Narrator on the web for desktop and mobile
  • Tweaks to the focus outlines to make finding and tracking elements in the browser easier

In upcoming posts we’ll have more to share about our user experience improvements as measured by HTML5Accessibility.com, as well as our approach to automate accessibility testing for the web.

We’re excited to share the current improvements and look forward to building an even more accessible web with you! As always, we welcome your feedback.

– Bogdan Brinza, Program Management Lead, Microsoft Edge
– Rossen Atanassov, Software Development Lead, Microsoft Edge