Make status messages detectable semantically

Applicable Role(s): Developer

Overview

If a user can’t visually perceive a page, they may not realize that statuses, updates, or confirmations were loaded on a page. This is disorienting, and can make users wonder if the button or control they pressed worked.

People using magnification to enlarge webpage text may also miss status status message altogether due to the message being out of frame. If the message can be coded semantically, then the message can still be understood and conveyed by assistive technology.

Best Practices

Use live regions with caution!

If not coded carefully, the messaging can be too verbose for users and create a confusing user experience. Use the following pattern examples and related resources carefully before creating a live region.

Use the proper live region role for the context

  • The alert role (role="alert") or aria-live="assertive" should only be used if the messaging is time-sensitive and important (a potential loss of data/progress, progress errors, emergency alerts).
  • Use the status role (role="status") or aria-live="polite" for progress or other updates
  • Other live updates that don't fall into these categories can use a combination of aria-live="assertive/polite/off" and aria-atomic="true".

If there is a status or dynamic update related to existing content, then typically focus shouldn't move to the message.

Ensure the live region markup exists on the page before adding the updated content.

Pattern Examples

Example: Items in cart

On page load:

When the page loads, the aria-live and aria-atomic attributes are already part of the page, rather than added when the status updates.

<div aria-live="polite" aria-atomic="true">
0 items in cart // or other placeholder
</div>

After items added

<div aria-live="polite" aria-atomic="true">
1 item added to cart // announces as such to user
</div>

Example: Quick Search

Western's quick search component uses a live region to indicate how many items are in the list to navigate (the "x results" text).

The example articles here begin with letters 'R' or 'G' to cut down the amount of list items. For more results, see our full writers' guide.

Live region code on page load

// role="status" is equal to 
// aria-live="polite" aria-atomic="true" 

<div role="status">  
<p>20 results</p> 
</div>

Rendered search

Search Results

  • gender

    When writing about individuals, ask which gender pronouns they use for themselves, and use them in the story. See inclusion.

  • General University Requirements

    GUR is acceptable on second reference for audiences who are likely to be familiar with the abbreviation. Use care for other audiences; consider descriptive terms such as general education requirements for graduation.

  • Geology Department or Department of Geology
  • Global Connections

    A summer youth program for international students in grades four through six who come to Western for language enrichment and other activities.

  • Global Engagement, Institute for

    Formerly Center for International Studies

  • Global Humanities and Religions Department or Department of Global Humanities and Religions

    Formerly called the Liberal Studies Department.

  • Global Learning

    Study abroad programs designed and led by WWU faculty members. Offered by Western’s Institute for Global Engagement.

  • Goltz-Murray Archives Building

    Archives Building on second reference. Houses Western’s University Archives and Records Management, the Center for Pacific Northwest Studies, and the Northwest Regional Branch of the Washington State Archives.

  • GPA, grade-point average

    Both are acceptable in all references. GPAs normally have two numbers after the decimal point, 3.25, 4.15.

  • grades

    Use capital letters with no quotation marks, A, B, C etc. For plurals, add ’sA’s, B’s, C’s etc. Also, Pass, No Pass, Incomplete, Withdrawal, etc.

  • Graduate School

    Capitalize when referring to Western’s Graduate School.

  • Grandparents U
  • Great Northwest Athletic Conference

    GNAC on second reference.

  • Green Energy Fee

    Outdated name. See Sustainability, Equity & Justice Fund

  • RA

    Acceptable on first reference for resident advisor if readers are likely to be familiar with the abbreviation. Use care for external audiences. See apartment advisor and adviser, advisor

  • range of time, days or dates

    The preferred format is to spell out to and through in body copy when referring to a range of time or days of the week. The word from usually can be omitted. Office hours are Monday through Friday, 9 a.m. to 4:30 p.m. or Finals week is Monday through Friday.

  • Ray Wolpow Institute for the Study of the Holocaust, Genocide, and Crimes Against Humanity

    Formerly the Northwest Center for Holocaust, Genocide and Ethnocide Education.

  • Recreation Center

    Use Wade King Student Recreation Center on first reference. Student Recreation Center or, informally, Student Rec Center, is acceptable on second reference.

  • Red Square
  • residence hall

    Preferred to dorm or dormitory when referring to student housing.