User notification which appears prominently at the top of the page, above the main content.
A page notice is typically classified as either high or low priority. An error that prevents an action or task is high-priority, whilst most other types of notice are low 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 not have more than 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).
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 it's regions or landmarks list.
todo: update guide to account for SVG icon.
To aid discoverabilty of such important content for assistive technology, we make each page notice a custom landmark region with heading.
<section aria-label="Error notice" class="page-notice page-notice--error" role="region"> <h2>We had trouble connecting to PayPal</h2> <p>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-label="Error notice" class="page-notice page-notice--error" role="region" tabindex="-1"> <h2>We had trouble connecting to PayPal</h2> <p>Please make your payment later.</p> </section>
Notices rendered or updated on the client after page load must live within a live-region element. Nest the page notice inside an element with role of
status for high or low priority notices, respectively.
<div role="alert"> <section aria-label="Error notice" class="page-notice page-notice--error" role="alert" tabindex="-1"> <h2>We had trouble connecting to PayPal</h2> <p>Please make your payment later.</p> </section> </div>
Assistive technology will now alert the user of any client-side changes to the notice.
When do I set keyboard focus on a page 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.