#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