Technique C34:Using media queries to un-fixing sticky headers / footers

Applicability

This technique is applicable to Cascading Style Sheet / HTML technologies.

This technique relates to 1.4.10: Reflow (Advisory).

Description

The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using min-height, max-height and min-width media queries techniques that adapt to the available space of the viewport.

Sticky regions always stay visible in the viewport while the other content will disappear underneath when scrolling. In terms of content visibility, this is often not a problem on the desktop and on mobile devices in portrait orientation. However, when using mobile devices in landscape orientation or when zooming in on the desktop, sticky regions may block a big portion of the screen: the height of the sticky region may leave only a small part of the screen for the display of page content.

Disabling, or un-fixing sticky regions, is an effective way to allow for enough available space when users prefer different reading and zoom preferences or when using landscape mode.

Be aware that sticky regions can create disadvantages for keyboard users and should therefore be used judiciously. The problem for keyboard users tabbing through a page with a fixed header is that once the page has started to scroll, tabbing backwards to reach interactive elements higher up on the page will often mean that the focus becomes invisible once it moves behind the sticky header. Users must then scroll up to be able to see the focus, something they may not necessarily be aware of. In the same way the visible focus can disappear behind a sticky footer, so users would need to scroll down to be able to see their focus position, which is a major inconvenience.

The basic approach for un-fixing sticky headers / footers is to:

  1. Define the first sticky regions using media query min-height properties, so they get fixed or un-fixed depending on the available space;
  2. Define other sticky regions using media query min-width and max-height properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device;

Examples

Example 1: Un-fix sticky headers / footers in HTML and CSS

The following example uses HTML and CSS to un-fix sticky headers / footers. The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed. When the min-height property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS min-height, max-height and min-width media query properties.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Using media queries to un-fix sticky headers / footers</title>
    <style>

    /* Sticky Styling */

    header { min-height: 130px; }

    @media (min-height: 480px) {
      header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
    }

    @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation: landscape) {
      header {
        position: static;
      }
    }

    footer { min-height: 130px; }

    @media (min-height: 480px) {
      footer {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
      }
    }

    @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation: landscape)  {
      footer {
        position: static;
      }
    }

    </style>

  </head>

  <body class="grid">

    <header role="banner" class="grid-item">
      ...
    </header>

    <main role="main" class="grid-item">        
      ...
    </main>

    <aside role="complementary" class="grid-item">
      ...
    </aside>

    <footer role="contentinfo" class="grid-item">
      ...
    </footer>

  </body>
</html>

Working example: Using CSS Flexbox for Reflow

Tests

Procedure

Depending on the environment to be tested the actual modes or sizes can differ.

  1. Display content on a device / user agent in portrait mode.
  2. Change the orientation to landscape.
  3. Check whether the sticky header and footer will be un-fixed depending on the existing media query settings.
  4. Display content on a desktop / user agent at a starting viewport width of 1280x1024 CSS pixels.
  5. Change the viewport size in width and height or use the zoom function of the browser.
  6. Check whether the sticky header and footer will be un-fixed at specific sizes depending on the existing media query settings.

Expected Results

  • #3 and #6 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.