Tag: Bootstrap

webTiger Logo Wide
  • Accessibility in Rich Internet Applications (ARIA)

    Have you been working with Bootstrap, or viewing HTML examples where tags are littered with aria- ‘something’ attributes and wondered what all the fuss was about? Well, they refer to W3C’s Web Accessibility Initiative (WAI) and relate to making websites more accessible to those with disabilities (such as sight disorders, for example.)

    More specifically, ARIA attributes aim to make Rich Internet Applications (RIA) more accessible – hence ARIA, where the first letter in the acronym is ‘Accessible’. This article aims to provide both an overview of ARIA and quick reference guide of its roles and attributes.

    In this article:

    Background

    RIA websites often employ techniques, or may contain content, that can make it difficult to navigate using assistive technologies (such as screen readers.) This is due to the way that the Internet has evolved, from simple, static HTML pages to complex, dynamic websites that mimic feature rich computer applications and have multi-tier menus, dynamic content display, video, animated graphics, periodic or event driven partial-page updates, etc.

    Also, as time passes, more and more functionality is being provided via Web front-ends over native per-device user interface applications. A lot of mobile device applications that don’t rely on optimised graphics performance are now being developed cross-platform as Web user interfaces (UI), sitting atop a runtime (such as Phone Gap), and bundled into an application construct. Those Web application UIs can often be skinned just using CSS classes to meet different operating system material designs with little extra work required. Providing this single, cohesive, approach to the user experience (UX) across devices/hosts can be beneficial both from a development cost and an end-user perspective, and hence RIAs have taken off – especially with mobile friendly toolkits like Bootstrap that allow Web applications to scale across devices. RIAs in a client-server environment are also likely to be easy to migrate to the cloud, since they’ll normally be hosted server-side with the ‘client’ being a web browser that could be running on any number of platforms.

    On the back of the RIA revolution, numerous Web Frameworks/Libraries have been designed and developed (such as jQuery, AngularJS, etc.) to make authoring of RIA websites easier and more feature rich. These have brought about ‘single page’ websites where rendering of content has become so dynamic it can represent an entire multi-page website or web application. To compound matters, traditional RIA solutions that largely resolved requests to web page content server-side have given way to a raft of JavaScript APIs that perform a lot more dynamic layout AFTER the web page has loaded in the browser. With this level of complexity being embedded into pages, it is no wonder that something had to be done to address issues it introduces for users who cannot enjoy the full RIA experience due to limitations of their viewers (e.g. blind people using screen readers.)

    (Back to Top)

    Introduction to ARIA

    NOTE: This guide is based on WAI-ARIA 1.0. Later versions may contain extensions or addendums to the initial major version.

    WAI-ARIA (or just ARIA) aims to establish a set of metadata descriptions that help assistive technologies to interpret, and present a suitable view of, a Web Document Object Model (DOM). While those viewers could traverse the DOM directly and try to resolve context themselves, ARIA promotes mapping of context through the user agent’s accessibility provider. This has the advantage of inferring that complex accessibility requirements will be handled by the host (i.e. the operating system) instead of bulking out the viewer/browser with unnecessary, duplicated, behaviours.

    ARIA relies on viewer/browser support to alter how Web application features are exposed to accessibility handlers, and also on the assistive technologies being used to consume the enhanced information available to convey semantic and interaction data to the user.

    Before proceeding to investigate how ARIA might be declared in HTML documents, it is worth noting that ARIA promotes proper use of language semantics in preference to using aria- attributes where possible. For example, it is better to use the <h2> tag than attempting to use an alternative tag, such as <span> or <div>, with a custom CSS class and the ‘role=heading’ attribute.

    ARIA relies on the concept of roles, states and properties. Roles describe the context of use of an element or group of elements (e.g. the ‘heading’ role implies the element represents the title of a region of content.) States and Properties both provide metadata descriptions of contextual aspects or behaviours associated with a role (e.g. aria-labellby=”myTitle”, would declare that another element with an ID of ‘myTitle’ provides the label for the current element.) A key differentiator between properties and states is how transient they are in nature. For example, aria-labelledBy=”myLabel” is likely to remain statically defined, and as such it is a property, but aria-checked=”true” may change at any time in response to the user de-selecting the check-box option so it would be considered a transient state. In most cases developers can simply think of both properties and states as descriptive attributes they associate with a role, but it is worth noting the delineation since it is defined in the WAI-ARIA specification to differentiate between active and passive behaviours.

    (Back to Top)

    Summary of Roles

    Roles are defined as a hierarchy of inherited definitions. At the top level are abstract roles that shouldn’t be used in web pages but it is useful to be aware of them for informative purposes (for example, region is inherited by alert, and alert is inherited by alertdialog.)

    NOTE: Names and descriptions reproduced based on the information provided here.

    Role Name Description
    command A form of widget that performs an action but does not receive input data.
    composite A widget that may contain navigable descendants or owned children.
    input A generic type of widget that allows user input.
    landmark A region of the page intended as a navigational landmark.
    range An input representing a range of values that can be set by the user.
    roletype The base role from which all other roles in this taxonomy inherit.
    section A renderable structural containment unit in a document or application.
    sectionhead A structure that labels or summarizes the topic of its related section.
    select A form widget that allows the user to make selections from a set of choices.
    structure A document structural element.
    widget An interactive component of a graphical user interface (GUI).
    window A browser or application window.

    The remaining, applicable, roles are defined in sub-sets as widget-based, structure-based or landmark-based roles.

    Widget-Based Roles

    Role Name Description Additional Information
    alert A message with important, and usually time-sensitive, information. See related alertdialog and status. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    alertdialog A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See related alert and dialog. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    button An input that allows for user-triggered actions when clicked or pressed. Properties: aria-expanded (state), aria-pressed (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    checkbox A checkable input that has three possible values: true, false, or mixed. Properties: aria-checked (state, required), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    dialog 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. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    gridcell A cell in a grid or treegrid. Required parent role: row.
    Properties: aria-readonly, aria-required, aria-selected (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    link An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    log A type of live region where new information is added in meaningful order and old information may disappear. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    marquee A type of live region where non-essential information changes frequently. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    menuitem An option in a set of choices contained by a menu or menubar. Required parent role: group, menu, menubar.
    Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    menuitemcheckbox A menuitem with a checkable state whose possible values are true, false, or mixed. Required parent role: menu, menubar.
    Properties: aria-atomic, aria-busy (state), aria-checked (state, required), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    menuitemradio A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time. Required parent role: group, menu, menubar.
    Properties: aria-atomic, aria-busy (state), aria-checked (state, required), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-posinset, aria-relevant, aria-selected (state), aria-setsize
    option A selectable item in a select list. Required parent role: listbox.
    Properties:
    aria-checked (state), aria-posinset, aria-selected (state), aria-setsize, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    progressbar An element that displays the progress status for tasks that take a long time. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext
    radio A checkable input in a group of radio roles, only one of which can be checked at a time. Properties: aria-atomic, aria-busy (state), aria-checked (state, required), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-posinset, aria-relevant, aria-selected (state), aria-setsize
    scrollbar A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. Properties: aria-controls (required), aria-orientation (required), aria-valuemax (required), aria-valuemin (required), aria-valuenow (required), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuetext
    slider A user input where the user selects a value from within a given range. Properties: aria-valuemax (required), aria-valuemin (required), aria-valuenow (required), aria-orientation, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuetext
    spinbutton A form of range that expects the user to select from among discrete choices. Properties: aria-valuemax (required), aria-valuemin (required), aria-valuenow (required), aria-required, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant, aria-valuetext
    status A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    tab A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. Required parent role: tablist.
    Properties: aria-selected (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    tabpanel A container for the resources associated with a tab, where each tab is contained in a tablist. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    textbox Input that allows free-form text as its value. Properties: aria-activedescendant, aria-autocomplete, aria-multiline, aria-readonly, aria-required, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    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. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    tooltip A contextual popup that displays a description for an element. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    treeitem An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitem elements. Required parent role: group, tree.
    Properties: aria-atomic, aria-busy (state), aria-checked (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-level, aria-live, aria-owns, aria-posinset, aria-relevant, aria-selected (state), aria-setsize
    combobox (composite) A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. Required owned elements: listbox, textbox.
    Properties: aria-expanded (state, required), aria-autocomplete, aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    grid (composite) A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table. Required owned elements: row, rowgroup → row.
    Properties: aria-level, aria-multiselectable, aria-readonly, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    listbox (composite) A widget that allows the user to select one or more items from a list of choices. See related combobox and list. Required owned elements: option.
    Properties: aria-multiselectable, aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    menu (composite) A type of widget that offers a list of choices to the user. Required owned elements: group → menuitemradio, menuitem, menuitemcheckbox, menuitemradio.
    Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed , (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    menubar (composite) A presentation of menu that usually remains visible and is usually presented horizontally. Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    radiogroup (composite) A group of radio buttons. Required owned elements: radio.
    Properties:
    aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state),
    aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    tablist (composite) A list of tab elements, which are references to tabpanel elements. Required owned elements: tab.
    Properties: aria-level, aria-multiselectable, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    tree (composite) A type of list that may contain sub-level nested groups that can be collapsed and expanded. Required owned elements: group → treeitem, treeitem.
    Properties: aria-multiselectable, aria-required, aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    treegrid A grid whose rows can be expanded and collapsed in the same manner as for a tree. Required owned elements: row.
    Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-level, aria-live, aria-multiselectable, aria-owns, aria-readonly, aria-relevant, aria-required

    Structure-Based Roles

    Role Name Description Additional Information
    article Properties: A section of a page that consists of a composition that forms an independent part of a document, page, or site. aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    columnheader A cell containing header information for a column. Properties: aria-sort, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-readonly, aria-relevant, aria-required, aria-selected (state)
    definition A definition of a term or concept. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    directory A list of references to members of a group, such as a static table of contents. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    document A region containing related information that is declared as document content, as opposed to a web application. Properties: aria-expanded (state), aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    group A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    heading A heading for a section of the page. Properties: aria-level, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    img A container for a collection of elements that form an image. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    list A group of non-interactive list items. See related listbox. Required owned elements group → listitem, listitem.
    Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    listitem A single item in a list or directory. Required parent role: group, list.
    Properties: aria-level, aria-posinset, aria-setsize, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    math Content that represents a mathematical expression. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    note A section whose content is parenthetic or ancillary to the main content of the resource. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    presentation An element whose implicit native role semantics will not be mapped to the accessibility API. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    region A large perceivable section of a web page or document, that is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    row A row of cells in a grid. Required parent role: grid, rowgroup, treegrid.
    Required owned elements: columnheader, gridcell, rowheader.
    Properties: aria-level, aria-selected (state), aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    rowgroup A group containing one or more row elements in a grid. Require parent role: grid.
    Required owned elements: row.
    Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    rowheader A cell containing header information for a row in a grid. Required parent role: row.
    Properties: aria-sort, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-readonly, aria-relevant, aria-required, aria-selected (state)
    separator A divider that separates and distinguishes sections of content or groups of menuitems. Properties: aria-expanded (state), aria-orientation, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    toolbar A collection of commonly used function buttons or controls represented in compact visual form. Properties: aria-activedescendant, aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant

    Landmark-Based Roles

    Role Name Description Additional Information
    application A region declared as a web application, as opposed to a web document. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    banner A region that contains mostly site-oriented content, rather than page-specific content. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    complementary 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. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    contentinfo A large perceivable region that contains information about the parent document. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    form A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    main The main content of a document. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    navigation A collection of navigational elements (usually links) for navigating the document or related documents. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant
    search A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. Properties: aria-atomic, aria-busy (state), aria-controls, aria-describedby, aria-disabled (state), aria-dropeffect, aria-expanded (state), aria-flowto, aria-grabbed (state), aria-haspopup, aria-hidden (state), aria-invalid (state), aria-label, aria-labelledby, aria-live, aria-owns, aria-relevant

    (Back to Top)

    Summary of Properties and States

    NOTE: Names and descriptions reproduced based on the information provided here.

    Global Attributes

    Property Name Description
    aria-atomic Expected values: true, false.
    Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
    aria-busy (state) Expected values: true / false.
    Indicates whether an element, and its subtree, are currently being updated.
    aria-controls Expects a space delimited list of one or more control IDs.
    Identifies the element (or elements) whose contents or presence are controlled by the current element. For example, tabs that control the display of associated tab panels.
    aria-describedby Identifies the element (or elements) that describes the object. NOTE: This differs from aria-labelledby in that labels are expected to be concise and descriptions can provide more explanatory information.
    aria-disabled (state) Expected values: true, false.
    Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable
    aria-dropeffect Expects a space delimited list of tokens.
    Allowed tokens are: copy, move, link, execute, popup, none (default). For descriptions of each token, see the WAI-ARIA section here.
    Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application.
    aria-flowto Expects a space delimited list of one or more control IDs.
    Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
    aria-grabbed (state) Expected values: true, false, undefined.
    Indicates an element’s “grabbed” state in a drag-and-drop operation.
    aria-haspopup Expected values: true, false.
    Indicates that the element has a popup context menu or sub-level menu.
    aria-hidden (state) Expected values: true, false.
    Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
    aria-invalid (state) Expects a space delimited list of tokens.
    Allowed tokens are: grammar, spelling, true, false. For descriptions of each token, see the WAI-ARIA section here.
    Indicates the entered value does not conform to the format expected by the application.
    aria-label Defines a string value that labels the current element. If the label text is visible on screen in another element, authors should use aria-labelledby on the associated data element and should not use this property.
    aria-labelledby Identifies the element (or elements) that labels the current element. NOTE: This differs from aria-describedby in that labels are expected to be concise identifiers (e.g. of fields.)
    aria-live Expects a space delimited list of tokens.
    Allowed tokens are: off (default), polite, assertive. For descriptions of each token, see the WAI-ARIA section here.
    Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
    aria-owns Expects a space delimited list of one or more control IDs.
    Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
    aria-relevant Expects a space delimited list of tokens.
    Allowed tokens are: additions, removals, text, all. Default value is “additions text”. For descriptions of each token, see the WAI-ARIA section here.
    Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region.

    Widget Attributes

    Property Name Description
    aria-autocomplete Expects a space delimited list of tokens.
    Allowed tokens are: inline, list, both, none (default).
    For descriptions of each token, see the WAI-ARIA section here.
    Indicates whether user input completion suggestions are provided.
    aria-checked (state) Expected values: true, false, mixed, undefined (default). (Mixed allows for tri-state values.)
    Indicates the current “checked” state of checkboxes, radio buttons, and other widgets.
    aria-disabled (state) Expected values: true, false (default).
    Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
    aria-expanded (state) Expected values: true, false, undefined (default).
    Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
    aria-haspopup Expected values: true, false (default).
    Indicates that the element has a popup context menu or sub-level menu.
    aria-hidden (state) Expected values: true, false (default).
    Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
    aria-invalid (state) Expects a space delimited list of tokens.
    Allowed tokens are: grammar, spelling, true, false. For descriptions of each token, see the WAI-ARIA section here.
    Indicates the entered value does not conform to the format expected by the application.
    aria-label Defines a string value that labels the current element. If the label text is visible on screen in another element, authors should use aria-labelledby on the associated data element and should not use this property.
    aria-level Expects a numeric integer value greater than zero.
    Defines the hierarchical level of an element within a structure. Level numbers should increase with nesting.
    aria-multiline Expected values: true, false (default).
    Indicates whether a text box accepts multiple lines of input or only a single line
    aria-multiselectable Expected values: true, false (default).
    Indicates that the user may select more than one item from the current selectable descendants.
    aria-orientation Expects one of the following token values: vertical, horizontal (default).
    Indicates whether the element and orientation is horizontal or vertical.
    aria-pressed (state) Expected values: true, false, mixed, undefined (default). (Mixed allows for tri-state values.)
    Indicates the current “pressed” state of toggle buttons.
    aria-readonly Expected values: true, false (default).
    Indicates that the element is not editable, but is otherwise operable.
    aria-required Expected values: true, false (default).
    Indicates that user input is required on the element before a form may be submitted.
    aria-selected (state) Expected values: true, false, undefined (default).
    Indicates the current “selected” state of various widgets.
    aria-sort Expects one of the following tokens: ascending, descending, other, none (default). (“Other” implies a sorting algorithm other than ascending or descending has been applied.)
    Indicates if items in a table or grid are sorted in ascending or descending order.
    aria-valuemax Expects a decimal or integer numeric value.
    Defines the maximum allowed value for a range widget.
    aria-valuemin Expects a decimal or integer numeric value.
    Defines the minimum allowed value for a range widget.
    aria-valuenow Expects a decimal or integer numeric value.
    Defines the current value for a range widget
    aria-valuetext Defines the human readable text alternative of aria-valuenow for a range widget.

    Live-Region Attributes

    Property Name Description
    aria-atomic Expected values: true, false.
    Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
    aria-busy (state) Expected values: true / false.
    Indicates whether an element, and its subtree, are currently being updated.
    aria-live Expects a space delimited list of tokens.
    Allowed tokens are: off (default), polite, assertive. For descriptions of each token, see the WAI-ARIA section here.
    Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
    aria-relevant Expects a space delimited list of tokens.
    Allowed tokens are: additions, removals, text, all. Default value is “additions text”. For descriptions of each token, see the WAI-ARIA section here.
    Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region.

    Drag-Drop Attributes

    Property Name Description
    aria-dropeffect Expects a space delimited list of tokens.
    Allowed tokens are: copy, move, link, execute, popup, none (default). For descriptions of each token, see the WAI-ARIA section here.
    Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application.
    aria-grabbed (state) Expected values: true, false, undefined.
    Indicates an element’s “grabbed” state in a drag-and-drop operation.

    Relationship Attributes

    Property Name Description
    aria-activedescendant Expects a control ID.
    Identifies the currently active descendant of a composite widget.
    aria-controls Expects a space delimited list of one or more control IDs.
    Identifies the element (or elements) whose contents or presence are controlled by the current element. For example, tabs that control the display of associated tab panels.
    aria-describedby Identifies the element (or elements) that describes the object. NOTE: This differs from aria-labelledby in that labels are expected to be concise and descriptions can provide more explanatory information.
    aria-disabled (state) Expected values: true, false.
    Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable
    aria-flowto Expects a space delimited list of one or more control IDs.
    Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
    aria-labelledby Identifies the element (or elements) that labels the current element. NOTE: This differs from aria-describedby in that labels are expected to be concise identifiers (e.g. of fields.)
    aria-owns Expects a space delimited list of one or more control IDs.
    Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
    aria-posinset Expects a numeric integer value.
    Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
    aria-setsize Expects a numeric integer value.
    Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

    (Back to Top)

    ARIA and Bootstrap

    The Bootstrap API website has a brief section on Accessibility, and most of the examples on their website include aria- attributes in tags definitions. Bootstrap also provides a few CSS classes to support assistive technologies. These are ‘sr-only’ (for displaying content only to screen readers), and ‘sr-only-focusable’ which will ensure a link becomes visible once focus is on it (for sighted keyboard-only users.)

    Beyond that, you need to rely on ARIA roles and attributes to provide accessibility features.

    (Back to Top)

  • Replacing ASP.NET AJAX Control Toolkit With Bootstrap and jQuery UI in MVC

    Many ASP.NET 2 projects will have utilised the AJAX Control Toolkit for more dynamic behaviours and the performance gains of partial page refreshes. A common issue with having used that toolkit when upgrading an ASP.NET 2 project to ASP.NET MVC is how to replicate the controls it offered without adding a lot of additional work to the upgrade project.

    (more…)
  • Modifying Bootstrap Styles – The Right Way

    ASP.NET MVC web projects include the Bootstrap framework by default. If the styles aren’t to your liking ‘out-of-the-box’ then you can customise the look and feel quite easily by hacking the Bootstrap CSS file directly, but this isn’t necessarily the best way to go.

    (more…)
  • Using Bootstrap

    This article aims to introduce using Bootstrap in scenarios where an IDE (like Visual Studio) hasn’t set up a complete starting point for you, or where you want to control exactly what your page layout will be. This is as much my own aid memoir as it is an article in its own right to help others.

    (more…)
  • Web Development Cheat-Sheet

    This is my web development cheat-sheet to make things easier when creating new web pages, etc. It should be considered a living document but the publish date will be kept as specified in its first edition so it doesn’t regularly top the articles list.

    (more…)