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 textaria-hidden="true"
— to hide things from screen readersaria-controls="…"
+id="…"
— to coordinate elementsrole="…"
— to help define purpose- etc.