31
#msedgesummit The journey to a more accessible Web Platform The past, present and future of the web accessibility
#msedgesummit
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.
Presentation - Visual
#msedgesummit
Author content
Web Platform
HTML, CSS, SVG, ARIA
EdgeHTML, Blink
ECMAScript
WebKit, Gecko
Presentation - Accessible
#msedgesummit
Assistive Technologies
Author content
Web Platform
Platform Accessibility
HTML, CSS, SVG, ARIA
EdgeHTML, Blink
UI Automation, MSAA
Narrator, Magnifier, Inspect
ECMAScript
WebKit, Gecko
IAccessible2, AXAPI
NVDA, JAWS, Dolphin
Know the past to understand the present
#msedgesummit
Internet ExplorerThe Web 1.0
(Mostly static) Author content
Internet Explorer (Trident)
Microsoft Active Accessibility (MSAA)
Assistive Technology
Know the past to understand the present
#msedgesummit
Internet ExplorerThe Web 1.0
(Dynamic) Author content
Internet Explorer (Trident)
Microsoft Active Accessibility (MSAA)
Assistive Technology
HTML 5CSS 3ARIA 1.0
Direct access toInternal data
Know the past to understand the present
#msedgesummit
Internet ExplorerThe Web 1.0
Internet Explorer (Trident)
Microsoft Active Accessibility (MSAA)
Assistive Technology
HTML 5CSS 3ARIA 1.0
Direct access toInternal data
Security threats
Malware, Spyware
(Dynamic) Author content
UIA wrapping MSAA
Know the past to understand the present
#msedgesummit
Internet ExplorerThe Web 1.0
Assistive Technology
HTML 5CSS 3ARIA 1.0
Direct access toInternal data
Microsoft EdgeModern app model
Malware, Spyware
(Dynamic) Author content
Microsoft Edge (EdgeHTML)
Security threats
UIA wrapping MSAA
Know the past to understand the present
#msedgesummit
Internet ExplorerThe Web 1.0
Assistive Technology
HTML 5CSS 3ARIA 1.0
Direct access toInternal data
Microsoft EdgeModern app model
Malware, Spyware
(Dynamic) Author content
Microsoft Edge (EdgeHTML)
Security threats Opportunity!
Native UI Automation
Know the past to understand the present
#msedgesummit
Internet ExplorerThe Web 1.0
New Assistive Technologies
HTML 5CSS 3ARIA 1.0
Microsoft EdgeModern app model
Author content
Microsoft Edge (EdgeHTML)
Security threats Opportunity! Today
Modern Accessible Web Platform
#msedgesummit
Modern Accessible Web Platform
#msedgesummit
Reimagining Web Accessibility
ContentHTML, CSS, JS
Engine ModelDOM, Styles
Visual ViewLayout, Display
Visual Presentation
Accessibility ViewARIA, UIA
Accessible Presentation
Accessible ObjectsMSAA
Modern Accessible Web Platform
#msedgesummit
Improving Readability With High Contrast
#msedgesummit
Readable Text - Guaranteed
Game onSee this week’s matchups
Improving Readability With High Contrast
#msedgesummit
Readable Text - Guaranteed
Game onSee this week’s matchups
Improving Readability With High Contrast
#msedgesummit
Readable Text - Guaranteed
Improving Readability With High Contrast
#msedgesummit
Readable Text - Guaranteed
Game onSee this week’s matchups
Improving Readability With High Contrast
#msedgesummit
Try High Contrast Mode
#msedgesummit
@media screen and (-ms-high-contrast: active) {
/* All high contrast styling rules */
}
Improving Readability With High Contrast
Adjust High Contrast Mode
@media screen and (-ms-high-contrast: black-on-white) {
div { background-image: url('image-bw.png'); }
p { -ms-high-contrast-adjust: none; }
}
Better together
#msedgesummit
Native UI Automation
New Assistive Technologies
Direct access toInternal data
Author content
Microsoft Edge (EdgeHTML)
Next generation UIA clients *
Evolve with the web
Data driven changes
Best practices
* - Partnering with Dolphin, NV Access, VFO, Nuance, Tobii/Dynavox, Handy Tech, Baum, Humanware, Orbit
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
#msedgesummit
Platform Accessibility
Assistive Technologies
Author content
Web Platform
• Build standards based content
• Follow ARIA and WCAG best
practices
How you can help
#msedgesummit
Platform Accessibility
Assistive Technologies
Author content
Web Platform
• Try it in the browser
• File bugs using public bug trackers
• Microsoft Edge – use F12
Accessibility tools
How you can help
#msedgesummit
Platform Accessibility
Assistive Technologies
Author content
Web Platform
• Engage with W3C groups working on
mappings - CSS, SVG, WebPlatform,
ARIA
How you can help
#msedgesummit
Platform Accessibility
Assistive Technologies
Author content
Web Platform
• Experience your content like your
users would
• Remember: all components are
critical to overall experience
Useful resources
#msedgesummit
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/
Useful resources
#msedgesummit
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/
Useful resources
#msedgesummit
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/
Useful resources
#msedgesummit
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
