diff --git a/_layouts/post.html b/_layouts/post.html index d994dfae36c3b9d8c6bc3166fdfea4447b133191..df90a88e92703d8bae6021b6132e842ba8674888 100755 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -10,15 +10,18 @@ layout: default <small class="postdate"> Published on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time> - {% if page.last_updated %} - – Updated: - <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.last_updated | date: "%B %d, %Y" }}</time> - {% endif %} </small> {% endif %} {% if page.author %} <small class="postauthor">by {{ page.author }}</small> {% endif %} + {% if page.last_updated %} + – Updated: + <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.last_updated | date: "%B %d, %Y" }}</time> + {% if page.updated_by %} + <small class="postauthor">by {{ page.updated_by }}</small> + {% endif %} + {% endif %} </p> </header> {% endif %} diff --git a/_posts/2013-01-14-aria-landmark-roles.md b/_posts/2013-01-14-aria-landmark-roles.md index be87feaaebe9e1abdda74f6ced8fd453801ac070..3fe376cbcd2350559ccaa89636bd579cbad1d8ce 100644 --- a/_posts/2013-01-14-aria-landmark-roles.md +++ b/_posts/2013-01-14-aria-landmark-roles.md @@ -3,82 +3,150 @@ layout: post title: | Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping description: Use ARIA Landmark Roles to help assistive devices navigate the markup. -# date: -# last_updated: +author: Erik Runyon +date: 2013-01-14 +updated_by: Scott O'Hara +last_updated: 2018-07-22 categories: - Quick Tips --- -[ARIA Landmark Roles](http://www.w3.org/TR/wai-aria/roles) help assistive device users navigate your site ([example video by Leone Watson on YouTube](https://youtu.be/IhWMou12_Vk)). Important roles to be aware of are: +<a href="https://w3c.github.io/aria/#landmark_roles"><abbr title="Accessible Rich Internet Application">ARIA</abbr> Landmark Roles</a> can be helpful to assistive device users, as they can be used to orient a user to, and easily navigate, your website or application. For a quick video demonstration, check out ["How ARIA landmark roles help screen reader users"](https://youtu.be/IhWMou12_Vk), by [Léonie Watson](https://tink.uk/). -* **banner** – Typically the “header†of your page that includes the name of the site -* **search** – For the search form ([how to implement](http://adrianroselli.com/2015/08/where-to-put-your-search-role.html)) -* **main** – This would designate the main content area on your site -* **navigation** – Use on any navigation list, typically on the nav element -* **contentinfo** – Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements +## Landmark quick reference +The following are common landmark roles that tend to be useful on many pages: -To add a role to an element, simply add the "role" as an attribute: +<dl> + <dt>banner</dt> + <dd> + <p> + Typically the “header†of your page, containing the name of the site/application along with other globally available content. + </p> + </dd> + <dt>search</dt> + <dd> + <p> + Use on the primary search form. Often, but not always, found within a `banner`. + </p> + </dd> + <dt>main</dt> + <dd> + <p> + Designates the primary content area of the current document. Only one main landmark should be exposed to users at a time. + </p> + </dd> + <dt>navigation</dt> + <dd> + <p> + Used to promote an area as a navigation. Combine with a unique <code>aria-label</code> to provide context of the navigation's purpose. e.g. <code><nav aria-label="primary"></code>. + </p> + </dd> + <dt>contentinfo</dt> + <dd> + <p>Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements.</p> + </dd> +</dl> - <header role="banner" class="site-header"> +Implementing landmarks in your documents is a straight forward process. Simply add the <code>role</code> attribute referencing the appropriate landmark value. For example: +``` +<footer role="contentinfo">...</footer> +``` -So, why do you see this warning when you [validate your html](https://validator.w3.org/)? -<p class="info warning"><strong>Warning</strong>: <span>The <code>banner</code> role is unnecessary for element <code>header</code>.</span></p><p class="location">From line <span class="first-line">60</span>, column <span class="first-col">1712</span>; to line <span class="last-line">60</span>, column <span class="last-col">1758</span></p><p class="extract"><code>/a></div> <b><header class="header fixed-pos" role="banner"></b><div c</code></p> +## HTML5 Implicit Mappings of Landmark Roles +Before you start adding <abbr>ARIA</abbr> roles to your HTML elements, you should be aware that many of these landmarks will be natively conveyed by proper HTML usage. For example, the following markup snippet will produce a warning in modern HTML and accessibility automated checkers: -You see the warning ([consider fixing/changing](https://www.paciellogroup.com/blog/2015/08/short-note-on-html-conformance-checking/)) because, in HTML5, several of the landmark roles are implicit via the native structural elements. +``` +<header role="banner" class="site-header">...</header> +``` -**HTML5 Implicit Mappings** +<figure class="figure-callout"> + <samp> + <strong>Warning</strong>: <span>The <code>banner</code> role is unnecessary for element <code>header</code>.</span> + <br> + <code><b><header class="site-header" role="banner"></b>...</code> + </samp> + <figcaption> + A snippet of the warning output from the <a href="https://validator.w3.org/nu/">Nu HTML Validator</a>. + </figcaption> +</figure> -<table class="table table-striped table-bordered"> +The following table outlines the different <abbr>ARIA</abbr> landmarks, and the HTML5 element they are associated with. + +<table class="table-dividers"> + <col width="35%"> <thead> <tr> - <th>Landmark Role</th> - <th>HTML5 Structural Element</th> + <th scope="col">Landmark Role</th> + <th scope="col">HTML5 Structural Element</th> </tr> </thead> <tbody> <tr> - <td>banner (if not within an article or section element)</td> - <td> - <header> - </td> + <td>banner</td> + <td> + <code><header></code> + <br>(if not a child of a sectioning element or the <code>main</code>.) + </td> + </tr> + <tr> + <td>complementary</td> + <td> + <code><aside></code> + </td> </tr> <tr> - <td>main</td> - <td> - <main> (only use one per page) - </td> + <td>contentinfo</td> + <td> + <code><footer></code> + <br>(if not a child of a sectioning element or the <code>main</code>.) + </td> </tr> <tr> - <td>navigation</td> - <td> - <nav> - </td> + <td>form</td> + <td> + <code><form></code> + <br>(if provided an accessible name via <code>aria-label</code> or <code>aria-labelledby</code>) + </td> </tr> <tr> - <td>contentinfo</td> - <td> - <footer> - </td> + <td>main</td> + <td> + <code><main></code> + <br>(only use one per page) + </td> </tr> <tr> - <td>article</td> - <td> - <article> - </td> + <td>navigation</td> + <td> + <code><nav></code> + </td> </tr> <tr> - <td>complementary</td> - <td> - <aside> - </td> + <td>region</td> + <td> + <code><section></code> + <br> (if provided an accessible name via <code>aria-label</code> or <code>aria-labelledby</code>) + </td> </tr> <tr> - <td>region</td> - <td> - <section> - </td> + <td>search</td> + <td> + none + </td> </tr> </tbody> </table> -The good news is most modern [desktop browsers](http://stevefaulkner.github.io/html-mapping-tests/) (except IE) support this mapping. However, [iOS Safari](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks-example.html) does not. OUCH! For now, it’s probably best to implement the landmark roles and ignore these warnings. \ No newline at end of file +The majority of [modern browsers](http://www.html5accessibility.com/) (except <abbr title="Internet Explorer">IE</abbr>) support these mappings. But it's always beneficial to run your own tests to ensure the appropriate landmark role is being appropriately exposed to assistive technology. + +For example, as of July 2018, Safari and VoiceOver on macOS High Sierra do not properly expose the <code>contentinfo</code> role from a <code>footer</code> element. When presented with situations like this, ignoring conformance warnings, and adding a redundant role to an element, may be preferred to not exposing the correct landmark information. + + +## Additional references +For more information about landmarks and other concepts mentioned in this article, you can check out the following resources: + +* [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html) +* [Where to put your search role](http://adrianroselli.com/2015/08/where-to-put-your-search-role.html) +* [HTML Conformance checking](https://developer.paciellogroup.com/blog/2015/08/short-note-on-html-conformance-checking/) +* [W3C: Using ARIA landmarks to identify regions of a page](https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html) +* [W3C: Using ARIA](https://www.w3.org/TR/using-aria/) diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 2edbdcf5afd72bddd2507e85dabede284b3fda06..a916dfefefcb9f0b8ed72dbf2e54fe8a7c5e0862 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -268,3 +268,21 @@ $mobile: 24em; margin-bottom: 1em; } } + +.figure-callout { + border: 1px solid rgba(0,0,0,.625); + padding: 1em; + margin-bottom: 1.5em; +} + +.table-dividers { + margin-bottom: 1.5em; + + th { + font-weight: bold; + } + + td, th { + border-bottom: 1px solid rgba(0,0,0,.35); + } +}