Accordion
The accordion module allows you to create simple container rows for displaying labels and hidden content. Users click on the container labels to display further information held in the accordion content area.
Accordions are great for FAQs where a simple list of questions can be clicked to open up answers.
WCAG Compliance Tips
A img’s have Alt text & description
A Make sure the layout and sequence within the layout is logical
A Make sure the blocks can be navigated through keyboard only
AA Make sure the content is displayed without loss of information and without the need of two dimensional scrolling on small devices
AA Contrast ratio of text is at least 4.5:1
AA Text size should be at least 18pt (24px, 1.5em) OR text is able to be resized to %200 without losing web page functionality
AA Line spacing at least 1.5 times font size, paragraph spacing at least 2 times font size, letter spacing at least 0.12 font size and word spacing at least 0.16 font size
AA If the img is essential to understanding the content, the parts of the img that are essential have a contrast ratio of at least 3:1
AAA Unusual words have an accessible description
AAA Acronyms have an accessible description
AAA Lower reading level options are available if heading uses lots of big words
AAA Contrast ratio of text is at least 7:1
AAA Foreground and background colours can be selected by the user
AAA Width is no more than 80 characters
AAA Text is not justified (aligned to both left and right)
AAA Line spacing is at least 1.5 within paragraphs and paragraph spacing is at least 1.5 times the line spacing
AAA img’s of text are only used as decoration
