Re: Accessibility of Details Element

A previous small study of screenreader users showed that for long descriptions the DETAILS/SUMMARY pattern was vastly preferred over other options for may of the reasons Karen indicated.

Long Descriptions accessibility options - David MacDonald Web Accessibility Blog, testing, teaching, and discussion<https://www.davidmacd.com/blog/csun/accessibility-long-descriptions.html>

Also - I would advocate the use of the DETAILS/SUMMARY pair for audio transcripts or any object where any user would have the option of obtaining more information by selecting an open button.

I believe that image long descriptions and transcripts are useful for all audiences. The LONGDESC attribute or other hidden description options are hard to find, hard for editors and alt media specialists to review, and ultimately limited in their usefulness.

It's not a replacement for a complex accordion or dropdown, but is quite useful for other situations like long descriptions, and viewing transcripts.

Hope this helps.

Elizabeth

On Aug 22, 2023, at 10:05 AM, Karlen Communications <info@karlencommunications.com> wrote:

In the research that Bevi Chagnon and I have done over the past two years, end-users want access to well-structured information for complex images. They want to be able to navigate by heading, have lists, tables and paragraphs that provide additional details for complex graphics/images. We've presented our findings at the ICCHP conference and the research is published in the Journal of Computers Helping People with Disabilities that is associated with the ICCHP.

We also need to be able to have multiple languages in any description of an image/graphic, something we've been asking for years now.

Creating another attribute without being able to meet the needs of the end-user is not going to advance the readability or access to content for complex graphics/images.

Creating a link to an external file that one may or may not have access to when Internet is not available is not a good solution. The detailed information MUST travel with the document that is being read and one MUST be able to distinguish one "d" link from another if several detailed descriptions are contained in one document/web page.

Our research continues and one of the questions we ask end-users is to think outside the box to come up with innovative solutions to accessing complex graphics/images. As always, end-users MUST be involved in any "solution" to the accessibility of digital content.

Cheers, Karen

-----Original Message-----
From: George Kerscher <kerscher@montana.com>
Sent: Monday, August 21, 2023 10:36 AM
To: 'Peter Weil' <peter.weil@wisc.edu>
Cc: 'Pyatt, Elizabeth J' <ejp10@psu.edu>; 'Shivaji Kumar' <kumar140ster@gmail.com>; 'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: RE: Accessibility of Details Element

Hi,

A long, long time ago, we asked for the aria-details as a replacement for longdesc, which was deprecated. The longdes would point to anywhere, including external pages, which was the major objection.

We got aria-details, which IMO is appropriate for the img element. The  value of aria-details is, as you know, an ID pointing to something that has more information. It could be to a details element, or it could be to an anchor that links to an external file. We show both of these approaches in our test book for extended descriptions at epubtest.org

Both NVDA and Jaws says "has details" when you are on an image that has the attribute. I would think that if there is no aria-details, then the alt text should be sufficient. I would hope that screen readers would provide the functionality that the "Enhanced Annotations" add-on for NVDA has.

I would not expect that the target of aria-details would be read automatically, like describedBy does. Images that require extended descriptions will require descriptions that have navigation structures. For example, information in a pie chart can easily be  can easily be communicated through a table, and table navigation would be essential.

Hope that helps.

Best
George


-----Original Message-----
From: Peter Weil <peter.weil@wisc.edu>
Sent: Monday, August 21, 2023 6:22 AM
To: George Kerscher <kerscher@montana.com>
Cc: Pyatt, Elizabeth J <ejp10@psu.edu>; Shivaji Kumar <kumar140ster@gmail.com>; w3c-wai-ig <w3c-wai-ig@w3.org>
Subject: Re: Accessibility of Details Element

Thanks George. I’m still unclear as to how screenreaders — let’s take VoiceOver as an example — convey the information in aria-details to the user. For example, as a test, I added aria-details (pointing to the id of a details element) to a form field. But when I enter the form field, nothing from aria-details is announced. Am I doing this incorrectly? (aria-described by works fine here, by the way). Although I am testing VO in Safari, I do see that the aria-details info is listed in the Chrome dev tools accessibility tab, so the browser recognizes it.

Thanks, Peter



On Aug 20, 2023, at 4:46 PM, George Kerscher <kerscher@montana.com> wrote:

Hi,

It works the same with websites or in EPUB; EPUB is a zip file of XHTML.

Some people will put extended descriptions at the end of the chapter. When the extended description is just below the image, the usefulness of the NVDA add-on is not that important, but when the details is far away, this functionality is great.

Best
George


-----Original Message-----
From: Peter Weil <peter.weil@wisc.edu>
Sent: Sunday, August 20, 2023 2:41 PM
To: George Kerscher <kerscher@montana.com>
Cc: Pyatt, Elizabeth J <ejp10@psu.edu>; Shivaji Kumar <kumar140ster@gmail.com>; w3c-wai-ig <w3c-wai-ig@w3.org>
Subject: Re: Accessibility of Details Element

George,

This is very interesting, thank you.

I’ve never tried using  aria-details, given what I thought I last read about the generally poor support for it. Support must have improved dramatically not too long ago, but I haven’t seen anything about it.

The DAISY KB says:

"To remove any ambiguity, the aria-details attribute can be used to associate the details element with the relevant content item. If the information cannot be placed in logical sequence, the attribute allows users of assistive technologies to locate the element when they encounter the content it is associated with…. this works effectively with Jaws, NVDA, VoiceOver, and TalkBack”

https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fkb.daisy.org%2Fpublishing%2Fdocs%2Fhtml%2Fdetails.html%23ex&data=05%7C01%7Cejp10%40psu.edu%7C46524cd39b914a4ede3208dba318d653%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638283099316956359%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=%2F%2BNeQLP4giPAvx8DEQvaRGmXezq5qwfPXcctnLF7v10%3D&reserved=0


Would you please clarify exactly what “associate” means here, and exactly how — aside from the NVDA commands you cite — the attribute allows (enables? facilitates?) users to locate the element to which aria-details points? What is read out to the user?

I don’t know much about EPUB. Do the results of EPUB testing apply equally to browsers and websites?

Thanks very much,

Peter

On Aug 19, 2023, at 10:01 AM, George Kerscher <kerscher@montana.com> wrote:

Hello,

We at DAISY have been testing the use of the HTML details element. It is currently being recommended immediately after an image that requires an extended description.

We also recommend using the aria-details attribute to point to the ID of the details element.

This works effectively with Jaws, NVDA, VoiceOver, and TalkBack. NVDA has an add-on that adds additional functionality. Here is from the Enhanced Annotation add-on documentation:
Commands
• NVDA+alt+d: moves the cursor to the element identified with aria-details.
• NVDA+alt+shift+d: moves the cursor to the original element, for example, an image with Further details like a long description. If NVDA+alt+d has been pressed several times to move to related annotations, it'll be possible to go back to each origin.

Here is a link to the test EPUB titles we use, and the test for details is in “Accessibility Tests Extended Descriptions.” You can download any of the test books from:
https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.epubtest.org%2Ftest-books&data=05%7C01%7Cejp10%40psu.edu%7C46524cd39b914a4ede3208dba318d653%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638283099316956359%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=AzD%2FJ6q3%2FcWe4XEvKcAGixZMqkESkHbpAKLUuk5JnZE%3D&reserved=0


Here is a link to the test results.
https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.epubtest.org%2Fresults&data=05%7C01%7Cejp10%40psu.edu%7C46524cd39b914a4ede3208dba318d653%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638283099316956359%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=rA7yBYmwT9GpIiSYfTdakDSNPsnuC7i2jg2vY93WvQo%3D&reserved=0


And from the DAISY knowledge Base on the details element:
https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Fkb.daisy.org%2Fpublishing%2Fdocs%2Fhtml%2Fdetails.html%23ex&data=05%7C01%7Cejp10%40psu.edu%7C46524cd39b914a4ede3208dba318d653%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638283099316956359%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=J08%2FOGpluFdEvgo8wW0UQZSb8cCRXfmxUD8P71eDuOw%3D&reserved=0


Best
George


--
Peter Weil
Web Developer
University Marketing Web Services
Office of Strategic Communications
University of Wisconsin–Madison
608-220-3089









=-=-=-=-=-=-=-=-=-=-=-=-=
Elizabeth J. Pyatt, Ph.D.
Accessibility IT Consultant
Teaching and Learning with Technology
Penn State University
ejp10@psu.edu, (814) 865-0805 or
accessibility@psu.edu (main office)

The 300 Building, 112
304 West College Avenue
University Park, PA 16802
accessibility.psu.edu