W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2017

Javascript onClick attribute and accessibility

From: Giacomo Petri <giacomopetri89@gmail.com>
Date: Thu, 19 Oct 2017 18:23:40 +0200
Message-ID: <CAGc5L=gLyNminCwaPeVr0AEWJmcinB+QpZSvQUzGG5oFHqufxw@mail.gmail.com>
To: w3c-wai-ig@w3.org
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.

Giacomo Petri
Received on Thursday, 19 October 2017 16:24:03 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:37:11 UTC