RE: Javascript onClick attribute and accessibility

To me it sounds like an over kill and you have enough paths to activate the link.

[https://www.cisco.com/c/dam/m/en_us/signaturetool/images/banners/standard/08_standard_graphic.png]




Sean Murphy
ENGINEER.CUSTOMER SUPPORT
seanmmur@cisco.com<mailto:seanmmur@cisco.com>
Tel: +61 2 8446 7751










Cisco Systems, Inc.
The Forum 201 Pacific Highway
ST LEONARDS
2065
Australia
cisco.com



[http://www.cisco.com/assets/swa/img/thinkbeforeyouprint.gif]

Think before you print.

This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.
Please click here<http://www.cisco.com/c/en/us/about/legal/terms-sale-software-license-agreement/company-registration-information.html> for Company Registration Information.







From: Giacomo Petri [mailto:giacomopetri89@gmail.com]
Sent: Friday, 20 October 2017 3:24 AM
To: w3c-wai-ig@w3.org
Subject: Javascript onClick attribute and accessibility

Dear WAI IG,

I’d like to expose you my thinking about an "accessibility failure” to have your own opinion.

We are in a blog page and we have a list of articles structured in the following order:

  1.  Decorative banner as background image of a link (link to the full article with aria-label=“$article_title” - aria label used for SC 2.4.4 and SC 4.1.2)
  2.  A sort of breadcrumbs to understand which are the main categories of the article
  3.  Title (link to the full article)
  4.  Short description about the article
  5.  Read more with aria-label=“read more about $article_name” (link to the full article)

Now, one thing that kind of jumps out at you is the link text repetition; visually these links are different (and may be comfortable for users without disabilities) but for screen reader users there are three links in few sentences with same/similar text that point to the same page.

There are different ways to solve the problem in an accessible way but I’d like to focus on a particular solution: replace the decorative banner link with a div element and use the onClick attribute to redirect the user to the proper page.

With this implementation I avoid a repetition: the “duplicated” link is not focusable and not readable from screen reader users because there is no link and no alternative text for decorative image (empty div with background image).

Following the WCAG 2.0 documentation we face a failure: https://www.w3.org/TR/WCAG20-TECHS/F59.html; from my point of view the purpose of this failure is to encourage the use of roles and improve the user interactions to increase accessibility.
But, in the example above, the onClick attribute was exactly set to prevent the screen readers to announce the link and to avoid text repetition (we have the same link with the same text just below)

Using this implementation we should obtain the same accessibility tree of setting, for example, role=“presentation”, aria-hidden=“true” and tabindex=“-1” to the link.

May a failure become a "feature", if used in a reasoned manner?
Is the “onClick” solution acceptable? Even if in contradiction with WCAG failure https://www.w3.org/TR/WCAG20-TECHS/F59.html?


Thanks for your time.

Best,
Giacomo Petri