Personalization Semantics Explorations: Module 1 (2020-01) implementation

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.

Module 1 (2020-01) implementation

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>