Easy Personalization

From Cognitive Accessibility Task Force

Requirements for easy personalization

  • Easy to taylor symbols, user interface for user profiles
  • Easy to get help that works for this user profile
  • General help and context sensitive help

JSON is being used for collections of name/value pairs for each skin


  • 1. JSON personalization skin (standardized) collections of name/value pairs
  • 2. Javascript (if on the client) or PHP to integrate skin into page content (a few could be public. They could work with a media query as well)
  • 3. Cookie for user to store that suggests a skin preference (standardized)
  • 4. The page designer can choice to integrate a skin, offer a skin (if no cookie is found) override skins and how to ask the user preference.

Skin info defined as JSON

These should support

  • Rendering info for aria semantics
  • Symbols
  • Instructions
  • General instructions
  • Can be stored in separate JSON files for different profiles
  • Grouped as profile names and aria types,

Example JSON for a save button with

"coga.profile": {


"coga:desc":"helpful for age appropriate forgetfulness",

"coga:local": "US"

"@aria-function": {"save"{

"name": "save button",

"inherits": "false",

"settings": [


"shortcut": "SHIFT + S",

"longdesc": "this button saves your work. Save often and do not lose your work",

"tooltip": "save",

"text":"save now"


"@aria-hidden": "false",

"css":"visibility:visible;size:2em;border: 5px solid "

},] }}

"@aria-importance": {"high"{

"settings": [{ "@aria-hidden": "false", "css":"visibility:visible;" },] }}

what needs to be supported:

  1. all the syntax and values in https://rawgit.com/w3c/coga/master/issue-papers/links-buttons.html for a defined user group
  2. when making a skin you can define the user group you are for and follow the user experience
  3. the @ is xpath notation to describe an attribute value. At this point only attributes are being implemented but other xpaths may be supported in the future.

Supported terms

  1. shortcut: this will set access key or keyboard short cut
  2. text: is the text value for the button or inner html
  3. symbol: is an icon to be added to the inner html
  4. tooltip: can be a mouce over or "onfocus" tooltip such as a title attribute in html
  5. css: is a css type style associated with this feature
  6. longdesc: is popup help, like a tool tip that may be given when more help is required such as in a help panel
  7. @: any setting starting with @ is to set that attribute, for example @aria-hidden means set the aria-hidden attribute

alternative versions

Not all content is usable by everyone. Some important content will need simplified version or versions with extra support.

Alternative versions will have meta-data that identify COGA feature support - See https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Meta_data_support

The Json should be able to specify what coga features the user prefers. If alternative versions exist that better match the user preference, it should be loaded instead. Such as:

"coga.profile": {




We support referencing COGA techniques. For that we need to reference the uri of specific support feature. COGA techniques will need to document clearly the different options and provide separate URIs .

The JavaScript

The Javascript intergrates the settigns into the page For example for each value pair (x) for the save button $("li[role='save']").attr(item(x),value(x));

It can also load some styles such as: div[aria-hidden='true'] { display: none;}

Shortcut (Alt + F1) triggers the help text to show