Personalization Semantics Explorations: Approaches for the action, destination and purpose attributes

This inserts cues, in the form of emoji, to make the elements on the page easier to identify. In the browser extension, on all pages, the transformations will be run on page load, as long as the extension is loaded (it does not yet re-run them when pages mutate).

Note: Chromium-based browsers don't seem to be correctly exposing the sets of radiobuttons, nor the adapted <legend> elements' contents to screen readers. Both are fine with Firefox.

Contents

Module 1 (2020-01) implementation

This section uses the specified @action, @destination and @purpose attributes. @action and @destination are expected to take one token value; @purpose can take two (per HTML autocomplete).

Personalization Semantics Content Module 1.0: W3C Working Draft 27 January 2020

Navigation and Actions

Anchor

Please visit the log-in page to continue.

<p>Please visit the <a href="#" data-destination="signin">log-in</a> page to continue.</p>

Anchor with a button role and destination

Help

<a href="#" role="button" data-destination="help">Help</a>

Anchor with a button role and action

Help

<a href="#" role="button" data-action="help">Help</a>

Button

<p><button data-action="signin" class="demo-login-button">Log in</button></p>

Forms

Single input field

<p>
 <label>
  Name
  <input data-purpose="name">
 </label>
</p>

Single input fields with autocomplete qualifier

<p>
 <label>
  Home phone
  <input data-purpose="home tel">
 </label>
</p>

<p>
 <label>
  Work phone
  <input data-purpose="work tel">
 </label>
</p>

Grouping

Language 

<fieldset data-purpose="language">
 <legend>language</legend>
 <p>
  <label>
   <input type="radio" name="language1" value="en">
   English
  </label>
 </p>
 <p>
  <label>
   <input type="radio" name="language1" value="es">
   Spanish
  </label>
 </p>
 <p>
  <label>
   <input type="radio" name="language1" value="tlh">
   Klingon
  </label>
 </p>
</fieldset>

Experiment: combining action, destination and purpose attributes

This section uses a single @purpose attribute. It can take one or two space-separated values, though it is not valid to supply two values on an element with a role of "link" or "button". The nature of the interaction/information is determined by the element's role.

Static content

04263 9876531

<p data-purpose="tel">04263 9876531</p>

Navigation and Actions

Anchor

Please visit the log-in page to continue.

<p>Please visit the <a href="#" data-purpose="signin">log-in</a> page to continue.</p>

Anchor with a button role

Help

<a href="#" role="button" data-purpose="help">Help</a>

Button

<p><button data-purpose="signin" class="demo-login-button">Log in</button></p>

Button with a link role

<p><button role="link" data-purpose="signin" class="demo-login-button">Log in</button></p>

Forms

Single input field

<p>
 <label>
  Name
  <input data-purpose="name">
 </label>
</p>

Single input fields with autocomplete qualifier

<p>
 <label>
  Home phone
  <input data-purpose="home tel">
 </label>
</p>

<p>
 <label>
  Work phone
  <input data-purpose="work tel">
 </label>
</p>

Grouping

Language 

<fieldset data-purpose="language">
 <legend>Language</legend>
 <p>
  <label>
   <input type="radio" name="language2" value="en">
   English
  </label>
 </p>
 <p>
  <label>
   <input type="radio" name="language2" value="es">
   Spanish
  </label>
 </p>
 <p>
  <label>
   <input type="radio" name="language2" value="tlh">
   Klingon
  </label>
 </p>
</fieldset>

Experiment: combining action and destination attributes

This section uses two attributes: @purpose, which combines the current @action and @destination attributes, and @meaning, which behaves like the current @purpose attribute, but can be applied to static content too. The nature of the interaction/information is determined by the element's role.

Static content

04263 9876531

<p data-meaning="tel">04263 9876531</p>

Navigation and Actions

Anchor

Please visit the log-in page to continue.

<p>Please visit the <a href="#" data-purpose="signin">log-in</a> page to continue.</p>

Anchor with a button role

Help

<a href="#" role="button" data-purpose="help">Help</a>

Button

<p><button data-purpose="signin" class="demo-login-button">Log in</button></p>

Button with a link role

<p><button role="link" data-purpose="signin" class="demo-login-button">Log in</button></p>

Forms

Single input field

<p>
 <label>
  Name
  <input data-meaning="name">
 </label>
</p>

Single input fields with autocomplete qualifier

<p>
 <label>
  Home phone
  <input data-meaning="home tel">
 </label>
</p>

<p>
 <label>
  Work phone
  <input data-meaning="work tel">
 </label>
</p>

Grouping

Language 

<fieldset data-meaning="language">
 <legend>Language</legend>
 <p>
  <label>
   <input type="radio" name="language3" value="en">
   English
  </label>
 </p>
 <p>
  <label>
   <input type="radio" name="language3" value="es">
   Spanish
  </label>
 </p>
 <p>
  <label>
   <input type="radio" name="language3" value="tlh">
   Klingon
  </label>
 </p>
</fieldset>