The changes that mean the most.

So ah, little about me to get started.

I'm inaccessibility engineer.

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.

Um, about this talk.

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.

It's pretty easy to find online.

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.

Or you need a product owner to agree on.

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.

Obviously, it's like 25 minutes long.

I had to cut out three sections.

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.

You might not think about that purse.

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

Right.

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

It's copy.

Unless you're writing other copy.

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.

I need the last night using Excel.

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.

Um, and there's other options.

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

The text from the infographic and charts.

It's highly recommended toe.

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.

Right.

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.

All right.

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

This is common with check boxes.

List buttons.

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 puts an outline around them.

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.

Buttons are actually really great.

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 disable a button.

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

Hey, you can't use this button.

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.

Well, Aria lets people know.

Hey, something changed.

You can't see that red text.

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.

You can have it.

Thank um, It also provides all text equivalents.

Right.

So, um, this is really good for anything where it might be ambiguous.

Like, Say, you have a button that has an ex because it's gonna close something so you can tell people Hey, are a label close?

This isn't just a random act sitting on your page.

You can use this.

But of course, like it has its downsides.

The one thing everyone who uses screen Andrews tells me about Aria is that the worst thing that under uses over use some things do not need labels.

Um, some things don't need alerts.

And for some of this stuff, it has no like character limit.

So you could really just take an icon of a house and explain it in details for paragraphs when all anyone really wants to know is it's the home button.

The W three c who made Wick itself says that like no Aria is better than bad area because you could end up overriding actually good accessibility.

But using bad aria, which is like hard to imagine, but browsers actually have some pretty good defaults going on that you can take advantage of.

So, like if you don't have a designer giving you any specifics or you don't have a designer all and you're not sure what to dio falling back on the brother Default is actually not only just easy, but it can be better, all right.

They have a focus see indicator.

That's when you like keyboard, navigate into a page like with your tab, and it gives like an outline around something you have cursed or behavior button appearance.

And all of that is something that people are familiar with who use thes options.

Just like seeing an underlying link seems familiar to most people.

And not only do browsers have defaults, but there is also a way that users can set them to perform better for them in certain ways and have it affect every page they go to such a CZ minimum font size.

Ah, so font size is obviously a kind of important for how people read your page.

But even if you have like a reasonable font size, it can also not be enough for people, so they set, UM, a setting in the accessibility options in their browsers to never go below a certain font size.

Which, of course, there's some leg horrific CSS properties that allow people to keep the pond very small, which keeps people from being able to read the site because overriding the minimum can cause it to just be unreadable.

There's also traces that you can make in the CSS and each Nemo.

That can mean that if that text expands, it gets hidden by another element or goes off the page, meaning that people miss out on information that you don't allow for your pages font size to go.

So try to make sure your users have the information they need in a format.

They can read it in, whether that's adding more code or leaving it out, whether it's communicating directly with a screen reader or creating something any user can access, it's really important that, but also in order to get that information, they actually have to navigate to um so with accessibility specific methods like a skip menu link sometimes called a skip to me and content link.

They can do that really easier.

So what is that It's like an internal link at the top of the page that gives people the toys to skip navigation like, say, the really hard core Amazon.

Ah, that's like a bunch of menus is a bunch of buttons.

It's just really complicated.

So when you tap into the Amazon website, they actually have a skip to being content link that just let you skip all that s O if possible, like have it always visible.

But most people don't.

If you have designers working on this who agreed to do a skip content link, they'll probably wanted to disappear when people lose focus of it.

So make sure that people can get back to it, and it will be visible again.

Ah, also make sure it appears really high up in your page so that, like they don't have to go through half your menu in order to skip the last half of your menu.

Um, most people who are familiar with us are also used to the language of it.

So something like Skip to me and content is really familiar to them.

And you probably shouldn't mess too much with the wording search bars, which we don't really think of is an excessively need are actually a very similar deal.

People will just go straight to the search bar instead of messing around with your navigation.

Will type in what they need to search for, and they'll go to it right away.

Uh, this is the same deal you want it to be like early.

You want to be noticeable.

You definitely want keyboard to be able to get to it and use it, and you definitely don't want it to disappear.

Like I think probably all of us have had experience where something we hover over needs to be like The cursor needs to be in the exact right spot in order to have it stay up.

And that's really bad for ah, lot of people come another on that.

People really don't think much of his flight maps.

So there's not much to add to its like you normally auto generated in the shovel link in the water, right?

But some people actually just use this to navigate your site.

Uh, it they don't know exactly what they're searching for.

If they're like you don't have a surge, they might use your site map.

You want in the footer.

You want it to be called statement up like you don't want to do some cute see thing with it, Um, and you want to make sure people can navigate to it.

So if you have something like infinite squirrel and people never access your footer, that's not accessible, and their special features that you add that can go beyond the basic site that you might be implementing the are big headaches for literally everyone involved like models.