This accordion is designed to work for both sighted and non-sighted users. Non-visual feedback is given to the user by use of aria attributes, declaring when each accordion is in an open or closed state. The accordion is also operable via the keyboard by using the tab key, return and space keys.
Focus states use bright inverted colours as well as an outline so are visually obvious. Hover states have been indicated by a change of colour as well as a text underline.
It has been designed with progressive enhancement in mind, so if javascript is turned off or doesn’t load for whatever reason, the accordions appear as expanded content with headings and paragraphs.
Accordion heading 1
Accordion content to be expanded
Accordion heading 2
Accordion content to be expanded
Cards
This component has been designed as a flexible way of presenting content and works to chuck content, or provide an overview of hyperlinked content.
A hyperlink can be added to the card heading, which makes the entire card clickable through use of javascript, rather than the whole card being wrapped with anchor tags, which prevents text from being highlighted or copied by the user. The card accepts a flexible heading (h2 - h6), body text, as well as an optional image, date, and hyperlink.
If javascript is turned off or doesn’t load for whatever reason, the header is still clickable and operable using the tab key, although the rest of the card is no longer clickable.