NZ Government Web Standards
  • Introduction
  • General accessibility, including resources & testing tools
    • Web accessibility Knowledge Base
    • Why I Care About Accessibility
    • When the web standards trump agency requirements
    • Roles - Getting started with accessibility
    • Roles - How to grok web standards
    • Roles - Accessibility guidelines: checklist for different roles
    • Design - Designing a dementia-friendly website
    • Design - Integrating accessibility throughout design
    • Testing - 11.5 free testing tools for web accessibility
    • Testing - automated testing tools
    • Testing - The 6 Simplest Web Accessibility Tests Anyone Can Do
    • Testing - Easychecks from WAI
    • WCAG - Web Content Accessibility Guidelines
  • Mobile accessibility
    • Mobile accessibility mapping
    • ARIA design patterns - touch UA/AT gap analysis
    • Mobile accessibility task force main page
    • Mobile Accessibility WCAG Extension
  • Assistive technologies
    • Understanding screen reader interaction modes
    • How to make your site accessible for screen magnifiers
    • How Windows screen readers work on the web
    • Speech recognition
  • Content accessibility
    • Content accessibility basics
    • Design that is easy to read
    • Language - Importance of plain language for content creation
    • Language - Reading and Navigational Strategies of Web Users with Lower Literacy Skills
    • Language - Translations
    • Links - link text
    • Links - Don't force links to open in a new window by default
    • Images - Writing great alt text
    • Images - alt text vs long description
    • Images - describing charts
    • Videos - a basic guide to captions
    • Videos - webinars
    • Videos - Making videos accessible
    • Videos - Video and audio how to guides
    • Videos - Best practice for video translation - transcript
    • Infographics - How to create an accessible infographic
    • Infographic - Creating an accessible infographic
    • Infographic - accessible example
  • Technical accessibility
    • Modals - About modals
    • Modals - Keyboard behaviour and ARIA
    • Modals - When a modal is considered accessible
    • Javascript - Clarifying the JS rule in WCAG
    • Accordions - things to look out for
    • ARIA (Accessible Rich Internet Applications)
  • Document accessibility
    • Creating accessible PDFs
    • What agencies are required to do when publishing reports online
  • Accessible forms
    • Deep dive: building accessible forms
    • Creating accessible form
    • Epub3 forms
    • Fillable PDF forms
    • Accessible date pickers
    • Using ARIA to make error message accessible
    • Error messages on forms
    • Tab behaviour with fieldsets
Powered by GitBook
On this page
  • Question
  • Answer

Was this helpful?

  1. Technical accessibility

Accordions - things to look out for

PreviousJavascript - Clarifying the JS rule in WCAGNextARIA (Accessible Rich Internet Applications)

Last updated 5 years ago

Was this helpful?

Question

We’re looking to implement accordion functionality on our website. What do we need to look out for?

Answer

The things to watch out for are that:

  • it can be operated with a keyboard — so people can tab onto it and then press enter to open and close it, and

  • the titles behave like links — so that if people don’t know what an accordion is they can still click it as if it’s a link

  • our accordion titles are actually headings for the content underneath them, even though they look like links.

We also used details/summary elements as this was more semantically correct.

http://www.w3schools.com/tags/tag_summary.asp