Get cool.

Uncle s.

Oh, my name is Trish.

You could also find me at at Beef on the Internet.

And my pronouns are, See her.

Uh, presently, I am a friend and engineer at Slack, where I focus on working with a team of amazing friend and engineers building our internal design system and component Lord library A specifically a building out react components that comprise a foundational layer of the slack client, you know, in love.

Um, so I've been working in the tech industry a little bit over 10 years at this point.

And if there is one thing I am familiar with, it's failure.

But I'm here to tell you that that's okay.

Everybody fails.

Um, we feel and then we learn, and then we probably fail again in an equally spectacular way.

Uh, for example, just today at lunch, I got my, uh, Colby and fried chicken and went by the pool to stay with Jonathan to have food and any realized, but 10 minutes later, my short to roll with because I sat in a pool of water.

Um, which then, of course, like, luckily went upstairs Change my pants.

And then I realized all I was wearing these.

I wasn't wearing the shorts because I spilled food on them yesterday.

Uh, that's okay.

I will learn my lesson.

And tomorrow I'll look, if I sit down before sitting in another pool of water.

So good.

Um, I'm sure as friend and engineers yourselves, you are all equally familiar with this feeling of failure.

Everybody knows browser rendering inconsistencies often feel like you're in the Wild West.

Dealing with Web compilers are kind of like a black box of nightmares.

And then there's the dreaded last step of any project accessibility.

So allowing me to share a personal story of failure, um, has anybody here you slack before?

Cool.

Cool.

Uh, okay.

So maybe a little bit over a year ago, I was getting ready to launch my first big feature while working at Slack, and I felt super excited.

I was gonna share this new tool with everybody here who raised their hands.

A bunch of my friends, a little bit of my family.

It was great, great feeling.

And then I got a message like this one.

So this raids hatred.

Uh, congrats on the lunch By the way.

Are you using options list?

Because I'm not sure if you realize, but your feature is completely inaccessible.

Uh, that means I can't use it with my screen reader.

So sorry to rain on your parade, Love George out.

Uh, it was really hard for me not to feel like a complete failure at this point.

Thankfully, at Slack, I'm really proud to say that we treat accessibility bugs as broken functionality and product blockers.

What and Web accessibility bug means is that there's real humans out there on the Internet who cannot interact with your website or your Web product.

And for Slack, where we have over 10 million users online daily being unable to communicate with their teammates, interact with content, uh, or being blocked from your doing, doing your work at all.

It is completely unacceptable.

But accessibility is by no means easy.

Even the Queen Bee herself had some issues with this earlier this year when she was sued over her website, Beyonce dot com.

Being inaccessible since then of Internet has come together to put a petition to hire one of my amazing and talented Cooper's Meena Markham.

You may have heard of her, um, remedy the situation.

So I do hope you will all go and sign this petition so we can resolve this matter quickly.

So I am not an accessibility expert.

But luckily, when I received this message from George on our accessibility team, it was only after an internal lunch, and all that he was letting me know was that I had a lot more to learn and a little bit of work to do before I could launch this to the general public.

Since then, I have gone through a ton of training, and I've learned a lot about the complexities of screen readers, how to test for accessibility and howto build inclusive experiences.

And that's what I want to share with you all today.

As it turns out, I am not an accessibility expert, but you don't need to be to do this kind of work.

So let's flip the script.

And instead of talking about how to fail, let's talk about how not the failed at accessibility Cool.

Yes, awesome.

All right, so we'll cover three main areas today.

First, how do you know whether or not your website is accessible or inaccessible?

To start with uh, Secondly, once you've identified some bugs.

How do you go about coating to fix those bugs?

And then, lastly, how can you adapt your process to prevent bugs like that from happening in the first place?

Okay, kicking things off with testing.

Um, so what is accessibility you mean at all?

It's a very broad, the scope term, but luckily it is thoroughly documented.

If you've ever had to look up the definition of a nature channel element or a CSS property, you may be familiar with the W three c organization.

Not only do they have that handy resource, but they also have what is known as the Web content, accessibility guidelines or W CAG for short.

So if you visit this website, you will find a very lovely text heavy for Bo's document, where you can learn anything that you've ever wanted to know about accessibility, some light reading, if you will.

Um, what they still are, what feature what makes features on the Web accessible or not accessible, and they grade them based on level a double a triple A.

It's like we shoot so have double a compliance for all of our features that we release and wherever possible, triple a compliance as well.

Cool.

So the spectrum of human abilities and the tech that exists to support them is infinitely broad.

And while I'd love to cover everything, uh, got like 20 minutes left so we're going to start with hello World of accessibility, if you will.

Eso.

Here's some four areas that you can get started with testing today.

Cool.

1st 1 is color.

Contrast the Teenage Mutant Ninja turtle Talk earlier.

Help preface this so it's awesome.

Second up is user interface zoom, then keyboard interaction model and lastly, building in screen reader support.

Okay, so what is color contrast mean?

We got a brief look at this earlier, but in general, we're not trying to analyze every single color across your beautiful website and said we're trying to make sure that the information and interactive elements that you have are understandable and perceivable by all users, and that specifically is looking at things like the normal text on your website.

Large sex on your website, which is 14 point and bold and above or 18 point and above, and also interactive elk or user interface elements such as iconography and form elements.

There is a super handy tool called the Color Contrast Analyzer, where you can either input your hex values or even just use the eyedropper tool.

And it will immediately tell you at the bottom whether or not you're hitting those contrast standards.

There are also a few websites.

I think somebody mentioned one earlier Web game where you can input the earl of your website, and it'll do a scan to kind of check if there are any in, uh, areas that don't meet the guidelines.

It should come as no surprise.

But using light great tests on a white background does not meet accessibility standards.

Okay, next up, we have user interface zoom and this, uh, when my co worker jokes that this is the easiest one to test for.

But it's also the easiest one for people to forget.

User interface Zoom refers to the browsers built in functionality to zoom into your Web content, using either Apple Plus minus or control plus minus.

It's like our designers provide mock ups at all of the levels of zoom that we support and the easiest way for you to go about testing.

This is just doing that you could take your website hit Apple plus plus and then spend like a week using your website like that.

And let's try to see if you notice anything where areas feel funky or broken next.

That keyboard interaction, model or keyboard inevitability.

This refers to navigating your website entirely with a keyboard on Lee, using the common patterns of tab and shift tab to move backwards and forwards through elements and then using things like the arrow keys enter Escape in Space Bar to interact with those elements.

Um, every year in May are accessibility.

Team hosts a challenge for the Global Accessibility Awareness Day, where we encourage all of the employees that slack to take our mice and put them in the desk drawer and on Lee using keyboards, navigate our products.

Like, um, I tried this last year, and I was really, really surprised to see what areas I was able to make more efficient in what areas I got stuck because I wasn't familiar with the common patterns that existed.

We also have a handy pellet of keyboard shortcuts that you can access using command forward slash um, and this is awesome because it not only helps folks with limited mobility, but it also helps in able to enable people to become power users of slack.

So once you've got your keyboard navigation down, the guidelines also require you to indicate what has current focus.

Um, you can tell here with the focus ring.

It's like the blue fuzzy circle that follows around where you're navigating with its have.

And lastly, if you are navigating around and you notice that you can tap into an area, but you can't tap away from it, this is what's known as a keyboard trap.

And it's something that you should avoid like this cat.

Very sad inside.

Uh, cool.

Okay, The last but not least, we're moving into some trickier territory and testing for screen readers support.

Um, Luckily, if you've already cleaned up your keyboard interaction model, you're 50 halfway there to making sure your website is screen reader supported.

If you are using a Mac, there's software built in to help you test this, and you can access it through the systems preference panel than the accessibility pain and then enable voice over.

They're also free software options for PCs and other platforms like N V.

D a.

Okay.

Anybody here used age Green reader before.

Oh, good.

Okay, so let's let's listen to a quick example of what it's like using a screen reader.

So I want you to listen along here and see if you can identify what is happening.

You are currently on Web content to enter the wet area.

Press control option.

Shift down.

Arrow late like Paige Button Link pushing love struck cat face Play video button.

You are currently in a group to exit link.

Pushing Loves my page Button link Video.

Lunar New Year Duration.

Seven seconds.

Public button like like toggle button.

You are love toggle button.

You are currently on a toggle button inside of a toolbar to select or deselect this check box press control option space to navigate items on this two of our press control option and then a barrow piled toggle button.

Wow toggle button.

Any guesses lately, Ben?

Okay, so let's look at that one more time with the visual cues for anybody.

If you didn't get that on Facebook, um, you'll notice that as you're navigating the keyboard or the screen reader will announce what has current focus, it'll say What is that type of element that is being focused, the definition of it, and with things like the like, where you can choose six different lights, it'll update as you're interacting with that element.

You are currently on Web content to enter the wet area.

Press control option Shift down Arrow link like Paige Button Link pushing love struck cat face Play video button You are currently in a group denies it.

Link pushing loves my page button link video, Lunar New Year duration seven seconds.

Public button like like toggle button.

You are love toggle button.

You are currently on a toggle button inside of a toolbar to select or deselect this check box press control option space to navigate items on this two of our press control option and then a barrow piled toggle button.

Wow!

Toggle button.

Cool.

Um, okay.

So in addition to these basics, screenwriters also use a tool known as the road er.

And this is one of the most important reasons you should make sure you have clean and semantic hte e mail because the rotor scans your content and that's what it uses to populate the menus.

Here's what it looks like.

Chrome Pope Recipe.

Google search Google grown window Hopeless If he Googles Archie Web Content links Menu You are currently in the voiceover menu.

This is a list, Linc, Linc, Accessibility help link except headings.

Menu heading level one.

Accessibility heading level petting level one.

Search heading left.

Heading level heading.

Level three.

Heading level three.

Easy homemade ahi tuna.

Hopeful recipe link.

Easy home able to tune up Hope recipe.

Just cool so you can pull it.

That menu using the control Was it control?

Option you and then left and right to navigate between the different menu options.

You'll notice that it had, like, 123 and those air like h one h two h three.

And also that the creator did not know howto pronounce Pok properly said poke Pretty sure.

Uh, cool.

All right.

Nice to have everybody.

You're all on a rule, so give your neighbor Hi, Fi Haven't like we'll keep on moving.

Um oh, I see.

Okay, So the next area here is how do we improve our code?

Thio have clean, accessible experiences.

There are three broad level things that you want to consider here.

Um, first of all, as I mentioned for screen readers providing clean, semantic HTML and also proper aria labels is super important.

Then you'll get very comfortable with programmatic focused management, which everybody loves.

JavaScript.

So hopefully easy.

Um, And then you can figure out how to leverage motor modern coding practices help as well.

Okay, let's step back earlier to that call out from George.

The future that I was working on at the time was a pretty common Web interface pattern.