The journey to a more accessible Web Platform
The past, present and future of the web accessibility
#msedgesummit Bogdan Brinza - @boggydigital Program Manager working on CSS, Accessibility
Rossen Atanassov - @cssrossen Development Lead working on CSS, Accessibility
#msedgesummit We believe in what people make possible
Our mission is to empower every person and every organization on the planet to achieve more.
#msedgesummit Presentation - Visual
EdgeHTML, Blink Web Platform WebKit, Gecko
HTML, CSS, SVG, ARIA Author content ECMAScript
#msedgesummit Presentation - Accessible
Narrator, Magnifier, Inspect Assistive Technologies NVDA, JAWS, Dolphin
UI Automation, MSAA Platform Accessibility IAccessible2, AXAPI
EdgeHTML, Blink Web Platform WebKit, Gecko
HTML, CSS, SVG, ARIA Author content ECMAScript
#msedgesummit Know the past to understand the present
Internet Explorer The Web 1.0
Assistive Technology
Microsoft Active Accessibility (MSAA)
Internet Explorer (Trident)
(Mostly static) Author content
#msedgesummit Know the past to understand the present
Internet Explorer HTML 5 The Web 1.0 CSS 3 ARIA 1.0
Assistive Technology Direct access to Microsoft Active Accessibility (MSAA) Internal data
Internet Explorer (Trident)
(Dynamic) Author content
#msedgesummit Know the past to understand the present
Internet Explorer HTML 5 Security threats The Web 1.0 CSS 3 ARIA 1.0
Malware, Spyware
Assistive Technology Direct access to Microsoft Active Accessibility (MSAA) Internal data
Internet Explorer (Trident)
(Dynamic) Author content
#msedgesummit Know the past to understand the present
Internet Explorer HTML 5 Security threats Microsoft Edge The Web 1.0 CSS 3 Modern app model ARIA 1.0
Malware, Spyware
Assistive Technology Direct access to UIA wrapping MSAA Internal data
Microsoft Edge (EdgeHTML)
(Dynamic) Author content
#msedgesummit Know the past to understand the present
Internet Explorer HTML 5 Security threats Microsoft Edge Opportunity! The Web 1.0 CSS 3 Modern app model ARIA 1.0
Malware, Spyware
Assistive Technology Direct access to UIA wrapping MSAA Internal data
Microsoft Edge (EdgeHTML)
(Dynamic) Author content
#msedgesummit Know the past to understand the present
Internet Explorer HTML 5 Security threats Microsoft Edge Opportunity! Today The Web 1.0 CSS 3 Modern app model ARIA 1.0
New Assistive Technologies
Native UI Automation
Microsoft Edge (EdgeHTML)
Author content
#msedgesummit Modern Accessible Web Platform
#msedgesummit Modern Accessible Web Platform
Reimagining Web Accessibility
Visual View Visual Layout, Display Presentation
Content Engine Model HTML, CSS, JS DOM, Styles
Accessible Objects Accessibility View Accessible MSAA ARIA, UIA Presentation
#msedgesummit Modern Accessible Web Platform
#msedgesummit Improving Readability With High Contrast
Readable Text - Guaranteed
Game on See this week’s matchups #msedgesummit Improving Readability With High Contrast
Readable Text - Guaranteed
Game on See this week’s matchups #msedgesummit Improving Readability With High Contrast
Readable Text - Guaranteed
#msedgesummit Improving Readability With High Contrast
Readable Text - Guaranteed
Game on See this week’s matchups #msedgesummit Improving Readability With High Contrast
Try High Contrast Mode
#msedgesummit Improving Readability With High Contrast
Adjust High Contrast Mode
@media screen and (-ms-high-contrast: active) { /* All high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } p { -ms-high-contrast-adjust: none; } }
#msedgesummit Better together
New Assistive Technologies Next generation UIA clients * Direct access to Native UI Automation Evolve with the web Internal data
Microsoft Edge (EdgeHTML) Data driven changes
Author content Best practices
* - Partnering with Dolphin, NV Access, VFO, Nuance, Tobii/Dynavox, Handy Tech, Baum, Humanware, Orbit #msedgesummit Thanks to the collaboration between “ Microsoft, NV Access and other AT friends, Microsoft Edge has certainly become much more usable, not only with NVDA, but also with other ATs such as Microsoft’s own Narrator”
#msedgesummit How you can help
Assistive Technologies • Build standards based content
• Follow ARIA and WCAG best Platform Accessibility practices Web Platform
Author content
#msedgesummit How you can help
Assistive Technologies • Try it in the browser
• File bugs using public bug trackers Platform Accessibility • Microsoft Edge – use F12
Web Platform Accessibility tools
Author content
#msedgesummit How you can help
Assistive Technologies • Engage with W3C groups working on
mappings - CSS, SVG, WebPlatform, Platform Accessibility ARIA Web Platform
Author content
#msedgesummit How you can help
Assistive Technologies • Experience your content like your
users would Platform Accessibility • Remember: all components are
Web Platform critical to overall experience
Author content
#msedgesummit Useful resources
Author content
• WAI-ARIA Authoring Practices 1.1: https://www.w3.org/TR/wai-aria-practices-1.1/
• Techniques for WCAG 2.0: http://www.w3.org/TR/WCAG20-TECHS/
#msedgesummit Useful resources
Web Platform
• EdgeHTML issue tracker: https://developer.microsoft.com/microsoft-edge/platform/issues/
• Microsoft Edge F12 Accessibility Tools: https://docs.microsoft.com/microsoft-edge/f12-devtools-
guide/dom-explorer/accessibility-tools
• Chromium issues: https://bugs.chromium.org/p/chromium/issues/list
• WebKit Bugzilla: https://bugs.webkit.org/
• Bugzilla@Mozilla: https://bugzilla.mozilla.org/
#msedgesummit Useful resources
Platform Accessibility
• W3C CSS working group: https://www.w3.org/Style/CSS/
• W3C SVG working group: https://www.w3.org/Graphics/SVG/WG
• W3C WebPlatform working group: https://www.w3.org/WebPlatform/WG/
• W3C ARIA working group: https://www.w3.org/WAI/ARIA/
#msedgesummit Useful resources
Assistive technologies
• Hear text read aloud with Narrator: https://support.microsoft.com/en-us/help/17173/windows-10-hear-
text-read-aloud
• NV Access: https://support.microsoft.com/help/13862/windows-use-high-contrast-mode
#msedgesummit Thank you!
aka.ms/msedge-a11y
Bogdan Brinza - @boggydigital Rossen Atanassov - @cssrossen
#msedgesummit