A quick introduction to progressive enhancement with JavaScript and applications and how to detect browser features.

Go fullscreen: ⌃⌥F

PE & a11y

Progressive enhancement

JavaScript is a powerful tool to enhance your website

  • What happens if it fails to load?
  • What happens if their ad blocker blocks it?
  • What happens if your user has it disabled?

Your portfolio should still work.

Provide a base-level experience

  • Your portfolio, up to this point, should be fully functional without JavaScript
  • Now add JS touches to enhance the user experience

Detect CSS features

/* Work without parallax here */

@supports (transform-style: preserve-3d) {
  /* Put parallax code in here */
}

Or from with JS

if (CSS.supports('filter', 'greyscale(1)')) {
  // Make all things grey-scale
}

JavaScript doesn’t make your website inaccessible

With a little care it enhances your website—making it even more usable & accessible

Use proper semantics

  • Don’t use <div> when something else is better
  • If it goes to another page use an <a> tag
  • If it controls something on the same page use a <button> tag
  • etc.

Consider adding ARIA

  • aria-label="…"
    — for more accessible text
  • aria-hidden="true"
    — to hide things from screen readers
  • aria-controls="…" + id="…"
    — to coordinate elements
  • role="…"
    — to help define purpose
  • etc.
Start

A quick introduction to progressive enhancement with JavaScript and applications and how to detect browser features.