POSH Foundations

Building accessible interfaces with semantic HTML

Theme selector

Unit 5: Semantic HTML elements you may not know

Modal dialogs

Correctly coding a modal requires a lot of considerations:

  • When the modal opens, focus should be moved to the modal.
  • While the modal is open, focus should be trapped in the modal.
  • When the modal closes, focus should return to the triggering element.
  • Using the ESC key should close the modal.
  • Cannot tab to modal content while it is closed.
  • Modal should have a clear and descriptive title.
  • Should provide a visible and clear close button.

The dialog element

  • Native modal dialogs: no ARIA role needed.
  • Manages focus automatically when opened.
  • Locks background from interaction while open.
  • Simple API: .showModal() and .close().
  • Fully supported in modern browsers (Chrome, Firefox, Safari, Edge).
  • POSH-friendly.

Modal example

Settings

Adjust your preferences here.

The progress element

Show the progress toward completing a task.

70%

Note: There is no min attribute - min is always 0.

The meter element

A scalar value within a range or a fractional value.

at 50/100
at 15/100