The BOOM

FAQ using ARIA roles to meet WCAG 2 level AA

Is the content fully hidden?

Yes.

This content is hidden both visually and aurally, and doesn't appear in the keychain until the button is activated (expanded = true).

May an answer be displayed by default?

Apparently yes.

This content is available by default until the button deactivates it (expanded = false) which removes it visually, aurally and from the keychain.

Add the attribute data-pab-expand to the dt to open it by default.

Can an answer be opened by URL reference?

Yes.

Any question may be expanded on page load by referencing its id in the URL.

For example this content could be automatically opened by adding "#faq_3" to the URL in the address bar like so:
http://codepen.io/2kool2/pen/ZOkojB#faq_3

The focus caret is moved to the activation button when referenced in this manner.

Will it work with the font size scaled-up 200%?

Yes.

The height of a hidden block is calculated when the activaton button is pressed. It's also recalculated when the browser window is resized.

In fact this module should easily scale to 300%, limited only by the display width and word length.

How it works

Takes a dl list and wraps each of its dt content with a button. The dt is targeted by the data-pab attribute which has the value of the id of the dd to show or hide.

Adding the attribute data-pab-expand to a dt will make a dd open by default.

If a dd id value is referenced as a fragment identifier in the URL, then it is also opened by default.

The code is very semantically written but has one caveat. It only allows a single dd per dt which is fine for an FAQ (but not so for a dictionary).

Note to self: Don't use "Lorem Ipsum" as place-holder text when sending for screen-reader testing. I nearly cried when I heard the gibberish spoken by Jaws today. Marking the block with a lang="la" may be technically correct but hardly aids comprehension.

GitHub repo: accessible-faq

Pens by Mike Foskett — webSemantics