RE: Javascript onClick attribute and accessibility

Hi,

instead of an onclick on the first link you only need role="presentation|none" and tabindex="-1":

<a href="/" tabindex="-1" role="presentation" class="background-image"></a>

1. The link is not in focus order.
2. the original semantics are removed from the accessibility tree with the role attribute

Also, I have noticed that empty Links (= no text) are sometimes ignored by AT, but I can't validate that for all AT/browsers.

Building teasers and considering the right text alternative is not straight-forward. Many images are purely decorative and - due to redundancy of links - I agree with your considerations. But there will always be a situation where a text alternative might need to be considered.

I wrote about this, but it is in German:
https://bf-w.de/knowhow/textalternative/alternativtextoptimierung.html

Jan 

> -----Original Message-----
> From: Giacomo Petri [mailto:giacomopetri89@gmail.com]
> Sent: Thursday, October 19, 2017 6:24 PM
> 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

Received on Friday, 20 October 2017 14:51:29 UTC