Web Accessibility Fundamentals

The web is awesome and everyone should be able to enjoy it.

Online Workshop

with Sandrina Pereira

Join the list

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, lost... 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 (the lack of) accessibility 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:

  • Accessibility overview

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

  • Accessible by default

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

  • Keyboard navigation

    • Interactive elements
    • Hiding techniques
    • Navigation shortcuts

  • 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 simplified 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 2-3 people.

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

  • problem
  • explore
  • clarify
  • repeat

An interactive way of learning together.

Who is this workshop for?

Web 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 it gets 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!

Want to join? Mark your spot!

Be the first to know when it's scheduled with Early Bird price

Be the first to know when it's scheduled with Early Bird price

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 mentoring online. 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

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!
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.
The content and the pace were good, also your knowledge on this topic is really remarkable, it was really an enjoyable moment.
Thanks so much for the training I really enjoy it, had a great time and learned a lot. I'm really excited to practice all the things had learned.

F.A.Q.

  • What does A11Y mean?
    A11Y stands for 'accessibility'. The irony about the word "accessibility" itself is that it's not very easy to pronounce. The abbreviation stands for A + 11 characters + Y, which is a more user-friendly homophone of "ally".
  • Will the workshop be recorded?
    No, it won't be recorded, but you’ll have access to all the materials shared.
  • What materials are provided?
    • The materials' slides (+ 50 slides);
    • Codebase with all the mentioned resources;
    • Exercises, including explained solutions;
  • I know A11Y. Will I learn something new?
    Oh, yeah. Even me, every time I give this workshop I always learn something new. Unless you are an A11Y expert, I’m confident that you'll fill some gap.
  • Is the workshop accessible?
    The video meeting can be captioned and the exercises briefings are fully accessible. If you have any accessibility concern, please reach out to me, and we can arrange it together.
  • What screen reader will I use?
    You can use the one that suits you best. I own a Mac, which means I’ll be using Voice Over. During an online workshop it's not practical to help everyone using a SR (screen reader). Because of that, a few days before the workshop, I will send you guides for you to practice with one of the following screen readers:
    • Mac: You'll be using VoiceOver.
    • Windows: You'll need to install NVDA
    • Linux: You'll need to install Orca
  • Is there any discounts available?
    The workshop will have an Early Bird price until April 25. After that, I don't plan to do more discounts. Regardless, I understand that the cost of this workshop can be too high for some people. If you are a student you can reach out to me.
  • Can I buy a ticket for my team?
    You can, but keep in mind that 1 ticket is for 1 person/seat. Besides these public events, I also provide customised workshops. You can contact me to discuss private sessions options.
  • How many attendes will be there?
    There are 12 seats available. I aim to keep the group small, so that people don't feel shy/intimidated in participating. This also allows me to have the time to give you the attention and care you deserve to clarify your questions. Optionally, during the exercises, smaller groups of 3-4 people are created for you to solve the exercises in collaboration, if you want to.
  • How many times have you gave this workshop?
    I've given this workshop more than 10 times now. I started giving full-day workshops in 2018, back to office times. The first one about accessibility was in 2019. In earlier 2020 I rethought the contents entirely and adapt it to a remote version. In this practical workshop my priority is that you learn by doing and to make everyone feel "present", even during a virtual event.
  • Can I ask you questions after the workshop?
    Of course! During the workshop, I'll invite you to join a Discord community with other attendees to talk about accessibility.
  • Is there a Code of Conduct?
    We follow contributor-covenant code of conduct. A short summary: be kind and treat each other with respect and understanding. There’s zero tolerance for unkind behavior.