Semantic HTML
Semantic HTML uses elements according to their meaning. A real button has properties that a styled text block does not acquire automatically.
Use elements for their intended purpose
Semantic HTML describes content and controls using appropriate HTML elements. Headings structure content, a link leads to a destination and a button performs an action. This gives browsers and assistive technologies information about the interface's meaning.
To save an address in an example portal, a button is appropriate. A visually identical div block does not automatically have that meaning or the usual keyboard behaviour. An a element with a suitable href is appropriate for navigating to the address list.
CSS controls presentation; making text visually large does not turn it into a heading. Semantic HTML is an important foundation, but alone it does not guarantee a fully accessible application. Labels, states and actual behaviour must also be appropriate.
Sources
Related terms
- ARIAARIA adds information about interface roles, states and properties for assistive technologies. The stated behaviour must actually be implemented.
- Screen readerA screen reader makes digital content available through speech or Braille. Meaningful structure and labels support understandable interaction.
- Keyboard operabilityKeyboard operability makes tasks possible without a mouse. Actions must be reachable through a clear sequence of controls.
- Focus orderFocus order determines the route through focusable elements. It should preserve meaning and operability, including during dynamic changes.
- Keyboard trapA keyboard trap leaves keyboard users stuck within a region. Deliberately containing focus in a dialog needs a keyboard-operable exit.
- Skip linkA skip link bypasses repeated navigation and leads to the main content. The destination must also work for subsequent keyboard navigation.
Articles on this topic
Design & UX with ASES
User experience, interfaces and brand presence