Main content

Debra Kyles

I am an Accessibility Engineer,  working with accessibility for about ten years. I have also worked as a UX Designer for about fifteen years. I’ve worked with governments, enterprise businesses, educational institutions and small IT shops.

A few highlights of my work:

  • ·        Helped the University of Minnesota in their efforts to make a PeopleSoft site accessible using a Javascript overlay.
  • ·        Prepared an Accessibility Approach and Plan document for a T-Mobile redesign.
  • ·        Helped Getwell Network make their hospital-based platform accessible.
  • ·        Trained staff at CalPERS (California Public Employee Retirement System) and the Legislative Data Center to test, validate and fix accessibility issues.
  • ·        Served as SME for the State of California EDD modernization project
  • ·        Served as accessibility expert for the National Institute of Standards and Technology to define standards for accessibility in cloud computing.

I love making the web a better place for the 20% of the population who are challenged with disabilities. By including this population in our design, copy and coding decisions, we make the world a more compassionate, empathetic place to live.

Characteristics

Superclass Role:

  • command

Related Concepts:

  • HTML link

See Related:

  • button

Supported States and Properties:

  • aria-expanded (state)

Inherited States and 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

Name From:

  • contents
  • author

Accessible Name Required:

  • True

An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.

A link or hyperlink is a HTML element that connects one web page to another. Using the HTML < a> tag, the pages are linked with the "href" attribute. Screen readers are customized to recognize < a> and inform the user of the link along with the link text. However, by the introduction of web 2.0 technologies, any HTML element can be made clickable. This means that a link between two pages can be made without using the < a> tag.

Due to this advanced style of coding, users of screen readers will not recognize the link and will ignore the content of that page. Users who use only the keyboard will not be able to focus on this element.

To bridge this gap, ARIA introduces link (role). In the < span> or < div> where you use the clickable functionality just add role=”link”. Now your screen reader will recognize the element as a link. To gain keyboard focus to this element, add the "tabindex" attribute.The look and feel of a link can be customized with CSS.

Example

<span role="link" tabindex="0" onClick="somefunction()">ARIA role with link</span>

If this is a native link in the host language (such as an HTML anchor with an href value), activating the link causes the user agent to navigate to that resource. If this is a simulated link, the web application author is responsible for managing navigation.

Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_LINK

UI Automation ControlType Property: 

  • HyperLink

UI Automation AriaRole Property: 

  • link

Characteristics

Superclass Role:

  • region

Subclass Roles:

  • directory
  • listbox
  • menu

Base Concept:

  • HTML ul
  • HTML ol

Required Owned Elements:

  • group → listitem
  • listitem

See Related:

  • listbox

Inherited States and 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

Name From:

  • author

A group of non-interactive list items.

Sometimes content developers want to put together few bulleted points. As per HTML semantics, any related elements having more than 3 items should be wrapped in HTML lists. Due to various reasons, HTML lists might not be possible. In such scenarios, aria list role can be used. In the < div> containing the items just add the role="list" and that should do the magic.

Lists contain children whose role is listitem, or elements whose role is group which in turn contains children whose role is listitem.

Syntax

<div role="list">List Items</div>

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_LIST

UI Automation ControlType Property: 

  • List

UI Automation AriaRole Property: 

  • list

Characteristics

Superclass Role:

  • list
  • select

Related Concepts:

  • HTML select
  • XForms select

See Related:

  • combobox
  • list

Required Owned Elements:

  • option

Supported States and Properties:

  • aria-multiselectable
  • aria-required

Inherited States and 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

Name From:

  • author

Accessible Name Required:

  • True

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

Listbox (role) is similar to a combobox role or a checkbox role. Unlike a combobox role, in listbox role the user can select more than one option.

Items within the list are static and, unlike standard HTML select elements, may contain images. List boxes contain children whose role is option.

To be keyboard accessible, authors should manage focus of descendants for all instances of this role.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_LIST

UI Automation ControlType Property: 

  • List

UI Automation AriaRole Property: 

  • listbox

Characteristics

Superclass Role:

  • section

Subclass Roles:

  • treeitem

Base Concept:

  • HTML li

Related Concepts:

  • XForms item

Required Context Role:

  • group
  • list

Supported States and Properties:

  • aria-level
  • aria-posinset
  • aria-setsize

Inherited States and 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

Name From:

  • contents
  • author

Accessible Name Required:

  • True

A single item in a list or directory.

When list (role) is used for providing the list, content authors should use listitem (role) for the items in the list (li). Even lists within the lists also can be used with aria. To inform the level of list item, use aria-level attribute. A first level list item can use aria-level=”1”, second level list items (lists within the lists) use aria-level=”2” etc.

Authors must ensure that elements with role listitem are contained in, or owned by, an element with the role list or group.

Syntax

<div role="list">
<span role="listitem" aria-level="1">Option 1</span>
<span role="listitem" aria-level="1">Option 2
<span role="listitem" aria-level="2">Option 2 a </span>
<span role="listitem" aria-level="2">Option 2b</span>
<span role="listitem" aria-level="2">Option 2c</span>
</span>
<span role="listitem" aria-level="1">Option 3</span>
</div>

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_LISTITEM

UI Automation ControlType Property: 

  • ListItem

UI Automation AriaRole Property: 

  • listitem

Characteristics

Superclass Role:

  • region

See Related:

  • marquee

Inherited States and 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

Name From:

  • author

Accessible Name Required:

  • True

Implicit Value for Role:

  • Default for aria-live is polite.

A type of live region where new information is added in meaningful order and old information may disappear.

In a live region of the page where new content is added and the added content is intimated to the user the log (role) is used. Usually in applications such as chat widgets, the new message that arrives should be intimated to the user. This should follow a sequential order.

Elements with the role log have an implicit aria-live value of polite. However if the updated content should be intimated to the user interrupting the existing work aria-live can be set to assertive. When entire live region should be intimated to the user set aria-atomic="true".

Examples include chat logs, messaging history, game log, or an error log. In contrast to other live regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_PANE

UI Automation ControlType Property: 

  • Pane

UI Automation AriaRole Property: 

  • log

Characteristics

Superclass Role:

  • landmark

Inherited States and 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

Name From:

  • author

The main content of a document.

This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies. In HTML 5, the < main> tag identifies the main area of the page.

User agents should treat elements with the role of main as navigational landmarks.

Within any document or application, the author should mark no more than one element with the main role.

Note: Because document and application elements can be nested in the DOM, they may have multiple main elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

Syntax

<div role="main">
Main content goes here
</div>

Characteristics

Superclass Role:

  • section

See Related:

  • log

Inherited States and 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

Name From:

  • author

Accessible Name Required:

  • True

A type of live region where non-essential information changes frequently.

Common usages of marquee include stock tickers and ad banners. For informing the user about the live updates in a sequential order, use the log role. The primary difference between a marquee and a log is that logs usually have a meaningful order or sequence of important content changes.

Note: Elements with the role marquee maintain the default aria-live="off".

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_ANIMATION

UI Automation ControlType Property: 

  • Text

UI Automation AriaRole Property: 

  • marquee

Characteristics

Superclass Role:

  • section

Inherited States and 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

Name From:

  • author

Children Presentational:

  • True

Content that represents a mathematical expression.

Content with the role math is intended to be marked up in an accessible format such as MathML, or with another type of textual representation such as TeX or LaTeX, which can be readily converted to an accessible format by assistive technologies.

This role provides a hook whereby a plug-in mechanism can provide multi-modal access to compliant MathML, as well as enabling support for MathML in "mainstream" user agents.

While it is inappropriate to use an image of a mathematical expression in the math role, there exists a significant amount of legacy content where images are used to represent mathematical expressions. For purposes of repair, if an image has been used to represent a mathematical expression, the text equivalent defined for that image should be valid MathML or TeX. Such images should also be labeled by text that describes the mathematical expression as it might be spoken, using the aria-describedby attribute.

MathML example:

<div role="math" aria-label="6 divided by 4 equals 1.5">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
      <mn>6</mn>
      <mn>4</mn>
    </mfrac>
    <mo>=</mo>
    <mn>1.5</mn>
  </math>
</div>

TeX example:

<div role="math" aria-label="6 divided by 4 equals 1.5">
  \frac{6}{4}=1.5
</div>

Characteristics

Superclass Role:

  • list
  • select

Subclass Roles:

  • menubar

Related Concepts:

  • DTB sidebar
  • XForms select
  • JAPI MENU

Required Owned Elements:

  • group → menuitemradio
  • menuitem
  • menuitemcheckbox
  • menuitemradio

Inherited States and 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

Name From:

  • author

Accessible Name Required:

  • True

A type of widget that offers a list of choices to the user.

A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application. Each menu has a list of items or choices which are marked with role menu item. If the menus are displayed horizontally, the horizontal appearance can be considered as menu bar and the role menubar can be assigned.

Menu (role) will be owned by the menubar role.

To be keyboard accessible, authors should manage focus of descendants for all instances of this role.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_MENUPOPUP

UI Automation ControlType Property: 

  • Menu

UI Automation AriaRole Property: 

  • menu

Characteristics

Superclass Role:

  • menu

Related Concepts:

  • toolbar

Inherited States and 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

Name From:

  • author

A presentation of menu that usually remains visible and is usually presented horizontally.

The menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors should ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface.

To be keyboard accessible, authors should manage focus of descendants for all instances of this role.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_MENUBAR

UI Automation ControlType Property: 

  • MenuBar

UI Automation AriaRole Property: 

  • menubar
Page 11 of 18