Accessibility (when you don't have time to read the manual)
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 37 | |
| Number of Parts | 86 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/31227 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
RailsConf 201737 / 86
1
8
10
12
18
19
23
30
35
42
49
52
53
55
56
59
65
74
77
79
82
83
84
00:00
Shared memoryFormal languageSoftware testingMusical ensemblePoint (geometry)Task (computing)Right anglePlastikkarteSign (mathematics)WebsiteLevel (video gaming)Data storage deviceVideo gameAlphabet (computer science)Local ringSoftware developerRoutingVapor barrierCartesian coordinate systemMultiplication signMereologyFamilyInheritance (object-oriented programming)Social classMoment (mathematics)Online helpPerfect groupCellular automatonSmartphoneBitComputer animation
04:49
WebsiteForm (programming)Web pageVideoconferencingState of matterRight angleComputer icon
05:28
Personal digital assistantSpeech synthesisWebsiteBlock (periodic table)Keyboard shortcutInformationBitMobile appContrast (vision)Electronic program guideLevel (video gaming)Type theoryWordForm (programming)Web pageRegulator geneSoftware developerWeb crawlerQuicksortComputer fontArithmetic meanMultiplication signBuildingSearch engine (computing)VideoconferencingProcess (computing)Electronic mailing listComputer iconWeb 2.0Cartesian coordinate systemTouchscreenFigurate numberString (computer science)Content (media)Web browserOnline help2 (number)Latent heatMenu (computing)Reading (process)Degree (graph theory)Order (biology)SpreadsheetStandard deviationGoogolRight angleControl flowInternetworkingPhysical systemFocus (optics)Dependent and independent variablesSpacetimeReduction of orderMereologyElement (mathematics)Point (geometry)Line (geometry)Convex setText editorRevision controlComputer animation
13:59
Software developerScaling (geometry)Web pageNP-hardFrustrationMultiplication signShared memoryGraphical user interfaceDot productArtificial lifeBitExtension (kinesiology)CodeFreewareRenewal theoryXML
15:08
Element (mathematics)Graph coloringKeyboard shortcutType theoryCategory of beingGreen's functionTouchscreenGraphical user interfaceMultiplication signGame controllerMobile appVideo game consoleWordoutputCartesian coordinate systemLink (knot theory)HypermediaBitForm (programming)Patch (Unix)Arithmetic meanMedical imagingWeb 2.0Contrast (vision)Attribute grammarWeb pageField (computer science)NamespaceInformationContext awarenessSet (mathematics)Presentation of a groupDefault (computer science)Inheritance (object-oriented programming)Exterior algebraEmailFormal languageDescriptive statisticsProduct (business)Content (media)Plug-in (computing)ChecklistCognitionSoftware testingBlogComputer-assisted translationShooting methodNatural languageGoodness of fitCharge carrierRight angleWebsiteSource codeMessage passingMachine visionWindowBit rateCuboid1 (number)Interactive televisionMaxima and minimaFreewareData miningCausalityBookmark (World Wide Web)TheoryComputer animation
25:03
Form (programming)NumberFree variables and bound variablesSoftware testingBitGraph coloringQuicksortAsynchronous Transfer ModeOverlay-NetzTouchscreenWeb 2.0WebsitePoint (geometry)Right angleBlogMathematicsGoodness of fitSlide ruleBuildingCodeProcess (computing)Level (video gaming)AreaMobile appInclusion mapGraphical user interfaceElectronic mailing listWeb pageFeedbackMenu (computing)Formal languageMereologySet (mathematics)Descriptive statisticsDifferent (Kate Ryan album)Medical imagingMultiplicationSoftware design patternInformationReal numberError messageComplex (psychology)Functional (mathematics)Multiplication signProduct (business)Absolute valueContrast (vision)Natural languageDisk read-and-write headWaveFigurate numberEscape characterService (economics)Cartesian coordinate systemKey (cryptography)Continuous integrationComputer configurationSoftware developerAcoustic shadowDrop (liquid)Power (physics)Standard deviationShared memoryInheritance (object-oriented programming)CountingWindowGraphics tabletCuboidDemosceneState of matterINTEGRALOffice suiteClosed setGoogolInternetworkingOrder (biology)CASE <Informatik>Semantics (computer science)Ultraviolet photoelectron spectroscopyInformation technology consultingRankingArrow of timeNavigationContent (media)Integrated development environmentElement (mathematics)Sound effectComputer animation
34:58
Computer animationJSONXML
Transcript: English(auto-generated)
00:13
Now can you hear me? Perfect. Y'all hear me in the back? We're good? Fantastic. I'm Katie Walsh and I am an application developer
00:22
at a global payments company. We help small business owners succeed online. And I have always been obsessed with languages. So one summer right after college, I had the opportunity to study the Persian language in a country called Tajikistan. And this was great because I was able to converse
00:41
with native speakers. The catch was that the alphabet that I studied in the classroom was different from the alphabet that they use in Tajikistan. So it's my first week there. It's Friday, it's 3 p.m., I've had a long test. I get out of class and I'm hungry.
01:03
Like at this point, I might be hangry. And I think, man, all I want is a Snickers. Now here's the thing. It's August and it's Ramadan, so the locals have been fasting since sunrise. And it would be pretty rude for me to walk up
01:21
and be like, hey, where can I get some candy? So I think, I'm a resourceful person. I'm gonna go find a Snickers bar. So I walk out onto the main avenue, Rudaki Avenue, and the good news is there are a ton of shops. And I know that at least one of them will sell me a Snickers bar.
01:40
The problem is, I cannot read a single sign. And I'm a solo, unaccompanied, Western woman wandering around by myself. I decided it's not a good idea to just start wandering into random doors. So I'm walking down the street and my glucose levels are dropping. And I see this little kid and he's like 10 years old,
02:01
he's playing with a soccer ball. And I walk up to him and I say in Persian, hello, can you please read the sign across the street for me? And he looks at me like I might be crazy, but he reads the sign. And it turns out that was a barber shop, so no go. So I say thank you in Persian,
02:20
can you read the next sign please? And at this point, he just starts laughing at me because here I am, a grown adult who can speak to him who cannot read any of the shop signs. But he reads it for me and it's a convenience store. So I thank the boy, I walk to the convenience store, I buy my Snickers and it is delicious.
02:42
But here was the crazy thing about that experience for me. I had money in my pocket and I was highly, highly motivated to spend it. The issue was that there was a barrier to entry to that local economy for me. And I became dependent on some kid I've never met before
03:00
to know where to go to buy my Snickers. And that feeling was frustrating. Have you ever felt that way, dependent on someone else to accomplish a simple task? Like have you ever been on crutches and you get up to the door and you have that awkward moment where you're like, do I wait for someone to open it or do I like perch on one crutch
03:21
and then like use the other one to push the button? It's really awkward. We've all been at that point sometime in our lives, you know, when we're little kids, we're dependent on our parents to do everything. It's part of life, there's nothing wrong with it. But not being able to accomplish the tasks we want to independently can be frustrating.
03:42
And sometimes maybe you have other people depend on you. So I don't know if you guys had the experience when mom and dad and grandma and grandpa decided to get a smartphone and suddenly everyone in the family is dependent on you to operate their cell phone? Yeah, that can be frustrating all around. We as developers want to make sure
04:02
that our users don't feel this way when they're using our application. And as businesses, we want to make sure that if our users want to spend money with us, they can, as easily and as simply as possible, right? This goes for all of our users and that's why we're talking about accessibility today.
04:23
So what I want to do today is go over some of the basic principles and then share with you guys some of my tools that I use to make our site more accessible that are free and pretty simple to get started with. Then we're gonna actually do a little bit of live coding, so bear with me, but it should be fun.
04:40
And then I will save time at the end, so if y'all have questions, I would love to hear them and I would love to start a dialogue with you guys. So first of all, pop quiz, I know it's early, but we have two sites over here. One on the left, site A, has got some pictures,
05:00
it's got some icons, I think it's got some video somewhere else on the page. Site B on the right, it's just a simple form. Couple of inputs, couple buttons. I want to take a quick poll. Who thinks site A is more accessible? Anybody? Okay, we got a couple. Who thinks site B is probably more accessible?
05:23
Okay, I think we have a couple more for site B. So let's try this out. So this is site A, the BBC, and we are going to test it as if we are a user who relies on the keyboard. So I can start to tab through,
05:41
and I've got this nice little outline here that tells me where I am on the page. And when I start on the page, I've actually got a little button that says accessibility help. On some other sites, it's called skip to content, so that if I'm a screen reader user, I don't have to listen to this entire menu every time I get to a new page.
06:01
So the BBC has actually done a really great job at making their content accessible, even though they've got video and pictures and icons and everything. So let's take a look at site B. So pretty simple web form. If I'm a keyboard user, I come in and I have no idea where I am.
06:20
That's a really frustrating experience. I don't know where I am. I don't know when to hit enter. I don't know when to type my name. So they've taken away my focus, so I don't know where to go. And one of the things I wanted to dispel today is the myth that to have an accessible site, it has to be text only or ugly or simple, right?
06:40
You can have really nice accessible sites. So what is accessibility? I like the definition from the Google SEO starter guide. It's the ability for users and search engines to access and comprehend content.
07:00
It's that simple. One of the things we're gonna see about accessibility is as you make your site more accessible, you get great side benefits, one of which is SEO. Think about it. A Google search bot does not have eyes. It does not have ears. It relies on your DOM to understand what's on your page.
07:20
That's the same way that a screen reader works. So I made my own super simple definition, which is accessibility is making it possible for all users to use your website. So now the question is why? And I'd like to point to Matz. We have a saying in the Ruby community, MinnaSwan.
07:42
Matz is nice, and so we are nice. So let's be nice to all of our users, to make it easy for them to use our applications. According to WebAIM, approximately 20% of the population has some kind of disability. That is one fifth of your potential users.
08:02
You wanna make sure that 100% of your users can use your sites. Okay, so we're all nice people. We're Rubyists, that's cool. But accessibility, it sounds big, it sounds expensive. How do we convince the people with the purse strings that it's a priority for us?
08:22
So quick disclaimer, I'm not a lawyer. Do not take legal advice from me. I will not give it. But I can tell you that suing sites for being inaccessible is a thing. It is a thing that is happening more often. If you want more information on this, Karl Groves has a pretty comprehensive list of litigation,
08:43
and Lainey Feingold writes a lot about this topic. But what does this mean for us as developers? The folks at WebAIM put it like this. When the Americans with Disabilities Act was first passed, you used to have two kinds of architects,
09:00
the regular architects, and then the accessibility architects, so you would build a building, and then you'd hire this extra architect to come in and build a wheelchair ramp. Today, in 2017, there's only one kind of architect, and they all know how to build accessible buildings. So for us as developers going forward,
09:22
there may be kind of a delineation right now between accessibility developers and other developers, but in the future, as this becomes more and more important in the legal space, that means that all of us are going to have to know how to build accessible user interfaces.
09:41
The other thing to keep in mind is that we can all benefit from accessible sites. Not all disabilities are permanent. I see a couple pairs of glasses in the room. Anybody else wear contacts or glasses? Okay, nice, I am not alone. So that's an assistive technology.
10:01
My contacts allow me to come up these stairs without tripping over myself, which is great. I'm very thankful for them. And there are all kinds of things that we don't think about that qualify as disabilities. So for example, there are people who are permanently deaf and cannot hear, but what if you have an ear infection?
10:20
Maybe you can't hear for a couple days. Doesn't mean you shouldn't be able to use the internet, right? Or maybe it's situational. You guys ever been in like a really loud bar and you cannot hear anything? You're just nodding and smiling at the person across from you because you're gonna make it up. So they're all over the place. So making your app accessible helps everyone.
10:43
So think real quick about your app. Could you use it if you sprained your wrist? I don't know, I can't use a mouse with my left hand. That would be hard. What if your contacts fell out? What if you were outside on a sunny day? Does your site have enough contrast that you could see it on your phone?
11:01
Could you use your app after three shots of tequila? So speaking of assistive technology, I wanna tell you a little bit about how I got into this. So I was the new kid on the block at the company, and I was super eager, and they come in and they say to me, you and the other new kid are gonna get your very own Sprint, and I was so excited.
11:22
And they said, yeah, we have to do this thing called accessibility, and we've got this audit from this third-party vendor, so I'm gonna send you a spreadsheet, and you can implement it. So that's cool. And I read the spreadsheet, and it said there were 330 things wrong with our application. So that was a little intimidating.
11:41
And I started to think about it, and I started to panic a little bit. But I thought, hey, I'm a developer, I'm gonna figure this out. And so the first thing I'm gonna do, obviously, is Google it. And I found the Web Content Accessibility Guidelines 2.0, which we'd like to call the WCAG, because we're lazy.
12:02
And this is the industry standard. It's written by the W3C, and there are three levels. So level A is sort of the basic level. Level AA is the standard. That's where a lot of the governmental regulations and things stand. And then level AAA is what I like to call the superstar.
12:23
You may not be able to make everything level AAA, but it's always nice to try. And there are four main principles, and they can immediately spell out the word poor. The first one is that your website should be perceivable. So I tend to perceive website's information with my eyes.
12:42
However, there are some users who rely on screen readers, and they perceive it as, you know, spoken sound. The second is that your website should be operable. So if you're a keyboard user, you should be able to tell where on the page you are. And you should always be able to interact with the same elements.
13:03
So one thing we often see is that if you don't use a button, and then you use a div, and then you add all this stuff, and then it responds to on click, you wanna make sure it also responds to enter. The third is that your website should be understandable. Do you have clear, concise, easy to understand guidelines?
13:21
Can people figure out how to use your app? And the fourth is robust. Accessibility should more or less be browser agnostic. So if you support a specific browser version, that should also be accessible. Okay, so at this point, I had found the guidelines.
13:43
I had found the principles, and I was feeling a little bit better. And I thought, okay, what do I do now? Well, that's right. I read the friendly manual, because that's what we do. And my degree is actually in literature, so I like to think I'm pretty good at reading. And I picked up this manual,
14:01
which would be over 1,100 pages if you were to print it out. And according to my own scale, on a scale of Dr. Seuss to Marcel Proust, the WCAG documentation is just after James Joyce. Like, it's hard stuff to read. And that can be a little bit frustrating as a developer, just like, what is going on?
14:21
So I thought to myself, is there an easier way to get started? And my good news for you today is there is. There are a ton of free, easy-to-use resources out there. And accessibility doesn't have to be this giant, scary thing. You can start with something easy. And so what I wanna share with you today
14:40
is the accessibility dev tools for Chrome. There's a couple reasons I like these. One is they're in Chrome, they're an extension, they're totally free. And I already spend a lot of time in there anyway, so it feels kind of familiar. And I love these little red, yellow, green dots. It reminds me of like TDD and what Ruby is doesn't love that.
15:04
Okay, so we're gonna do a little bit of live coding. Bear with me. Okay, so this is my super weird pug postcard page. Simple web form. And I wanna make sure that it's accessible.
15:21
So I come over in my console to the audits tab. I choose accessibility. And then I'm gonna click run. Okay, so we've got a couple issues here. So we're just gonna tackle them one by one. So the first one says that controls and media elements should have labels.
15:41
And it's referring to these two elements here. And so you might be thinking like, oh, there's placeholder text, right? How many of you have ever started to type your email and then you get a Slack message? And it's a cat GIF and it's a really cute cat GIF and now you have to go get another cat GIF to send back because you want to reciprocate the cat GIFs, right?
16:03
So you come back to this form and you go, oh, I must have been typing in my email. Cool. And then you get here and you're like, oh, no, I was typing my name. So now I have to go back. And I have to start all over. For me, that's annoying. But for someone with a cognitive issue like ADHD,
16:24
this is incredibly frustrating. So let's get some visible text up there. So we're just gonna add a label and call it name.
16:42
And what we're gonna use is the four attributes. And I'm gonna put in the ID of the input. And what that is going to do for us is programmatically associate the label with that input.
17:05
So let's go back and try this again. Okay. And we're gonna run that audit again. Fantastic, that one's gone. So one of the tricks about using the four attribute is now when I click on name, I actually get into that input,
17:22
which is really helpful if you've ever been on a form in your phone, and you're like, you're trying to hit that input and you just can't get it. It's so frustrating, right? But this gives us a little bit more name space. So if I fat finger something, I can still get into that input. So let's take a look at the next one.
17:41
Images should have a text alternative or presentational role. So if an image conveys some kind of meaning, if someone cannot perceive that image visually, we want to give them some text so they can know what's going on. And I don't know about you, but I feel like you're missing out on the fun if you can't see this pug in a pink unicorn costume sitting in a pumpkin patch for no apparent reason.
18:03
So I'm gonna go into my image source, and I'm going to add some alternative text. Let's see, pug in pink. Unicorn, run our audit again.
18:25
Cool, two left. Text elements should have a reasonable contrast ratio. So the WCAG 2.0 says that you need to have a certain amount of contrast on your text so people can read it. This is important for any users
18:41
that might have vision issues. This is also really important if you're outside on a sunny day trying to use your application. So this text up here is not a great color. And one of the things I love about these tools is I'm inspecting the element, and I can go over here to accessibility properties.
19:02
And it will actually tell me that my contrast ratio is insufficient, and I can try out some new ones. So this is level AA, which is a three contrast ratio, and then the 4.0 is the AAA. Let's shoot for the stars. We'll do AAA today. So I'm going to replace that in my CSS,
19:33
and let's try it again. Okay, one left, awesome. The purpose of each link should be clear
19:41
from the link text. So over here we have this link that just says click here. Now, if I'm a screen reader user and I'm tabbing through, I'm not gonna hear all of that information that comes before. Don't know what a PUG postcard is. And so I don't have any context
20:00
for the words click here. Like, why would I click here? You haven't given me a good reason. So we wanna make sure that the link gives a little bit more information. So instead of just saying click here, we'll say learn more about PUG postcards.
20:30
We're gonna refresh, and we're gonna run our audit, and we've got all green. Feels good. Thank you, thank you. Feeling really good about this. One other thing I wanted to show you guys,
20:41
which is super simple to add to your website, and we often forget about, is right up here in the top, I've got HTML language equals English. And it's really easy. We're in America, everybody speaks English. We're kind of in our own little bubble. We're not thinking about it. But this is really important for screen readers,
21:02
because if I'm a user who has set up my screen reader to default to a different language, and I get to your webpage, and you don't tell me the language, it's going to try to pronounce all of your content in my own language, which sounds really, really weird. The other benefit that you're gonna get from making sure that you always include the language
21:22
is that if your user comes to your site, have you guys seen the Google Translate bar that pops up at the top? It relies on that to know what your content is. So you're also gonna help users who maybe speak another language or have their default settings in a different one.
21:43
And I of course don't mean everyone in America speaks English. That was ironic, joke. Okay, so let's go over how to test your app. Now these automated tools are fantastic, and I love them, and they're easy to use, but they're not enough.
22:00
They cannot catch everything. You do have to have some human testing. So go through your app with an automated tool. You know, go through those issues, fix them. Then go through your app with keyboard navigation. If you can hit tab, if you can interact with all the elements, can you submit the forms, can you hit the buttons?
22:23
And then test it with a screen reader. And this one takes a little bit of time to get comfortable with, but I see a lot of Macs in the room. There's actually a built-in screen reader on Mac. It's called VoiceOver. And you can use that to test your apps. Chrome also has a free plugin called ChromeVox.
22:43
Free, easy to install. And if you're working on Windows, there's NVDA, which is also a free screen reader. So let's recap real quick. We have our four principles, perceivable, operable, understandable, and robust. And under perceivable, we looked at two issues.
23:02
One was that images need alternative text if they convey meaning, and we fixed that by adding the description of our little pug. And text should have good contrast, and we fixed that by changing the color of our header. The next one is it should be operable, so linked text should be meaningful.
23:21
So we took away that click here, and we added more information to our link. The next one, understandable. Form fields should have visible labels. And we accomplished that by adding the four attributes to our labels and associating it with the ID of the input.
23:41
The other thing is you always want to include the human language of the page. That allows screen readers to know what's going on, and it allows Google Translate to know what's going on. And robust. As I said, automated tools are not enough. Test with a screen reader, test with keyboard navigation.
24:06
So I promised you guys I would share some of my favorite, easy to use, free resources. So the first one up there is the actual WCAG 2.0 guidelines. They are worth taking a look at, and then maybe cross-referencing
24:21
with something that's a little easier to read. There's a great book, it's not free, but it's very helpful, called How to Read the WCAG 2.0 Guidelines by Luke McGrath, and I like to call that the WCAG 2.0 in plain English. I find that one very helpful. The WebAIM guys have a fantastic checklist
24:41
for WCAG that you can go through. It's free, it's on their blog. I highly recommend it. Google has two courses that I find very helpful, both free. And then I also wanted to include some resources for your product team, your UX designer, there are two checklists,
25:02
one by Vox Media and one by WebAIM, for the product stage when you are still figuring out what you're going to build. And one of the things that we learned in making our website accessible, it is that it is much easier to create and build something that's accessible than to try to go back and retrofit it.
25:23
So it's great to get that into your process early on. And then two books, Inclusive Design Patterns by Hayden Pickering. There's also A Web for Everyone, which has a set of personas of different users who rely on different assistive technologies
25:41
that can help your product team sort of think about how people might be using your application. For testing tools, there are a ton out there. I encourage you to go figure out what works for you. And come talk to me if you find cool stuff. I'm still on the search for a good CI.
26:01
So we used the Chrome Accessibility DevTools today. There's also a great one, the WebAIM Wave Tool. It's kind of like a GUI, and it's really easy to see what's going on in your site. There's Tenon.io, there's Axe, there's Pali, and then there's AccessLint CI if you're interested in adding this into your continuous integration.
26:23
And I will post these online, all these resources. And then as I mentioned, there are screen readers for testing, so if you've got a Mac or an iPhone, VoiceOver is built in. If you have Chrome, you can use Chromebox. NVDA is free on Windows, and JAWS is not free,
26:40
but you can do like a 40-minute trial. Okay, so your mission, should you choose to accept it. Grab the Chrome DevTools, run an audit on your app, share a screenshot with me, and tell us what you're gonna fix first. Maybe it's like the super easy one, which is just,
27:02
I'm gonna add the human language to my HTML page. That would make me super excited. And then, come find me at a happy hour over a beer or coffee and tell me about it. I'm super interested to hear what you guys are doing in accessibility, and I would love to hear if you have resources to share. I'm still learning, it's a huge, huge topic to learn about,
27:25
and I'd love to learn more. So here's the thing, we as developers have the power to make sure that our users don't feel frustrating using our app.
27:42
And we also have the power as developers and as a community to decide what is going to be standard practice. We do that in all areas of our code. So let's make this standard practice for the Rails community. Let's make it best practice to have text contrast,
28:02
to have human languages, to have alt text, because we can do that, and that's really exciting. So even if you're not at a company that has the resources to hire an expensive consultant or do an entire third-party audit, you can run a simple dev tools audit on your app
28:21
and you can make a few changes there. So I hope that you'll join me in working to make a more accessible web. And let's see, I've done a lot of talking, so I'd love to hear your questions if you guys have any for me. Yeah? I don't know if you've had the same experience
28:40
when you first try out a screen reader. I don't know if my site's not working right or if I don't know if I just don't know how to use a screen reader. Do you have any tips for someone trying out a screen reader for the first time on how to learn it? Yeah, absolutely, that's a good question. So I can actually show you my voiceover right now.
29:00
So one of the helpful things to do is that if you're using ChromeVox, test on Chrome. If you're using voiceover, test on Safari. I don't know what the preferred one is for NVDA, but if you stick to Mac and Mac or Google and Google, that tends to minimize the number of errors.
29:24
And so I'll show you guys real quick how voiceover works. So I do command function F5. Voiceover speaks descriptions of items on the screen. Voiceover on Chrome. Send a pug postcard, window. Send a pug postcard, web content, landmarks menu.
29:42
You are currently in the voiceover menu. This is a list of voiceover menu options. To navigate up and down the list, use the arrow keys. To choose a menu item, press return. To close the menu, press escape. So for tab users, they often tab through your screen because they're actually, they might be looking at it.
30:00
But for screen reader users, what the majority of them are going to do when they first get to your web page is they're going to go to this menu. And they're going to look at your headings. So in this case, we've got a nice heading one, which tells them where we are. So it's really important to make sure that you've got semantic headings.
30:21
But to get back to your question, voiceover actually has a tutorial. When it first pops up, I recommend going through that. ChromeVox also has a pretty good one. And yeah, sometimes it's not easy to get started. I totally understand. It took me a while. Just playing around with it and trying to.
30:43
Send a pug postcard, voiceover off. Sorry, I'm gonna turn that off for a second. There's also a really great resource on WebAIM on their blog about how to start with screen readers. And they've got one for voiceover, one for NVDA, and one for JAWS. And I'll post that along with my slides.
31:02
Yes, good point. So she asked if there's any places where web accessibility might seem counterintuitive. And I think originally for our team, the idea that we have to have those form labels for every form was a little bit tough to swallow at first because we were so used to using placeholder text and it seemed to be doing the same thing.
31:22
But at the end of the day when we added that and we had that extra little click area, we found that it was better. That is an excellent question. And as you get into, so what he was asking about was if you have a complex data chart or if you have a,
31:40
maybe an image with a lot of different things going on, what's the best way to do that? So I haven't had the opportunity to work with something like that. But there is a great resource also on the WebAIM blog on how to deal with complex charts and how to give that information. And I can post that as well.
32:01
Yeah, that's a great question. So his question was if we can have multilingual pages, which we can. And so you can actually go in and, let's see. I don't know. I know that you can put it on a div. You can actually add the language in multiple parts of the page.
32:22
So if you have like a French page and then you have a chunk of German, you can add language equals DE to that chunk where you have that quote. So it's possible to use that to make it multilingual. Yeah, thanks. Oh, that's a really good question.
32:40
So she was asking if there's any places where you can get feedback from users who are using a screen reader or for user testing in general, is that right? So we haven't worked with any of those at all, but I do know there are some services that you can hire out to. And they will have users go through your app and give feedback. I don't know any off the top of my head,
33:01
but I can do some research and get back to you. Thanks. So he asked if I've ever run into an issue where adding labels or changing contrast has resulted in pushback from a design team. Absolutely. And that's why I highly recommend grabbing those product design lists and having a nice little sit down with your product team
33:24
and talking about how they can integrate accessibility into making new mockups. Yeah, but it's definitely a process and a negotiation when you have to change existing designs. Yeah, you're not alone. Yeah, I mean, I think one of the,
33:41
he asked how we compromise with our design team to make sure that we can meet those standards. One of the things that we did was we kind of said like level double A is what we're shooting for. So level triple A does require a pretty strong contrast. So we didn't go quite that far for our text.
34:00
The other things we found is you can do things like adding outlines or adding drop shadows and having that little bit of dark around the text itself means that you have contrast with that instead of the contrast with the back color. We also have a couple places where we've used overlays. So we put a dark overlay and then we put the text on top
34:23
and that ends up being sort of a more elegant solution than changing all the colors. Yeah, thank you. Yeah, so he was asking if mobile devices have accessibility stuff. The iPhone has actually got a fantastic accessibility setup. It has voiceover and you can put it into accessibility mode. So when you tap you have to double tap
34:42
to actually go into something because it reads the title. So thank you. So that's all the time we have for today but I would love to talk to you guys later if you want to chat accessibility. Thank you.