E-mail List Archives
Thread: React and screen reader accessibility?
Number of posts in this thread: 8 (In chronological order)
From: Brandon Keith Biggs
Date: Wed, Apr 26 2017 7:49PM
Subject: React and screen reader accessibility?
No previous message | Next message →
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/>;
From: Mark Smith
Date: Thu, Apr 27 2017 9:42AM
Subject: Re: React and screen reader accessibility?
← Previous message | Next message →
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-virtual-dom-and-dom/
HTH,
Mark
Mark Smith
UI Developer Signet Jewelers
330.631.5409
= EMAIL ADDRESS REMOVED =
http://www.linkedin.com/in/mkultra
> On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs < = EMAIL ADDRESS 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/>;
> > > >
From: Brandon Keith Biggs
Date: Thu, Apr 27 2017 9:20PM
Subject: Re: React and screen reader accessibility?
← Previous message | Next message →
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 ADDRESS 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-virtual-dom-and-dom/
>
> HTH,
> Mark
>
> Mark Smith
> UI Developer Signet Jewelers
>
> 330.631.5409
> = EMAIL ADDRESS REMOVED =
> http://www.linkedin.com/in/mkultra
>
> > On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs <
> = EMAIL ADDRESS 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/>;
> > > > > > > > > > > > >
From: Brandon Keith Biggs
Date: Thu, Apr 27 2017 10:30PM
Subject: Re: React and screen reader accessibility?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> http://www.linkedin.com/in/mkultra
>>
>> > On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs <
>> = EMAIL ADDRESS 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/>;
>> > >> > >> > >> > >> >> >> >> >>
>
>
From: Ugurcan Kutluoglu
Date: Thu, Apr 27 2017 10:57PM
Subject: Re: React and screen reader accessibility?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >> http://www.linkedin.com/in/mkultra
> >>
> >> > On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs <
> >> = EMAIL ADDRESS 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/>;
> >> > > >> > > >> > > >> > > >> > >> > >> > >> > >>
> >
> >
> > > > >
From: Brandon Keith Biggs
Date: Fri, Apr 28 2017 11:35AM
Subject: Re: React and screen reader accessibility?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> > >> http://www.linkedin.com/in/mkultra
> > >>
> > >> > On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs <
> > >> = EMAIL ADDRESS 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/>;
> > >> > > > >> > > > >> > > > >> > > > >> > > >> > > >> > > >> > > >>
> > >
> > >
> > > > > > > > > >
> > > > >
From: Adam.Lund@thomsonreuters.com
Date: Fri, Apr 28 2017 11:52AM
Subject: Re: React and screen reader accessibility?
← Previous message | Next message →
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 ADDRESS REMOVED =
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. .
On 4/27/17, 11:30 PM, "WebAIM-Forum on behalf of Brandon Keith Biggs"
< = EMAIL ADDRESS REMOVED = on behalf of
= EMAIL ADDRESS 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=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_fUqpkpEcAgs
>&s=-GRGDW1rwf4WI0z0Tr6v_i11AvV4_CfWTlqxtEFM41I&e= >
>
>On Thu, Apr 27, 2017 at 8:20 PM, Brandon Keith Biggs <
> = EMAIL ADDRESS 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®EOZvII2tbIP
>>KG2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_fUqpkpEc
>>Ags&s=-GRGDW1rwf4WI0z0Tr6v_i11AvV4_CfWTlqxtEFM41I&e= >
>>
>> On Thu, Apr 27, 2017 at 8:42 AM, Mark Smith < = EMAIL ADDRESS 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®EOZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&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 ADDRESS 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=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_f
>>>UqpkpEcAgs&s=8yJmeOFoKMx_evJK-3lqrNA6yXlUFdiX6XCBpOOI68M&e>>>
>>> > On Apr 26, 2017, at 9:49 PM, Brandon Keith Biggs <
>>> = EMAIL ADDRESS 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®EOZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&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®EOZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&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®EOZvII2tbIPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&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®EOZvII2tb
>>>IPKG2eNF4xO0sMdOti5hpdpOl6yNy29I&m=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_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=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_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=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_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=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_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=PsTsK1ngxMRw43D8bPpv8hRHCskWBun_fUqp
>kpEcAgs&s=rDddmUeufY1_qASLsALPj-5caW4ajg4QIFhXOMD9g_s&e>
From: Brandon Keith Biggs
Date: Fri, Apr 28 2017 2:06PM
Subject: Re: React and screen reader accessibility?
← Previous message | No next message
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 ADDRESS 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 ADDRESS REMOVED =
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
>
>
>
> On 4/27/17, 11:30 PM, "WebAIM-Forum on behalf of Brandon Keith Biggs"
> < = EMAIL ADDRESS REMOVED = on behalf of
> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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> >>
> > > > >