readium / r2-testapp-js

NodeJS Readium2 "test app"
BSD 3-Clause "New" or "Revised" License
10 stars 1 forks source link

FYI - Microsoft Office UI Fabric components, accessibility support #20

Open danielweck opened 5 years ago

danielweck commented 5 years ago

Viable alternative to Material UI design? (looks pretty polished, with good screen reader support)

https://github.com/OfficeDev/office-ui-fabric-core

https://github.com/OfficeDev/office-ui-fabric-react

A11y info:

https://github.com/OfficeDev/office-ui-fabric-react/wiki/Accessibility

https://github.com/OfficeDev/office-ui-fabric-react/wiki/Accessibility-Troubleshooting

https://github.com/OfficeDev/office-ui-fabric-react/wiki/The-Fabric-Component#focus-rectangle-notes

https://developer.microsoft.com/en-us/fabric/#/components/announced

...and colour contrast handling in themes (-ms-high-contrast is supported "natively"):

https://developer.microsoft.com/en-us/fabric/#/components/customizations/colors#Accessibility

...although there are plenty of pending a11y issues :(

https://github.com/OfficeDev/office-ui-fabric-react/labels/Area%3A%20Accessibility

PS - this is used in the "accessibility-insights-web" axe-core -based accessibility checker (Chrome extension):

https://github.com/Microsoft/accessibility-insights-web/blob/055cfac2f419a47aac0cf85044cd7a5fcb93e57a/package.json#L92

danielweck commented 5 years ago

Uncertainty about Chromium support (for both Electron and future-Edge):

"We focus on Edge + Narrator compatibility which seems to be working as expected in the above scenarios (see output below).

Since it works in Narrator, we are likely providing the correct attributes and this is more likely an issue with NVDA / JAWS integration and should be raised in their bug report channels"

https://github.com/OfficeDev/office-ui-fabric-react/issues/8294

"Our primary support scenario is Microsoft Edge with Windows Narrator."

https://github.com/OfficeDev/office-ui-fabric-react/wiki/Accessibility

danielweck commented 5 years ago

See also: https://github.com/readium/r2-navigator-js/issues/37