WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: React and screen reader accessibility?

for

From: Brandon Keith Biggs
Date: Apr 28, 2017 11:35AM

Hello,
True, but still, having examples that are not accessible in the tutorials,
then having articles talking about accessibility is really hypocritical.
React and React native follow the same idea, where the react code (in both)
take what the developer has written and render it in browser or mobile
platforms.
In both, the responsibility falls on the React or React native teams at FB
to make sure the rendered output is accessible.
Thanks,


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

On Thu, Apr 27, 2017 at 9:57 PM, Ugurcan Kutluoglu < <EMAIL REMOVED> >
wrote:

> Hello,
>
> I'm not an expert in React JS but I think there is a misunderstanding here.
> As far as I know, React and React Native are two different things. React
> Native is not for building HTML5 applications, it is for building native
> Android and iOS apps. The accessibility examples mentioned in the first
> message are for React Native, and has nothing to with HTML5 or ARIA.
>
> Ugi
>
> On Thu, Apr 27, 2017 at 9:30 PM, Brandon Keith Biggs <
> <EMAIL REMOVED> > wrote:
>
> > Hello,
> > I posted an issue for the React team:
> > https://github.com/facebook/react/issues/9549
> > 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 <http://brandonkeithbiggs.com/>;
> >
> > 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 <http://brandonkeithbiggs.com/>;
> > >
> > > 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.
> > >>
> > >> http://reactkungfu.com/2015/10/the-difference-between-virtua
> > >> l-dom-and-dom/
> > >>
> > >> HTH,
> > >> Mark
> > >>
> > >> Mark Smith
> > >> UI Developer Signet Jewelers
> > >>
> > >> 330.631.5409
> > >> <EMAIL REMOVED>
> > >> http://www.linkedin.com/in/mkultra
> > >>
> > >> > 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://code.facebook.com/posts/435862739941212/making-react
> > >> -native-apps-accessible/
> > >> >
> > >> >
> > >> >
> > >> > https://github.com/necolas/react-native-web/blob/master/docs
> > >> /guides/accessibility.md
> > >> >
> > >> >
> > >> >
> > >> > This doesn't seem to work based off the few react examples I have
> > seen:
> > >> >
> > >> > https://facebook.github.io/fixed-data-table/
> > >> >
> > >> >
> > >> >
> > >> > https://facebook.github.io/react/tutorial/tutorial.html
> > >> >
> > >> >
> > >> >
> > >> >
> > >> >
> > >> > 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 <http://brandonkeithbiggs.com/>;
> > >> > > > >> > > > >> > > > >> > > > >> > > >> > > >> > > >> > > >>
> > >
> > >
> > > > > > > > > >
> > > > >