Foxland

Testing Foundation Accordion

Written by Sami Keijonen

I’m not the biggest fun of large front-end frameworks for couple of reasons.

  • There are lot’s of extra code I don’t need.
  • I don’t understand what’s going on.
  • I feel like I lose control.

But there are times when frameworks like Foundation can be really helpful.

  • They do have lot’s of great front-end components and lot’s of people have tested those.
  • Why invent the wheel all over again.
  • Foundation have improved a lot what comes to accessibility.

This time I wanted to test Foundation accordion component. For testing I created a small test plugin.

How to avoid bloat

The key point about testing Foundation accordion was to avoid bloat. How would I get just the Javascript and CSS what I need for accordion?

Well you can do exactly that using custom download. Uncheck everything else and check only accordion.

Select accordion

From the download folder we’re going to need three files:

  • Javascript file app.js.
  • Javascript file vendor/foundation.js.
  • From the css/foundation.css file we’re going to need some of the code. Search for keyword accordion and select only related styles. Here are my styles.

After that it’s up to you how you’re going to use those components in you plugin or theme.

Accessibility in Foundation Accordion

The main reason why I wanted to test Foundation accordion was accessibility. And I’ll have to say I’m pretty impressed. There are lot’s of accessibility improvements since I last checked.

Keyboard Accessibility

In Foundation accordion keyboard accessibility is top notch.

  • I can use Tab and Enter (Space) to navigate trough accordion.
  • Focus don’t shift inside accordion before I open the accordion item.
  • I can also use arrow keys up and down to navigate trough accordion. That’s pretty cool.

Only thing that confuses me is the accordion title and it’s markup. Accordion title is the element that toggles the accordion content.

<a class="accordion-title" href="#">Accordion 1</a>

I can’t change the accordion title markup to <button> which is kind of odd. But on the other hand there are ARIA markup to help screen reader users.

Screen Readers Accessibility

I have only NVDA screen reader for testing. And I’m not a native screen reader user so I probably don’t even know how to test correctly. Anyways NVDA announced accordion items really well. Like I said before there are ARIA markup that helps screen reader users.

Only thing that bothered me was that also the plus-sign was announced with the accordion title. That comes from the CSS.

.accordion-title::before {
	content: '+';
	position: absolute;
	right: 1rem;
	top: 50%;
	margin-top: -0.5rem;
}

But this is minor thing and we could even use animated SVGs instead.

Does it work without Javascript?

By default it does not. Accordion tabs stays closed if Javascript is not enabled. In my opinion all the accordion tabs should be open when Javascript is disabled or doesn’t load.

Accordion tabs opened

All accordion tabs are open when Javascript is disabled

I added one line of CSS for make this work:

.js .accordion-content {
	display: none;
}

Now accordion content is hidden only when JS is around. Here is the article how to detect Javascript and adding no-js / js class in HTML element.

Demo and test code

Here you go:

Summary

I was sceptical before testing but I was actually positively surprised.

  • It has enough settings to display accordion in a way you want.
  • It’s easy to set up and isolate from the foundation code.
  • It’s accessible as far as I can tell.

Foundation accordion does depend on jQuery but that’s a minor issue if we’re using jQuery already in our project. But I can definitely recommend Foundation accordion if you need one. To make testing more useful I should test others accessible accordions. But that’s for another day. Cheers!

Categories:

Tags: