Cacher is the code snippet organizer for pro developers

cheatsheet                          http://karlgroves-sandbox.com/CheatSheets/ARIA-Cheatsheet.html
thorough article describing ARIA    https://dev.opera.com/articles/introduction-to-wai-aria/

list of ARIA roles, states and properties             http://w3c.github.io/aria-in-html/#aria-roles
list of ARIA roles with corresponding HTML5 elements  http://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
list of ARIA roles with associated properties         http://www.w3.org/TR/html51/dom.html#allowed-aria-roles,-states-and-properties
a description of a few ARIA attributes                http://3needs.org/en/testing/sr-aria.html

//  bind keyboard event to button functionality
document.getElementByID('button').addEventListener('keydown', someFunction);
function someFunction(event) {
  var button = document.getElementById("button");
  var content = document.getElementById("content");
  if (event.type === "keydown" && (event.keyCode !== 13 && event.keyCode !== 32)){ // enter and space
    return true;
  }
  if(content.getAttribute("aria-hidden") == "true"){
    content.setAttribute("aria-hidden", "false");
    button.setAttribute("aria-expanded", "true");
  } else {
    content.setAttribute("aria-hidden", "true");
    button.setAttribute("aria-expanded", "false");
  }
  event.preventDefault();
}

//  focus on element e.g. with arrow keys
document.getElementById('elementToFocus').focus();

/* bind aria attribute to styles */
div[aria-hidden="true"]
{
  display: none;
}

/* show the status of the controlled element on the button */
[role="button"][aria-expanded="false"] #icon:after {
    content: ' ›';
}

[role="button"][aria-expanded="true"] #icon:after {
    content: ' ×';
}

role              http://w3c.github.io/aria-in-html/#aria-roles
for               ID of the labelled field
tabindex          0: tab order based on source order
                  -1: element is not included in tab order but can receive focus (user doesn't have to tab through dozens of menu items but can focus on the by arrow keys)
aria-expanded     boolean (state of collapsible element)
aria-controls     ID of the div the current element controls
aria-owns         ID of the div the current element owns where the DOM hierarchy cannot be used to represent the relationship
aria-haspopup     boolean (whether the element has a popup context menu or sub-level menu)
aria-label        provide an invisible label
aria-labelledby,
aria-describedby  a list of IDs that together label/describe the element (labelledby is read instead of the label, describedby after the field type)
aria-flowto       either one ID to proceed to
                  or a list of IDs to choose from (useful when source layout doesn't follow an order of importance)
                  more examples: http://www.w3.org/WAI/GL/wiki/Using_aria-labeledby_for_link_purpose
aria-hidden       boolean - remove it from accessibility tree (for elements with no purpose for non-sighted people)
aria-orientation  horizontal: the element is oriented horizontally
                  undefined (default): its orientation is undefined
                  vertical: it is oriented vertically

aria-activedescendant  identify the currently active descendant of a composite widget

aria-grabbed      boolean
                  true: it has been selected for dragging
                  false: it can be grabbed for a drag-and-drop operation, but is not currently grabbed
                  undefined: (or no value) it cannot be grabbed (default)
aria-dropeffect   indicate the function performed when a dragged element is dropped
                  copy
                  execute: function supported by the drop target is executed, using the drag source as an input
                  link: reference / shortcut created
                  move
                  none: (default)	no operation can be performed
                  popup: popup menu or dialog to choose between drag functionalities

aria-valuemin,
aria-valuemax     define min and max values
aria-valuenow     current value
aria-valuetext    value as to be read (e.g. '42' to be read as "42 percent")

aria-live         off: updates to the region will not be presented to the user unless the assistive technology is currently focused on that region
                  polite: assistive technologies should announce updates at the next graceful opportunity, such as at the end of speaking the current sentence
                  assertive: should notify the user immediately (only in case of danger)
aria-atomic       boolean (read out, when set to true, the whole element if sth is changed in it)
aria-busy         boolean (prevents assistive technologies from reading live elements - useful while elements are still loading)
aria-relevant     spaced list of what is to be read in live elements
                  (additions, removals, text, all)
aria-required     boolean (indicates required form fields)