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

Is Abstract:

  • True

Superclass Role:

  • widget

Subclass Roles:

  • progressbar
  • scrollbar
  • slider
  • spinbutton

Supported States and Properties:

  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-valuetext

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:

  • author

An input representing a range of values that can be set by the user.

Note: range is an abstract role used for the ontology. Authors are instructed not to use this role in content.

Characteristics

Superclass Role:

  • section

Subclass Roles:

  • alert
  • article
  • grid
  • landmark
  • list
  • log
  • status
  • tabpanel

Related Concepts:

  • HTML Frame
  • Device Independence Glossary perceivable unit
  • 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

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.

A region (role) is assigned to the portion of the page which cannot be marked with landmark roles, or a section of a large page which is important to notify to the user. Along with the region (role) an accessible name should be provided for the container that holds it. An accessible name can be provided using the aria-label property.

If the accessible name is not provided, screen readers will announce "region start" and "region end" without intimating which region is started and which region is ended. A region (role) is similar to a < section> tag in HTML 5.

When defining regions of a web page, authors are advised to consider using standard document landmark roles. If the definitions of these regions are inadequate, authors can use the region role and provide the appropriate accessible name.

Syntax

<div role="region" aria-label="live status"> 
</div>

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_PANE

UI Automation ControlType Property: 

  • Pane

UI Automation AriaRole Property: 

  • region

Characteristics

Is Abstract:

  • True

Subclass Roles:

  • structure
  • widget
  • window

Related Concepts:

  • XHTML role
  • HTML link (rel & rev)
  • Dublin Core type

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

The base role from which all other roles in this taxonomy inherit.

Properties of this role describe the structural and functional purpose of objects that are assigned this role (known in RDF terms as "instances"). A role is a concept that can be used to understand and operate instances.

Note: roletype is an abstract role used for the ontology. Authors are instructed not to use this role in content.

Characteristics

Superclass Role:

  • group
  • widget

Base Concept:

  • HTML tr

Required Context Role:

  • grid
  • rowgroup
  • treegrid

Required Owned Elements:

  • columnheader
  • gridcell
  • rowheader

Supported States and Properties:

  • aria-level
  • aria-selected (state)

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:

  • contents
  • author

A row of cells in a grid.

A row (role) is assigned for the cells of a grid that are arranged in a row. Ensure that the row is owned by rowgroup, grid or treegrid. The grid cells are owned by role.

In a treegrid, authors may mark rows as expandable, using the aria-expanded attribute to indicate the present status. This is not the case for an ordinary grid, in which the aria-expanded attribute is not present.

Authors must ensure elements with role row are contained in, or owned by, an element with the role grid, rowgroup, treegrid.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_ROW

UI Automation ControlType Property: 

  • DataItem

UI Automation AriaRole Property: 

  • row

Characteristics

Superclass Role:

  • group

Base Concept:

  • HTML thead
  • HTML tfoot
  • HTML tbody

Required Context Role:

  • grid

Required Owned Elements:

  • row

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:

  • contents
  • author

A group containing one or more row elements in a grid.

A rowgroup role is assigned to the container that holds a group of rows. A rowgroup is owned by a grid and contains rows.

The rowgroup role establishes a relationship between owned row elements. It is a structural equivalent to the thead, tfoot, and tbody elements in an HTML table element.

Authors must ensure elements with role rowgroup are contained in, or owned by, an element with the role grid.

Note: The rowgroup role exists, in part, to support role symmetry in HTML, and allows for the propagation of presentation inheritance on HTML table elements with an explicit presentation role applied.

Note: This role does not differentiate between types of row groups (e.g., thead vs. tbody), but an issue has been raised for WAI-ARIA 2.0.

Characteristics

Superclass Role:

  • input
  • range

Required States and Properties:

  • aria-controls
  • aria-orientation
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow

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
  • aria-valuetext

Name From:

  • author

Accessible Name Required:

  • False

Children Presentational:

  • True

Implicit Value for Role:

  • Default for aria-orientation is vertical.

A graphical object that controls the scrolling of content within a viewing area.

A scrollbar is used when the content is larger than the viewing area.  In such situations, a scroll bar is provided to allow the users to scroll either vertically or horizontally to view the remaining content.

To notify screen reader users about the existence of a scrollbar on the page, the scrollbar role is used. Since the scrollbar will have a viewable area on both sides i.e. left and right for horizontal scroll, top and bottom for a vertical scroll, minimum and maximum scrollable area should be intimated to the user with aria-valumin and aria-valuemax notifying the current value with aria-valuenow. Aria-orientation property can be used to notify the user about the direction of the scroll.

A scrollbar represents the current value and range of possible values via the size of the scrollbar and position of the thumb with respect to the visible range of the orientation (horizontal or vertical) it controls. Its orientation represents the orientation of the scrollbar and the scrolling effect on the viewing area controlled by the scrollbar. It is typically possible to add or subtract to the current value by using directional keys such as arrow keys.

Authors must set the aria-controls attribute on the scrollbar element to reference the scrollable area it controls.

Note: Assistive technologies generally will render the value of aria-valuenow as a percent of the range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified. It is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation.

Characteristics

Superclass Role:

  • landmark

See Related:

  • form

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 landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

The group of elements that combine together to form a search functionality can be marked with a search role. A search role is a portion within a navigation panel which is marked with a navigation role. A search role is similar to a form role.

A search region may be a mix of host language form controls, scripted controls, and hyperlinks.

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

Syntax

<div role="search">
<label for="search">Search Site</label>
<input type="text" id=”search” title="Search within Site" />
<input type="button" onclick="search()" value="search" />
</div>

Characteristics

Is Abstract:

  • True

Superclass Role:

  • structure

Subclass Roles:

  • definition
  • gridcell
  • group
  • img
  • listitem
  • marquee
  • math
  • note
  • region
  • tooltip

Related Concepts:

  • DTB frontmatter
  • DTB level
  • SMIL par

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

A renderable structural containment unit in a document or application.

Note: section is an abstract role used for the ontology. Authors are instructed not to use this role in content.

Characteristics

Is Abstract:

  • True

Superclass Role:

  • structure

Subclass Roles:

  • columnheader
  • heading
  • rowheader
  • tab

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

A structure that labels or summarizes the topic of its related section.

Note: sectionhead is an abstract role used for the ontology. Authors are instructed not to use this role in content.

Characteristics

Is Abstract:

  • True

Superclass Role:

  • composite
  • group
  • input

Subclass Roles:

  • combobox
  • listbox
  • menu
  • radiogroup
  • tree

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 form widget that allows the user to make selections from a set of choices.

Note: select is an abstract role used for the ontology. Authors are instructed not to use this role in content.

Page 13 of 18