Page refreshes

Must Not

Automatic page refreshes must not be used without warning.

Description

Assistive technology, such as a screen reader, may lose its place in the content and announce the wrong information when an entire page reloads automatically. This can be confusing and disorienting for the user.

Techniques that would trigger an entire page to be reloaded must not be used unless the user has been notified.

IOS

Avoid using UIAccessibilityScreenChangedNotification unless the entire screen changes (not just updates). Use UIAccessibilityLayoutChangedNotification to updated content on change. Frequently updating content should include the UIAccessibilityTraitUpdatesFrequently trait to ensure content is updated without disrupting the user.

iOS example

[stockTicker setAccessibilityTraits:UIAccessibilityTraitStaticText | UIAccessibilityTraitUpdatesFrequently];                        
[stockTicker setAccessibilityTraits:UIAccessibilityTraitStaticText];
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, nil)                        

ANDROID

Content is announced as requested by accessibility events sent by accessibility assistant applications.

Android example

Typical accessibility events are sent via the sendAccessibilityEvent() method and the event type TYPE_WINDOW_STATE_CHANGED is not sent unless a window or dialog opens.

                        

The event type TYPE_WINDOW_STATE_CHANGED is when text changes even though a new window or dialog does not open.

                        

HTML

Do not use a setTimeout to update the location object's href property and do not use meta tag refreshes via the http-equiv="refresh" attribute value pair.

Allow the user to control a total page refresh.

HTML example

<head>
    <title>This is appropriate</title>
</head>
<body>
    <p>Please reload this page!</p>
    <a href="...">Reload Page</a>
</body>                        
<body onload=setTimeout("location.href='http://www.bbc.com'",5000)>
    <p>...Information...</p>
</body>

<!-- or -->
<head>
    <title>Don't use this!</title>
    <meta http-equiv="refresh" content="5; http://www.example.com/newpage">
</head>
<body>
    <p>If your browser supports Refresh, you'll be transported to our
        <a href="http://www.example.com/newpage">new site</a>
        in 5 seconds, otherwise, select the link manually.</p>
</body>                        

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Navigate through all content.
  3. Verify that the entire screen does not refresh or update:
    • Automatically, or
    • Based on navigation.
Results

The following check is true:

  • Entire screen does not refresh or change automatically or when focus moves between objects, elements, or controls.