Re: Doormat navigation link, following text, and aria-describedby. Is this OK

> It seems an elegant solution, but I wonder if there are issues with it.


Thanks, yes, exactly my conclusion.


Regards,

Alan
. . . . -   . . - - -
Alan Bristow ( he / him / il )
Web Developer / Développeur Web
Elections Canada / Élections Canada
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>
________________________________
From: Marcos Villaseñor <villasenor.marcos@gmail.com>
Sent: Monday, November 28, 2022 12:57 PM
To: Bristow, Alan; w3c-wai-ig@w3.org
Subject: Re: Doormat navigation link, following text, and aria-describedby. Is this OK

Ce message a été envoyé par un expéditeur externe. Veuillez faire preuve de prudence et ne pas cliquer sur les liens ou ouvrir les pièces jointes à moins de reconnaître l'expéditeur et de savoir que le contenu est sûr.

This message was sent from an external sender. Please exercise caution and do not click links or open attachments unless you recognize the sender and know the content is safe.


Hi Alan,

I would bet that the pattern you are describing came out because the design team insisted that the link acts as a heading for the description (even if it's not semantically like that in HTML), because that is how it would be interpreted by sighted users that can immediately see both.

To serve screen reader users (as in your example), the development team then decided to add the aria.

It seems an elegant solution, but I wonder if there are issues with it.

From: Bristow, Alan <Alan.Bristow@elections.ca>
Date: Monday, 28 November 2022 at 15:21
To: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: Doormat navigation link, following text, and aria-describedby. Is this OK

Hi all,



TL;DR;

Should I associate the link of a doormat to its following describing paragraph via aria-describedby?





DETAIL

Coding doormat navigation I am presenting a link and a short paragraph of text to describe the destination more fully. Initially I coded like this:



[P]Description of the doormat destination[/P]



[A]Pithy description / title of the doormat that links to the destination[/A]



This made sense to me as I assumed a screen reader (SR) user arrow-key navigating (move, hear, move, hear) would want to know there was more to understand about a link than the short content in the link text alone, and in some less common cases on hearing the link text they might think "this is probably where I want to go [click]", but, if they had known there was a description following they might have found it was in fact not where they wanted to go.



So; to improve this I used my aforementioned pattern, (description, then link).



However, looking at, for example, canada.ca or gov.uk, it seems mine was an antipattern -- they had link, then description.



So I changed my doormats to be more "normal".



However, to address my initial desire that the SR user get to know the full doormat of info about any link they tab to or cursor down to, I used aria-describedby to associate the text that followed the link, to the link (I also use a period "." at the end of the link text, so the aural presentation is more nuanced, showing the separation from "title" and "text").



Because slightly to my surprise neither the Canadian or UK sites did this I wondered if I am making a mistake in this use of aria-describedby.



Any feedback appreciated.



Thanks.


Regards,

Alan
. . . . -   . . - - -
Alan Bristow ( he / him / il )
Web Developer / Développeur Web
Elections Canada / Élections Canada
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>