Blog

Here is a great new resource for JAWS HTML Support. https://freedomscientific.github.io/VFO-standards-support/html.html

Generally speaking iOS/VoiceOver does not follow shallow focus targets. Since around iOS 10, it appears that when focus is not moved directly to text, VoiceOver does not follow it, such as the case when moving focus to the outer container of a deeply nested structure. My recommendation is to move focus closest to the text… Read more iOS/VoiceOver does not follow shallow focus targets

  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.

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

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”

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?

I’m currently using React to create an accesssible Tic-Tac-Toe game that I am hoping to present at the 2018 M-Enabling Summit. I’ve submitted my talk proposal, in the meantime http://chrislane.info/a11y-react-tic-tac-toe/ is a work in progress.

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()

A colleague found this issue yesterday 4/13/17. Try using pinch an zoom on the following page using an iPhone 6+. https://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

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. https://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