Browse files

Add rudimentary HTML guidelines (mostly ARIA)

  • Loading branch information...
1 parent 5237930 commit 9b611013e53211737976fe59bd36fe835ace8661 @bradwright bradwright committed Jul 12, 2012
Showing with 39 additions and 0 deletions.
  1. +39 −0
@@ -0,0 +1,39 @@
+# HTML coding style
+## HTML5
+* Always quote attribute values - the decision tree for remember when to
+ selectively quote is too much mental overhead, so just quote them.
+* Always use well-formed HTML - implicitly closed elements such as
+ `<p>` cause unnecessary parsing overhead and can cause issues in
+ accessibility
+## Use ARIA roles appropriately
+### Guidance on using ARIA landmarks
+When you use HTML5 sectioning elements it's a good idea to include
+the appropriate ARIA landmark roles as well. The trick when you're
+using both HTML5 and ARIA is to put the landmark on the sectioning
+element itself because this avoids the information being duplicated by
+screen readers that support both technologies.
+ <header role="banner"></header>
+The following roles map directly to HTML5 sectioning elements:
+* `role="complimentary"` maps to the `<article>` element
+* `role="contentinfo"` maps to the `<footer>` element
+* `role="navigation"` maps to the `<nav>` element
+The following landmark roles don't map to HTML5 elements, but are
+still good to use:
+* `role="search"`
+* `role="main"`
+* `role="application"`
+[Demo of how landmark roles help screen reader users](

0 comments on commit 9b61101

Please sign in to comment.