You’ll learn some of the most important accessibility principles. We’ll also cover how to operate a screen reader and conduct an accessibility audit to spot and fix some of the most important accessibility issues.

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,
  • Pagination,
  • Breadcrumbs.
• Forms:
  
  • 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. We’ll cover concepts such as managing focus and, if time allows, we might build our own accessible custom component.

For each pattern, we’ll cover basic CSS styling, and the minimal JavaScript functionality wherever needed, highlighting the importance of JavaScript in creating truly accessible interactive components where HTML and CSS don’t suffice. We’ll do all this in the context of progressive enhancement, ensuring that your content is fully accessible even in worst case scenarios.

Target audience:

Front-End Developers comfortable writing HTML and CSS, have at least basic knowledge of SVG. You should also be comfortable writing or understanding basic JavaScript.

What hardware/software do you need?

Please bring your own laptop, with your favorite text editor.

About Sara Soueidan

Sara Soueidan is a Lebanese freelance front-end UI/UX developer working with companies across the globe, building clean, responsive front-ends for Web sites and applications focused on accessibility, progressive enhancement and performance.

She writes technical articles on her blog and for various big publications. Sara wrote the Codrops CSS Reference, co-authored the Smashing Book 5, and has been voted the Developer of the Year in the 2015 net awards.

Time & Location

This full-day workshop will be hosted at Fort Mason and will take place the day before SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Monday, April 15th.

Schedule for Monday, April 15th

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 USD when signing up for the conference and a workshop!