Re: Javascript onClick attribute and accessibility

On Thu, 19 Oct 2017 18:23:40 +0200, Giacomo Petri  
<giacomopetri89@gmail.com> wrote:
> We are in a blog page and we have a list of articles structured in the  
> following order:
> 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)
> A sort of breadcrumbs to understand which are the main categories of the  
> article
> Title (link to the full article)
> Short description about the article
> 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).

It is hard to be sure I have the right mental model here. I agree with  
Patrick that it seems like you have dealt with the accessibility  
reasonably.

There are some things I would look carefully at.

The first is whether someone who uses the content "visually" is going to  
try to explain something to a screen reader user that works differently.  
FOr example "click on the main banner of the article to..."

The second is whether you have really taken the thing out of the user's  
navigation - as Patrick already noted, make sure you have e.g.  
tabindex="-1" if you are trying to make sure something does not appear.

The third is the question of whether the subtly different repeated links  
are actually clear. Multiple links to the same place, with different  
"text", may be clear, or may be confusing...

> 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?

Absolutely. The WCAG techniques are only advisory in nature, and one  
reason is that it is unlikely that they cover the full range of possible  
situations in which a particular technique is applied.

> Is the “onClick” solution acceptable? Even if in contradiction with WCAG  
> failure https://www.w3.org/TR/WCAG20-TECHS/F59.html?

There is more to it than the "onClick" - which is important. My big  
concern is that presenting clearly different experiences to different  
people leads to confusion,. This is a lesser problem than making it  
impossible to perform a task, but is IMHO a real issue - and why we  
invented the priority system so long ago.

cheers


-- 
Chaals is Charles McCathie Nevile
find more at http://yandex.com