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 data-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 HTML52 types [HTML52] |
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. |
media-position | 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. |
voice-commands | 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" data-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. |
accessibility-statement | 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-recipient | 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 purpose
3.3.1 Description
The purpose
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 purpose
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 data-purpose="country-name postal-code"
which includes both the country and postal code.
3.3.2 Example
Here is an example using the purpose
attribute when coding.
<input type="text" name="telnum" data-purpose="tel"/>
3.3.3 Characteristics
Characteristic | Value |
---|---|
Related Concepts: | link types [HTML52] and HTML52 types [HTML52] |
Used in Roles: | All elements of the base markup |
Inherits into Roles: | Placeholder |
Value: | token |
3.3.4 Values
Value | Description |
---|---|
additional-name | Additional names (in some Western cultures, also known as middle names, forenames other than the first name). |
additional-name-initial | Additional or middle name initial. |
address-level1 | The broadest administrative level in the address, i.e., the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town. |
address-level2 | The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found. |
address-level3 | The third administrative level, in addresses with three or more administrative levels. |
address-level4 | The most fine-grained administrative level, in addresses with four administrative levels. |
address-line1 | Street address (one line per field, line 1) |
address-line2 | Street address (one line per field, line 2) |
address-line3 | Street address (one line per field, line 3) |
answer | Answer to a section question. |
area | Administrative area, state, province, or region. |
bday | Birthday. |
bday-day | Day component of birthday. |
bday-month | Month component of birthday. |
bday-year | Year component of birthday. |
cc-csc | Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc). |
cc-exp | Expiration date of the payment instrument. |
cc-exp-month | Month component of the expiration date of the payment instrument. |
cc-exp-year | Year component of the expiration date of the payment instrument. |
cc-name | Full name as given on the payment instrument. |
cc-number | Code identifying the payment instrument (e.g., the credit card number). |
cc-type | Type of payment instrument. |
cc-given-name | Given name as given on the payment instrument (in some Western cultures, also known as the first name). |
cc-additional-name | Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name). |
cc-family-name | Family name given on the payment instrument (in some Western cultures, also known as the last name or surname. |
comment | Form comment section. Typically, a free text field. |
country | Country code. |
country-name | Country name. |
current-password | The current password for the account identified by the username field (e.g., when logging in). |
date-end | 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. |
date-start | 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. |
E-mail address. | |
family-name | Family name (in some Western cultures, also known as the last name or surname). |
fax | Full fax number, including international country code. |
fax-area-code | Area code. |
fax-country-code | International country code. |
fax-local | Local fax number: full number minus country and area codes. |
fax-national | National fax number: full number minus international country code and area code. |
given-name | Given name (in some Western cultures, also known as the first name). |
honorific-prefix | Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle"). |
honorific-suffix | Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II"). |
impp | URL representing an instant messaging protocol endpoint (for example, "aim:goim?screenname=example" or "xmpp:fred@example.net”). |
language | Preferred language. |
name | Full name. |
new-password | A new password (e.g., when creating an account or changing a password). |
nickname | Nickname, screen name, handle: a typically short name used instead of the full name. |
organization | Company name corresponding to the person, address, or contact information in the other fields associated with this field. |
organization-title | Job title (e.g., "Software Engineer", "Senior Vice President", "Deputy Managing Director”). |
photo | Photo or avatar. |
postal-code | Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the address-level2 field). |
section-***** | Used to group forms together. |
sex | Gender identity (e.g., Female, Fa’afafine). |
subject | Form subject. Typically, a free text field. |
tel | Full telephone number, including country code . |
tel-area-code | Area code component of the telephone number, with a country-internal prefix applied if applicable. |
tel-country-code | Country code component of the telephone number. |
tel-extension | Telephone number internal extension code. |
tel-local | Telephone number without the country code and area code components. |
tel-local-prefix | First part of the component of the telephone number that follows the area code, when that component is split into two components. |
tel-local-suffix | Second part of the component of the telephone number that follows the area code, when that component is split into two components. |
tel-national | Telephone number without the county code component, with a country-internal prefix applied if applicable. |
time-end | 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. |
time-start | 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. |
transaction-currency | The currency that the user would prefer the transaction to use. |
transaction-amount | The amount that the user would like for the transaction (e.g. when entering a bid or sale price). |
url | Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field. |
username | A username. |
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 data-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" data-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 |
---|---|
advertisement | 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. |
auto-starting | Information that starts automatically without user interaction that is presented in parallel with other content. |
auto-updating | 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. |
third-party | 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 data-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 |