Code examples

Articles

• Budget calculator (form elements in table layout)

  Example of how to accessibly associate inputs, without labels, to table headers. All inside an accessible, responsive table.

• A table-like layout using buttons as cards

  Where the screen-reader output is in a different order to the visual.

• Radio button group example

  Using the minimum amount of ARIA.

• Accessible combobox input selects

  Also known as dropdown inputs (select).

• Sort-Code form example

  Sort code input methods examined

• Multi-level accordion, complex example

  Multiple levels of details/summary elements configured to allow only one details, of a set, to be open at a time.

• Simple dropdown (accordion)

  Simple accordion using Details and summary elements. Accessible out-of-the-box.

• Accessible non-rotating carousel

  This example concentrates on the functionality of the buttons and sections, and the DOM order layout, with the aim to present a robust, understandable, and operable interface to assistive technologies such as screen-readers..

• Accessible responsive table

  A table that not only scrolls horizontally when the content exceeds screen width, but also collapses to display cells vertically at smaller viewports.

• Accessible alt text for a complex image

  How to code a component to display a complex graphic with a detailed alternative text.

• How to disable a link in an accessible manner

  Outlines how to disable an anchor link in a way which works well with assistive technologies.

• Focusable elements - focus ring enhancements

  Enhancing the keyboard focus ring.

Codepens

The full list of Mike's Codepens

Gov.uk design system: Date input