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.

Video & tutorials

• Progressive enhancement ➔
• Accessibility ➔
• Accessibility cheat sheet ➔
• Accessibility checklist ➔
• JavaScript, jQuery & accessibility ➔