From 29cb844b74df745bcc1ce573e547c84d3db74e83 Mon Sep 17 00:00:00 2001 From: Kelsey S Date: Sat, 23 Mar 2019 19:16:02 -0400 Subject: [PATCH] Add Accessible Header Example (#33571) Added example of an Accessible Header tag with the appropriate role, along with a description of why the role is needed and what it signifies. --- .../accessibility/accessibility-examples/index.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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).