diff --git a/style_guides/html_style_guide.md b/style_guides/html_style_guide.md index fc1b106d78f3f..15213e221fba6 100644 --- a/style_guides/html_style_guide.md +++ b/style_guides/html_style_guide.md @@ -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" > -``` \ No newline at end of file +``` + +## 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 +