Forest Pathways

These rules can be very helpful but should be used when html tags dont work and remember quite often less is better as over use can create noise for screen readers.

alert

live region with important, and usually time-sensitive, information

application

A structure containing one or more focusable elements requiring user input

article

Independent section on a page

banner

A region that contains mostly site-oriented content, rather than page-specific content

button

An input that allows for user-triggered actions when clicked or pressed

cell

A cell in a tabular container

checkbox

A checkable input that has three possible values: true, false, or mixed

contentinfo

A large perceivable region that contains information about the parent document        

complimentary

A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

dialogue

A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.

document

A region containing related information that is declared as document content, as opposed to a web application

feed

A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list

Figure

A perceivable section of content that typically contains a graphical document, images, code snippets, or example text

form

A landmark region that contains a collection of items and objects that, as a whole, combine to create a form

grid

A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table

gridcell

A cell in a grid or treegrid

heading

A heading for a section of the page

img

A container for a collection of elements that form an image

link

list

A group of non-interactive list items

listitem

A single item in a list or directory

listbox

A widget that allows the user to select one or more items from a list of choices

log

Marquee

math

main

Main content of a page

menu

menubar

menuitem

menuitemcheckbox

menuitemradio

none

navigation

A collection of navigational elements (usually links) for navigating the document or related documents

note

option

presentation

progressbar

radio

radio group

region

Important area of page within main

row

A row of cells in a tabular container

rowgroup

A group containing one or more row elements in a grid

row header

scrollbar

search

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility

searchbox

separator

slider

spinbutton

status

switch

A type of checkbox that represents on/off values, as opposed to checked/unchecked values

tab

A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user

table

A section containing data arranged in rows and columns. The table role is intended for tabular containers which are not interactive

tablist

tabpanel

A container for the resources associated with a tab, where each tab is contained in a tablist

term

textbox

Input that allows free-form text as its value

timer

A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point

toolbar

A toolbar is a collection of commonly used controls, such as buttons or checkboxes, grouped together in a compact visual form. The toolbar role can be used to communicate the presence and purpose of such a grouping to screen reader users and can help reduce the number of tab stops for keyboard users. Only use the toolbar role to group 3 or more controls.

tooltip

tree

treegrid

treeitem