Skip Navigation

AUI Personalisation Semantics

Providing a framework for a personally tailoried experience.

Working Draft

Last Updated: 18/01/2018

Overview

Personalisation involves tailoring aspects of the user experience to meet the needs and preferences of the user. For example, having familiar terms and symbols is key to many users being able to use the web. However, what is familiar for one user may be unfamiliar to another requiring them to learn new symbols. The challenge has been the ability to identify the types of content in a document that should be adapted to the preferred user experience.

The introduction of standardized semantics allows web applications to customize the exposure of that content to one that is familiar to individuals based on their needs and preferences. This specification defines standard semantics to enable user driven personalization such as the association of a user-preferred symbols to elements having those semantics. This ensures that users can quickly find familiar icons, such as a help icon, that apply to user interface elements.

Note:

The fonts (FontAwesome ) & SVGs (Google Material Icons ) used within the included examples are license as per their individual licenses.

Action

The action attribute provides the context of a button. It is typically used on a button element or element with role="button". A personalization agent may add a symbol, replace the text with a more familiar term, or give it a specific presentation.

Note:

There is no default value.

The Code

HTML


										

<button aui-action="compose">Compose</button>

/*Replace 'compose' with the appropriate*/

CSS


										

/*Styling via Font Icon*/

[aui-action="compose"]:before {

content: "\f044"; /*Icon Code*/

font-family: FontAwesome;

float:left;

margin-right:5px;

}

/*Styling via SVG Image*/

[aui-action="compose"]:before {

content: " ";

ackground-image: url(../img/compose.svg);

background-repeat: no-repeat;

background-size: 20px, 20px;

padding-left: 30px;

}

Compose

aui-action="compose"

Compose new item such as an email.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Next

aui-action="next"

Move to the next item in the series. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Delete

aui-action="delete"

Delete current item, selected control or text.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Previous

aui-action="previous"

Move to the previous item in the series. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Table of Contents (TOC)

aui-action="toc"

Opens a table of content.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Submit

aui-action="submit"

Submits the form data or request to the server. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Confirm

aui-action="confirm"

Confirms the form request to the server. For example, an "ok" button. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Undo

aui-action="undo"

Revert to the state before the user's most recent changes.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Cancel

aui-action="cancel"

Closes the dialog and discards any changes the user may have made within that dialog. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Reset

aui-action="reset"

Resets all the controls to their initial values.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Label

aui-action="label"

Add label to the selected item or the item at the current location.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Buy

aui-action="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".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Checkout

aui-action="checkout"

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".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Add

aui-action="add"

Add the selected item or the item at the current location to a list.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Move

aui-action="move"

Move the selected item.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Save

aui-action="save"

Save the current content. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Send

aui-action="send"

Send a form, email or request. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Close

aui-action="close"

Close current dialog. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

More

aui-action="more"

Show more information.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Print

aui-action="print"

Print current page, selection or the item at the current location.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Received

aui-action="received"

Open received folder.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Sent

aui-action="sent"

Open sent folder.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Edit

aui-action="edit"

Edit current item, selection or the item at the current location.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Forward

aui-action="forward"

Forward to current item such as an email.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Reply

aui-action="reply"

Reply to current item such as an email. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Upload

aui-action="upload"

Upload file to the server.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Download

aui-action="download"

Download file from the server.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Connect

aui-action="connect"

Connect a communication channel.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Open

aui-action="open"

Open item. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

New

aui-action="new"

Open new item. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Settings

aui-action="settings"

Open settings and options.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Mode

aui-action="mode"

Change the mode or functionality. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Increase

aui-action="increase"

Increases the level of the relevant setting. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Decrease

aui-action="decrease"

Increases the level of the relevant setting. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Play

aui-action="play"

Play a multimedia, audio or video element or object. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Pause

aui-action="pause"

Pause a multimedia, audio or video element or object. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Captions

aui-action="captions"

Show the settings for captions and subtitles.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Mute

aui-action="mute"

Mute or toggle the mute option.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Volume

aui-action="volume"

Change or show the settings for the volume. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Channel

aui-action="channel"

Change or show the settings for the channel. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Temperature

aui-action="temperature"

Change or show the settings for the temperature. (Implied simplification = "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Brightness

aui-action="brightness"

Change or show the settings for the brightness.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Profile

aui-action="profile"

Opens the user's profile page.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Expand

aui-action="expand"

Expand or unexpand the current item.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Refresh

aui-action="refresh"

Manually refresh the current contents of the screen.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Properties

aui-action="properties"

Shows the properties of the item.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Help

aui-action="help"

Opens a help function. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Cut

aui-action="cut"

Removes the selected control, item or text and places it on the Clipboard.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Copy

aui-action="copy"

Copies the selected control, item or text onto the Clipboard.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Paste

aui-action="paste"

Paste the content from the clipboard to the current position.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Colour

aui-action="color"

Opens a colour picker.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Date

aui-action="date"

Opens a date control. (Implied simplification= "critical".)

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Remove

aui-action="remove"

Remove an item from a list.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Right

aui-action="right"

Moves a selected item to the right to another column or list.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)

Left

aui-action="left"

Moves a selected item to the left to another column or list.

Examples

These examples a button marked-up with he AUI attribute, a button styled using fonts and a button styled using a SVG, as to provide the user with a personalisable experience.

Button Examples

Example

Example (FONT ICON)

Example (.SVG)


Destination

The destination term 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.

Note:

There is no default value.

The Code

HTML


										

<a aui-destination="home">Homepage</a>

/*Replace 'home' with the appropriate attribute*/

CSS


										

/*Styling via Font Icon*/

[aui-destination="home"]{

content: "\f015"; /*Icon Code*/

font-family: FontAwesome;

float:left;

margin-right:5px;

}

/*Styling via SVG Image*/

[aui-destination="home"]:before {

content: " ";

background-image: url(../img/home.svg);

background-repeat: no-repeat;

background-size: 20px, 20px;

padding-left: 30px;

}

Home

aui-destination="home"

Initial or main page of a website or application.

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Homepage

Example (FONT ICON)

Homepage

Example (.SVG)

Homepage

Contact

aui-destination="contact"

Opens contact information for content owner or producer

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Contact Us

Example (FONT ICON)

Contact Us

Example (.SVG)

Contact Us

Phone

aui-destination="phone"

Phone content owner or producer

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Phone Us

Example (FONT ICON)

Phone Us

Example (.SVG)

Phone Us

Email

aui-destination="email"

Email content owner or producer

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Email Us

Example (FONT ICON)

Email Us

Example (.SVG)

Email Us

Sitemap

aui-destination="sitemap"

Content containing a list of pages in a web site

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Sitemap

Example (FONT ICON)

Sitemap

Example (.SVG)

Sitemap

Accessibility Statement

aui-destination="accessibilityStatement"

Information about the accessibility in a web site or web content.

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example (FONT ICON)

Accessibility Statement

Example (.SVG)

Accessibility Statement

Help

aui-destination="help"

A help function, support or instructions

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Help

Example (FONT ICON)

Help

Example (.SVG)

Help

Chat

aui-destination="chat"

Human help or a dialog help function such as a chat bot

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Chat to Us

Example (FONT ICON)

Chat to Us

Example (.SVG)

Chat to Us

About

aui-destination="about"

Information about the content owner or producer

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

About Us

Example (FONT ICON)

About Us

Example (.SVG)

About Us

Terms

aui-destination="terms"

Terms and conditions

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example (FONT ICON)

Terms & Condtions

Example (.SVG)

Terms & Condtions

Tools

aui-destination="tools"

Available tools for the current content

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Tools

Example (FONT ICON)

Tools

Example (.SVG)

Tools

Services

aui-destination="services"

Services available from the content provider

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Services

Example (FONT ICON)

Services

Example (.SVG)

Services

Products

aui-destination="products"

Products available from the content provider

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Products

Example (FONT ICON)

Products

Example (.SVG)

Products

Comment

aui-destination="comment"

Submit a comment on the current item

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Comments

Example (FONT ICON)

Comments

Example (.SVG)

Comments

Language

aui-destination="language"

Language options

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Languages

Example (FONT ICON)

Languages

Example (.SVG)

Languages

Sign In

aui-destination="signin"

Sign in to current web site or application

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Sign In

Example (FONT ICON)

Example (.SVG)

Sign Out

aui-destination="signout"

Sign out current web site or application

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Sign Out

Example (FONT ICON)

Sign Out

Example (.SVG)

Sign Out

Register

aui-destination="register"

Register for the current web site or application

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Register

Example (FONT ICON)

Register

Example (.SVG)

Register

Social

aui-destination="social"

Content provider on social media

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Social

Example (FONT ICON)

Social

Example (.SVG)

Social

Post

aui-destination="post"

Post current item. Item will be visible to other parties.

Examples

These examples a link marked-up with he AUI attribute, a link styled using fonts and a link styled using a SVG, as to provide the user with a personalisable experience.

Link Examples

Example

Post

Example (FONT ICON)

Post

Example (.SVG)

Post

Field

Field 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 responding 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. AUI-field values that would typically be on form controls and would have a user context - for example phone would relate to the user's phone.

Note:

There is no default value. There can be more then one value for a field, such as aui-field="country postcode"

The Code

HTML


									

<label for="firstname">Full Name </label>

<input id="firstname" type="text" aui-field="name" />

/*Replace 'name' with the appropriate*/

CSS


									

/*Styling via SVG Icon*/

[aui-field="name"] {

background-image: url(../img/icon-name.svg), linear-gradient(to right, #000000 20px,#ffffff 100%);

background-size: 20px 20px;

background-repeat: no-repeat;

padding-left: 25px;

}

Name

aui-field="name"

Full name

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Honorific Prefix

aui-field="honorificPrefix"

prefix or title (Mr., Mrs. Dr., etc.)

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Given Name (First Name)

aui-field="givenName"

given or first name

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Additional Name (Middle Name)

aui-field="additionalName"

additional or middle name

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Additional Name Initial (Middle Name)

aui-field="additionalNameInitial"

additional or middle name initial

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Family Name (Surname)

aui-field="familyName"

Family name, surname, or last name.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Honorific Suffix

aui-field="honorificSuffix"

Suffix (Jr., II, etc.)

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Nickname

aui-field="nickname"

Nickname.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Street Address

aui-field="streetAddress"

Full street address condensed into one line.

Note:

Street Address has three linked sub fields:

  • Address Line 1 - First line of street address. [AUI Field = "addressLine1"]
  • Address Line 2 - Second line of street address. [AUI Field = "addressLine2"]
  • Address Line 3 - Third line of street address. [AUI Field = "addressLine3"]

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

City

aui-field="city"

Locality or city.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Area

aui-field="area"

administrative area, state, province, or region

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Postalcode

aui-field="postalcode"

postal or ZIP code

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Country

aui-field="country"

Country name.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Fax

aui-field="fax"

Full fax number, including country code.

Note:

Fax has five linked sub fields:

  • Fax Country Code - International country code. [AUI Field = "faxCountryCode"]
  • Fax National - National fax number: full number minus country code. [AUI Field = "faxNational"]
  • Fax Area Code - Area code. [AUI Field = "faxAreaCode"]
  • Fax Local - Local fax number: full number minus country and area codes. [AUI Field = "faxLocal"]
  • Fax Extension - Fax extension number. [AUI Field = "faxExtension"]

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Email

aui-field="email"

Email address.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Telephone

aui-field="tel"

Full phone number, including country code.

Note:

Telephone number has three linked sub fields:

  • Telephone Country Code - International country code. [AUI Field = "telCountryCode"]
  • Telephone National - National phone number: full number minus country code. [AUI Field = "telNational"]
  • Telephone Area Code - Area code. [AUI Field = "telAreaCode"]
  • Telephone Local - Local phone number: full number minus country and area codes. [AUI Field = "telLocal"]
  • Telephone Extension - Phone extension number. [AUI Field = "telExtension"]

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Credit Card Details

aui-field="ccName"

Credit

Note:

Six fields relating to credit card details is present within the AUI personalisation semantics:

  • Credit Card Name - Full name, as it appears on credit card. [AUI Field = "ccName"]
  • Credit Card Number - Credit card number. [AUI Field = "ccNumber"]
  • Credit Card Exp Month - Month of expiration of credit card. [AUI Field = "ccExpMonth"]
  • Credit Card Exp Year - Year of expiration of credit card. [AUI Field = "ccExpYear"]
  • Credit Card Exp - Date of expiration of credit card. [AUI Field = "ccExp"]
  • Credit Card CSC - Credit card security code. [AUI Field = "ccCsc"]

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Language

aui-field="language"

Preferred language.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Birthday

aui-field="bday"

Birthdate.

Note:

Birthday has three linked sub fields:

  • Birthday Year - Year of birthday. [AUI Field = "bdayYear"]
  • Birthday Month - Month of birthday. [AUI Field = "bdayMonth"]
  • Birthday Day - Day of birthday. [AUI Field = "bdayDay"]

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Transaction Currency

aui-field="transactionCurrency"

The monetary system being used for the transaction. Note that there may be a change to allow for adding options.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Transaction Amount

aui-field="transactionAmount"

The amount that the user is committing to for a transaction. (Often used when entering a bid or sale price.)

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Topic

aui-field="topic"

Topic for the form. Typically selected from a list of reserved words.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Comment

aui-field="comment"

Comment section. Typically a free text field.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Subject

aui-field="subject"

Form subject. Typically a free text field.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Answer

aui-field="answer"

Answer to a section question.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Organisation

aui-field="org"

Company or organization.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Position

aui-field="position"

User's position or title within company or organization

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Sex

aui-field="sex"

Sex or gender.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Gender

aui-field="gender"

Gender identity.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Website URL

aui-field="url"

Website URL.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

Photo

aui-field="photo"

Photo or avatar.

Examples

These examples a field marked-up with he AUI attribute and a field styled using a SVG, as to provide the user with a personalisable experience.

Field Examples

Example

Example (.SVG)

uy

How to Use or Test

Implementing the personalisation semantics provides user with an invaluable tool, as to tailor their personal experience on your web-based applications, however how do you ensure that you have implemented it correctly or for that fact use it?

These semantics could be used within scripts to manipulate those specific interactions, however on a basic level it provides the means to style each interaction specifically, as to provide a rememberable and distinct indicator. The easiest method therefore to test or use the implementation would be to style these elements using CSS. The method for such would vary depending on the browser utilised, below are a few possible methods to achieve this on a number of browsers.

Chrome & Firefox

Multiple add-ons and methods exist which could be used as to style the elements, however, one of the easiest is utilising add-ons from the Chrome and Firefox add-on store, as to inject CSS into the web-based applications viewed.

A few possible add-ons for Chrome and Firefox to achieve this are as follows:

Disclaimer:

These links are provided as a convenience and for informational purposes only; Installing and/or visiting these resources is at the users own risk.

Custom Style Script Guide

Custom Style Script is an add-on available on Google Chrome and Firefox, which allows a wide range of CSS/Java scripts to be injected onto either a specific web-based applications or across all visited destinations.

Step 1 - Install the Addon

Visit the corresponding download link (Chrome Download / Firefox Download) for the add-on, then select "Add to Chrome" or “Add to Firefox”, followed by “Add Extension” or “Add” respectively.

Step 2 - Addon Information

Information and settings regarding the add-on can be accessed via the menu item which will have been added to the main bar alternatively on Firefox it can be access in the Add-ons menu (CTRL + SHIFT + A).

Step 3 - Addon Configuration

Select the icon within the upper bar, then select "Open Options Menu", then insert the CSS or script into the fields provided, followed by the plus button.

Note:

The following is a guide as to what should be contrained within each field:

  • URL Field - Should be filled as '*' if the change is to be global or a specific URL should be entered.

  • JavaScript Field - Should be filled with any JavaScript to be run on the target URL.

  • Style Field - Should be filled with any CSS to be applied to the target URL.

Safari

Safaris has add-ons which can be installed to provide additional features or options. The advance settings within Safari provide the functionality to define custom CSS to be applied when visiting web-based applications. Therefore, an add-on could be used as to inject CSS into the website, however this is not necessary as the user can use the inbuilt tools.

Adding CSS

Navigate to Safari's "Advance Options", then select the CSS file.


Navigate back to the top of the site