Tuesday 12 March
Day 2 — Full-day workshops
Accessible UI patternsSara Soueidan Front-end web developer
Accessibility doesn’t have to be hard or time-consuming. Once you learn how to think and code inclusively, writing accessible markup becomes second nature, and part of your everyday coding workflow.
In this workshop you will learn how to build UI components with inclusivity baked right into them from the start.
You’ll learn some of the most important basic accessibility principles. Then, we’ll walk through some of the most common UI patterns and learn what it takes to make them accessible. (You’ll be pleasantly surprised at how little is sometimes needed to do so!)
You’ll learn about ARIA attributes and when and how to use them correctly to make UI elements screen reader-friendly. Through practice, you’ll get familiar with some of the most important and most used ARIA attributes.
Some of the components and patterns we’ll cover include:
- SVG Icons and icon-based buttons,
- color swatches (for design systems),
- navigation systems:
- mobile navigation,
- custom checkboxes and radio buttons,
- toggle switches,
- tooltips and interactive hints,
- validation and error messages,
- file inputs,
- and a few more if time allows,
- content accordions. You’ll learn by building most of the above patterns yourself, and testing some of them using your operating system’s screen reader.
Design for developersSarah Drasner Senior Developer Advocate at Microsoft
In this workshop you'll
- Learn how to create dynamic layouts from the ground up, from understanding principles of composition to how to implement them in the browser.
- Understand why so many people love web typography, as well as simple rules you can follow.
- Learn the basics of color theory and resources that can help speed up your understanding.
- Learn the basics of how to work with image editing software like Sketch and Adobe Photoshop and when to reach for each.
- Learn about how the browser sees things, and how this helps create dynamic and beautiful interfaces.
- Find out how to prototype quickly, and how to communicate your ideas to others so that you can get up-and-running on a team.
- Learn how to work with motion on the web as well as how it impacts perceived performance.
- Understand what people mean when they talk about user flows and user experience, and how you can leverage this way of thinking to make the best sites possible.