cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Lamplighter II

Accordion Alternative - Details tag

Howdy! A friend showed me the details tag the other day and now I cannot stop telling others about it.

It's an HTML5 tag so it works in mobile too! See more at The Details disclosure element.

Spoiler
The spoiler reminds me of the details tag!

I added some styling to the main parts. Here is the code to try in your Canvas page:

<details>

 <summary style="background-color: whitesmoke; font-weight: bold; cursor: pointer;">
  Some question here? <small>(click to reveal)</small></summary>

 <div id="reveal" class="pad-box-mini border-round" style="border: thin solid grey;">
<p>Reveal text goes here</p>
</div>

</details>

I've already started using it on pages to split up large content blocks including video! I found the old places where the accordion was used and replaced each with its own details block.

Group of details to mimic an accordionGroup of details to mimic an accordion

 

Cheers - Shar

Labels (2)
12 Replies
Highlighted
Surveyor

Thanks Shar!

🙂  Alissa

0 Kudos
Highlighted

Word!

0 Kudos
Highlighted

Interesting. I'll have to look at it after a while, but it sounds like you might have it all figured out. 🙂

0 Kudos
Highlighted

Hi Michelle @mtuten ,

I went back to my first example group of details and ran the screen reader on them, and it does announce that it is a "button - collapsed" without me needing to put in the aria-label.

Group of details to mimic an accordionGroup of details to mimic an accordion

But I did surround all those details in a div tag with a group role and label so that the screen reader would announce the grouping. And the title is a tool-tip for sighted users.
<div id="Accordion" role="group" aria-label="4-button accordion" title="Click to toggle expand/collapse.">

Cheers - Shar

0 Kudos
Highlighted

That's exciting, @Shar ! Thanks for experimenting. Maybe once I get some stuff off my plate I can share the JAWS and VoiceOver experience just to round things out. 

Can I ask that the original post be edited to include this new code so that fewer folks end up using the less accessible version because they didn't read the rest of the conversation?

0 Kudos
Highlighted

Hi Michelle @mtuten 

Using the aria-expanded tag did help the screen-reader announce the status along with putting it in a list when I have more than one. I'll do that more often!

Here's the code I ended up using to try it out:

<h2>Details</h2>
<ul style="list-style-type: none;">
 <li>
  <details>
   <summary aria-expanded="false">Click to open</summary>
   here's more info
  </details>
 </li>
 <li>
  <details>
   <summary aria-expanded="false">Look at this one</summary>
   and more info.
  </details>
 </li>
</ul>


And the resulting output on a Canvas page with one details expanded and the other collapsed:

Details list on the pageDetails list on the page

Oh yes, it does play nice in mobile, very nice in the Canvas Student App which was why I got so excited about this tag in the first place.

Details list in Canvas Student AppDetails list in Canvas Student App

I also like that in a list it gets a margin-left: 25px. That little visual empty space helps draw my eye that it's something special. 😋

Cheers - Shar

Highlighted
Explorer III

@Shar Thanks for testing that. Did the screen reader say "expanded" or "collapsed" when you clicked the "button"? If it didn't that would make it inaccessible. Would adding the following code to the summary fix that?

aria-expanded="false"

One more consideration: In my experience, accordions are created in a way where each "button" is part of a list. This may be helpful for screen reader users so that they know how many buttons there are in the accordion. Does this code play nicely within a list structure?

 

Also, do we know what the mobile experience is like? Does it expand/collapse appropriately from the Canvas apps? If it doesn't, is the element forced into an expanded state?

0 Kudos
Highlighted

Hi@mtuten ,

I just tried it out with (out of the box) NVDA and it reads it as a button that you can then keyboard ENTER to open/expand. In fact, I was able to keyboard navigate - TAB to it as well. So with more context (instructions) on the summary bit it'll be more obvious that there's an action to perform.

Shar_1-1598502800792.png

Cheers - Shar

 

Highlighted
Explorer III

Do we know how well screen reader programs can interact with this code?

0 Kudos
Highlighted
Adventurer

Love this! Thanks for sharing!!

0 Kudos