Overview

What is Progressive Enhancement and why is it important? How can we make web sites and web appliations that are accessible to all users, regardless of the hardware and software those users have? This lesson has some of the answers and shows you where you can find more details specific to the tasks you will be trying to complete in the future.

Progressive Enhancement

Progressive enhancement is a design methodology that ensures a web site/application is accessible to everyone, regardless of what kind of device they're using. We do this by separating our application's structure and content from the styling and from the functionality, essentially breaking any site/applciation into those 3 components:

Using progressive enhancement, we must design our web site/application in three stages:

  1. Define the content of the page and then use HTML to add the content and the structure of the pages/documents/etc. The content and structure should be viewable/readable in any browser on any device, including screen readers.
  2. Add the CSS styling and layout, ensuring that all browsers/devices are still supported, and adding some features for the primary browser/device set. The site should still be viewable/readable to all users on any browser/device, including scree readers.
  3. Add the JavaScript functionality to add interactivity, functionality, and enhancements. Users on all browsers/devices, including screen readers, should be supported: the JavaScript functionality should not be mandatory in order to use the site/application. There should be alternatives available for users that can't use the JavaScript functionality.

The key thing to remember is that your site/application must always be accessible to all devices/users. Added styles and Javascript should only enhance the experience, but should NEVER hinder the experience of any category of user. For example, a user with a screen reader doesn't care about the styling and layout, but the flow of the document should still be accessible to them: the header should still be read first and the footer should still be read last, items in a list should still be read in order, the user should still be able to tab from link to link in a logical order or from one form field to another in an order that makes sense. Similarly, screen readers generally don't support JavaScript, so any JavaScript functionality should only be an enhancement to the main experience, and not a requirement to using the site/application. For example, if you use Javascript to populate a drop-down list of provinces in an address form, a user with a screen reader might see an empty list, and will not be able to choose a province. In that case, you would have to come up with an alternative or option for users with a screen reader.

I'm sure you've visited web sites on both a laptop or PC and also on a smaller device like a smart phone. Have you ever visted a site on your phone and found that it's difficult to use because it wasn't created to be used on a small screen, or it wasn't optimized for your phone? That's an example of bad design, where they didn't design using progressive enhancement.

Exercise

Read the following articles and then answer the questions below. Write your answers down in your notes in your own words. Understanding these concepts is key to understanding how to develop web sites and applications that are accessible to all users.

  1. What is progressive enhancement (PE)?
  2. Why is it important?
  3. What is graceful degradation, and how is it different from progressive enhancement?
  4. What are the four major reasons for developing with progressive enhancement in mind? Make sure you're able to briefly explain each in your own words.
  5. What is WAI-ARIA (not just what it stands for: what is it, what is its purpose)?

Accessible Web Design and Development

It should be obvious that accessible web sites and applications are absolutely vital: In many countries, all software and web-based material and applications required for work and education must be accessible to all users. If a worker or student is hard of hearing, blind, or has mobility issues, or has any other disability, their employer/educator is required to ensure that all software and web content is accessible. If your web site or application ignores a certain demographic of users, a company or educational instituion will not be allowed to use it.

Even if your web project is not required for someone to do their job or learn in their program of study, you should still ensure that your project is accessible. You would not wish to obtain a bad reputation for ignoring the needs of a certain group of users, and you should want to ensure that your site or application is inclusive and usuable to everyone.

There are two sets of standards for web accessibility:

Both of these standards are maintained by the World Wide Web Consortium (W3C)

The WCAG defines the international standard for accessible web content. The WCAG document shows you how to make your web content accessible and provides conformance standards or "success criteria" so you can "grade" your web content to see how well it conforms to the international standard.

WAI-ARIA focuses on rich internet applications, which are web applications that contain dynamic and interactive content/elements, such as those written with JavaScript. This one is particularly important because many users that use screen readers cannot use the JavaScript functionality in a web application: most screen readers can't understand or are unable to execute JavaScript code. Additionally, JavaScript functionality is the most difficult to accommodate: If someone can't use a mouse, how will they be able to manipulate interactive elements in an application? If a user is blind, how can they access the menu system? ARIA defines a set of attributes and techniques a developer can use to make rich internet applications accessible to all users. The biggest challenges are generally endured by those users with visual or mobility issues, but ARIA covers other isssues, as well.

These standards and guidelines are based on the the four principles of accessible web design. I will summarize these below and add some extra comments and information but be sure to click the links to MDN (Mozilla Developer's Network - a great source of up-to-date help and information on anything related to web design and web programming):

In addition to the links above, another helpful resource is MDN's ARIA page: it summarizes the purpose and contents of ARIA and contains helpful tutorials on how to use ARIA in your web applications.