Web Accessibility Fundamentals

As web creators, unfortunately, many of us are still leaving accessibility as an afterthought. Learning how to use modern UI Libraries sounds way more exciting.

I understand you, but...

Accessibility is our duty as web creators

It's our moral duty (and legal requirement in many countries) to ensure that anyone who visits a website, can enjoy it as much as possible.

Perhaps you already know that accessibility matters, and you are aware that color contrast is a thing. But... what else?

In your solo journey into learning accessibility, you’ve might have visited the W3C WAI website and took a look at the WCAG 2.1 technical requirements.

Yet, the content seemed way too complex, you may have felt overwhelmed... and ended up leaving it aside.

Let me simplify it for you

Rather than focusing on theoretical rules, I will first show you real-world examples that can be everything but a joyful experience for many. (ouch!)

These scenarios will bring you awareness of the existing barriers out there, and you'll realize why accessibility (the lack of it) can really make the difference in someone's life... including you and me!

Let me show you why accessibility is worthy of being part of your skillset foundations and how it doesn't limit your solutions or design skills. On the contrary, it will make them more inclusive!

Ready to make the web a better place?

The workshop

This workshop will be packed with little big discoveries! We will explore every common accessibility no-nos, and how to make them more inclusive for as many people as possible using a mouse or a keyboard.

We'll cover multiple design patterns and development techniques that you can apply in your own projects right away.

You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!

Topics

These are the modules that we'll go through together:

• #0 Accessibility overview

  • Demystify accessibility myths
  • Ableism and the disability types spectrum
  • WCAG principles, layers of guidance, and the law

• #1 Accessible by default

  • Appearance: color, proportions, and motion
  • Semantics: Headings, images, order of content
  • Accessibility audit tools

• #2 Keyboard navigation

  • Interactive elements
  • Hiding techniques
  • Navigation shortcuts

• #3 Screen readers

  • ARIA: How and when to use
  • Landmarks and language
  • Meaningful forms
  • Interactive UI patterns

By the end, you will:

• Realize how web accessibility benefits everyone
• Understand WCAG principles and how they're organized
• Know when to use accessibility audit tools
• Quickly identify common accessibility issues
• Integrate accessibility into your team workflow right away
• Realize that creating accessible websites isn’t as hard as it sounds ;)

Workshop dynamics

The workshop is divided into multiple exercises. In each one, I’ll introduce you to a new topic in a realistic way, along with practical resources.

Then, there will be a hands-on exercise for you to apply the concepts learned. You can solve it by yourself or by collaborating with a group of 3-4 people.

Afterwards, we go through the solution together, and I’ll clarify the questions that you might have.

Who is this workshop for?

Frontend developers are the main audience but if you are a designer or a QA expert, then this workshop will be valuable for you as well.

The topics will be explained with beginners in mind, and get more advanced as we go through it.

Even if you already have some experience in accessibility, you can look at this workshop as a way to solidify your knowledge and fill any existing gaps.

Pre-requisites

• Comfortable with HTML and CSS. JavaScript is a bonus.
• The browser Chrome or Firefox installed.
• A good internet with Zoom installed for the video call;
• A webcam is optional. Although I highly appreciate seeing you while I’m speaking, I want to be respectful of your boundaries.
• Be willing to learn something different!

By the way, I'm Sandrina

I’m a UX Frontend Engineer who helps turn ideas into accessible experiences.

My focus areas are around Design Systems and Accessibility within the React ecosystem. As a self-taught developer, I recognize the struggle of learning something by ourselves.

Through the years, I've been sharing my knowledge by writing articles and online mentoring. These allowed me to refine my approach to teaching new topics in ways that are simple yet effective.

Besides my full-time job at Remote as Lead Frontend Engineer, I'm focused on raising awareness of why Web Accessibility is part of our duties as web creators.

Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!

Testemonials

Public feedback

Andrew Chou
@_andrewchou

Just finished up @a_sandrina_p's Web A11y Fundamentals workshop. Really pleasant and structured well! Helped to learn new tools and concepts considering a11y is a big gap in my knowledge as a web dev.

Definitely reach out to her for conferences, talks, workshops, etc!

sid 🖤
@siddharthkp

I took an early version of this workshop and it is designed really well, the flow and exercises are really good!
I learned a lot, @a_sandrina_p is a great instructor. ❤️

Nuno Pereira
@nunocpnpereira

Mind blowing accessibility workshop with @a_sandrina_p!

Pearl Latteier
@pblatteier

I'm learning a ton in @a_sandrina_p's accessibility workshop!

Anonymous feedback

Really liked the format of the training, with briefings and exercises for each, making it not boring at all. [...] The quiz, in the end, was a nice and fun way to wrap up! Overall, really enjoying it, thanks!

I admit I had some misgivings about asking my company to invest in this workshop, because of the time and money, but it was totally worth it — I feel like I've taken a clear step forward on this topic.

The resources were top notch, having live examples and the briefings were just perfect on the amount of information passed to us.

Your knowledge of this huge topic is clear, the way you answered all the questions greatly enriched the experience.

Thanks so much for the training I really enjoy it, had a great time and learned a lot. The small groups per room where pretty cool too! I'm really excited to practice all the things I've learned.

Congrats, the workshop was great, the introduction was one of the most brilliant introductions to A11Y from a FE perspective, and the pace was balanced.