how to make polymer components accessible?

[cov...@ccs.covici.com]

I am a newbie at Polymer, so please bear with me. I am involved in a
project whose website uses some of your components and I would like to
make it accessible -- right now it is not really accessible. \so I
tried to get the starter project going by copying the finish folder to
a Linux server I have, but all I get is something which says all
favorites.

Thanks in advance for any suggestions.

--
Your life is like a penny. You're going to lose it. The question is:
How do
you spend it?

John Covici
cov...@ccs.covici.com

[cov...@ccs.covici.com]

Hi. It worked much better when I copied the whole master-tutorial
folder and then browsed to finished under that. But the general
question remains, the project is using Polymer components and my screen
reader is not recogmizing input fields on a login page they have -- the
screen reader does not know they are edit boxes, very strange.

> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5869.1411756847%40ccs.covici.com.
> For more options, visit https://groups.google.com/d/optout.

[Steve Faulkner]

Hi John, 

can I ask what screen reader are you using?

[cov...@ccs.covici.com]

I am using Window-eyes.

> > cov...@ccs.covici.com <javascript:>

> >
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/75d9edb5-e19f-4794-902f-2e683e89b85e%40googlegroups.com.

> For more options, visit https://groups.google.com/d/optout.
>

> ----------------------------------------------------
> Alternatives:
>
> ----------------------------------------------------

[Rob Dodson]

The reason copying the finished folder did not work is because the components directory (where all the elements live) is relied on by all the other directories (including finished).

Are you using paper-input or just a regular input type=text?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/13064.1411759872%40ccs.covici.com.

[Steve Faulkner]

Hi John,

I think you may be encountering a number of issues:

1. accessibility support in polymer UI components is half baked
2. Window Eyes support for ARIA is half baked

3. if you are using IE...

If possible try Firefox and NVDA, it won't solve the polymer UI issues but will give you best chance at making use of accessibility polymer does have implemented.

[cov...@ccs.covici.com]

The project is using paper-input.

[cov...@ccs.covici.com]

The version of Window-eyes I am using does support aria, at least as far
as I have been able to figure out. It is not public version. I am
using ie11. I wonder if we should use native input instead of paper-input?

> > an email to polymer-dev...@googlegroups.com <javascript:>.

> > > To view this discussion on the web visit
> > https://groups.google.com/d/msgid/polymer-dev/75d9edb5-e19f-4794-902f-2e683e89b85e%40googlegroups.com.
> >
> > > For more options, visit https://groups.google.com/d/optout.
> > >
> > > ----------------------------------------------------
> > > Alternatives:
> > >
> > > ----------------------------------------------------
> >
> > --
> > Your life is like a penny. You're going to lose it. The question is:
> > How do
> > you spend it?
> >
> > John Covici
> > cov...@ccs.covici.com <javascript:>
> >
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/958b15a5-7c02-4e21-b67a-efeb25976348%40googlegroups.com.

[Rob Dodson]

+Daniel who is our a11y expert and may have more insight to help you out

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/19344.1411762498%40ccs.covici.com.

[Steve Faulkner]

Hi John,

reviewing the code of the paper input elements demo (http://www.polymer-project.org/components/paper-elements/demo.html#paper-input) they use an <input type="text"> in the shadow DOM, and this gets exposed correctly in the accessibility tree, so not sure what the cause of the issue is you are experiencing.

[cov...@ccs.covici.com]

Would the fact that we have the animated-pages component in there make
any difference?

> > https://groups.google.com/d/msgid/polymer-dev/958b15a5-7c02-4e21-b67a-efeb25976348%40googlegroups.com.
> >
> > > For more options, visit https://groups.google.com/d/optout.
> > >
> > > ----------------------------------------------------
> > > Alternatives:
> > >
> > > ----------------------------------------------------
> >
> > --
> > Your life is like a penny. You're going to lose it. The question is:
> > How do
> > you spend it?
> >
> > John Covici
> > cov...@ccs.covici.com <javascript:>
> >
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6fe0cc6d-698a-4c0e-8aed-075ac3e8141f%40googlegroups.com.

[Steve Faulkner]

Would the fact that we have the animated-pages component in there make
any difference?

I just did some quick testing on the paper input demo page:

Using Window Eyes 8.4 and IE 11 I was able to navigate to the text inputs (using either the tab key or the E shortcut key) and they worked as expected most of the time. Window eyes exhibited some superfluous announcements "one frame" repeatedly.

Note: I am a sighted user and placed focus on the first text input using the mouse, then used keyboard after that.

[cov...@ccs.covici.com]

But were you able to locate the input field using the arrow keys while
browse mode was on and press enter to turn browse mode off on the edit
fields? Right now the edit fields are not recognized at all.

> > https://groups.google.com/d/msgid/polymer-dev/6fe0cc6d-698a-4c0e-8aed-075ac3e8141f%40googlegroups.com.
> >
> > > For more options, visit https://groups.google.com/d/optout.
> > >
> > > ----------------------------------------------------
> > > Alternatives:
> > >
> > > ----------------------------------------------------
> >
> > --
> > Your life is like a penny. You're going to lose it. The question is:
> > How do
> > you spend it?
> >
> > John Covici
> > cov...@ccs.covici.com <javascript:>
> >
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/656b6434-9ede-4fe1-86ce-8fc5611e3bd9%40googlegroups.com.

[Steve Faulkner]

Hi John

On Saturday, 27 September 2014 12:05:48 UTC+1, John Covici wrote:

But were you able to locate the input field using the arrow keys while
browse mode was on and press enter to turn browse mode off on the edit
fields? Right now the edit fields are not recognized at all.

I was unable to successfully navigate or use the paper element demo page. iI tried with NVDA in Firefox and IE and window eyes in IE and Firefox.
Unless I am missing something The demo page(s) navigation menu items are not exposed as interactive element and are not focusable. The demo pages do not include basic semantic structures such as headings, lists etc, which make it very difficult to use with a screen reader (or indeed with the keyboard alone).
 

[cov...@ccs.covici.com]

So how can we make our pages usable that way? Should we use native
input elements instead of paperinput?

> > https://groups.google.com/d/msgid/polymer-dev/656b6434-9ede-4fe1-86ce-8fc5611e3bd9%40googlegroups.com.
> >
> > > For more options, visit https://groups.google.com/d/optout.
> > >
> > > ----------------------------------------------------
> > > Alternatives:
> > >
> > > ----------------------------------------------------
> >
> > --
> > Your life is like a penny. You're going to lose it. The question is:
> > How do
> > you spend it?
> >
> > John Covici
> > cov...@ccs.covici.com <javascript:>
> >
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7a01e2c6-57d2-4f93-8b43-bd25988668fa%40googlegroups.com.

[Daniel Freedman]

Hi Steve and John,

I've filed https://github.com/Polymer/paper-elements/issues/17 to track making all of the demos for the paper elements, and the demo app itself, keyboard accessible.

I admit that IE11 on Windows has not been a primary area of focus for screen reader support. I should probably requisition a set of popular screen readers for Windows to do some manual testing soon.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/23381.1411847871%40ccs.covici.com.

[cov...@ccs.covici.com]

Would we have better accessibbility if we did not use paper-input, but
instead used the native input elements?

> > https://groups.google.com/d/msgid/polymer-dev/6fe0cc6d-698a-4c0e-8aed-075ac3e8141f%40googlegroups.com
> > .

> > > >
> > > > > >
> > > > > > > For more options, visit https://groups.google.com/d/optout.
> > > > > > >
> > > > > > > ----------------------------------------------------
> > > > > > > Alternatives:
> > > > > > >
> > > > > > > ----------------------------------------------------
> > > > > >
> > > > > > --
> > > > > > Your life is like a penny. You're going to lose it. The question
> > is:
> > > > > > How do
> > > > > > you spend it?
> > > > > >
> > > > > > John Covici
> > > > > > cov...@ccs.covici.com <javascript:>
> > > > > >
> > > > >
> > > > > Follow Polymer on Google+: plus.google.com/107187849809354688692
> > > > > ---
> > > > > You received this message because you are subscribed to the Google
> > > > Groups "Polymer" group.
> > > > > To unsubscribe from this group and stop receiving emails from it,
> > send
> > > > an email to polymer-dev...@googlegroups.com <javascript:>.
> > > > > To view this discussion on the web visit
> > > >

> > https://groups.google.com/d/msgid/polymer-dev/656b6434-9ede-4fe1-86ce-8fc5611e3bd9%40googlegroups.com
> > .

[cov...@ccs.covici.com]

Thank you very much for filing the bug, I hope things will start to
happen.

> > https://groups.google.com/d/msgid/polymer-dev/6fe0cc6d-698a-4c0e-8aed-075ac3e8141f%40googlegroups.com
> > .

> > > >
> > > > > >
> > > > > > > For more options, visit https://groups.google.com/d/optout.
> > > > > > >
> > > > > > > ----------------------------------------------------
> > > > > > > Alternatives:
> > > > > > >
> > > > > > > ----------------------------------------------------
> > > > > >
> > > > > > --
> > > > > > Your life is like a penny. You're going to lose it. The question
> > is:
> > > > > > How do
> > > > > > you spend it?
> > > > > >
> > > > > > John Covici
> > > > > > cov...@ccs.covici.com <javascript:>
> > > > > >
> > > > >
> > > > > Follow Polymer on Google+: plus.google.com/107187849809354688692
> > > > > ---
> > > > > You received this message because you are subscribed to the Google
> > > > Groups "Polymer" group.
> > > > > To unsubscribe from this group and stop receiving emails from it,
> > send
> > > > an email to polymer-dev...@googlegroups.com <javascript:>.
> > > > > To view this discussion on the web visit
> > > >

> > https://groups.google.com/d/msgid/polymer-dev/656b6434-9ede-4fe1-86ce-8fc5611e3bd9%40googlegroups.com
> > .

[Steve Faulkner]

Hi Daniel,

On Saturday, 27 September 2014 22:50:59 UTC+1, Daniel Freedman wrote:

Hi Steve and John,

I've filed https://github.com/Polymer/paper-elements/issues/17 to track making all of the demos for the paper elements, and the demo app itself, keyboard accessible.

I admit that IE11 on Windows has not been a primary area of focus for screen reader support. I should probably requisition a set of popular screen readers for Windows to do some manual testing soon.

Not wanting to tell you how to suck eggs, but this may be helpful:

Web Components punch list

As far as screen reader usage goes this survey has useful data: http://webaim.org/projects/screenreadersurvey5/#primary

also have a look at the deliteful web components library (in pre-beta) http://ibm-js.github.io/deliteful/index.html

Deliteful is also designed and tested for accessibility including keyboard accessibility

They include accessibility info in their widget documentation http://ibm-js.github.io/deliteful/docs/master/index.html