Progressive functionality

Must

Apps and websites must be built to work in a progressive manner that ensures a functional experience for all users.

Description

Lower end and older mobile devices may have poor support for the latest software and hardware features, or a device may be experiencing network issues. Additionally, users may have some features disabled, including users of assistive technology and those on secured networks.

Building apps and websites in a progressive manner means dynamically changing a basic experience when new features are detected that can enhance the experience. For some content, such as video or games that require Javascript, it may be necessary to provide a message explaining to the user what is required and linking to alternative content.

IOS

Use version or feature detection to determine whether or not to enhance a basic experience.

iOS examples

 
// Example 1 - checking a class is available
if (NSClassFromString(@"UIPopoverController")) {
    // Do something
}

// Example 2 - OS version detection
if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion:(NSOperatingSystemVersion){10, 0, 0}]) {
  // Cool new feature that iOS 10 supports
 } else {
  // Fallback to something less cool, but that will work on iOS 9 and below
}

// Example 3 - OS version detection with Swift 2.0
if #available(iOS 10.0, *) {
  // Cool new feature that iOS 10 supports
} else {
  // Fallback to something less cool, but that will work on iOS 9 and below
}                        

ANDROID

Use version or feature detection to determine whether or not to enhance a basic experience.

Android example

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  //Enable your feature
}
else {
  //Disable your feature
}                        

HTML

Use version or feature detection to determine whether or not to enhance a basic experience. Use noscript to provide information if any content requires JavaScript to function. The basic experience should work without depending on fillers or ARIA. Check newer Javascript methods are supported, and check newer CSS rules are supported.

HTML examples

<!-- Example 1 - HTML content that does not rely on JavaScript or CSS enhancement to function -->
<a href="page2.html"> Next Page </a>

<!-- Example 2 - Content that is displayed with or without JavaScript -->
<script>
    // embed game or media player
</script>
<noscript>This content requires Javascript to be enabled.</noscript>

<!-- Example 3 - check if a Javascript method or property is available -->
if("geolocation" in navigator) { ... }

<!-- Example 4 - check if CSS rules are supported -->
@supports (display: flex) and (transition: .5s) {
  .box { display: flex; transition: .5s; }
}                        
<!-- Example 1 - JavaScript based link -->
<a onclick="nextPage();"> Next Page </a>

<!-- Example 2 - content that is only available with JavaScript and no fall-back explanation -->
<script>
    // embed game or media player
</script>                        

TESTING

 

Procedures
  • Identify content and functionality that may be dependent on JavaScript.
  • Run the app or site on a device or mobile browser, or assistive technology that does not support JavaScript, or has Javascript disabled.
  • Verify that content is available, or information is provided about why it isn't available.
  • Verify that functionality is available.
Results

The following check is true:

  • Content and functionality are available when run on a mobile device, browser, or a screen reader that does not have JavaScript enabled.