Page Notice
User notification which appears prominently at the top of the page, above the main content.
A page notice is typically classified as either high, medium or low priority. An error that prevents an action or task is high-priority.
Page notices are typically (but not always) rendered server-side and visible at page load time.
Composite patterns containing Page Notices are:
You can take a look at the page notice pattern in action on our examples site.
For a real world example, you can also see the pattern in action over on eBay Skin.
A page notice must appear near the top of the page content. Ideally the page notice should be next to the main page heading and above the fold.
A page must have only one page notice visible at any time.
Page notice must not rely on colour alone to convey meaning or tone.
Page notice should use an icon to further assist conveying meaning & tone.
Page notice may optionally contain a button to dismiss and hide the notice.
High priority notice must receive keyboard focus if rendered on the server. In some cases we do this for client-side rendered notices too (e.g. if the notice contains a call to action link or button).
Screen reader must announce client-side changes to visible content.
Screen reader must announce client-side visibility change of hidden content.
Screen reader should display notice in its regions or landmarks list.
todo: update guide to account for SVG icon.
To aid discoverability of such important content for assistive technology, we make the page notice a landmark region with heading.
page-notice.html<section aria-labelledby="alert-title" class="page-notice page-notice--attention" role="region"><h2 id="alert-title">Alert!</h2><p>We had trouble connecting to PayPal. Please make your payment later.</p></section>
The page notice will now appear in a screen reader's list of landmarks as "Error notice".
Adding a tabindex value of -1 allows programmatic keyboard focus on a high-priority page notice.
<section aria-labelledby="alert-title" class="page-notice page-notice--attention" role="region" tabindex="-1"><h2 id="alert-title">Alert!</h2><p>We had trouble connecting to PayPal. Please make your payment later.</p></section>
NOTE: You may wish to apply the tabindex attribute with JavaScript instead.
Notices rendered or updated on the client must live within a live-region. Nest the page notice inside an element with role of role=alert , role=status or aria-live=polite for high, medium or low priority notices, respectively.
<div role="alert"><section aria-labelledby="alert-title" class="page-notice page-notice--attention" role="region" tabindex="-1"><h2 id="alert-title">Alert!</h2><p>We had trouble connecting to PayPal. Please make your payment later.</p></section></div>
Assistive technology will now alert the user of any client-side changes to the notice.
Low priority notices never receive keyboard focus.
All high-priority page notices rendered on the server should receive keyboard focus.
Some high-priority notices rendered on the client should receive keyboard focus. Typically these are notices that contain an interactive call to action that helps resolve the issue.
