In ARIA, what is the difference in how JAWS treats role=”applications” and role=”document”?

  A colleague provide the following resource that addresses the following question.  In ARIA, what is the difference in how JAWS treats role=”applications” and role=”document”? See http://www.freedomscientific.com/Support/TechnicalSupport/Bulletin/1665 Strangely, this bulletin does not address  role=”document” as promised but is still a great read.

M-Enabling 2018

I Submitted a Talk Proposal for M-Enabling 2018   Fingers crossed, info below. Main Site: http://www.m-enabling.com Dates: June 11-13, 2018 Introduction to Building Accessible Components with React Presenter: Chris Lane Many tutorials for JavaScript frameoworks demonstrate implementations that do not include keyboard accessibility, focus management, role and state information for custom controls. This session will… Read more M-Enabling 2018

Using tabindex in React

From https://facebook.github.io/react/docs/introducing-jsx.html “Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex”

Is it necessary use role=document and tabindex=”0″ for non-interactive content placed inside a form?

Typically, when screen readers encounter forms they switch to forms mode which only supports TAB key navigation.  So if there is any non-interactive content within the form it will be missed. It seems like role=document with tabindex=”0″ would be a good solution but according to Bryan Garaventa, Accessibility Fellow at Level Access(Formerly SSB Bart Group) it is not. Per… Read more Is it necessary use role=document and tabindex=”0″ for non-interactive content placed inside a form?

VoiceOver ignores focus()

Make VoiceOver on iOS read error messages in the middle of the page after the page loads VoiceOver on iOS 10 moves focus to the first text node on the page after the page loads, regardless of any other focus movement bound to onload. The following example temporarily hides content from VoiceOver and moves focus… Read more VoiceOver ignores focus()

iOS VoiceOver is ignoring user-scalable=no

A colleague found this issue yesterday 4/13/17. Try using pinch an zoom on the following page using an iPhone 6+. http://www.chrislane.info/examples/noResize.html You will see that you can still resize the page using pinch and zoom but you should not be able to due to the following meta tag. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no”> This… Read more iOS VoiceOver is ignoring user-scalable=no

iOS VoiceOver is ignoring table semantics when display:block is applied

It seems that OS VoiceOver is ignoring table semantics when display:block is applied. The only way I’ve come up with to deal with this issue is dispense with the table headers and label the data inline. See the following example using a mobile screensize. http://www.chrislane.info/aria_examples/mobileTable.php See the bug report at https://bugs.webkit.org/show_bug.cgi?id=141524. A colleague also discovered that… Read more iOS VoiceOver is ignoring table semantics when display:block is applied

CSUN 2017 – Angular 2: Prototyping & Testing Accessible Widgets

Thanks to Nat Tarnoff for helping me get ready for this talk. We talked about Angular 2’s strange relationship with attributes and addressed the ambiguity on how to work with native DOM elements from within an Angular application. Finally, we ended with a Demo of how to use Visual ARIA with Protractor to catch ARIA… Read more CSUN 2017 – Angular 2: Prototyping & Testing Accessible Widgets