Name: アクセシビリティで失敗しない（しない）方法 - トリッシュ・アン｜JSConf Hawaii 2019 (How (Not) to Fail at Accessibility - Trish Ang | JSConf Hawaii 2019)
Uploaded: 2021-01-14T10:27:29.000Z
Duration: 26 min 17 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

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

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.

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.

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

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?

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.

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.

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.

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.

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

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?

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.

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.

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

Contrast the Teenage Mutant Ninja turtle Talk earlier.

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

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.

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.

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.

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.

字幕リスト動画再生

アクセシビリティで失敗しない（しない）方法 - トリッシュ・アン｜JSConf Hawaii 2019 (How (Not) to Fail at Accessibility - Trish Ang | JSConf Hawaii 2019)

awesome

content

familiar

interact