Accordion a.k.a. Blinds

View the library of solutions.

This method is light on aria. Aria tagging used is:

I chose to use internal links for the markup even though the JS prevents default so that focus stays on the blind trigger. Using anchor tags made the most semantic sense since if I turned off css and js the link would take you directly to the content that the link is pointing too. A button would just be confusing.

Notice that the aria-expanded is on the trigger, not on the expandable container. Also, if there is no DOM ownership or if aria-owns is not used then use aria-controls.

Using aria-owns (preferred method)

Example with a parent/child relationship between the content trigger and the content in the blind. In this case aria-owns is assigned to the trigger to tie it to its expandable container. Therefore aria-controls is unnecessary.

2 coconuts $30
4 African swallows $60
Some lovely filth $10
Heath $75
Arborvitae $125

Code Sample


<div>
    <a href="#oldWomanBreakdown" class="accordion-trigger" aria-owns="oldWomanBreakdown" aria-expanded="false">Old Woman <span class="cost">$100</span></a>
</div>
<div id="oldWomanBreakdown" class="accordion">
    <div class="itemization">2 coconuts <span class="cost">$30</span></div>
    <div class="itemization">4 African swallows <span class="cost">$60</span></div>
    <div class="itemization">Some lovely filth <span class="cost">$10</span></div>
</div>

Using aria-controls (alternate method)

Example where blind reveals new content but it is unnecessary to use aria to define ownership. The aria-controls attribute is used to tie trigger and expandable content together.

Screen readers don't give comprehensive hints with this method. Therefore I prefer the aria-owns method.

And Saint Attila raised the hand grenade up on high, saying, "O Lord, bless this thy hand grenade, that with it thou mayst blow thine enemies to tiny bits, in thy mercy." And the Lord did grin. And the people did feast upon the lambs, and sloths, and carp, and anchovies, and orangutans, and breakfast cereals, and fruit bats, and large chu…

And the Lord spake, saying, "First shalt thou take out the Holy Pin. Then shalt thou count to three, no more, no less. Three shall be the number thou shalt count, and the number of the counting shall be three. Four shalt thou not count, neither count thou two, excepting that thou then proceed to three. Five is right out. Once the number three, being the third number, be reached, then lobbest thou thy Holy Hand Grenade of Antioch towards thy foe, who, being naughty in My sight, shall snuff it.

Using HTML5 <details> and <summary> elements

I suggest staying away from using HTML5 details and summary elements to drive expand/collapse. This is because both browser and screen-reader support is spotty at best.

(link to "can I use" regarding details and summary)

Some of the issues found as of February 2017: