RE: Accessibility of Details Element

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://www.epubtest.org/test-books

 

Here is a link to the test results.

https://www.epubtest.org/results

 

And from the DAISY knowledge Base on the details element:

http://kb.daisy.org/publishing/docs/html/details.html#ex

 

Best

George

 

From: Pyatt, Elizabeth J <ejp10@psu.edu> 
Sent: Friday, August 18, 2023 3:29 PM
To: Shivaji Kumar <kumar140ster@gmail.com>
Cc: w3c-wai-ig <w3c-wai-ig@w3.org>
Subject: Re: Accessibility of Details Element

 

Our screen reader testers are able to use it. I would add a <...tabindex="0"> attribute in the <summary> tag to make it keyboard friendly, but it's been a good solution. I also add a low level H tag above as well. 

 

Here's some sample code from Penn State

Accessibility at Penn State | Image ALT Tag Tips for HTML (psu.edu) <https://sites.psu.edu/accessibility/images/imageshtml/#extended> 

 

Elizabeth

 





On Aug 18, 2023, at 3:34 PM, Shivaji Kumar <kumar140ster@gmail.com <mailto:kumar140ster@gmail.com> > wrote:

 

[You don't often get email from kumar140ster@gmail.com <mailto:kumar140ster@gmail.com> . Learn why this is important at https://aka.ms/LearnAboutSenderIdentification ]

Dear listers,

Is there any documentation on whether HTML "details" element is accessible?

If possible, it would be great if you could also point to any testing
done with screen reader and browser combination.

For the context, my dev team is considering replacing our existing
"accordion" element with "details", and is not sure if the "details"
element meets different WCAG success criteria.

Any thoughts/hints would be much appreciated

Shivaji

--
Check out my recent accessibility publication
https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fnfb.org%2Fimages%2Fnfb%2Fpublications%2Fjbir%2Fjbir21%2Fjbir110204.html <https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fnfb.org%2Fimages%2Fnfb%2Fpublications%2Fjbir%2Fjbir21%2Fjbir110204.html&data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=1oKX8HSDmuOhEAScpcnq8c3KrijTEuFwjFmgyWGiWzo%3D&reserved=0> &data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=1oKX8HSDmuOhEAScpcnq8c3KrijTEuFwjFmgyWGiWzo%3D&reserved=0

JAWS® Certified Trainer, 2018

Twitter handle
https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Ftwitter.com%2FShivKumar140 <https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Ftwitter.com%2FShivKumar140&data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=UQO4XfIJTMi8kzEDldRpg%2FrcTO0auehnbEuqKADiCBs%3D&reserved=0> &data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=UQO4XfIJTMi8kzEDldRpg%2FrcTO0auehnbEuqKADiCBs%3D&reserved=0

My Blog
https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdigitalaccess365.wordpress.com%2F <https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdigitalaccess365.wordpress.com%2F&data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Uyq23fYf4GjYssuyWiKz4WFlnBTVx%2BVE5fp5pNNikeg%3D&reserved=0> &data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Uyq23fYf4GjYssuyWiKz4WFlnBTVx%2BVE5fp5pNNikeg%3D&reserved=0

Linkedin
https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.linkedin.com%2Fpub%2Fshivaji-kumar%2F35%2Fa73%2F11a%2Fen <https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.linkedin.com%2Fpub%2Fshivaji-kumar%2F35%2Fa73%2F11a%2Fen&data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=nd5DEeRaLhaY%2FZ1M6wRII5I57%2F4Qar5XMhCI3n26MR0%3D&reserved=0> &data=05%7C01%7Cejp10%40psu.edu%7Cc64b39e82512453ef68b08dba02314fe%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C638279844785934208%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=nd5DEeRaLhaY%2FZ1M6wRII5I57%2F4Qar5XMhCI3n26MR0%3D&reserved=0

 

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

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