3. Content
3.1 action
3.1.1 Description
The action
attribute provides the context of a button. It is typically used on a button element or element with role="button".
3.1.2 Example
Here is an example using the action
attribute.
<button aui-action="undo">Revert</button>
A personalization agent may add a symbol, replace the text with a more familiar term, or give it a specific presentation. Note that there is no default value.
3.1.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | link types [HTML52] and HTML types [HTML5] |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | token |
The following could be supported values of action
for buttons. Note that the following items represent an option or control that allows you to perform the action. They do not represent page regions.
3.1.4 Values
Value | Description |
---|---|
add | Add the selected item or the item at the current location to a list. |
brightness | Adjust the screen or application brightness. Often used with increase or decrease but is sometimes used alone as a menu name or item.
Editor's note At risk pending implementations. |
buy | Buy the selected item or buy the item at the current location. Often involves adding the current item into a shopping cart. (Implied simplification = "critical".) |
cancel | Closes the dialog and discards any changes the user may have made within that dialog. (Implied simplification = "critical".) |
captions | Show the settings for captions and subtitles. |
channel | Adjust the channel of a multimedia component. Often used with increase or decrease but is sometimes used alone as a menu name or item.
Editor's note At risk pending implementations. |
checkout | Proceed to the purchasing process. (Implied simplification = "critical".) |
close | Close the current dialog. (Implied simplification = "critical".) |
color | Opens a color picker. |
compose | Compose a new item such as an email. (Implied simplification = "critical".) |
confirm | Confirms submission of the form request to the server. For example, an "ok" button. (Implied simplification = "critical".) |
connect | Connect to a communication channel, such as an FTP server or Voice over IP channel. Often used with [aria-pressed = "true"] for on or [aria-pressed = "false"] for off. |
copy | Copies the selected control, item or text and places it onto the clipboard |
cut | Removes the selected control, item or text and places it onto the clipboard |
date | Opens a date control. (Implied simplification= "critical".) |
decrease | Decreases the level of the relevant setting. (Implied simplification= "critical".) |
delete | Delete the current item, selected control, or text. |
download | Download a file from the server. |
drag | Enables a dragged and dropped capabilities. Often used with [aria-pressed = "true"] for on or [aria-pressed = "false"] for off. |
edit | Edit the item or selection at the current location. |
escape | Typically used to abort, cancel or change what is currently being displayed on the screen. A common application of the the esc key is to leave full screen mode. |
expand | Expand or collapse the current item. |
forward | Forward the current item such as an email. |
help | Opens a help function. (Implied simplification= "critical".) |
increase | Increases the level of the relevant setting. (Implied simplification= "critical".) |
label | Add a label to the selected item or the item at the current location. |
left | Moves a selected item to the left into another column or list. |
loop | Plays the flow, presentation or a movie over and over again, once or without stopping. Often used with [aria-pressed = "true"] for on or [aria-pressed = "false"] for off.
Editor's note At risk pending implementations. |
mediaPosition | Adjust the current playback position in the current media.
Editor's note At risk pending implementations. |
mode | Change the mode or functionality. (Implied simplification= "critical".) |
more | Show more information. |
move | Changes the position of a selected item(s). Often used with left, right, begin, end, increase (up) or decrease (down). |
mute | Mute or toggle the mute option. |
new | Open a new item. (Implied simplification= "critical".) |
next | Move to the next item in the series. (Implied simplification = "critical".) |
open | Open an item. (Implied simplification = "critical".) |
order | Changes the position of the selected item within a list of items, while each item in the list has a layer position. Often used with increase (forward), decrease (back), first and end. |
paste | Paste the content from the clipboard to the current position. |
pause | Pause a multimedia, audio or video element or object. (Implied simplification= "critical".) |
play | Play a multimedia, audio or video element or object. (Implied simplification= "critical".) |
previous | Move to the previous item in the series. (Implied simplification = "critical".) |
Print the current page, selection or the item at the current location. | |
profile | Opens the user's profile page |
properties | Shows the properties of an item. |
received | Open the received folder. |
refresh | Manually refresh the current contents of the screen. |
remove | Removes an item from a list. |
reply | Reply to the current item such as an email. (Implied simplification = "critical".) |
reset | Resets all the controls to their initial values. |
resize | Increase or decrease the font size. Often used with increase or decrease. |
right | Moves a selected item to the right into another column or list. |
save | Save the current content. (Implied simplification = "critical".) |
scroll | Advances the view. Often used with left, right, begin, end, increase (up) or decrease (down). |
send | Send a form, email or request. (Implied simplification = "critical".) |
sent | Open the sent folder. |
settings | Open settings and options. |
skip | Skips the current step. This is typically used in a sequence of steps. |
submit | Submits the form data or a request to the server. (Implied simplification = "critical".) |
temperature | Adjust the temperature. Often used with increase or decrease but is sometimes used alone as a menu name or item.
Editor's note At risk pending implementations. |
toc | Opens a table of contents. |
undo | Revert back to the prior state before the user's most recent changes |
upload | Upload a file to the server. |
voiceCommands | Activate or deactivate voice commands. Often used with [aria-pressed = "true"] for on or [aria-pressed = "false"] for off. |
volume | Adjust the volume of a multimedia component. Often used with increase or decrease but is sometimes used alone as a menu name or item.
Editor's note At risk pending implementations. |
3.2 destination
3.2.1 Description
The destination
attribute categorizes the target of a hyperlink.
A personalization agent or user agent may add additional familiar user interface features to help users understand the link and follow the right one easily. User agents might add a familiar customized icon to the link, or style the link in a customized way, or position the link on the page in a location that the user generally expects to find a link of the particular type.
3.2.2 Example
The below example section show how destination
used when coding.
<a href="home.html" aui-destination="home">our main page</a>
See the destination sample user experience.
3.2.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | link types [HTML52] and HTML 5.2 autocomplete [HTML52] |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | token |
3.2.4 Values
Value | Description |
---|---|
about | Information about the content owner or producer. |
accessibilityStatement | Information about the accessibility features in a web site or web content. |
begin | Changes the location to the beginning item from a list of items or redirects the functionality to the first step in a sequence. |
chat | Human help or a dialog help function such as a chat bot. |
comment | Submit a comment on the current item. |
contact | Opens contact information for content owner or producer. |
Email address for the content owner or producer. | |
end | Changes the location to the end item from a list of items or redirects the functionality to the last step in a sequence. |
help | A help function that includes support or instructions. |
home | Initial or main page of a website or application. |
language | Available language options for the website or web content. |
left | Changes the location of the selected item(s) to the left. |
phone | Phone number for the content owner or producer. |
post | Post current item. Item will be visible to other parties. |
products | Products available from the content provider. |
related | Adds a related item(s) to a pre-selected list of items. |
right | Changes the location of the selected item(s) to the right. |
services | Services available from the content provider. |
signin | Sign in to the current web site or application. |
signout | Sign out of the current web site or application. |
sitemap | Content containing a list of all the pages in a web site. |
social | Content provider on a social media platform. Note, that the specific name of the social media platform should be included in the accessible name.
Editor's note At risk pending implementations. |
terms | The terms and conditions of use applicable to the website or web content. |
tools | Available tools for the current content. |
3.3 field
3.3.1 Description
The field
attribute provides the context of a text input field such as a text box. It is typically used on an input of type text, or element with a corresponding role.
A personalization agent may add a symbol, replace the text with a more familiar term, or give it a specific presentation. Note that there is no default value.
The user experience may include filling in the field and adding an icon.
The field
values that would typically be on form controls should provide context for the user. For example tel would relate to the user's telephone number. Note that there is no default value and there can be more than one value for a field, such as aui-field="country postcode"
which includes both the country and postal code.
3.3.2 Example
Here is an example using the field
attribute when coding.
<input type="text" name="telnum" aui-field="tel"/>
3.3.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | link types [HTML52] and HTML types [HTML5] |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | token |
3.3.4 Values
Value | Description |
---|---|
additionalName | Additional or middle name. |
additionalNameInitial | Additional or middle name initial. |
addressLine1 | First line of street address. |
addressLine2 | Second line of street address. |
addressLine3 | Third line of street address. |
answer | Answer to a section question. |
area | Administrative area, state, province, or region. |
bday | Birthday. |
bdayDay | Day of birthday. |
bdayMonth | Month of birthday. |
bdayYear | Year of birthday. |
ccCsc | Credit card security codey. |
ccExp | Date of expiration of credit card. |
ccExpMonth | Month of expiration of credit card. |
ccExpYear | Year of expiration of credit card. |
ccName | Full name, as it appears on credit card. |
ccNumber | Credit card number. |
ccType | Type of payment instrument (e.g. Visa). Note that there may be a change to allow for adding options. |
city | Locality or city. |
comment | Form comment section. Typically, a free text field. |
country | Country name. |
dateEnd | Set the end time of an event
Note We may remove this or harmonize with other date time standards.Editor's note At risk pending implementations. |
dateStart | Set the start date or the date of an event.
Note We may remove this or harmonize with other date time standards.Editor's note At risk pending implementations. |
Email address. | |
familyName | Family name, surname, or last name. |
fax | Full fax number, including international country code. |
faxAreaCode | Area code. |
faxCountryCode | International country code. |
faxLocal | Local fax number: full number minus country and area codes. |
faxNational | National fax number: full number minus international country code and area code. |
gender | Gender identity. |
givenName | Given or first name. |
honorificPrefix | Prefix or title (Mr., Mrs., Dr., etc.) |
honorificSuffix | Suffix (Jr., II, etc.) |
language | Preferred language. |
name | Full name. |
nickname | Nickname. |
org | Company or organization. |
photo | Photo or avatar. |
position | User's position or title within a company or organization. |
postalcode | Postal or ZIP code. |
section-***** | Used to group forms together. |
sex | Sex or gender. |
streetAddress | Full street address condensed into one line. |
subject | Form subject. Typically, a free text field. |
tel | Full telephone number, including international country code. |
telAreaCode | Area code. |
telCountryCode | International country code. |
telExtension | Telephone extension number. |
telLocal | Local telephone number: full number minus international country code and area codes. |
telNational | National telephone number: full number minus international country code. |
timeEnd | Set the end time of an event.
Note We may remove this or harmonize with other date time standards.Editor's note At risk pending implementations. |
timeStart | Set the start time or the time of an event.
Note We may remove this or harmonize with other date time standards.Editor's note At risk pending implementations. |
topic | Topic for the form. Typically, selected from a list of reserved words. |
transactionCurrency | The monetary system being used for the transaction. Note that there may be a change to allow for adding options. |
transactionAmount | The amount that the user is committing to pay for a transaction. (Often used when entering a bid or sale price.) |
url | Website URL. |
3.4 simplification
3.4.1 Description
The simplification
attribute differentiates between critical features and less important features for simplification.
This allows simplified interfaces with less options or interfaces that emphasize critical features. Adaptations can be based on personalization settings.
This was formerly importance
. However different people may feel that sections that would be hidden in a simplified version are still very important, such as marketing content or legal terms.)
These semantics aid simplification. But what content is most useful to a user varies from user to user. For example, men may be more interested in men's clothing, and may not be interested in the more frequently use women's clothing option. For that reason we may add context for elements that will help the personalization agent select the most useful content for a given user (see the context attribute). This is also necessary for reminders (see below).
It is worth mentioning that a lot of this information is known for personalization of advertisements and content optimization.
3.4.2 Example
Here is an example using the simplification
attribute in the context of a submit button.
<input aui-simplification="critical" value="Submit" type="submit"/>
3.4.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | SVG [SVG2] and DOM [DOM4] active |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | token |
3.4.4 Values
Value | Description |
---|---|
critical |
The critical setting should be used on:
|
medium (default) |
The medium setting should be used on:
|
low |
The low setting should be used on elements that are rarely used or only used by advanced users. Example: The terms and services or the archive button for an email application.
|
3.5 distraction
3.5.1 Description
The distraction
attribute should be used on non-essential detracting content, so that people who have problems keeping focus can turn the content off. An example user experiences would be to hide all non-essential distracting content.
Supported values: animations, auto-starting, moving, ad, message, chat, overlay, popup Auto-changing (logs) third-party, offer (includes suggestions).
Note that there is no default value.
Note that elements with the distraction
attribute should also have a label or accessible name.
3.5.2 Example
Here is an example using the distraction
attribute in the context of an animated image.
<img src="animated.gif" alt="animated banner advertising for Foobars" aui-distraction="moving ad">
3.5.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | SVG [SVG2] and DOM [DOM4] active |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | token list |
3.5.4 Values
Value | Description |
---|---|
ad | An advertisement or offer for a product, feature or service that is under the authors' control and is not part of an activity where it is essential. |
animations | Computer-generated moving images. Animations are also automatically updating. |
autoStarting | Information that starts automatically without user interaction that is presented in parallel with other content. |
autoUpdating | Information that starts automatically and is presented in parallel with other content that updates frequently without user interaction unless the auto-updating is part of an activity where it is essential. |
chat | An interface that allows real-time interaction of text-based messages between a sender and a receiver. |
message | Communication sent to or left for the user. |
moving | Elements that change locations on the screen without user interaction. |
overlay | A part of an application or content that is displayed over the top of the main content in the same window. |
popup | A child window that blocks user interaction to the parent window. |
thirdParty | Content that is not under the author’s control. |
3.6 symbol
3.6.1 Description
The symbol
attribute identifies the concept for symbols.
The symbol
attribute accepts the values of a URI or shortened URI. Note that namespaces are the only additional parsing that maybe required to identify the concept.
A personalization agent can then load alternative symbols that the user is familiar with so they do not have to learn new symbols for different applications.
To help this be interoperable without an RDF parser we recommend referencing the most commonly used ontologies and the highest-level concept. (For example, reference "girl" and not "young girl".)
We should have a note of common suggested terms and references. (Maybe with links to http://www.arasaac.org/)
3.6.2 Example
Here is an example using the symbol
attribute.
<img aui-symbol="http://blisssymbolics.org/refnumber/001" href="mysymb.bmp" >
When there is more than one concept, multiple concepts can be referenced by separating them with white space. The order of multiple concepts should be subject predicate object. Both omissions and multiple triples are allowed.
3.6.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | microdata [microdata], SKOS Core Guide [[SKOS Core Guide]] and RDFa [[RDFa 1.1 Primer]] |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | URI |