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.

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
+<header role="banner">
+</header>  
+```
+
 #### 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).