Sara Soueidan

Front-end web developer (Lebanon)

Sara's Mugshot

Sara's Talk

Tips for building accessible UI patterns

Monday, 11 March — 11:50

In this talk, Sara is going to go over some common UI patterns and share some of her favorite tips for making sure they are built with accessibility in mind. Even though she will be building and refactoring only as many patterns as the time allows, she will cover lots of small but important and impactful tips in the process that you can apply to many other UI patterns as well as to your design and code thinking.

From this sweet series of mini component-level case studies, you will learn how to think, and code, accessibly.

Sara's Workshop

Accessible UI patterns

Tuesday, 12 March — 09:00

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,
    • 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.

For each pattern, we’ll cover basic, easily tweakable CSS styling, and minimal JavaScript functionality wherever needed, all in the context of progressive enhancement, ensuring that your content is fully accessible even in worst case scenarios.

Target audience:

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

About Sara

Named ‘Developer of the Year’ in the 2015 net awards and ‘Open Web Evangelist’ by Microsoft, Sara Soueidan is an independent front-end web developer, author and speaker from Lebanon. She runs workshops across the globe, and is renowned for her high-quality technical articles that she writes for the biggest publications in the Web industry, including Smashing Magazine and net Magazine.

Sara helps companies and agencies build Web sites and applications, with strong focus on HTML5, SVG, CSS, JavaScript, progressive enhancement, and performance. She believes the Web should be accessible by everyone, and strives to build experiences that work well enough for everyone. When she’s not working, you’ll probably find her reading or catching up with the latest in the Web industry on her Twitter, while sipping a cup of her favorite fruit-flavored green tea.

Other great folks speaking at Source Up!