Name: Impactful Accessibility: The Changes that Mean the Most - Lindsey Dragun | JSConf Hawaii 2020
Uploaded: 2020-03-28T17:33:29.000Z
Duration: 20 min 8 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Okay, Uh, this is impactful accessibility.

I'm a former technology evangelist and a full stack Web developer.

I have multiple disabilities that actually make using the Web a little difficulty.

And I haven't any international peace and conflict resolution, which means I've done like a lot of studying of how people's worlds affect how they interact with other things.

And you can find me at tech Evangelista on Twitter.

Um, I also added a bunch of puppy pictures to my slides like just now, because I felt bad for not having more puppy representation.

He's a little sleepy because I'm on Benadryl.

This is not really an intro to accessibility talk.

I am not going to be killing over what disability is, Um, what alternative input and output SAR or anything like that.

There's tons of intro talks around I've given them, but even if you don't have a background in this, there should be a lot of things that you can understand and take away from this talk.

I have also tried to focus on the parts of accessibility that developers actually have some say in because there's some things that you need a designer to be willing to work on, like color contrast.

And, um, I have a page with these exact slides, like just a link to this Google slide presentation.

And a bunch of resource is on disability and accessibility at Dragon with the You like my last name dot tax slash gs comp wiII and just a disclaimer before you get started, This stock is not the end all be all of accessibility.

It's It's not a lot, even if you do everything I talk about here.

If you do nothing else for accessibility, you'll probably still have bad accessibility and what is or isn't good.

Accessibility is also very dependent on your sight, and your users, even things like we tag, which is the Web content.

Accessibility guidelines, which are the standards love government uses can be wrong for your specific use case.

Users, especially disabled users, obviously have a variety of needs that might.

Probably one of the biggest issues for accessibility on the Web is giving users the information they need.

Um so, for example, you as a developer probably shouldn't be writing the old attributes on your images.

You probably shouldn't be doing this, but let's say that you have to because you probably d'oh.

Um, I'm I'm going to like a brief exercise to get you into that mindset.

Uh, this is a picture of my puppy Colby, who's on a bed playing with a toy.

And I want you to study this for a few seconds and think about what the relevant information in the picture is.

Okay, So the problem is that depending on what your site is doing, what is relevant is completely different.

If you're doing ah, dog adoption site and you need all tax for this picture, you're gonna focus on the details about the puppy.

You're gonna say maybe, Ah, long haired miniature docks wins puppy of 14 weeks plays by himself inside or something like that.

Ah, And then for the dog story, you're gonna focus on the toy.

You don't really care so much about the puppy.

You could be like small breed puppy plays indoors with our rainbow puzzle toy or something like that, and is going to be a completely different mindset, depending on who your audience is, because, ah, all text is very dependent on that sort of thing.

It's supposed to be what your users would get from that image if they could actually see it.

Ah, you should also make sure not to use words like image.

Um, I didn't use it in my little like examples there because screeners actually say image.

So what you end up doing is like image image of a puppy image image of a toy over and over again.

And he gets really annoying, Um, and also a note like there's a big to be over what is trivial images or not.

If you're doing all taxed, you need to remember that like there are people who have low vision, who are also using a screenwriter so they know that something's there.

But if you remove it from the screen readers, um like ability to tell them that you're going to have people really frustrated because there's, like, the spot on the page that they just don't know what it is.

Uh, complementing all text is long description.

So if you haven't infographic like this one I took from the web Accessibility Sy, uh, dick you or you have a chart like this pie graph.

Um, a long description gives away to fully describe these All that information needs to be accessed by people and, ah, who can't see it.

Or maybe you can't understand it in the format it's in.

And I thought it was appropriate type of Doc's ones for this one.

Uh, a long description can be accessed through, like placing a link next to the image or by providing a link using what's called long desk attributes like description but cut off because all these things were really obvious.

Like the infographic that I showed just has the page after it.

The text from the infographic and charts.

Have a table with that same data, like right with the chart so people can figure out what's going on.

And I did some Web stuff during the nineties.

I know tables aren't really like a thing people want to think about, but this is actually tablet or data.

So it's actually the point where you'd use a table.

Which, of course, brings up this idea of lakes romantic mark up in general, which can be very accessible on its own.

Um, sometimes using HTML was just better accessibility than CSS, naturally.

So when some people use spans or classes to change how the letters or words look on a page, that means that screen readers can't really access that.

So if it's not just purely for design, if you're actually trying to get across something like, say, you're emphasizing a word, Well, if you use CSS instead of like the e M mark up, uh, the screen agers can completely miss that.

Um, another thing is using HTML properly like, how can there be two main sections on a page?

Or, like why wouldn't each four heading come before you even see in H two?

Ah, screen agers and also Web scrapers, which are like search engines, uh, are relying heavily on the structure of the HTML document, so it's really important to have actual proper structure, and you shouldn't just use semantic markup, but use the right H d mail.

Um, don't just make something look like something else.

Colby likes to pretend he's a bagel, Um, all different things.

So, like usually, it just makes it harder for screen readers and can also make it harder for others.

Depending on how their browser add ons or phones treat the elements.

On my phone, I have a option turned on to make the buttons like Wimmer obvious.

It gives me a little more space depressed, Um, but it works for buttons, not for Dave's that are used like buttons and, like buttons or not just reforms.

Um, they do things and people know they do things, and they're announced by screenwriters as buttons.

So if you're looking to do something on a page, you might just be skimming for button.

Uh, if you're going to do something that, like triggers when a user presses something, the buttons generally your best option and, ah, along with buttons, you want to make sure you're giving like all the proper information, right?

It's the whole I don't want tojust style, something with CSS and how they actually have meaning.

If you make it say, like, really faded out or flat when your other buttons aren't it's hell people.

You also need to use the attribute that will let other people who can't see the bun know that which leads until what's called aria, which is like markup.

Um, like extra information in your mark out to give to your screen readers.

It's, um, basically can give screeners information about the visual aspects of the page about steps and a process even about changes made on the page.

So, like your log in screen may be the only change you do when something goes wrong is you put some red text at the beginning to tell them that their information's wrong.

Um, are you also gives you a way to turn that div into a button.

As faras, your technology is concerned, you can give it the role of button and then it will be treated more like that.

And for whatever reason, you wanted that Devyn seven button.