This course has been updated! We now recommend you take the Website Accessibility, v2 course.

Check out a free preview of the full Website Accessibility course:
The "Accessibility Q&A Round 4" Lesson is part of the full, Website Accessibility course featured in this preview video. Here's what you'd learn in this lesson:

Jon talks about thoughts with product design and accessibility, color contrast ratios, and accessibility and internationalization.

Get Unlimited Access Now

Transcript from the "Accessibility Q&A Round 4" Lesson

>> Audience 1: A lot of this stuff is just really technical and I think what I spend half the time with, with accessibility, is going upstream to other designers, as well as content strategists.
>> Jon Kuperman: Yeah.
>> Audience 1: So that we can bake in just proper content structure and order. And with these things in mind, are there any resources that specifically address it from those disciplines versus technical.

>> Jon Kuperman: Yeah I think that would, haven't seen a ton. So I guess some of the stuff is if you look at some of the material design principles or something like the bootstrap high level stuff, they do a pretty good job at including, to be like you should order your headings in this way, those kind of things.

[00:00:44] One of the things I've found like a big win is just helping make some pretty easy-to-follow rules that I can pass to design end product. So for design, sometimes you'll be like okay, well I need to know if things can be interacted with and if so what they do, right?

[00:01:00] But that might be a good time to reach out too and be like here are just some general things to think about. I haven't seen a ton of resources from that angle, which I think we could really benefit from some more product level or design level. Another big thing that helps with the product level stuff is if you can incorporate any of the tools into your CI.

[00:01:21] You know its like once something causes a test to fail as an engineer it's easy to get some bandwidth to be like we have to fix or test. But if there's nothing in CI and it's just you complaining about it being inaccessible, I think it often can fall apart.

[00:01:35] So I think that one thing that's great is if you can get all excited and add it to CI and then all of a sudden it's like look at all these failures. I guess we gotta go fix this. Even though it's a little bit backhanded, I've had a lot of luck with that in the past where I rig something up and then I'm like man.

[00:01:51] Who knew? Well, I gotta go fix this stuff now.
>> Multiple: [LAUGH]
>> Jon Kuperman: But, yeah.
>> Audience 1: [COUGH] For going back to contrast on colors, it's kind of an ongoing joke where designers love to have gray text on white and, well actually there's an example there, the placeholder text. They want it to be light enough that it's just a suggestion but dark enough that you can read it.

[00:02:19] And then you also need to be able to tell the difference between that and what you actually typed. So how do you find that balance?
>> Jon Kuperman: Yeah, it's tricky for sure. One of the big things is if you have, for a form, so again there's multiple demographics. As far as screen readers go, if the form field has a label, the placeholder matters less, right?

[00:02:40] But yeah, as far as partially sighted users go or users with color contrast difficulties, that stuff can get really tough. I think just trying to pick a level of conformance and just run. Just be like we can definitely use grays and whites but it has to be at least this gray if it's on white.

[00:02:57] You know what I mean. Because you can still have the text type dim be a lot darker than the--
>> Audience 1: So if that had a label with it, would it be okay to have really light placeholder text?
>> Jon Kuperman: So if it had a label, then the screen readers, our users are fine, right?

[00:03:14] Cuz it won't even recognize a placeholder. It'll just say the label. But if it has a label that's visually hidden and then a placeholder that's hard to see and you have a partially sighted user, then you might be in some trouble, right? So if you were, I don't know a lot of these but I'm sure we could find a few of these colors where you can't read the placeholder at all.

>> Audience 2: The difficulty actually with the placeholder styling, that content is controlled and the color is actually controlled by the browser. At the moment at least, as far as I know, that you@yourdomain, that gray, is not controllable by CSS.
>> Audience 3: Some browsers let you handle it.
>> Audience 4: I think you can hack your way into it.

>> Audience 2: Yeah I mean, there are ways you can hack around it, absolutely.
>> Jon Kuperman: But I do agree, I mean the challenge, too, being hey, you want to differentiate type text from placeholder text by making the type text darker?
>> Audience 4: Ironically, some of the browser defaults are not contrast enough so.

>> Audience 2: Yeah, right.
>> Multiple: [LAUGH]
>> Audience 2: Exactly.
>> Jon Kuperman: Yeah, I mean, yeah. I think somebody asked a good question before which was like trying to do UI/UX stuff and accessibility stuff usually go hand in hand. But yeah, this is I think a case where it might be a little bit of a, have to be a discussion around keeping it working for people that are color blind while making it look similar to the spec or things like that.

[00:04:39] As far as, yeah I mean again, the screen reader is pretty easy to take care of because the placeholder's not gonna get read anyway. So you can just go ahead and put a label on it and you're golden. But yeah, if you have too much gray on white, it might be difficult.

[00:04:51] Are there any major issues dealing with both internationalization, for example right-to-left languages, and accessibility? Both are very important and can be challenging. I'm trying to think of, I think the first thing that comes to mind is just that language attribute. So specifying it on your whole document and then if you have sections, like if you're Twitter and the whole document's in English but this tweet is in Chinese, you know, specifying that lang on there too so the screen readers will know what to do with it, know to translate it.

[00:05:23] I can't really think of major, internationalization can be really hard to work with from a design standpoint. If you're used to strings that are ten characters long, and then you switch to a language where they're super long and they break things. But I can't think of an exact area where they would bump into each other necessarily.

[00:05:40] They just both present unique challenges.