New Support for ARIA Content Assist in Orion

Orion’s HTML Content Assist now supports WAI-ARIA attributes and their values.

For example, when typing attributes into the start tag of a div, you can type Ctrl+Space to pop up a list of all attributes that div supports, including ARIA attributes. Use the up or down arrow keys or type the initial character(s) of an attribute name to select it in the list and read its documentation. Type Enter to have the selected attribute inserted into your file at the caret location.

The screen snapshot below shows the aria-atomic attribute selected in the pop-up list of proposals, with its documentation from the W3 WAI-ARIA 1.0 Specification alongside.

Content Assist popup list showing ARIA attributes, with aria-atomic selected

If you resize the proposals list, you can see all of the ARIA attributes that the current HTML element supports (div supports all 36 of the ARIA 1.0 attributes). The snapshot below shows the full list with role selected. The documentation for the role attribute lists 61 possible values!

Content assist proposal list with role selected

Typing the initial characters of an attribute filters the list to make it easier to scan. The typed characters are also inserted into the file. The screen snapshot below shows only attributes that begin with “aria”.

Content assist proposal list showing only aria attributes, with aria-activedescendant selected

If you type the first few characters of an attribute name before typing Ctrl+Space, the list will be filtered when it is opened. If enough characters are typed to uniquely identify an attribute, then the list is not opened; instead, the completed attribute is inserted into the file immediately. Attributes are assigned the empty string when inserted, and the caret is placed between the quotes of the empty string, which is conveniently where it needs to be for you to type the attribute’s value. For example, role is the only attribute that starts with ‘r’, and it will be inserted as role="".

Typing r and invoking content assist inserts role="" into the text

If you need help remembering an attribute’s possible values, there’s Content Assist for that, too. Type Ctrl+Space while the caret is between the attribute value’s quotes, and a list of value choices will pop up. Alternatively, start typing a character or two of the value you want, and type Ctrl+Space to get a reduced list. This comes in handy with attributes like role, where typing a ‘t’ will reduce the list to “only” 10 values instead of 61!

Content assist proposal list showing role attribute values starting with 't', with tab selected

In the same way that attribute Content Assist provides documentation for the selected attribute, value Content Assist provides documentation for the selected value, complete with a link to the value’s description in the WAI-ARIA 1.0 spec.

Orion is an “Authoring Tool” according to the definition in the W3 ATAG Specification:

Authoring Tool: Any web-based or non-web-based application(s) that can be used by authors (alone or collaboratively) to create or modify web content for use by other people (other authors or end users).

One of the goals of an Authoring Tool is to:

…ensure that all authors are enabled, supported, and guided by the authoring tools that they use toward producing accessible web content (WCAG).

Orion’s new ARIA Content Assist is a step toward achieving that goal.

This entry was posted in General. Bookmark the permalink.