Ally Palanzi

Accessibility matters. Let’s do something about it

• Disability can be situational, temporary or permanent..
• ..and affects us all, at some stage or another

• Accessibility is where the industry is going; you can either get on board or fall behind

• This can become a talking point of our product

• And be a way of leading us to better UX for all

• VOX Media accessibility guidelines

• Microsoft inclusive design

Ally Palanzi

Accessibility matters. Let’s do something about it

• Disability can be situational, temporary or permanent..
• ..and affects us all, at some stage or another

• Accessibility is where the industry is going; you can either get on board or fall behind

• This can become a talking point of our product

• And be a way of leading us to better UX for all

• VOX Media accessibility guidelines

• Microsoft inclusive design

Ally Palanzi

Accessibility matters. Let’s do something about it

• Disability can be situational, temporary or permanent..
• ..and affects us all, at some stage or another

• Accessibility is where the industry is going; you can either get on board or fall behind

• This can become a talking point of our product

• And be a way of leading us to better UX for all

• VOX Media accessibility guidelines

• Microsoft inclusive design

Barak Chamo

Houdini

😍

CSS Parser API

• Extend the parser, making it aware of new constructs
• E.g. @extends, psudo classes, media rules etc
• They will be placed in the right place in the CSSOM

CSS Properties and Values API

• Takes custom properties a step further and makes them even more useful by adding types

body {
  --primary-theme-color: lemonchiffon;
  transition: --primary-theme-color 1s ease-in-out;
}
body.night-theme {
  --primary-theme-color: goldenrod;
}

CSS Typed OM

• (CSSOM v2.0)
• Solve problems with the current model
• Include features of the new CSS Parsing/  CSS Properties and Values API
• Convert string values to meaningfully typed JavaScript representations for big performance gains

CSS Layout API

• Enables developers to write their own layout modules
• Masonry..?

body {
  display: layout('masonry');
}

CSS Paint API

• Developers can register painters, similar to registering a new layout

.bubble {
  --circle-color: blue;
  background-image: paint('circle');
}

• Or a little more exciting..

Worklets

• Where you define all the things we've been using
• Similar to web workers
• Independent of the main thread
• Operations are heavily restricted to ensure high performance

Composited scrolling and animation

• For highly performant scroll- and input-based animations, e.g. sticky scroll headers and parallax effects
• Logic will run in a worklet, with support for a limited subset of a DOM element's properties
• The subset will be limited to properties that can be read or set without forcing the rendering engine to recalculate layout or style
• The real thing..

José M. Pérez

Progressive image rendering

• Interaction observer API
• Animated SVG canny edge detected loading

// create observer
let observer = new IntersectionObserver(onChange);

function onChange(changes) {
  changes.forEach(change => {
    // take image url from `data-src` attribute
    change.target.src = change.target.dataset.src;

    // stop observing the current target
    observer.unobserve(change.target);
  }
}

// convert node list to array
const imgs = [ ...document.querySelectorAll('.lazy') ];

// observe each image
imgs.forEach(img => observer.observe(img));

Interaction observer API

In action...