maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add title and tooltip accessibility information to HTML style guide. (#11655)

Browse source 
* Add title and tooltip accessibility information to HTML style guide.
* Add sections on native interactive elements and tab order.
This commit is contained in:
CJ Cenizal 2017-06-08 14:55:51 -07:00 committed by GitHub
parent ed8951a816
commit 41b8ac0e6e
1 changed files with 45 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
style_guides/html_style_guide.md
View file

@ -59,4 +59,48 @@ If the element doesn't have children, add the closing tag on the same line as th
attribute2="value2"
attribute3="value3"
></div>
```
```
## Accessibility
### Don't use the `title` attribute
The `title` has no clear role within the accessibility standards.
[See the HTML5 spec](http://w3c.github.io/html/dom.html#the-title-attribute) for more information.
To provide supplementary, descriptive information about a form control, button, link, or other element, use
a tooltip component instead.
Additional reading:
* https://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
* https://www.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title-attribute-use-and-abuse/
* https://www.deque.com/blog/text-links-practices-screen-readers/
### Tooltips
Elements which act as tooltips should have the `role="tooltip"` attribute and an ID to which the
described element can point to with the `aria-describedby` attribute. For example:
```html
<div
class="kuiTooltip"
role="tooltip"
id="visualizationsTooltip"
>
Visualizations help you make sense of your data.
</div>
<button aria-describedby="visualizationsTooltip">
Visualizations
</button>
```
### Prefer `button` and `a` when making interactive elements keyboard-accessible
If something is meant to be clickable, favor using a `button` or `a` tag before over the `kui-accessible-click` directive or `KuiKeyboardAccessible` component. These tools are useful as they augment non-clickable elements with `onkeypress` and `onkeyup` handlers, allowing non-clickable elements to become keyboard accessible. However, `button` and `a` tags provide this functionality natively.
### Use `tabindex` to make elements tabbable
When added to the tab order, elements become focusable via non-sticky-mode keyboard navigation.
To add an element to the tab order, you must add an `id` attribute as well as a `tabindex` attribute. If you don't know which number to use for the tab index, or if you simply want to add it to the general flow of the document, use `tabindex="0"`.