Syntax for adaptable links and buttons

From Cognitive Accessibility Task Force

Syntax for adaptable links and buttons (icons, help and keyboard)

Sometimes users need extra support. This can include:

  • Symbols and graphics that they are familiar with
  • Tool tips
  • Language they understand
  • Less features
  • Separating advertisements, so they do not confuse them with native content
  • Keyboard short cuts

Further, having familiar terms and symbols is key to being able to use the web. However what is familiar for one user may be strange for another requiring them to learn new symbols.

Additionally, many users need LESS buttons and options. Therefore being able to cut the amount of buttons, features and links will be extremely useful.

For that we need to standardize supportive syntax and terms that can be linked to associated symbols, terms, translations and explanations for the individual use via an aria attribute or INDI UI.

For example, if an Author gives to a button a role "send" then, without any work for the author, at the user end the button could be renderer with a symbol, term, and/or tooltip that is understandable for this particular user. It could automatically imply F1 help that explains the send function in simple terms. It could be identified with a keyboard short cut that will always be used for send. In addition it could be identified as important and always rendered, or rendered as a large button.

In another usecase we would like to see interoperable symbol set codes for Non verbal people. Products for people who are non vocal often use symbols to help users communicate. These symbols are in fact peoples language. Unfortunately many of these symbols are both subject to copy write AND not interoperable. That means end-users can only use one device, and can not use apps or AT from a different company. I was thinking that if we made an open set of symbol codes for these symbol sets, then they can be interoperable. That means the end use could buy the symbols and use them across different devices or applications. They would still be proprietary but they would also be interoperable.

We therefor suggest the following syntax:

Importance

aria-importance: This could be an ARIA attribute with the following settings:1 (main task such as send for an email

  • aria-importance= "1" this content is essential for the key function of the page (Example: The send button for an email draft)
  • aria-importance= "2" this content is used frequent (Example: The delete button for an email draft)
  • aria-importance= "3" typically not used (Example: The save and settings buttons for an email draft)
  • aria-importance= "4" rarely used or used by advanced users. (Example: The terms and services or the archive button for an email draft)

Explain and feedback

Some users need additional help. This help can be rendered as a tool tip or read when the control or link is read. Most users will not want this text rendered or spoken, Other users however will need it to understand the button, link, or what just happened. aria-feedback= "your email was sent" aria-explain= "this item costs more"

Aria Buttons

The following could be types of ARIA role button


Note, you should always have the default "button" eg role="undo button "


  • compose(default importance = "1")
  • delete
  • next
  • previous
  • submit (default importance = "1")
  • undo
  • cancel
  • add label
  • move
  • view
  • save
  • send
  • received
  • sent
  • edit
  • reply
  • forward
  • my profile
  • upload
  • close
  • more
  • calendar
  • add entry
  • expand
  • unexpanded
  • Open
  • new
  • print
  • settings

ARIA link types

  • home
  • contact us
  • our phone
  • our email
  • site map
  • help
  • about us
  • terms
  • tools
  • comment
  • language (english)
  • sign in
  • sign up
  • product
  • services
  • social (provide label - such as facebook twitter)
  • post
  • contactus

Indi UI content types

  • Our phone
  • Our address
  • Our email
  • Chat help
  • Help (or in ARIA buttons)

Common form elements (text areas)

  • first name
  • family name
  • initial
  • phone
  • cell phone
  • address 1
  • city
  • state
  • country
  • post code
  • phone
  • credit card
  • expiry
  • day, *month *year
  • credit card code
  • date start
  • date end

Concept codes

aria-concept : The following could enable interoperable symbol set codes for Non verbal people. example aria-concept="http....(EA fill in an example)"

Potential parts of a page

The following could be extensions for aria landmarks or ARIA for ePub

  • key points
  • example
  • note
  • warning
  • step
  • external - for external content, such as sponsored or advertising
  • offers - for special offers that are complementary to the main content or task
  • advertisement - advertisement or sponsored content

Number free

Not everyone can understand numbers. We therefor suggest aria-numberfree for alternative text for people who can not understand the main content.

For example: 9 out of 10

The weather is 9 degrees

Non literal text and images

Not everyone can understand non-literal text and icons such as metaphors, idioms etc. The aria-literal tag allows the author to explain non-literal text and images to users.

For example: It is raining cats and dogs


User agents can render non-literal text in a different way so that users will know that this is non literal. They can then use a mouse over or other technique to receive the translation.

Confirm other features

The following may not be necessary

  • Views
  • ascending. descending
  • day, week month
  • this week
  • this month
  • today

TODO

  • Collect fuller set
  • Build sample user style sheet or xslt so it works..
  • Build consensus and adjust proposals
  • Write associated terms, tool tip help for collection.
  • Add complementary types such as example, offer etc
  • missing items? -todo list , note, spelling