RE: Span and accessibility

Hi Ginger, it sounds like you are asking how you can ensure multiple elements are rendered as one element when navigating with a screen reader.  Generally this is a problem with VoiceOver on iOS that breaks spans into multiple swipes.  The solution is often to use the invalid role of text or role of image to combine elements into a grouping and provide an accessible name when role img is used.    These are hacks to work around certain screen reader implementations.  Generally screen readers don't announce the aria-label property on spans unless the element is interactive or has a role such as img - so if you need to rely on aria-label or aria-labelledby you will need some appropriate role.  As others have said having a code sample might allow folks to come up with a solution that works across assistive technology.

Jonathan

-----Original Message-----
From: Ginger Claassen <ginger.claassen@gmx.de> 
Sent: Wednesday, June 9, 2021 5:21 AM
To: w3c-wai-ig@w3.org
Subject: Span and accessibility

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


good Morning folks,


I have a question regarding the accessibility of the HTML Span element:

How can one make it accessible for screen readers?

We tried a whole bunch of things and the problem is that we managed to get it somehow accessible but the role=image and label are displayed beneath the element itself.

The application has a whole bunch of spans telling the time and an icon with an arrow and the status working or on break.

NVDA can nicely read the whole thing e.g. 8:39 working but JAWS and Narrator have no chance to get it. Therefore we played with a lot of information and managed to get it working but for JAWS and Narraotr each entry is comprised of two lines and one has to go through the list with the cursor instead of jumping from one to the next list element by pressing "i".

Any ideas would be greatly appreciated!


Solong and thx


     Ginger

Received on Wednesday, 9 June 2021 14:59:36 UTC