Semantics
A divider that separates and distinguishes sections of content or groups of menuitems.
Additional info from the ARIA specification
There are two types of separators: a static structure that provides only a visible boundary and a focusable, interactive widget that is also moveable. If a separator is not focusable, it is revealed to assistive technologies as a static structural element. For example, a static separator can be used to help visually divide two groups of menu items in a menu or to provide a horizontal rule between two sections of a page.
Authors MAY make a separator focusable to create a widget that both provides a visible boundary between two sections of content and enables the user to change the relative size of the sections by changing the position of the separator. A variable separator widget can be moved continuously within a range, whereas a fixed separator widget supports only two discrete positions. Typically, a fixed separator widget is used to toggle one of the sections between expanded and collapsed states.
If the separator is focusable, authors MUST set the value of aria-valuenow to a number reflecting the current position of the separator and update that value when it changes. Authors SHOULD also provide the value of aria-valuemin if it is not 0 and the value of aria-valuemax if it is not 100. If missing or not a number, the implicit values of these attributes are as follows:
In applications where there is more than one focusable separator, authors SHOULD provide an accessible name for each one.
Elements with the role separator have an implicit aria-orientation value of horizontal.
Abstract Role
StructureRepresents a non-interactive part of a page that organizes content into coherent units.
WidgetRepresents a focusable, interactive element.
May be an interactive Widget or non-interactive Structure, depending on the context.
Content Categories
Phrasing ContentAn element that typically appears inline and provides semantic meaning to text content.
Allowed Descendants
Phrasing Children Allowed
Note
Children Become Presentational
Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.
Usage
Allowed HTML elements
Implicit semantics
These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.
hr
Explicitly allowed
img[role=separator]
Elements that can have any role
abbr[role=separator]address[role=separator]b[role=separator]blockquote[role=separator]canvas[role=separator]cite[role=separator]code[role=separator]custom-element[role=separator]data[role=separator]del[role=separator]dfn[role=separator]div[role=separator]em[role=separator]figure[role=separator]i[role=separator]ins[role=separator]kbd[role=separator]mark[role=separator]output[role=separator]p[role=separator]pre[role=separator]q[role=separator]samp[role=separator]small[role=separator]span[role=separator]table[role=separator]tbody[role=separator]tfoot[role=separator]thead[role=separator]time[role=separator]u[role=separator]var[role=separator]