Re: Accessibility of Details Element

Thank you all for this wealth of information, it is really helpful.

Appreciate it
Shivaji

On 8/19/23, 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://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
>
>
>
>


-- 
Check out my recent accessibility publication
https://nfb.org/images/nfb/publications/jbir/jbir21/jbir110204.html

JAWS® Certified Trainer, 2018

Twitter handle
https://twitter.com/ShivKumar140

My Blog
https://digitalaccess365.wordpress.com/

Linkedin
www.linkedin.com/pub/shivaji-kumar/35/a73/11a/en

Received on Sunday, 20 August 2023 17:46:05 UTC