Page Notice

A custom landmark which appears prominently at the top of the page.
Payment error

Introduction

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:

Working Examples

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.

Best Practices

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.

Interaction Design

Keyboard

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

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.

Developer Guide

todo: update guide to account for SVG icon.

Landmark Region

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".

Programmatically Focusable

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.

Live Region

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.

FAQ

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.