You’ll learn some of the most important accessibility principles.

Topics we will cover include:

• HTML semantics: The foundation of a truly accessible Web. We’ll talk about why semantic HTML is important, show examples of what happens when it is not, and you’ll get to build and test a (tricky and fun) accessible layout using the screen reader on your machine.
• The Web Content Accessibility Guidelines (WCAG): What they are, why they exist and why they are important.
• The accessibility tree and how to use it in your development process to ensure your UI is exposed to screen readers as it should be. This gives you an insight into the kind of information your screen reader user is getting from your markup.
• ARIA: What, Why and (lots, lots) of How. You’ll learn how ARIA can be used to create accessible custom interactive UI patterns that have no native HTML equivalent (such as tabs, accordions, etc.), modify native element semantics where appropriate to enhance the user experience, and provide an overall more accessible UI for screen reader users. Through practice, you’ll get familiar with some of the most important and most used ARIA attributes.
• Hiding and exposing content to screen readers accessibly. Screen reader users don’t have the visual affordances that sighted users do. Depending on the design, it is often necessary to provide content exclusive to screen readers, and/or hide visual content from them to enhance their experience.
• Properly labeling UI elements using different techniques, and the pros and cons of each one. Proper labeling is important to let screen reader users know what they are interacting with, which, in turn, sets their expectations as to what that element does and how they can interact with it.
• Keyboard focus management basics for interactive UI patterns, and more accessible focus styles.

What prerequisites skills do you need?

This workshop is aimed at front-end developers and anyone comfortable writing HTML, CSS and presentational JavaScript (no JS frameworks necessary). It starts out beginner-intermediate level, it gets more advanced as we advance through the day.

What you will learn

We’ll walk through some of the most common UI patterns and learn what it takes to make them accessible. Some of the components and patterns we’ll cover include:

• SVG Icons and icon buttons,
• Disclosure widgets, you’ll be surprised how many interactive elements are just simple disclosure widgets under the hood,
• Navigation patterns,
  • Mobile navigation,
  • Pagination,
  • Breadcrumbs.
• Form elements
  • Custom checkboxes and radio buttons (accessibly styling native ones, and creating a custom one from scratch),
  • Styling interactive native HTML elements (such as file inputs) without breaking their inherent accessibility,
  • Toggle switches,
  • Error messages,
  • Tooltips and interactive form hints.
• Content accordions,
• If time allows, we’ll discuss Tabs and all that goes into building a tabbed UI pattern accessibly. This would be the cherry on top of the workshop, as it combines everything you learn in the workshop in one exercise.

You’ll learn by building most of the above patterns yourself. 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 when JavaScript fails.

This is Version 2.0.0 of the workshop — adapted, edited and updated after 18 months of running this workshop and gathering feedback from attendees, and as I learned more about accessibility myself. The content of the workshop is constantly updated with the latest in regards to screen reader and browser support. Even this workshop description is updated and a little more detailed, so you know exactly what you are signing up for.

What hardware/software do you need?

You will need to bring your own laptop, a pair of head/earphones, and make sure you have a screen reader installed on your machine (if one isn’t installed already). Make sure to familiarize yourself with the basic functionality of the screen reader.

• If you’re on Mac: You will be using Safari with VoiceOver for screen reader testing. (We’ll learn how in the workshop.)
• If you’re on Windows: You’ll want to install NVDA. Please take a few minutes to learn the basics of navigating a Web page using NVDA (unless you prefer to team up with a Mac user during the workshop). This video has a great introduction. You only need to learn the basics of using NVDA for the workshop.
  • You can also find a cheat sheet for useful keyboard shortcuts for NVDA here: pohttps://dequeuniversity.com/screenreaders… (You’ll be using NVDA + F7 during the workshop)
• If you’re on Linux, install Orca.
  • A cheat sheet for Orca keyboard shortcuts is available at https://help.gnome.org/users...

The workshop is packed with content, so prepare to take a lot of notes, and have a lot of homework to do when you’re back home/in the office. At the end of the workshop, you will get a copy of the workshop slides, as well as a mini pattern library of all the components covered in the workshop — all fully accessible, customizable and ready for you to use in your projects.

I hope you join me, and I look forward to a day or nerding out with you all.

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 also runs workshops on front-end development and 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 take place the day before SmashingConf at a location to be decided. The workshop will be running from 9:30 AM to 5:30 PM on Monday, October 12th.

Schedule for Monday, October 12th

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!