Cookie Notice Example

This page shows an example of a WAI-ARIA dialog widget used as a privacy banner regarding cookie use. The page launches with a non-modal interaction pattern, whereby users may interact with the page contents whithout acknowledging the banner. The Launch Modal Example button below will launch a modal version of the banner widget. The non-modal version may be relaunched via the Launch Non-Modal Example button.

Implementation

This example uses a WAI-ARIA dialog implementation pattern. You may read more about ARIA dialogs in the WAI-ARIA Authoring Practices documentation. The soruce for this snippet is as follows:

<div role="dialog" aria-modal="false" aria-labelledby="alert-box-title" aria-describedby="alert-box-message">
   <a class="alert-box-close" href="javascript:void();" role="button" aria-label="Close dialog" title="Dismiss"></a>
   <div class="alert-box-body">
      <h2 id="alert-box-title" class="alert-box-title"> … </h2>
      <p id="alert-box-message"> … </p>
   </div>
   <div class="alert-box-button-container">
      <div class="alert-box-button button-more">
         <a class="toggle-display" href="javascript:void();">About Cookies</a>
      </div>
      <div class="alert-box-button button-allow">
         <a class="allow-all" href="javascript:void();" role="button">I Agree</a>
      </div>
   </div>
</div>

The markup is inserted via javascript at the start of the body of the page. This assures that the content is always announced by screen reader technologies, even for browser and assistive technology combinations that do not support WAI-ARIA.

Required ARIA Markup
Attribute	Usage	Description
dialog (role)	Placed on the containing element of the banner	Identifies the banner as a distinct, interactive region of the page. It further causes assistive technologies, such as screen readers, to announce the dialog's title and message automatically.
aria-modal (property)	Placed on the containing element of the banner	Specifies if the dialog is modal or not. Set to "true" if enforcing modal behavior; "false" if the dialog should not be modal
aria-labelledby (property)	Placed on the containing element of the banner.	Specifies the dialog title. The HTML id specified must exist in the page. Note: aria-labelledby is spelled using two l's.
aria-describedby (property)	Placed on the containing element of the banner.	Specifies the dialog message. The HTML id specified must exist in the page.
button (role)	Placed on the close and agree buttons.	Causes the links used to implement the buttons to be identified by assistive technology as buttons, ensuring agreement between the semantic role, appearance, and behavior of those elements.
aria-label (property)	Placed on the close button.	Supplies text for the link used to implement the button, since the link is empty
aria-hidden (state)	Placed on the direct children of the document body when the dialog is modal and displayed.	Hides content from assistive technology when the value is "true"

Non-Modal Interaction Pattern

A non-modal dialog is one that does not restrict interaction to the elements of the dialog while it is displayed. This interaction pattern should only be utilized when it is not essential that the user have their workflow interrupted to acknowledge the dialog.

As indicated in the table above, the aria-modal attribute must have a value of "false" when the dialog is not modal.

Note: When a dialog is dismissed, focus must be placed on an appropriate focusable element of the webpage. In this example, focus is placed on the skip link to demonstrate a useful pattern for users who only interact via the keyboard.

Modal Interaction Pattern

A modal dialog is one that restricts interaction to the elements of the dialog while it is displayed. This interaction pattern should be utilized when it is essential that the user have their workflow interrupted to acknowledge the dialog. If the priority of the message is sufficient to be considered an alert, the dialog role should be replaced with alertdialog:

<div role="alertdialog" aria-modal="true" aria-labelledby="…" aria-describedby="…">
   …
</div>

Additional requirements for modal dialogs

As indicated in the snippet above, the aria-modal attribute must have a value of "true" when the dialog is modal.
JavaScript must be utilized to restrict interaction to the contents of the dialog. Note how pressing the tab key repeatedly will cycle through the focusable elements in the dialog. The ability to scroll the page has also been disabled via JavaScript. While not strictly necessary, this is a typical feature of modal dialogs.
Page content should be rendered inert by the application of aria-hidden="true" to the immediate children of the document body. This will hide those elements and any child elements from assistive technologies. Remove the aria-hidden attribute when the dialog is dismissed.
Insert an overlay element at the start of the document body to restrict users from clicking on any interactive page elements outside of the dialog. In this example, the overlay is a simply a <div> element with a partially transparent background and width and height set to 100%. Further, the CSS z-index property is used to ensure that the overlay appears above all of the page content.