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> wrote:

[You don't often get email from 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&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&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&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&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, (814) 865-0805 or
accessibility@psu.edu (main office)

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