- From: Jan Hellbusch <hellbusch@2bweb.de>
- Date: Fri, 20 Oct 2017 16:50:58 +0200
- To: <w3c-wai-ig@w3.org>
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