WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: React and screen reader accessibility?

for

From: Brandon Keith Biggs
Date: Apr 28, 2017 2:06PM

Hello Adam,
You should message the NVDA or Jaws list to hear from users.
My biggest problem is always the lack of labels. I don't cair if you give
me alerts, I just want to be able to read the buttons, have tables that
work, have a page that doesn't jump me around and a fast site. I also want
a good UX. But labels on everything is my biggest concern now. Labels are
becoming a thing of the past and I am getting really scared. There are also
alerts, like those in Vanguard's site, and I don't even know what they are.
But I can't access them.
So my focus is to move away from anything related to Aria until the website
is in perfect HTML. Then if there is a problem, Aria can be brought in. But
there is a div sickness too many single page app developers have, where
they use divs and don't learn the proper use of HTML.
If you have a website with perfect HTML, then it will probably be
completely accessible to screen readers with no problem.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Fri, Apr 28, 2017 at 10:52 AM, < <EMAIL REMOVED> > wrote:

> Brandon and WebAim list -
>
> Brandon has brought up an excellent point on accessibility of single-page
> web applications (SPAs). It is something I am very concerned about in our
> present time because single page apps are becoming the new norm in web
> application development. Furthermore, developers using these platforms
> have limited tools available to notify AT of content updates-and that
> assumes they have the understanding that they need to extra work to make
> experiences accessible. You mentioned not wanting to have alerts all the
> time for every update.
>
> While you've identified React-based user interfaces not reporting state
> change, the problem goes beyond React, as there are a number of SPAs that
> function in a very similar way. The more popular ones include: Angular,
> Vue, EmberJS, Meteor, ReactJS (of course) and a long-tail of others.
> Angular in particular is a very popular web app front end development
> platform and growing in popularity with my company.
>
> You could (and should) message the React team with suggestions. But know
> that it is one platform of many that operate in a similar way. If 65k
> sites are done in React, 120k more are done in the others. Try buying a
> plane ticket, booking a hotel room, changing your account password, or
> purchasing a new keyboard in an SPA that doesn't report content changes.
>
>
> WCAG is pretty light on guidance for SPAs, and the ARIA spec includes
> limited hooks for us developers to use to trigger announcements. Do we
> need more?
>
>
> Questions for everyone listening:
> 1. Have you experienced bizarre behavior of a web site or application,
> like you click on a link or button and you expect something to happen, but
> it doesn't tell you what happened?
> 2. Have you needed to perform a critical task and been unable to because
> of this problem?
> 3. How important is it to you that the app report content changes as they
> occur, such that you don't have to re-scan the page to hunt for updated
> content?
>
>
> It's something I and my company are considering pursuing further and I am
> curious if this is important to people monitoring this list.
>
> Kind regards,
> Adam
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
> Adam Lund
> Lead Accessibility Technologist
>
> Thomson Reuters
> the answer company
>
> Phone: 651-687-4045
> Mobile: 612-867-6185
>
> <EMAIL REMOVED>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
>
>
>
> On 4/27/17, 11:30 PM, "WebAIM-Forum on behalf of Brandon Keith Biggs"
> < <EMAIL REMOVED> on behalf of
> <EMAIL REMOVED> > wrote:
>
> >Hello,
> >I posted an issue for the React team:
> >https://urldefense.proofpoint.com/v2/url?u=https-
> 3A__github.com_facebook_r
> >eact_issues_9549&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-
> 1Cr1I4FWIvbLFebwKgY&r> >aEEOZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m> PsTsK1ngxMRw43D8bPpv8hRHCskW
> >Bun_fUqpkpEcAgs&s=0lOILfDujFtc6hfiefhkCjMkPT9-eD0ThY6cj0VCzoc&e> >Please bring any thoughts to that discussion.
> >
> >To be honest, Big frameworks are the ones who have the most influance on
> >web accessibility. If React is not enforcing accessibility, then 65000
> >people are not making their apps accessible. If one multiplies that 65000
> >times the number of apps one makes in their life, the number of
> >hit-and-miss apps with accessibility is astounding.
> >
> >React is becoming massive and if there is no push to have React model what
> >a perfect app should be, then web accessibility will just become worse and
> >worse.
> >Whoever is on the WCAG2 team needs to be poking the react team and explain
> >to them that an accessibility API does NOT cut it! In fact it probably
> >makes things worse as developers will think they need to always use the
> >accessibility API to add screen reader accessibility into their apps. It
> >is
> >just like Aria, a very last resort.
> >Thank you,
> >
> >
> >Brandon Keith Biggs
> ><https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__brandonkeithbiggs.com
> >_&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&
> r®EOZvII2tbIPKG
> >2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqpkpEcAgs
> >&s=-GRGDW1rwf4WI0z0Tr6v_i11AvV4_CfWTlqxtEFM41I&e= >
> >
> >On Thu, Apr 27, 2017 at 8:20 PM, Brandon Keith Biggs <
> > <EMAIL REMOVED> > wrote:
> >
> >> Hello,
> >>
> >> How does using a virtual DOM change the fact that using HTML in the
> >> finished product is better than using a thousand div elements styled
> >>with
> >> CSS?
> >>
> >> In fact, I think it would be easier to make sure the finished product is
> >> accessible. You don't have pesky programmers not following an official
> >> coding practice messing with the final result in React.
> >>
> >>
> >>
> >> I also think that there are sometimes when a user wants to be alerted
> >>and
> >> sometimes when alerts are just annoying. I personally dislike alerts
> >> telling me when the content changes, but in chat clients or normal
> >>alerts,
> >> I like my screen reader to read aloud what is going on.
> >>
> >>
> >>
> >> I think it is even worse that react has complete control over the
> >> rendering and it is not accessible out o of the box through extensive
> >>html
> >> usage and user testing. It is a shame that the data tables and intro
> >> tutorial are not accessible.
> >>
> >> I'm just wondering how there could be such a big divide between what FB
> >> says and what react does.
> >>
> >> Thanks,
> >>
> >>
> >>
> >> Brandon Keith Biggs
> >><https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__brandonkeithbiggs.co
> >>m_&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r> aEEOZvII2tbIP
> >>KG2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqpkpEc
> >>Ags&s=-GRGDW1rwf4WI0z0Tr6v_i11AvV4_CfWTlqxtEFM41I&e= >
> >>
> >> On Thu, Apr 27, 2017 at 8:42 AM, Mark Smith < <EMAIL REMOVED> > wrote:
> >>
> >>> Hi Brandon,
> >>>
> >>> I have only been using React for less than a year, so I can't/won't
> >>>claim
> >>> expert knowledge but...
> >>>
> >>> It probably because React uses a virtual DOM to create (mainly) single
> >>> page applications that render quickly vs creating a whole new page.
> >>>It's
> >>> not using the tree based DOM a straight HTML page uses in the browser.
> >>>
> >>> While you will see the URL change as you use the app, behind the scenes
> >>> React takes a diff of the "page" you were on and compares it to the
> >>>"new
> >>> page" and only updates the part that has changed. This makes the app
> >>>appear
> >>> to load much faster but would leave you in a position where you need to
> >>> alert the screen reader that part of the page has changed.
> >>>
> >>>
> >>>https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__reactkungfu.com_2015
> >>>_10_the-2Ddifference-2Dbetween-2Dvirtua&d=DwIGaQ&c> 4ZIZThykDLcoWk-GVjSLm
> >>>y8-1Cr1I4FWIvbLFebwKgY&r®EOZvII2tbIPKG2eNF4xO0sMdOti5
> hpdpOl6yNy29I&m=P
> >>>sTsK1ngxMRw43D8bPpv8hRHCskWBun_fUqpkpEcAgs&s=_fNvaE3ZKdF-
> XOLUKUkcL8GIUHi
> >>>thWBZeIwP2JeaTM0&e> >>> l-dom-and-dom/
> >>>
> >>> HTH,
> >>> Mark
> >>>
> >>> Mark Smith
> >>> UI Developer Signet Jewelers
> >>>
> >>> 330.631.5409
> >>> <EMAIL REMOVED>
> >>>
> >>>https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__www.linkedin.com_in_
> >>>mkultra&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-
> 1Cr1I4FWIvbLFebwKgY&r®EOZvI
> >>>I2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_f
> >>>UqpkpEcAgs&s=8yJmeOFoKMx_evJK-3lqrNA6yXlUFdiX6XCBpOOI68M&e> >>>
> >>> > On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs <
> >>> <EMAIL REMOVED> > wrote:
> >>> >
> >>> > Hello,
> >>> >
> >>> > What is going on with React and screen reader accessibility?
> >>>Apparently
> >>> it
> >>> > has all kinds of hooks for 'accessibility'. Why would someone do
> >>>this?
> >>> Why
> >>> > can't react avoid using aria and use native widgets instead? Why is
> >>> > accessibility optional? Why is accessibility something that is more
> >>> complex
> >>> > that a developer needs to worry about?
> >>> >
> >>> >
> >>>https://urldefense.proofpoint.com/v2/url?u=https-
> 3A__code.facebook.com_p
> >>>osts_435862739941212_making-2Dreact&d=DwIGaQ&c> 4ZIZThykDLcoWk-GVjSLmy8-1
> >>>Cr1I4FWIvbLFebwKgY&r®EOZvII2tbIPKG2eNF4xO0sMdOti5
> hpdpOl6yNy29I&m=PsTsK
> >>>1ngxMRw43D8bPpv8hRHCskWBun_fUqpkpEcAgs&s=Vd8iITYDkc3LKZaUNPxzM4K94lBqe-
> P
> >>>ec7gmeh8Vims&e> >>> -native-apps-accessible/
> >>> >
> >>> >
> >>> >
> >>> >
> >>>https://urldefense.proofpoint.com/v2/url?u=https-
> 3A__github.com_necolas_
> >>>react-2Dnative-2Dweb_blob_master_docs&d=DwIGaQ&c> 4ZIZThykDLcoWk-GVjSLmy8
> >>>-1Cr1I4FWIvbLFebwKgY&r®EOZvII2tbIPKG2eNF4xO0sMdOti5
> hpdpOl6yNy29I&m=PsT
> >>>sK1ngxMRw43D8bPpv8hRHCskWBun_fUqpkpEcAgs&s=Hxy5G-YVY-
> xpmu8msK_ZesAQFwH8S
> >>>7j5DEKbsW1O2TU&e> >>> /guides/accessibility.md
> >>> >
> >>> >
> >>> >
> >>> > This doesn't seem to work based off the few react examples I have
> >>>seen:
> >>> >
> >>> >
> >>>https://urldefense.proofpoint.com/v2/url?u=https-
> 3A__facebook.github.io_
> >>>fixed-2Ddata-2Dtable_&d=DwIGaQ&c=4ZIZThykDLcoWk-
> GVjSLmy8-1Cr1I4FWIvbLFeb
> >>>wKgY&r®EOZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m> PsTsK1ngxMRw43D8bPp
> >>>v8hRHCskWBun_fUqpkpEcAgs&s=JyySbjuoxri4bNJAo-
> 36SpP7qnv4lx6hATaGxfgLThs&e
> >>>> >>> >
> >>> >
> >>> >
> >>> >
> >>>https://urldefense.proofpoint.com/v2/url?u=https-
> 3A__facebook.github.io_
> >>>react_tutorial_tutorial.html&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-
> 1Cr1I4FW
> >>>IvbLFebwKgY&r®EOZvII2tbIPKG2eNF4xO0sMdOti5
> hpdpOl6yNy29I&m=PsTsK1ngxMRw
> >>>43D8bPpv8hRHCskWBun_fUqpkpEcAgs&s=ClsTQQscmZJt-
> WR0-eAdc5oX21zjVSHJ1IDcou
> >>>CbbYs&e> >>> >
> >>> >
> >>> >
> >>> >
> >>> >
> >>> > These are done by Facebook itself as an example to other developers.
> >>>As
> >>> a
> >>> > screen reader user, I find this very very insulting and
> >>>disheartening. I
> >>> > hope I'm wrong and the examples I found from Facebook are not really
> >>> what
> >>> > they expect developers to learn from, but I greatly fear that they
> >>>are.
> >>> >
> >>> > Does anyone know why there is such a disconnect between the
> >>> accessibility
> >>> > team and the people writing the examples?
> >>> >
> >>> > Accessibility is not something that can be added, it is something
> >>>that
> >>> > happens when good UI practice is followed and all the myriad
> >>>elements in
> >>> > UX, UI, screen reader, platform and user align in this very difficult
> >>> > dance. It is very unwise for a company to put any of those factors
> >>>out
> >>> of
> >>> > line.
> >>> >
> >>> > Why is FB doing this? How can we communicate that this is a problem?
> >>> >
> >>> > There are so many apps now that are being made with react that I fear
> >>> soon
> >>> > many apps for work and socializing will not be accessible or easily
> >>> usable.
> >>> >
> >>> > Thank you,
> >>> >
> >>> >
> >>> >
> >>> >
> >>> > Brandon Keith Biggs
> >>><https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__brandonkeithbiggs.c
> >>>om_&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&r> aEEOZvII2tb
> >>>IPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqpk
> >>>pEcAgs&s=-GRGDW1rwf4WI0z0Tr6v_i11AvV4_CfWTlqxtEFM41I&e= >
> >>> > > >>> > > >>>https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__list.webaim.org_&d=D
> >>>wIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&
> r®EOZvII2tbIPKG2eN
> >>>F4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqpkpEcAgs&
> >>>s=oH-YV_i8LHPNOpnPcyhn9PlNGq6iteIzoHDwbdxtr30&e> >>> > List archives at
> >>>https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__webaim.org_discussio
> >>>n_archives&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-
> 1Cr1I4FWIvbLFebwKgY&r®EO
> >>>ZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m> PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> >>>n_fUqpkpEcAgs&s=rDddmUeufY1_qASLsALPj-5caW4ajg4QIFhXOMD9g_s&e> >>> > > >>> > >>> > >>>https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__list.webaim.org_&d=D
> >>>wIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&
> r®EOZvII2tbIPKG2eN
> >>>F4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqpkpEcAgs&
> >>>s=oH-YV_i8LHPNOpnPcyhn9PlNGq6iteIzoHDwbdxtr30&e> >>> List archives at
> >>>https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__webaim.org_discussio
> >>>n_archives&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-
> 1Cr1I4FWIvbLFebwKgY&r®EO
> >>>ZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m> PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> >>>n_fUqpkpEcAgs&s=rDddmUeufY1_qASLsALPj-5caW4ajg4QIFhXOMD9g_s&e> >>> > >>>
> >>
> >>
> >> >> >https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__list.webaim.org_&d=DwI
> >GaQ&c=4ZIZThykDLcoWk-GVjSLmy8-1Cr1I4FWIvbLFebwKgY&
> r®EOZvII2tbIPKG2eNF4xO
> >0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqpkpEcAgs&s=oH-Y
> >V_i8LHPNOpnPcyhn9PlNGq6iteIzoHDwbdxtr30&e> >List archives at
> >https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__webaim.org_discussion_
> >archives&d=DwIGaQ&c=4ZIZThykDLcoWk-GVjSLmy8-
> 1Cr1I4FWIvbLFebwKgY&r®EOZvII
> >2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBu
> n_fUqp
> >kpEcAgs&s=rDddmUeufY1_qASLsALPj-5caW4ajg4QIFhXOMD9g_s&e> >>
> > > > >