Polymer accessibility question

[Ken Cross]

Hi,

I’m not sure if this email address is for tech questions on Polymer, so please direct me where to ask if not.

I am creating an element which wraps a paper-card element:

  <template>

    <style include="cnid-card-style"></style>

    <paper-card class="xxx" elevation="0" image="{{cardimage}}">

      <div id="cnid-content" class="card-content">

        <div id="ban-text" class="yyy">{{bannertext}}</div>

      </div>

    </paper-card>

      

  </template>

I have this working as intended with the exception of accessibility with Talkback.    Through inspection, I have seen that by supplying an image to paper-card, it winds up in a nested ‘div’ which has aria-label set to the image name:

  <paper-card>

    <div>

      <iron-image>

        <div id=“sizedImgDiv” aria-label=“image name”…>

When I now tab through the page with Talkback enabled, it stops at the image and announces the image name.  I want to prevent this.  It should only announce the text in ‘ban-text’.  Note that there is no code yet to announce ‘ban-text’; I am stuck at preventing the image announcement.

Is it possible to disable the image announcement?  If so, how?

Thanks,

Ken Cross l Android Developer

 

Cequint Incorporated

100 West Cypress Creek Rd l Suite 820

Fort Lauderdale l FL l 33309

 

p:  954.526.0807, x2027

m: 561.212.4572

f:   954.773.2901

 

www.cequint.com

 

This email and any and all attachments to it are Cequint' s confidential information and intended solely for the use of the individual or entity to whom they are addressed. Any unauthorized disclosure or forwarding of this email or any files transmitted with it constitutes a breach of your confidentiality obligations to Cequint. If you have received this email in error, please notify the sender, delete this email from your system and do not disseminate, distribute or copy this email or the files attached to it.

[Rob Dodson]

+monica

It sounds like you may need an option to provide an alt attribute to the image. Then you could provide a description (if you wanted one) or do alt="" which, if I recall, instructs the screen reader to skip the image.

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/A3DF8905-E0BB-437E-B255-F68603736E8B%40cequint.com.
For more options, visit https://groups.google.com/d/optout.

[Ken Cross]

Yes, that is correct.  I have found a solution since my email which involves drilling down through the doms and setting the alt attribute, but it would make more sense (IMHO) to have this as a paper-card option.

Sent using OWA for iPhone

---

From: Rob Dodson <robd...@google.com>
Sent: Wednesday, March 30, 2016 9:17:35 PM
To: Ken Cross; Monica Dinculescu
Cc: polym...@googlegroups.com
Subject: Re: [polymer-dev] Polymer accessibility question

 

[Monica Dinculescu]

I have filed https://github.com/PolymerElements/paper-card/issues/70, and will try to get around to fixing it asap. You shouldn't have to do this manually :(

For now, a different workaround could be distributing the image yourself (rather than using the build-in header image). See the second example here: http://output.jsbin.com/muhuru

Sorry for the inconvenience in the meantime!

monica