component
Divider
also called separator (aria-apg), rule, horizontal rule, hr
A thin line separating groups of content, decorative when the grouping is already clear and semantic when it is the only cue.
A divider groups by separating. The line itself carries no information: what it does is tell a reader that the things above it and the things below it are two sets rather than one run. That makes it a grouping device with a negative signature, and it explains why dividers are so easy to overuse. A rule between every row does not create groups, it creates a table of one-item groups, and the eye stops reading the lines as meaningful at about the third one.
Space does the same job, usually better. If a generous gap already makes the grouping obvious, the line is decoration and can be deleted with nothing lost. The line earns its place where space is scarce (a dense menu, a settings list, a toolbar) or where the surface cannot afford the room that a convincing gap would take.
Whether a divider means anything to assistive technology is a decision, not an
accident. Where the line is the only signal that the grouping exists, it should
be exposed (role="separator", or an <hr>); where a heading, a landmark or a
labelled group already says the same thing, the line is presentational and should
be hidden, so a screen reader is not read a series of separators nobody needed.
Two variants show up often enough to name: an inset divider, which stops short of the container edge to align with the content rather than the box, and a vertical one, which needs an explicit orientation because assistive technology cannot see which way a one-pixel box is pointing.
Which word?
| If you want | say |
|---|---|
| a line that groups content by separating it | divider |
| the colour of borders and dividers as a named role | outline color |
| the draggable bar between two resizable panes | splitter |
| shading every other row of a table | zebra striping |
| the shared line every row's text starts on | keyline |
Implementations
Specimens illustrate the concept; for production use, start here.
| fluent | Divider |
| base-ui | Separator |
| polaris | Divider |