A working document for more consistent naming patterns and document structures.
The structural landmark roles make up the outer containers within a site. These are the building blocks and SHOULD contain attributes describing the role they serve.
- banner: site-oriented content may include the logo, primary navigation and site-specific search, ONE of these per page
- navigation: a collection of navigational elements for navigating the document or related documents
- form: yeah so, don't really think we need to explain this one
- search: search tool used to find documents related to the site, associated with an input, ONE of these per page
- main: the main content that is directly related to the page, ONE of these per page
- complementary: supporting section of content related to the document
- contentinfo: metadata that applies to the parent document and site, ONE of these per page
- region: block or element: a section of a page or document that may be included in a page summary
- article: block or element: section of a page that consists of a composition that forms an independent part of a document
- header: block or element: associated with header content of a component
- summary: block or element: summarizing the content of a component
- note: block or element: a section whose content is parenthetic or ancillary to the main content of the resource
- footer: block or element: hosting the contentinfo of a component
- directory: block or element: list of references to members of a group
- group: block or element: a set of UI objects not intended to be included in a page summary
- list: block or element: a group of non-interactive list items
- listitem: block or element: a single item as a descendent of a list
- heading: block: typically one of the h1-h6 elements
- figure: block or element: a container with an image and related contents
- img: element: a container for a collection of elements that form an image
- menubar: block or element: container for navigation similar to a desktop GUI
- menu: block or element: typically the ul or ol and a descendent of menubar
- menuitem: block: an option in a group contained by a menu or menubar
- separator: block or element: a divider that separates and distinguishes sections of content or groups of menuitems
- navbar: block or element: container for site level navigation
- nav: block or element: typically the ul or ol and a descendent of a navbar
- tabbar: block or element: container for tab navgiation
- tablist: block or element: typically the ul or ol and a descendent of a tabbar
- tab: block or element: an option in a group contained by a tablist
- tabpanel: block or element: a container for resources associated with tabs in a tablist
- tree: block or element: container for tree style navigation
- treeitem: block or element: an option in a group contained by a tree
- toolbar: block or element: a collection of commonly used function buttons represented in compact visual form
- link: block or element: a static element similar to the anchor tag
- button: block or element: an input that allows for discrete user-triggered actions
- dialog: block or element: a window designed to interrupt the application in order to prompt the user for a response
- alertdialog: block: a type of dialog that contains an alert
- status: block or element: a container whose content is advisory information
- alert: block or element: a specialized status message, with important and usually time-sensitve information
- progressbar: block: a component that displays progress
- slider: block or element: a component where a user selects a value within a given range
- tooltip: block: a contextual popup that displays a description for an object
- Links indicate specific WAI-ARIA roles
- If you only do one thing for accessibility, use structural landmarks roles
- When utilizing roles for blocks and elements, consult the spec and view the RDF model diagram
- There are many more document and widget roles not shown
- Aria states are super useful
