diff --git a/guide/english/accessibility/accessibility-examples/index.md b/guide/english/accessibility/accessibility-examples/index.md index 7e7a6a98e3..9cba674295 100644 --- a/guide/english/accessibility/accessibility-examples/index.md +++ b/guide/english/accessibility/accessibility-examples/index.md @@ -49,8 +49,19 @@ Create a class for the link that can be styled with CSS. In my example, I have a ``` These CSS styles hide the link by default and only display the link when it is receiving keyboard focus. For more information visit the [a11yproject](http://a11yproject.com/posts/how-to-hide-content) and this [blog post](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/). +### Accessible Header Structure + +- Role "banner" is added to the ```header``` tag to signify to screen readers that this tag is the top most section. The role on the ```header``` is depreciated in HTML5 but should be added still in order to support as many screen readers as possible. +- This role is added to the ```header``` element when it is the child of the ```body``` element. + +```html +
+
+``` + #### More Information - [MDN: Accessible Tables](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users) - [Accessible Tabs](https://simplyaccessible.com/article/danger-aria-tabs/) - [More practice with accessible tabs](https://codepen.io/svinkle/pen/edmDF) +- [W3C Website documentation](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/banner.html).