Re: Single Page Architecture General Concepts

Hi Jim,
            We recently had similar questions working on one of our SPAs. We realized for screen reader user SPA or Multiple doesn’t make a difference, the user needs to be informed if the page or incase of SPA high level view or route(react)  has changed. So we decide to mimic things and events which would in case of any page change.

Page change events we mimicked :
       1. Page Title change (screen reader reads it):
       This can done using Js, and If the title change is not being read out, we can have an empty  visually hidden Aria-live region which we populate with new “Title"  on Page change. If you need to, you can clear this out using js timers  .
       2. Focus or Active Element is Body:
       This can be achieve using Js script again.

 For change minor view changes we can use techniques we use for handling Ajax.

Thank you,
Ashraf

From: "Beranek, Nicholas" <Nicholas.Beranek@capitalone.com<mailto:Nicholas.Beranek@capitalone.com>>
Date: Tuesday, June 14, 2016 at 11:28 AM
To: Jim Homme <jhomme@benderconsult.com<mailto:jhomme@benderconsult.com>>, "w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>" <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: RE: Single Page Architecture General Concepts
Resent-From: <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Resent-Date: Tuesday, June 14, 2016 at 11:29 AM

Hi Jim,

I’m not sure if you’re using AngularJS, React, or something similar, but I’ve found the following article very useful:

http://simplyaccessible.com/article/spangular-accessibility/

We’ve battled with making SPA more accessible. Most of it boils down to proper focus management when a view changes given that there’s no page refresh. Also, it appears that keyboard accessibility falls to the wayside when you have developers attaching event handlers to elements that are not natively actionable.

I hope this helps! And if you come across any good resources on your own please send me an email.

Nick





[cid:image001.png@01D1C638.3F84A1A0]

Nick Beranek
Accessibility Tech Lead | Digital Accessibility Team<https://pulse.kdc.capitalone.com/groups/digital-accessibility-team>
804-638-7907 | nicholas.beranek@capitalone.com<mailto:nicholas.beranek@capitalone.com>



From: Jim Homme [mailto:jhomme@benderconsult.com]
Sent: Tuesday, June 14, 2016 11:44 AM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Single Page Architecture General Concepts

Hi,
I’m a pretty good HTML person, and a very dangerous JavaScript and CSS person, but a very good screen reader user. Can anyone recommend a good place to go to understand the differences in approach in making single page architecture accessible, and how screen readers either react or do not react, and the various events involved in helping screen readers figure out when parts of pages load? I’d like to understand what developers need to look out for when writing code and unit testing.

Thanks so much.

Jim


==========
Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
jhomme@benderconsult.com<mailto:jhomme@benderconsult.com>
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O


________________________________

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.