Add alt text for images and font icons in uberbar

[dubrod]

For compliance with Web Content Accessibility Guidelines (WCAG)

• [x] The gravatar image has no alt text
• [ ] The gear icon and help icon need text. Options include: Use visually hidden text that only screenr readers can access (use CSS clip or offscreen text) and hide the icon itself in case the screen reader tries to read it (it will almost surely read it incorrectly):

<span class="icon-gear icon icon-large" aria-hidden="true"></span><span class="visually-hidden">System Menu</span>

Or use role="image" and aria-label:

<span class="icon-gear icon icon-large" role="image" aria-label="System Menu"></span>

See accessibility to-do list at https://dequeuniversity.com/modx-accessibility.html#uberbar

[dubrod]

manager/controllers/a11y-theme/header.php

$userImage = '<img src="' . $gravsrc . '" alt="'.$this->modx->getLoginUserName().'" />';

[dubrod]

Changing the Icons requires a change to the Core Lexicon so we are adding this to the Core Considerations

I don't believe a mixture of icons and text will be an effective experience, it should just be all text menus. Open for discussion.

[kensgists]

Haven't seen the final implementation of this, but note that simple background images will not render when Windows High Contrast is enabled. However, if you are using font glyphs, these will render out fine (as would something referenced by an image tag). We did a bunch of experiments on buttons and how they get spoken. Turns out the way they are spoken depends somewhat on how you get to them in the screen reader -- via tabbing or via arrows. This is particular to focusable items, but it may be useful information. Here are our results: https://dl.dropboxusercontent.com/u/4904309/experiments/buttons.html. Note, all of these implementations work fine in Windows High Contrast.