Accessibility NYC Meetup Recap: “Implementing Resizable Text Without Breaking the User Experience”

Hi, everyone. Thanks for coming tonight and making it despite the rain. I'm Cameron Cundiff. Yeah!

Thank you, thank you. And I just wanted to introduce myself, the Meetup, and say a couple thank yous. So my name is Cameron. I work at a startup in Midtown.

I used to work here at Thoughtbot. And I wanted to start there and say thank you to Thoughtbot for hosting us tonight. And Stephanie back there is the gracious office manager, so we can direct our applause in her direction. And also Thomas Logan over here is one of the co-organizers.

I love this. Everyone is like... On board tonight! This is great.

And also, Joly MacFie is doing the live stream. We're streaming out in realtime on YouTube. I think we've tweeted a link out. So if you...

We're going to tweet a link out. So if you want to retweet that, go for it. And then... Yeah, thank you, Joly.

And then otherwise, Mirabai Knight and White Coat Captioning, up here on the screen. This is not some crazy, like, text-to-speech AI. This is a person, and she's awesome.

So thank you, Mirabai. And then finally, thank you to Level Access for their ongoing support and sponsorship of the event. And thanks again to all of you. So with that, I'll introduce Adina Haltzer.

I'll let you describe -- I'm not gonna take away any of your punchlines. So why don't you take it away?

Sure. Hi, everyone. Well, I'm really excited to be here, and I'm really excited to be talking about scalable fonts. And let me tell you a little bit about myself first.

I am senior product manager and chief technologist for accessibility at Comcast NBC Universal. I'm down in Philadelphia, but we've also got that Comcast building up in 30 Rock. So I get to go there sometimes too. I tweet a lot.

Please feel free to tweet during or after. If there's anything that you find that's really exciting, my handle is @haltersweb. That's basically my last name pluralized. And web.

World wide web. I also have GitHub. I will read the GitHub URL that is HaltersWeb.GitHub.io/Accessibility, but the A must be capitalized. I don't know why I did it that way.

But I can't change it now. So the A must be capitalized, or you can't see nothing! And that is a page that will show some of my work. It's not pretty, but it's a lot of the solutions that we've been building.

And I've got some exciting new solutions that are gonna be coming in. So if any of you are at CSUN, come and see my talk about bar and pie charts that are completely tables, all CSS. No SVGs. No nothing.

All CSS. No JavaScript required. And that will be posted real soon. But we'll wait until February, March, to post that.

All righty. So... WCAG 2.0. We've got to start there.

And this is why scalable fonts are so important. They're WCAG required. Two WCAG requirements: 1.4.4, called resize text. Except for captions and images of text, text can be resized without assistive technology, up to 200%.

Remember that, guys. 200%. And this is big. Without loss of content or functionality.

A lot of times, you'll see there's resize and then you go... Eurgh. So we want the user experience to be just as stellar, whether you're at 100% or 200%. And we can talk about what that means.

The other one, 1.4.5: Images of text. If the technologies being used can achieve the visual representation -- and it can! -- text is used to convey information, rather than images of text, except for the following: The image of text can be fully customized to the user's requirements and -- essential -- here we go. A particular presentation of text is essential to the information being conveyed.

And that includes logos. That is part of a logo or a brand name -- are considered essential. All right? So we're gonna see how we can do that.

All righty. Why? Why resizable text? When someone comes to the browser, they didn't just start being low vision when they got to the browser.

All right? They have their settings already set up. They've got operating system settings set up, maybe. Font size set up, maybe.

They may have it set to 200%, 300%, 400%. Okay? So it's not just when you get to the browser. It so what we want to do is we want to reflect those operating systems settings.

Also, this allows for a global change. Meaning any time we get to our website that we've built properly, it's gonna be resized. We don't have to go... Okay, this page but not that page.

Or every time we go, it's gonna be a different experience, based on our settings that day. And this is key: User action is not necessary. That's why zoom, that command-plus, or that control-plus, command-plus, depending on whether you're on a Mac or PC, is a no-no. I mean, yes, it's really helpful.

But again, remember: Somebody who has low vision didn't just get to the browser and go... Oh, now I've got low vision. Now I have to command-plus or control- plus. Right?

Also remember: Command-plus or control-plus -- that is for only that period of time. All right? And for that one website. And I would expect all your websites would be scalable.

So they wouldn't have to command-plus or control-plus every time they got to a different site that you had created. Also, we have to think in terms of comorbidity. Comorbidity is when you have more than one -- maybe more than one disability. Maybe more than one...

It runs the range in medical terms. You know, you could have more than one symptom in your... Whatever that you might have. Whatever you might have.

But think about comorbidity in terms of disability. So, for example, my cousin, who has cerebral palsy, so he's got mobility issues. He's got low vision. And he's got cochlear implants.

So we're not just solving for one thing. And imagine if my cousin Bobby goes to a site that I created, and he's got low vision, but now he has to command-plus, and that's gonna be difficult for him. All right? Because he's using a switch device.

All right? Not impossible. But really, we want to give a great user experience. I'm all about delighting.

Delighting everyone. All right? So I'm gonna show you how to find out if your site or if a site has used relative font sizing. I'm gonna show you how to do it in Firefox, and I'll share the slides with you afterwards.

But I have both imagery here and description. So testing font scaling in Firefox. You'll want to open the menu, the Firefox menu. Go to preferences.

Go to language and appearance. Go to fonts and colors. And go to the default font size. And set a larger font size.

Default is 16 pixels. So you'll want to set maybe 32 pixels. That's 200%. For Chrome, open customize, go to settings, go to appearance, go to font size.

And you can also use the customize fonts. I love those. That little slider. And set a large font size again.

If you use a customize font size slider, go big. Go big or go home. Up to 72 pixels, you know? Again, remember, default -- medium, 16 pixels.

That's your default. All right. Let me show you that real quick. And let's take a look at some sites.

Whoops. Wrong page. All right. So what I have open now...

I'm in Chrome. And I have my settings open. And if you'll notice, the font size says medium, recommended. You'll also notice a couple lines down it says page zoom.

Do not touch that. That's your command-plus, command-minus. Don't touch that. All right.

We're going to mimic an operating system resetting the default font size. Okay? Without having to do that with our own operating systems. So what I'm gonna do...

Well, before I do that, let's take a look. We're gonna look at Xfinity.com. So that's a project that we've been working on. Done some really innovative things.

We're actually gonna be talking about that. The engineer will be coming to CSUN with me and talking about what he's been doing with this. We're looking at everything in the default font size. We're looking at Google.

Just Google search. We're looking at Apple. We're looking at Microsoft. We'll look at W3C.

We'll look at webAIM. And we'll look at the Web Accessibility Initiative. And by the way, Web Accessibility Initiative is in the process of being redesigned. So we'll keep you posted.

All right? I've been talking to them about... I'm on the WAI. For this redesign.

I've been talking to them about... Remember relative font size! Remember relative font size! Remember relative font size.

So we'll see how that goes. Question mark? All right. I'm going to actually go to customize fonts.

Because we're going to do something obnoxious. And we're gonna go to the font size. We won't touch minimum font size. We're just going to the customize font size slider, because I want to make it really huge.

Let's go super huge, just so we can see if anything changed on those sites. Sometimes, by the way, you'll have to refresh to really get a good representation, but let's just check. Let's see. Xfinity.

Yes! Woo! By the way, you'll notice Xfinity global navigation -- not yet. That is in our backlog.

There's a lot of... It's not as straightforward. Let's put it that way. We'll get it there.

Google. Huh. Google's search... Well, the bottom links, advertising business privacy terms and settings -- that all grew.

But the rest of the page did not. Isn't that interesting? Apple. No!

Just exactly the same as it was. Thankfully, they use super large graphics to begin with. But it would help if the fonts could be readable, thank you very much. Microsoft?

No change there. W3C! Woo-woo! But what you'll notice is...

And I'm gonna refresh this. You'll notice great, great, great, great, and then you'll get to... This is what I was saying. Yes, relative font sizing, but poor user experience.

Things are laying on top of each other. It would be very difficult for me to use. You'll also notice that the white space, the area that allows your eye to rest, has been just filled up. Because the white space, the leading, the margins and padding and line height, none of that changed.

That should change along with the font size. We'll talk about that in a moment. WebAIM. Woo!

Let's refresh to see if the... Yeah. So again, some of it's good. But here we are at the top.

And things are laying on top of other things. It is a very poor user experience. Sorry anyone who's here from WebAIM. And the web accessibility initiative...

Great. Oh my goodness, they're probably the best of all of these. Except for Xfinity, I would say. And this is their old site.

But you'll notice way down here, if I can get to the bottom, we're gonna get to an area where there's a little picture. And it's the video pages, updated, and the thumbnail is so teeny-tiny, it just didn't scale with everything else. We're gonna talk about that, okay? All righty.

So let's go back to regular font size right now. Okay. All right. I said it before.

I'll say it again. Browser default. That's your root. And we're gonna be saying the word root a lot, and you'll see why.

Your root, otherwise known as your HTML, is 16 pixels. Now, I should say... It renders to 16 pixels. All right?

And that's really a big distinction. Because the HTML, the root, is truly taking things and rendering them in scalability. So 100%, 200%, et cetera. But when you get to the rendering, after you've done what you've done to scale it, what does it render at?

And you can find this computed, and we'll look at it in a moment -- it renders to 16 pixels. So keep that in your mind as well. All right. So we're gonna talk about pixels.

We're gonna talk about EMs. Who here has heard of EMs? Okay. And who hear has heard of REMs?

Good. About half of you have heard of REMs too. Great. You can guess that's the secret.

Okay. Let's take a look at pixels, EMs, and REMs. Our target is 14 pixels. All right?

And if we set 14 pixels -- I set the list item, a table data cell, and the paragraph at 14 pixels, and we're at one time scaling, so 100%, and I have a render here, of... In a table cell, and that is... 14 pixels. But now I've got a list item in a table cell.

And that is also, thankfully, 14 pixels. Because we set it. All right? No problem with scaling.

This is great. Then we've got a paragraph in a list item in a table cell. Because we set it at 14 pixels, it's locked in there. Everything looks beautiful.

So this is promising. Now we're going to move it up 200%. Uh-oh. So we moved it up 200%.

It's still locked. 14 pixels. It's not 28 pixels. It's 14 pixels.

You have overridden what the user wanted. All right? So pixels -- not the way to go. But we use pixels, often, because of the problems with REMs.

With EMs. And we'll see that here. So I'm using EMs now. The list item, the table cell, and the paragraph are all set to 0.875 EM, which...

I'm trying for 14 pixels. So default is 16. 14/16 is 0.875. Right?

And in the table cell, just the text in the table cell, we've got 14... It renders to 14 pixels. Yay! But when we've got a list item in a table cell, now it's 14 pixel rendered...

Times 0.875. So that's kind of like 12, I think, or so, pixels. And then we've got a paragraph in a list item, in a table cell. We're compounding again.

And so we've got 14 times 0.875 times 0.875. And that's around 10 pixels. And when we go to two times scale, yes, everything scales, but again, we see in the text, just in the table cells, bigger. And way bigger than the text all the way to the right in the paragraph, in the list item, in a table cell.

So that's why a lot of times we go back to pixels, because we want that look. What are we gonna do? Well, REMs. I'll talk about REMs, what they are, in a moment.

But same 0.875. But this time 0.875 REM. And this is also promising. So in a table cell, that looks like 14 pixels.

In a list item in a table cell, that looks like 14 pixels. In a paragraph, in a list item, in a table cell, that's also 14 pixels. All right. Proof is in the pudding, though.

We're gonna do 200%. And everything scales up. So at 200% scale, or two times scale, the table cell, 28 pixels, list item in the table cell, 28 pixels, in a paragraph, in a list item, in a table cell, 28 pixels. All right?

Now, if you'll notice at the top, I've got a CodePen, and that is https://codepen.io/haltersweb/full/Xzjwqi, I think it is. And we're gonna go to that. And I did something a little bit different there. And I made, instead of going to 0.875, I've gone down to...

I've gone up. So it's like 1.25. So we're trying to get 20... Rendered at 20 pixels, okay?

My first table, everything is set via pixels. So that's 20 pixels. Second, using EM, that's 1.25 EM, and the third table, 1.25 REM. I am going to go to the preferences in Firefox.

I am going to go there, and I'm gonna say... I'm gonna go to... Double at 20%, which is 32 pixels. Let's look back.

And our first... There we go again. Our first table, still at 20 pixels. The EM, everything is growing -- I think by the end, we're at 50-something pixels.

Not what we were looking for. But then using REM, you see how everything scales properly. Any questions? All right.

So let's talk about REMs. What is a REM? REM just starts for root-M. So an M is the width of an M. All right?

And one M, relative to the default, remember, 16 pixels would be 1M, also one R-M, in the root. The root, otherwise known as the HTML. This is a CSS 3 thing. So IE9+, if you have to do older browsers, what I like to do as I do a pixel size, and then a REM size underneath.

All right? In my CSS. So the problem is algebra. And you know when your kids say...

Wow, mom. I'm never gonna use it... Well, guess what? We're gonna have to use it if we're going to be figuring out what the REM size is.

So if it's 16 pixels for the default, so 1M, one REM is 16 pixels, it's equal to X/21 pixels. Because I'm trying to get to 21 pixels right now. All right? So 21 pixels in my CSS...

I'm gonna have to write 1.3125 REM. Well, that's a pain in the butt. I didn't sign up for doing algebra. I don't know if you guys did, but I didn't.

So we have a way around it. It is the 62.5 root reset. What am I doing? I'm trying to make -- remember I said default was 16 pixels?

I'm trying to make one root-M, one REM, 10 pixels. So 10 pixels divided by 16 pixels is 62.5. But you'll notice I didn't type... I didn't force the root, the HTML, to say 10 pixels.

It's going to render at 10 pixels, but again, I'm keeping everything relative. So 62.5. So now all I have to do is move a decimal point. That is it.

So... 21 pixels, 2.1 REM. And that's the amount of math I'm willing to sign up for. So...

And you'll see back here again, if we look... In fact, I'm going to go into Chrome, because I like Chrome dev tools better. Let's look in our CodePen, that same one that I mentioned earlier. And if we look at our root, I'm gonna go to the HTML.

Oh, I didn't do it in here. That's right. Because I did it in... Here we go.

That was just the beginning. We'll be talking about this in a moment. I won't give you all the URL yet. But you'll just notice that I put it into my reset, or I put it into my brand.

CSS. It's always there. All right? HTML, font size, 62.5%.

All right? And then when I have to make a measurement, so in this case, I wanted 14 pixel rendered, and so the text -- by the way, I know the text is black on images. This is just meant to be a quick example. But the text font size -- 1.4 REM.

Let's see. Proof is in the putting. We're gonna go to computed, in our Chrome dev tools. And we're gonna go down to font size.

Look at that. It renders at 14 pixels. Yay! And there was much rejoicing.

Any questions about that? Yes? Oh, yes.

I got it. Thank you. I know you mentioned that for Firefox and Chrome, both the default sizes are 16 pixels. But what if, like, I don't know if you checked on Safari and IE?

They're all 16. Yeah. IE, Safari, Opera. It's just the standard.

Got you. So what's the reasoning behind setting the percentage instead of real pixels? For example, in my code, can I just say... Font size, 10 pixels?

For the root?

Yeah, for the root.

Good question. So if you're trying to manipulate the root through your operating system, and you're doing a percentage of 16... Of what the default is, but you've locked it at pixels, the same way you locked the paragraph at pixels, you're saying... Operating system, I don't want your percentage.

I'm making it 16 pixels. That's just the way it's gonna be. So it won't scale. We can take a look at that, in fact.

Let's do that. Let me go back to... Oh, wait. Let's go to...

All right. Right here. I'm gonna go to HTML. And instead of font size 62.5, I'm gonna lock it -- because remember, we're trying to go 10 pixels, right?

10 pixels. Okay? So now HTML is 10 pixels. Watch it make a liar out of me.

Still works! Sometimes it works. Sometimes it doesn't.

You're in a different tab.

Oh, was I? Oh, okay. There we go. So you see?

It locked. So I didn't make a liar out of myself. Yay! So what we've done is we've said...

No, we want this to be pixels. And it can't scale. Okay? Sure.

Yes?

Sorry, Mirabai.

MIRABAI: No problem.

So when you did that trick with the HTML tag in the CSS with the 62.5 percent, because all browsers render at 16 pixels, do we not have to ever mess with that, really, and it'll always be that perfect 1.4, 14...

Right. Just because I did the initial math in the HTML tag. You know, I just don't want to have to be doing -- having scratch paper next to my desk all the time.

For every single time, for a class, or something. What's the percent.

Exactly. All of a sudden a UX person will give me... And there's 20 different rendered pixel sizes on there. And I'm doing the math, doing the math, doing the math.

I just have to move a decimal point. It's not necessary. If you love algebra, don't do 62.5, because you're gonna have fun all day long! But if you've got better things to do, like I do, then 62.5 is just a trick.

Okay? Yes.

What is the browser support for REMs?

Browser support for REMs? IE9+. So if you're doing IE8 -- what we used to do is we used to do 62.5% for the HTML, again, so we don't have to do the math. Then we would write font size...

Let's say we're going for 21 pixels. Font size 21px. And then right underneath it, font size 2.1 REM. IE8 and below would ignore.

It would go... I don't know what a REM is. And so it would take that first one and stay there. But everything else will...

It'll reset. To the REM. Because that's the second style. You know, in the order.

Does that make sense? Any other questions, before we move on? All right. Cool.

We're gonna refresh. Reset this. Okay. Let me set this back to 16 pixels.

Okay. And you'll notice just what we were looking at. I'm going to then refresh, and my layout changed as well. That's because we're gonna be talking about it.

We're gonna be doing some fun and funky things with media queries. That's just a tidbit of what's coming up next. All righty. So that doesn't mean we don't use Ms. Ms are great.

When you've already got your REM setting for your text, and then you want to do padding or margins, relative to that text size, then use Ms. Because you're saying... Whatever you are, font size, I'm going to scale accordingly, for your padding and your margins. And this means you don't have to then do math or figure out the REMs for those margins and paddings.

And if you happen to change -- let's say you were at 21 pixels, and UX comes and says... No, no, I decided I wanted 25 pixels... You don't have to go and revisit your margins and padding. It all happens, and the breathability moves along and scales along with the text.

All you have to do is the font size itself. Whatever I said. 2.8 REM. And everything else will grow along with it.

We're also going to use M for media queries. Okay? And we'll talk about that in a moment. All right.

Who's heard of X before? A couple of you. So I like X, and I like X because it came from print design. And X is the...

The nice thing is X is the height of a lowercase X. So do you guys... So why would I want to use Xs? And this -- you don't have to.

But I like using Xs when I'm talking about vertical margins and paddings. Your top and your bottom, margins and padding. Because... You know how some fonts, your lowercase are really big?

And other fonts, your lowercase are really teeny-tiny? So one may have some more breathing room, relative to another. And if I set an M, then I'm really basing it on the width, which may be the same between two fonts. But I might...

If UX decides to change the font on me, by using X, it will allow for more or less breathability, relative to what that font's X height is. Just something I like to do. You don't have to. But I like it.

So I use it for top and bottom, text margin and text padding. Then unit lists line height. We see that all the time in Word. What's our paragraph line height?

It's gonna be 1.2. Or 1.25 or 1.3. Do the same thing. It's all relative to that font.

You want to use Ms or REMs, but why not stick with what is the convention? Because actually, when you get a Photoshop file and you look at it, it'll often be 1.2, 1.3, 1.5. So just do the same thing. And you can use percentage, or you can use the decimal.

But I like decimal. Otherwise you have to do 125%. Any questions about that, before I move on? Okay.

I want to show you guys, for a moment, how changing our margins and padding and changing our line height is really going to help us. So I'm gonna go back to our example websites. We're gonna go to settings. We're gonna drag that up to...

We're gonna make it obnoxious. We're gonna go to 40. We're gonna go to... Let's go to WebAIM.

And I'm gonna refresh just so we can see what we have. Sometimes you have to refresh. Okay. Let's play with some of this text that is laying over top.

I'm going to look at our heading. We have web accessibility in mind. And I'm gonna look at it in our Chrome developer tools. And I say that h1 has a font size...

They're using percentage, by the way, here. And line height is 75%. Great. They're using relative.

But their margin bottom is 7 pixels. So let's just do 7 REM, and see what happens. And do you see that we've just pushed everything away? Let's take it down to maybe...

You know, 2 REM is nice for this. Let's do in fact... Instead of REM... We want to do not REM, but M. Let's do X, actually.

X. And so the margin bottom is gonna be the height of two Xs. So we'll go with what I had said before. When we go and we move this down a little bit to 28 pixels -- yes?

A question. I was wondering what they were using for their root font size.

The root font size? Let's look at that in a moment. You'll notice that this got smaller. It's still relative to the X.

But it's keeping that breathability. That's all they needed to do. Let's look at what their root is. Now, I would imagine they haven't reset it, because they're using percentages, but let's just see.

No. They haven't... They set the font at 100%. Well, that's what it is.

I don't know why they... Just really driving it home there. Default, 16 pixels! That's what we want it rendered at!

So yeah. So they didn't. Okay? So that already helps us out here.

I could do the same thing with horizontal paddings and margins, et cetera. Any questions about that? So go home and pull up some of these sites and play. And see if you can help them out and then send them the code, and they'll all be really happy.

Oh, thank you! Because we're a non- profit, and you did our work for us! All righty. Now...

I'm gonna go into scaling imagery. But to do that, I want to talk a little bit about box sizing. Any of you here heard of border box versus content box? Some of you have.

Content box is your default. What is content box? It says that when I say what? Let's say the width of a box is.

We'll just use width right now. That width of that box is just for the content, for the text inside, et cetera. When I add padding to that, it's gonna make it a little bit bigger. The content area stays the same.

But now it's growing a little bit. Because I've added padding. And oh, I wanted to add a border. So it grows a little bit more.

So what you end up with is a box that's way larger than the box you were originally planning on wanting. So you have to do a lot of math. Again, really? I don't want to do that.

So... Do you know that there's actually... In February, it's global border box day? Yeah.

It is. I kid you not. I'll have to find that link for you all. Let me show you what...

I'll show you over here. In Firefox. I'm gonna go back to regular size. 16 pixels.

This isn't truly about relative sizing. But it's gonna help us when we do our relative sizing for our fonts. I mean for our imagery. So we're gonna go to border box versus content box.

Let me give you that URL. It's also CodePen. So https://codepen.io/haltersweb/full/JObPay. And what you'll have here is a box that has the exact -- we have two boxes.

They have the exact same CSS. Exact same CSS. The second box has box sizing:border box. So we're gonna look at that for a moment.

I'm gonna inspect the element. I'm gonna go move that to the right. And you'll notice... The div itself.

I've got two divs. So the div is a width of 20 REM. I don't think I set the... Yes, I did.

I set the HTML to 62.5. So I'm looking for, in essence, 200 pixels. 20 REM. Width of 200 pixel, rendered, 20 REM.

Height, 20 REM. Border, 2 REM, or 20 pixel thickness of border. My padding. Also 2 REM, or 20 pixel rendered.

Padding, margin, 5 REM, or 50 pixels, rendered. Okay? Let's take a look at... And what we see is the top box is way larger than the bottom box.

Okay? I'm gonna go to Chrome for that same... There we go. For that same CodePen, just because I've got a nifty little plugin in CodePen, where we can measure.

But we're also gonna use our computed size. So I'm gonna go to the top box. All right? Content box.

And what we look at, when we look at the rendered, at default, 200 pixel by 200 pixel for the content, and we actually have the word content box written in there. And it's to the left and to the top of that content box. Growing out of that 200 by 200, we've got a 20 rendered pixel padding. You can see that there.

And there's our border. 20 rendered border. And our margin, top and bottom. Because the other one I just did auto, so you can see.

But top and bottom, margin is... 50 pixel, rendered. Margin, no matter what, whether it's content box or border box, it's always gonna be on the outside. It's not part of the sizing.

But let's see how big our box that we see, not including margin, is. So that's 280 pixels. Let's make sure that that's correct. I'm gonna go to...

I have a little... Measuring tool on Chrome. I don't remember what it's called. I've had it forever.

And that's... What did we say? 280? There it is.

280 by 280. In essence, 280 by 280. But that's not what we wanted! We just wanted a 100-pixel box, right?

If we move it down... Okay. To the bottom one... We are asking for a 200-pixel rendered width and height.

So what do we have? We've got, starting from the outside, the border is 20 pixels. The padding is 20 pixels. And what it leaves left is 120x120.

So now I've got 20+20+120+20+20 is 200. And let's just size that from the outer border. From the top left to the bottom right. And in essence, if I could draw better...

200 by 200. Okay? All right. Good enough.

And I'm going to now take this area that I measured. I'm gonna just drag it back up. And we see that if we superimpose that on the content box, there's our 200x200. Any questions on that?

So what I like to do is... Do a... Just do a global reset of that. And the global reset that I like to use -- I set the HTML to box sizing border box.

I can do an inherit. Okay? So I do an asterisk. An asterisk before pseudoelement.

And then asterisk:after pseudoelement. And I do box sizing. Box-sizing:inherit. All right?

Nifty. Any questions about that? Again, I don't like doing math, and this will allow me to not ever have to do that ever again. All right.

So now we're gonna size our imagery. With REMs. And let me tell you the story of that. We were working real hard on Xfinity.

We're gonna go over to the Xfinity. Here's Xfinity. I'm going to go to my settings. And I'm gonna drag it to 32 pixels, and I'm gonna re-render my Xfinity stream.

Webapp. And... We'll see that the imagery grew. That's not how we had done it originally.

We had just done the text. What happened was we started looking at it on TVs. Because a lot of people are now using these HTML5 apps on their TVs. And we were getting really -- it was getting really teeny-tiny ridiculous, that imagery.

At first we were thinking... Our imagery is pretty big to begin with. So it's not gonna be too much of a problem. Yeah.

Why not... It was just like... Why not, if we're... Knowing that our REMs are relative to the pixel size that we want rendered, why not just do it again?

What do we want in our default as our width and our height of the image or of the icon or of the logo, and just move a decimal point and make it in REMs? And so that allowed us, when I hover over, let's say, just recorded, or recently watched... Wait. What is...

Oh, I'm gonna go... Where is my... Some of these you can over... Okay.

There we go. I'm gonna hover over one of the shows. The image has grown. It's now 200% larger than it was, standard.

And we have a watch button and an episodes button. We have a just aired season number, and we've got the NBC logo, and they're all staying in proportion to that image, which is staying in proportion to the rest of the interface. And when we go to saved... Not saved.

Go to live TV... We'll do my favorite channels. I don't have any favorite channels. Okay.

All channels. And we'll see that all of the logos down the left hand side are all larger. The stars are larger, for doing favorites. The channel number is larger.

Basically everything is larger. You'll notice the padding and margin, all of that breathing. And when I make it... The settings, back to 16, 16 pixels, and I re-render...

Everything goes back to original size, accordingly. All right? Any questions about that? Cool.

So let's go and fix our WebAIM... No. Our WAI... The W3C WAI site.

Yes?

So do you have any advice or guidance on the creation of images, what resolution they would need to be? For scaling?

So... Good question. Yeah, I would go nicer. You want to go larger, but you also have to think about bandwidth.

So I would try at 200%, in what you might think is the largest device that someone would... With maybe low vision would normally use. We're seeing things go off the screen. I'm just using a teeny-tiny screen.

They would have a larger monitor. So I would take a look. Bring your font size up 200% and look at it and see what you can live with. Now, here's a little trick.

Oftentimes we'll take imagery and say that at a higher resolution or whatever... You know, 60 or 80 from Photoshop, to make it look nicer. So there's no pixelization. And you get a honking large image.

But here's a trick that we used to use. We used to make super large images, but at the lowest resolution. Like 10. Okay?

So there's a lot of weird pixelization, if you looked at it at the regular size. But then we'd scale that image down. And it would start looking awesome. But our image was smaller K than if we had tried to go with what we wanted and went to a higher resolution.

Does that make sense?

Higher resolution or higher size?

Best way to show is this. Let me just go to Photoshop. Let's open up an image. Open...

You know what? I'm just gonna... All right. We're gonna go...

Because I just worked on this. This is my son, who's graduating. Yay! And he had lots of acne, and I had to get rid of it, without paying $50 to have them do it.

So... Okay. So let's try a couple things. One, we're going to...

We're going to render it for the web. Let's see. For web. And...

What was that?

Lost the captions.

Oh, good gravy. Sorry about that. Let me get our captions back. And Photoshop is just taking...

Photoshop died. Photoshop died. We'll look at it afterwards. All right.

Okay. Ignore. All righty. We'll just play with that.

There's actually a lot of... There are a lot of articles about that. About how large you want to make the file. And what the pixel resolution or whatever you call it...

The quality it.

I have a question. So I'm a UX designer. And I know a little bit about code. I can do HTML and CSS.

But some of the screens that I design are specifically for mobile. Or for responsive web. So how do you... Or what would you recommend for scaling imagery for just specific mobile screens?

Good question. Well, what I would do if I were you is... You know, using your media queries... And we're gonna be talking about responsive media queries.

And at your media query, decide what you wanted that target to look like. And then reset your image size, based on what your target default was going to be. And if you do it in REMs, then as that grows... So somebody who has low vision, maybe they're never going to be using a very small screen device.

They may choose to use an iPad. So what they may do is bump up their font size. Everything will scale. You've got your media queries, which is all scaling too.

And what their tablet experience is gonna be like is maybe what your phone experience is gonna be like.

I guess I'm just a little bit confused. Can you explain that again?

Okay, sure. So if they're wanting a mobile phone experience, but like my cousin Bobby, he can't fit a mobile phone experience on his phone with his operating system making everything so large. So what he'll do is he'll grab his iPad. And turn it vertically.

But his operating system fonts are, let's say, 200, 400% larger. So what he's gonna see is what you would see on your phone, because he's not getting a tablet experience. He bumped it up. So he's getting a phone experience on his tablet.

Does that make sense? Okay. All right. So...

Let's just do a quicky here. I'm gonna take the Web Accessibility Initiative, go all the way down to this teeny-tiny image. Everything else scaled beautifully, but the image didn't. So let's right click on the image and inspect it.

And we'll see that the image... Okay. The video thumbnail width is... Excuse me.

160 pixels. That's what they were going for. So let's do... I don't know if they...

They probably didn't set 62.5. So I'm assuming we're gonna go back to that 16. So that would be 16 REM. Let's see.

16 REM. I think I did that math wrong. I think I'm still... Agh.

See, I don't wanna have to do... So 16 REM, but there is, if I remember correctly, when I played with this before... There was... Oh, here it is.

There we go. So now I've got a scaled image is, because I used REMs. I knew what the designer wanted at a specific look and feel, and you get the size that you want. It will render beautifully in default.

And then if they make it larger, it's gonna look the same. It's gonna be the same experience. Just on a larger real estate. Or whatever.

Does that make sense? So... The last thing is relative media queries. I had a slide that said, up 'til yesterday, this is our one bugaboo.

This it our one problem. When we were doing all of this work on Xfinity Stream, we were trying to use... We had a 62.5 reset. And we were trying to mimic that width on the media query.

And it wasn't working. The breakpoints were not happening. So we were like... That's just an area that...

Someday it'll get solved. You know. Those bad browser people. Well, it wasn't.

It was the fact that we were assuming the screen was the root. Or the screen followed the root. I can set the root, which is the HTML, but screen is still assuming 16 pixels. And what happened is I was working on this problem yesterday.

Which is this... It's like a grid system. What we're doing is we're creating a remote control that's on the web. That can be paired to your Xfinity, your X1 system, your Comcast X1 box, you know, and you pair it, and then you can use the website to change channels, get info -- every single button that would be on a remote control is now on a web page.

So if you're using Tobi EyeGaze, or if you're using a sip and puff switch, or let's say you just have arthritis, and pushing those buttons are just really hard, but you can tab around and you can hit your enter key. So the whole aging in place... That's what we're going for here. So we've been working on that, but we need to be able to...

Again, thinking of comorbidity, we need to think in terms of people who also wanted or had their operating system font size larger. We wanted to give them that thing. So what you'll notice is... And I can't go wide enough.

If I had a super long screen, I could go wide enough and force it back to what I have as kind of a three-column grid. Now we've got a one-column grid. But everything broke very nicely. Because my...

Blah-blah-blah blah-blah. I have to find it. All right. I'm gonna go and find my original...

I'm gonna do change view. Oh, by the way. Let me just give that URL real quick, before I go to the edit view. It's also CodePen.

https://codepen.io/haltersweb/full/gXMQBw. I'm gonna change the view to not do a full page view, but an editor view. And you'll see that my media query is down here. So what I wanted was I wanted it to break and give us kind of a desktop feel at 120 pixels.

And what was happening was I was futzing with it, and I was like... Oh my goodness. I think that's about a multiple of 16. And lo and behold, that's what it was.

So I rewrote the slide. And what we have now... And I'm using REMs. You can just use Ms, because you're talking about the screen.

Remember? So REMs doesn't really mean anything. It's just gonna say... Default to 16!

This is the screen. This is not HTML tag. And so you can notice, if I change from 70 REM to 70 M, nothing's broken. And honestly, I think I like M over REM.

It just makes more semantic sense. And I'm a semantic stickler. And I'm going to now change my settings back from 40 pixels, back down to... 16.

I'm gonna go back to that little grid. And I'm gonna increase my grid width and the media query kicks in there as well. Like I said, take this home. Stick it on your TV.

And change the width. And you'll see that that happens relative to whatever that default font is. You know, that default... Yeah.

You know what I mean. It's late. Any questions about that? Okay.

So bonus tip! Absolutely and utterly nothing to do with this talk. But I am an evangelist for this. And it is: Never using clear fix, ever again.

I have not used a clear fix since 2010. That's 7 years. I have not used a clear fix. I have not used a before and after pseudoelement clear fix.

I have not used a clear fix. The secret is: When you've got a container, and you're floating stuff in that container, if you give the container an overflow hidden, all of a sudden everything will fall into place, and the container will wrap around your floated content, and you're not gonna have content below bumping up and around and doing all kinds of weird stuff. Nothing to do with this. But...

You know. If you find that that works for you -- like I said, 7 years, I have not used a clear fix. Tell someone else, tell someone else, tell someone else. We're gonna change what everyone believes about clear fixes.

They're nasty. So that is it. Any other questions? Yes?

Probably just introducing another nightmare, but... The iFrames, or trying to actually have some type of responsive iFrame... Is that anything you've worked on? Any guidance?

Yes. I tell people who are using iFrames, it's in our Comcast best practices never to use them. And if they want to use them, okay, fine. You want to use them?

Just make sure that you allow... That you add scroll bars to your iFrame, because if someone makes theirs larger, and their submit button is being cut away, and they need the scroll bar, so they can get to their submit. And so what often happens is... I've said okay, fine.

We need... We need iFrames! Programmatically, and everything. I'm like...

Okay, fine. Just make sure there's slider bars. And UX goes... Oh.

Um... We don't want slider bars. So... Don't use iFrames.

Figure out a way. And then... Engineering will figure out a way. And we had our top level navigation, our global navigation -- I told you, global navigation drama -- was even more dramatic before.

They were putting it in as an iFrame. I'm like... Okay. You need it?

They're like... There's just no way. I said... Then just make sure there's scroll bars available.

And all of a sudden, magically, they came up with a solution. So does that answer your question? All right, cool. You had a question?

This is for the people who were asking about responsive images. I think source set. The source set attribute would take care of it.

Oh, fantastic. Okay, cool. Thank you.

I just... I'm curious to know your thoughts on viewport units.

Oh, yes. In fact, I was using viewport units for a little while, with this grid system that I was showing you. I was just... It was causing me some drama.

And what I found was if I used Flexbox... Does anyone know... How many of you know Flexbox? So powerful!

So powerful! And if you want to know more about Flexbox, everything you want to know about Flexbox, but were afraid to ask... And by the way, Flexbox isn't... It's been around for a long while.

Flexbox. Yes. IE... Ehhh!

But all of the other browsers, Edge, et cetera, like Flexbox. Complete guide to Flexbox. CSS tricks. I've been using Flexbox for about two years, and I still -- it's so rich that I still go back to this.

And this is my cheat sheet. So I'll give you the URL for that. That's https://css-tricks.com/snippets/css/a-guide-to-flexbox. I love it!

I'm not promising that everything on there is going to be accessible with a screen reader. But this is my go-to. So if you look at my... Solution...

What I have here is I've got the remote control... I have a remote control div. And that has a display of flex. It's got a justify content of spacing evenly.

So on the edges. And between my little three-grid clusters... Everything is all spaced nicely. By the way, you'll notice that because I'm adding some margin on the right of my children, which each child is called remote-control...

Or no, remote-group... Inside of them, remote-control. I have remote-group. So those three remote groups are gonna flex around remote control.

Because I set remote control -- the container to flex. But I wanted... In case things got too squooshed, I wanted to make sure that things didn't run into each other. So I wanted to put a little bit of margin.

So what I did in... So I have these little 2-REM margins. In this case, I used REMs, not Ms, for the margining, because this is the overarching imagery. This isn't dealing with the text inside.

Though the text inside is relative as well. I wanted a lot of control with the sizing that I was trying to create. So what I did -- you'll notice, when I hover over the remote groups, they all have a margin right of 20 pixels. So that's gonna make everything look like it utzed to the left.

So I took the remote control that has flex on it, and I gave it a padding and utzed that to the right. So I just kind of recentered everything. Just a little trick. And then the remote groups are also flex.

Display flex. And inside of them are these little squares. I think there's 15 of them. And they go 3 across, 3 across, 3 across, 3 across.

And so by making the remote group flex, all of those little buttons now flow around all so nicely. And I don't have to worry. You know, don't have to worry about flows and things like that. If I wanted to change the width, et cetera...

And I did the same thing. So I wanted each button to have a margin right of 1 REM. So in essence, 10 pixels. So it will...

Things won't run into each other. So what did I do? The remote group... So the button's parent...

I utzed that to the left with a... What? With a... Padding left of 1 REM.

Just kind of playing around with it. Take a look at it. I just found that that... Yeah, VWs, those are great, but when I was playing with this, with VW, because that's where I was first going to, and VH, all of that -- just causing more drama.

It's great for a lot of things. Didn't work for this. Yes?

So I'm curious. A lot of us are working on production applications that have existing frameworks or existing... Basically fixed pixel values. And as those of us who do web development know, the frontend can be very coupled, and anyways...

The question is: How do you start going down this path of relative font sizing, when you're bound to have visual regressions on the frontend? Do you have a recommendation on where to begin?

Sure. And some of it's political, honestly. What we did... Because we have about 50 products, just under Comcast.

Not including NBC, not including Universal Studios. 50 products and growing. We had one product where the guy who was running that product was just... He just caught the bug.

He caught the accessibility bug. He was sitting with our... One of our UAT testers, David, every week. David is blind.

Sitting with him, wanting... He launches with things accessible. Oh, what a great idea! We don't have to go back.

Accessibility is not a feature! I have to keep telling people that. He really got it. So after about two years of that, his stuff just sang.

It was just great. And he wanted the next challenge. And his manager said... He's chomping at the bit for the next challenge.

And I said... Okay. Next challenge? Let's do relative font sizing.

And he had an intern. So he gave the intern a lot of that work to do. Smart, smart intern. He was a freshman at Columbia, and he was doing things I had never seen before, and he's not even a computer science major.

Go figure. So anyway, you've got an intern, gotta give him something to do, and that's how that worked out. By the end of the summer -- and they were meeting with us every two weeks. Let's show you what you have.

This white board. And then... When he had this done, he did a talk. For all of the developers.

And now all the developers are like... Woo! And so they all want to know. So then you get another team.

And it snowballs. I'm guessing... I mean, I've been working on this for... Decided to fight for this, starting at the beginning of this year.

I'm guessing it's gonna take me two years to get most people on board, and then maybe another year after that, to see everything done. What we've got -- going back to the global nav -- this is why the global nav is such a bugaboo. Some people, some products, because they're all using global nav, have their things set for... They don't reset their HTML.

Some people do reset HTML. Some people are using pixels, still. And so we've got to do something. There's gonna be some kind of sniffing and stuff that's going to work for everybody.

And that's why that's gonna be a problem. It's gonna be a solution... You know, we'll come up with a solution. We're already working on it.

But yeah.

I think we have time for one more question.

Yeah, sure.

So... I was going to ask... So it seems like you were very fortunate to have a product owner who caught the bug, as you say.

Yes.

If you're in an organization where you don't necessarily have that product owner who caught the bug, and it can then spread beyond there, do you have any recommendations for... I guess getting higher-up stakeholders within an organization to start caring and push for this as more than just something we need to add on later or something that legal makes us do?

Sure. Now, legal, of course, that's always a good catalyst. You get sued, and...

Yeah, but it's always after the fact.

Right. So I've been at Comcast for five years. I was first a frontend architect for two years. And I had a team that I was responsible for.

And so I started... As we brought the team on, I started really implementing this, right from the get-go. I'm also a real stickler for lean semantic code. I don't like...

You know, if people are nesting, nesting, nesting, nesting, I'm gonna send it back. If people are creating CSS and they're bang and portenting all over the place, div pound sign this, dot this, dot... Send it back. I send it back.

So what happened was... I started finding one or two people who just wanted to learn a little bit more. They weren't sold yet. But they just wanted to learn a little bit more.

And then I got a QA person. Who was like... Ooh, that's really interesting. Can you show me how to test for accessibility?

And then I got a product owner here, a dev person there, a QA person there. And when I moved to the accessibility department and went under product, Tom Lekowski is our Vice President of accessibility, if any of you know him. He's really well known in this. I started a group.

And you could invite people to the group. And it was called the Accessibility Allies. And we started a Slack channel called a11y, because we use Slack. So a11y.

Ally. It kind of looks the same. And kind of became a club. And as it became a club and people were chatting, people wanted to be part of the club.

And then I had people call me and say: Are we better than the other team? We're the best, aren't we? And I would say... You know, you guys are really up there.

But we actually have another team that's even better. Well, what can we do to be better? So it really was that. And then started moving higher up, higher up, and higher up.

Does that make... Yep. Well, thank you all so very much. (applause)

Thank you so much, Adina. And I really applaud this presentation. It's so awesome that your Xfinity site... You're showing a live site with these practices.

In the work that I do, people constantly want to see it. So it's great that you guys are doing that. Thank you for a great presentation. I want to let everyone know: We meet the first Tuesday -- blocking captions here -- we meet the first Tuesday of each month.

We've been going now almost three years. So we're gonna be sending a survey out to the group, and we just want to get feedback on how we're doing, what types of topics you're looking for. Obviously a goal of us is to keep our Meetup changing each month. We've really not ever had a duplicate topic each month.

And we're just looking to get your feedback and thoughts on how we can make this a better experience for you all. So we'll be sharing that link out. We also, I guess, as we become more and more connected with the community, we are using the message board or the discussion forum on our Meetup page as well, to let you know about community events. I honestly can't keep up with everything that's going on.

But there is always really cool stuff. Gotham Comedy Club on Monday night is gonna have a benefit for blindness and retinal pigmentosa... They're doing a comedy benefit. So we're gonna be trying to point people to post that information there.

So if you're also promoting an event, I would ask you to start using our forum as a way to communicate that. So we can help spread the word about all the things going on in New York. Thanks, you guys! (applause)

So we can stick around here for 15 minutes.