A Role Attribute for HTML5

Introduction

Use cases for a role attribute for HTML5, include:

• accessibility,
• device adaptation,
• server-side processing, and
• complex data description.

Proposal for a "role" attribute for HTML5

Role Attribute Original Limited Proposal

• source: Gregory J. Rosmaita, post to w3c-wai-pf (2008-08-13)

Recently, the "curly brackets" hack of identifying a graphical image by its use or type by inserting a generic identifier / descriptor in curly braces as the @alt value for an IMG, has been added to the HTML5 working draft.

Not only is the "curly bracket" technique insufficient, it constitutes both an abuse of the alt attribute and does not satisfy the WCAG requirement that alt text contains a textual equivalent of the image.

Therefore, i would like PF to FORMALLY propose to the HTML WG that:

1. the "curly brackets" verbiage concerning alt be removed from the HTML5 draft;
2. that a role or type attribute be added to the IMG element's collection of attributes, which would provide the sort of generic information that the current draft of HTML5 specifies should be contained in curly brackets as the value for alt -- for example:
   • role="logo" or type="logo"
   • role="layout" or type="layout"
   • role="link" or type="link"
   • role="button" or type="button"
3. that alt remain what it was intended to be -- a REQUIRED terse textual equivalent for static images, in accordance with the usage guidance provided by WCAG, ATAG, and UAAG, and in line with the alt inherited from HTML 4.01. Furthermore, a conscientious author who desires to provide both human-parseable and machine-processable information about the IMG needs a means of communicating a textual equivalent to the user as well as a means of providing machine-parsable information.
4. if type is used to indicate the function of the image for machine processing, then the IMG MUST contain either aria-role="presentation" or aria-role="image"; if aria-role="presentation" is used, then the use of null alt constitutes valid use; if aria-role="image" is used, however, empty alt values or the lack of an alt attribute for the IMG are to be considered validation errors.

Additional Considerations

1. that a role attribute be added to HTML5 as a global attribute, in the same manner that title was introduced in HTML4.
2. that a pre-defined list of roles for individual elements -- in specific, the OBJECT, EMBED, and media-specific elements introduced in HTML5 -- be specified in HTML5 to provide a common baseline / consistency for authors, implementors and developers of "mainstream" and assistive technologies;

Comments on the Original role for HTML5 Proposal

Rob Burns (HTML WG member)

Thanks for initiating this issue. It's high priority in my view.

I think role is exactly the appropriate place for this data. As more and more photographs are taken with digital cameras it is very easy to tag them as role='photo' from the internal metadata of the image format. The only exceptions that would require manual role metadata assignment would be scanned photographs or photographs that are photographs taken with a digital camera but taken of a physical print format of another role. For example, someone might take a photograph of a diagram, a bar chart, or geographic map. To me these are the types of role an image might serve as (whether from a photograph or generated wholly from software). So some suggestions:

• photo
• geomap
• diagram
• chart
• mathexpression

Things like chart might also be broken down into greater detail like: orgchart, barchart, linegraph, etc.

A reference list of role keywords

XHTML role attribute module

• banner
• complementary
• contentinfo
• definition
• main
• navigation
• note
• search

consult also:

• XHTML Vocabulary namespace
• ARIA 1.0 Predefined Roles
• XHTML Role Modeule (Editor's Draft 2008-10-18)

Mac OS X AXRoles (accessibility api)

• button
• checkbox
• column
• growarea
• image
• menubutton
• outline
• popupbutton
• radiobutton
• row
• table

less relevant to HTML:

• drawer
• sheet
• systemwide
• tabgroup
• window
• unknown

TV Raman (Google, etc.)

Only change I'd recommend in what you describe for @role:

Rather than making it specific to the IMG tag, define a set of role values for image-type things, e.g. logo, pencil-drawing, picture, photo, whatever (a small handful) -- and add this to the legal values that might appear as the right-hand-side of role. This is more generally useful -- e.g. when you have a DIV that contains a bunch of "stuff" that is supposed to make up a logo. The attribute would still be usable on IMG as you describe -- it would just be usable more generally.

Role Attribute Genericized Proposal

Synchronization With the XHTML Role Vocabulary

XHTML Metainformation Vocabulary

The XHTML Metainformation Module defined as part of XHTML+RDFa specifies the following vocabulary items for use in the rel and rev attributes.

• alternate
  • alternate designates alternate versions for a resource.
• appendix
  • appendix refers to a resource serving as an appendix in a collection.
• bookmark
  • bookmark refers to a bookmark - a link to a key entry point within an extended document.
• cite
  • cite refers to a resource that defines a citation.
• chapter
  • chapter refers to a resource serving as a chapter in a collction.
• contents
  • contents refers to a resource serving as a table of contents.
• copyright
  • copyright refers to a copyright statement for the resource.
• glossary
  • glossary refers to a resource providing a glossary of terms.
• help
  • help refers to a resource offering help.
• icon
  • icon refers to a resource that represents an icon.
• index
  • index refers to a resource providing an index.
• last
  • last refers to the last resource in a collection of resources.
• license
  • license refers to a resource that defines the associated license.
• meta
  • meta refers to a resource that provides metadata.
• next
  • next refers to the next resource (after the current one) in an ordered collection of resources.
• p3pv1
  • p3pv1 refers to a P3P Policy Reference File P3P.
• prev
  • prev refers to a previous resource (before the current one) in an ordered collection of resources.
• role
  • role indicates the purpose of the resource. See the XHTML Role Vocabulary for roles in this vocabulary space, and the XHTML Role Module for information on extending the collection of roles.
• section
  • section refers to a resource serving as a section in a collection.
• stylesheet
  • stylesheet refers to a resource serving as a stylesheet for a resource.
• subsection
  • subsection refers to a resource serving as a subsection in a collection.
• start
  • start refers to the first resource in a collection of resources.
• up
  • up refers to a resource "above" in a hierarchically structured set.

Items from the XHTML Role Module

The following values are defined for use in the role attribute as specified in the XHTML Role Attribute Module:

• banner
  • banner contains the prime heading or internal title of a page.
• complementary
  • secondary indicates that the section supports but is separable from the main content of resource.
• contentinfo
  • contentinfo has meta information about the content on the page or the page as a whole.
• definition
  • definition indicates the definition of a term or concept.
• main
  • main acts as the main content of the document.
• navigation
  • navigation indicates a collection of items suitable for navigating the document or related documents.
• note
  • note indicates the content is parenthetic or ancillary to the main content of the resource.
• search
  • search indicates that the section provides a search facility.

ARIA 1.0 Pre-Defined Roles

• alert
  • A message with an alert or error information.
• alertdialog
  • A separate window with an alert or error information.
• application
  • A software unit executing a set of tasks for its users.
• button
  • Allows for user-triggered actions.
• checkbox
  • A control that has three possible values, (true, false, mixed).
• columnheader
  • A table cell containing header information for a column.
• combobox
  • Combobox is a presentation of a select, where users can type to locate a selected item.
• description
  • Descriptive content for a page element which references this element via describedby.
• dialog
  • A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.
• directory
  • A list of references to members of a single group.
• document
  • Content that contains related information, such as a book.
• grid
  • A grid contains cells of tabular data arranged in rows and columns (e.g., a table).
• gridcell
  • A gridcell is a table cell in a grid. Gridcells may be active, editable, and selectable. Cells may have relationships such as controls to address the application of functional relationships.
• group
  • A group is a section of user interface objects which would not be included in a page summary or table of contents by an assistive technology. See region for sections of user interface objects that should be included in a page summary or table of contents.
• heading
  • A heading for a section of the page.
• img
  • An img is a container for a collection elements that form an image.
• link
  • Interactive reference to a resource (note, that in XHTML 2.0 any element can have an href attribute and thus be a link)
• list
  • Group of non-interactive list items. Lists contain children whose role is listitem.
• listbox
  • A list box is a widget that allows the user to select one or more items from a list. Items within the list are static and may contain images. List boxes contain children whose role is option.
• listitem
  • A single item in a list.
• log
  • A region where new information is added and old information may disappear such as chat logs, messaging, game log or an error log. In contrast to other 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.
• marquee
  • A marquee is used to scroll text across the page.
• menu
  • Offers a list of choices to the user.
• menubar
  • A menubar is a container of menu items. Each menu item may activate a new sub-menu. Navigation behavior should be similar to the typical menu bar graphical user interface.
• menuitem
  • A link in a menu. This is an option in a group of choices contained in a menu.
• menuitemcheckbox
  • Defines a menuitem which is checkable (tri-state).
• menuitemradio
  • Indicates a menu item which is part of a group of menuitemradio roles.
• option
  • A selectable item in a list represented by a select.
• presentation
  • An element whose role is presentational does not need to be mapped to the accessibility API.
• progressbar
  • Used by applications for tasks that take a long time to execute, to show the execution progress.
• radio
  • A radio is an option in single-select list. Only one radio control in a radiogroup can be selected at the same time.
• radiogroup
  • A group of radio controls.
• region
  • Region is a large perceivable section on the web page.
• row
  • A row of table cells.
• rowheader
  • A table cell containing header information for a row.
• separator
  • A line or bar that separates and distinguishes sections of content.
• slider
  • A user input where the user selects an input in a given range. This form of range expects an analog keyboard interface.
• spinbutton
  • A form of Range that expects a user selecting from discrete choices.
• status
  • This is a container for process advisory information to give feedback to the user.
• tab
  • A header for a tabpanel.
• tablist
  • A list of tabs, which are references to tabpanels.
• tabpanel
  • Tabpanel is a container for the resources associated with a tab.
• textbox
  • Inputs that allow free-form text as their value.
• timer
  • 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 functions represented in compact visual form.
• tooltip
  • A popup that displays a description for an element when a user passes over or rests on that element. Supplement to the normal tooltip processing of the user agent.
• tree
  • A form of a list having groups inside groups, where sub trees can be collapsed and expanded.
• treegrid
  • A grid whose rows can be expanded and collapsed in the same manner as for a tree.
• treeitem
  • An option item of a tree. This is an element within a tree that may be expanded or collapsed.

Possible non-text media relevant role keywords

• Image/*
  • decorative
  • layout or spacer
  • icon
  • logo
  • photo
  • illustrative (indicates the image is merely an illustration of the surrounding text, adding no more meaning to the surrounding text)
  • albumphoto (a photo presented along with a collection of photos as an album or slideshow, either presented entirely within the same document or a collection of related documents)
  • portrait
  • satelliteimage
  • visualization (mathematic visualization like fractals, topological, etc)
  • chart (including graphs such as: bar chart, line graph, pie chart, organizational chart, bar chart)
  • diagram
  • drawing
  • geomap (a map of geography as opposed to a site map or other diagram)
  • text (styled text: the equivalent semantic markup should be presented OBJECT element contents, though obviously not when using the plaintext only alt attribute)
  • mathexpr (similar to richtext since few UAs support math XML vocabularies)
  • musicscore (similar to richtext since few UAs support music XML vocabularies)
  • livecam (for stills generated from a live webcam)
• Audio/*
  • musicaccomp
  • spokenequivalent
• Other mime types
  • interactive (for interactive multipmedia, e.g., an applet or flash based game)
  • camera (like photo for video to distinguish camera originated video from digitally generated video)
  • livecam (also for video stream as opposed to stills)

Each role keyword might correspond to different specific advice for alt text for a resource, allowing authors a simplified two-step process to providing text equivalents For example, some role keywords might require no alt text or text equivalent whatsoever. While on the other hand, something like role='portrait' might specify a list of the names of the individuals in the portrait from left to right (for ltr text): e.g., alt='Mona Lisa").

Relation to alt text replacement

The following table shows the relation of the alt text to the role keyword. Authors must include at least one of the following keywords on the element for each embedded resource. In some cases a null value for the alt text can be automatically inferred by UAs from the author designated role and conformance checkers can alert authors when the role and alt attributes are inconsistently specified. Conformance checkers can also provide focussed guidance to authors based on the role attribute keywords. The role attribute must always be specified, while the alt attribute might sometimes be null (note the various required, recommended and optional categories for alt text are only suggested as one possible approach the role attribute makes possible; these could all be required for strictness).

• HTML5 Issue Collection and Requirements Drafting Index
• XTech Wiki: Issues Which Cut Across Specific Working Groups & Domains
• PF Working Group Member-Confidential Space
• PF Working Group Public Web Space