 OK, I think we should get started. Hi, my name is Alyssa Panetta. My pronouns are she, her, and hers. And I'm excited to be here today to share my presentation Living the User Experience When a Web Developer Develops a Disability. I'm the web designer and front end developer for the university libraries at the university at Albany in New York State. We're a Drupal campus. Our university uses Drupal for their main website. And at the libraries, we maintain our own Drupal site, which connects patrons to information about using our libraries, our research databases, and our online catalog. I've been working at the libraries for almost five years. And I've been working on the web as a designer and developer for over 20 years. I got my bachelor's degree in mathematics. And that's where I started my career in tech. My school required an internship. And it was 1999. I was hired by a small math software.com. The owner believed in learning by doing. So he asked me if I wanted to learn to make a web page. And I said, sure. So he showed me how to view the source. He gave me an assignment and said, you'll figure it out. So I did. And that's how I've been making web pages ever since. Of course, in 1999, it was a lot easier. We didn't worry about accessibility. It wasn't a thing. We were too busy hacking HTML tables, trying to make our web layouts match our print layouts. So I went on years later to get my master's in textile and fashion history. I was actively trying to get out of tech at that point. But websites kept coming to me. And eventually, I was freelancing full time. Sick of WordPress and freelancing, I took a job at the libraries about five years ago. I figured out Drupal. And about 18 months ago, I had something new to figure out. I had to figure out how to make websites and use them as a person with cognitive and visual disabilities. That's my brain tumor. Her name's Tallulah. She was growing in my head for about 20 years, about as long as I'd been making websites. But I only learned about her about 18 months ago, in October of 2020, when this was taken. And it was in the middle of the pandemic. So it was really great timing. So since then, I've gone through surgery, radiation, and chemotherapy. And as of a month ago, I can safely say that I'm OK. Like, I'm not. Thank you. It's not gone entirely. No brain tumor has ever gone entirely like that. But I'm OK. So I'm here. They've got Tallulah preserved in a tumor bank in New York City, which I didn't even know was a thing, until they asked me if I could put her in it. Well, I was like, sure. And we're going to talk about how she changed my whole perspective on accessibility and the way we make websites today. So we'll look at cognitive accessibility, which was a new term for me. They're sometimes called the invisible disabilities. I'll introduce you to the idea of in-betweeners, like me. And I'll show you some of the issues I've come up against. And then we'll talk about how we can use semantic HTML and modern CSS to create meaningful and flexible sites to make our content accessible for people with cognitive and learning disabilities and make life easier for those in-betweeners. I'm just curious, how many people in here are designers? All right. Cool. I don't want to talk too much about the tech stuff, but I want to make sure I get in some good CSS for you. So there's a clear CSS change, or there's a clear C change toward improving accessibility for more and more users. And the pandemic, of course, has only accelerated this interest and highlighted the need even more than ever. There's more than a buzzword these days. It's become a priority. At my university, which is state funded, we've been trying to improve accessibility on all fronts. It's part of my job to ensure the accessibility of the library's digital platforms. So I really tried to educate myself, and I thought I had it figured out. I had taken Google's intro course and web accessibility. I had done some extra video trainings. And I had really like, I work at a library, so we like to do research a lot. So I had everything in Drupal theme all set up. My tweak templates had everything for screen readers, had all the ARIA tags and labels that I needed. And anywhere an author could upload an image, it had a field for a required alt text. And a nice little note about how to write good alt text. So I ran the homepage through the Wave tool, and I still got WCAG 2 failures, like just one or two, but enough. And overall, I felt like the site was compliant and that it felt good saying that our site was very accessible. But then I acquired my disability, and I realized that compliance with those standards does not necessarily mean that the site is very accessible. In fact, I don't even know what very accessible means, but it doesn't matter. So according to, I'm trying to keep up with my slides, I'm sorry, I'm not used to having one of these. According to the numbers published in the WebAim Million 2022 report, lots of other sites aren't very accessible either. So this report surveys the top 1 million home pages, and it found that 96.8% of them still had WCAG 2 failures, like me. And the number one error they found is low contrast text. And that was like all over the place. So I didn't feel so bad that I still had a couple of errors. But I wondered, what does this say about our sites in 2022? And WCAG, like, is it us, or is it the standard and how these automated tests measure things? Like low contrast text, that's an algorithm that they can easily test for, but there's so many other things that they can't. So we'll look at some of those. So like the Web itself, the web standards are always evolving and changing. So where WCAG 2 talked about success criteria for your site, which focused on the elements of the site itself, like the minimum contrast, the focus order, videos needing captions, those are easily measurable, right? But WCAG 3, which is coming out in a couple of years, it's evolved to talk about the needs of the users. These are functional needs. And these describe a specific gap in one's ability, or a specific mismatch between ability and the designed environment. So these can be things like a brain tumor, or they can be situational and temporary, like a parent who's distracted while they've got three kids running around trying to do their online banking. So not only does this reflect the diversity of disabilities, I mean, there's at least a dozen functional categories up there, right? It opens it up to everyone, because accessibility is no longer about just people with disabilities. It's trying to make it more open to everybody who uses the internet. So who here has experienced the need on the list? Like, has anyone had bad memory sometimes? Yeah, right, we all fall into this. In fact, there's so much recognition of the diversity of disabled users that the Web Accessibility Initiative has formed task forces, one of which is the cognitive ability task force, COGA for short. And it identifies the cognitive functional needs as this set. And this is half the list. You have attention, language and literacy, learning, memory, executive function, mental health, and cognitive and sensory intersections. So these are definitely like invisible, right? You can't look at somebody and know that I have a terrible memory or this cognitive and visual intersection problem. So they published a very helpful document and it's called Making Content Usable for People with Cognitive and Learning Disabilities. And in it, they share these eight objectives. And this is what designers and authors should be aiming for when they consider users with cognitive and learning disabilities. So we should be helping users understand what things are and how to use them, help users find what they need. We should use clear and understandable content, help users avoid mistakes and know how to correct them, need to help users focus. Ensure the processes do not rely on memory. We need to provide help and support and support adaptation and personalization. I don't know about you, but these sound like good ideas for design in general to me. I think all of our users would benefit from these objectives. Did anyone go to DQ's Axcon 2022 this year? It was a few weeks ago, yeah, cool. It was free. If you didn't go, you can still register for it and get access to all the videos, which I think is an awesome thing these days. And I recommended the Koga Task Force that put together that document. They shared a whole presentation on this document and how to use it. And this slide about statistics that they shared, this was really eye-opening for me. That cognitive is the largest disability category. And we saw there were six out of the like 12 or 13 functional needs that fell into this. The estimate is 930 plus million worldwide. In the US, that estimate is 12% of the population. So I was only concerned about screen reader users before. Like everything I did, I thought, well, if it works for screen reader users and it works for regular users, everybody else in between will get something. They have an option, right? So I wanted to know, what are these numbers compared to the screen reader user numbers? So I did my research. And thank goodness, someone on Stack Exchange had done a calculation for me last year in 2022 or in 2021. And any guesses what that number came out to? Not 12%, I'll tell you that. It was around 1.38%. So a big difference. Definitely not 12%. So the numbers for cognitive disabilities are very high. And everybody who's talking about this will remind you, and I'll remind you now, that these are underestimates. We can't count everybody, right? Cause like I'm not counted, like nobody knows about my disability. And they're only gonna grow because we're all gonna get older and these things are just gonna get harder for everybody, right? So we'll all benefit from making the internet more usable for people with cognitive and learning disabilities. Not only are we gonna age, but you never know when you might have a brain tumor removed and need some help. So when my cognitive disability developed, I realized that I had never really tried on any other assistive tech. I knew it existed, but beyond a screen reader, I didn't know what kinds I had available to me or what I should be trying to help, to use to help myself. I knew the operating system had things to offer me. I use a Mac and they're supposed to be very good at things like that. I didn't know how browser features really worked. I knew I could like command plus and zoom in on text. I didn't know if I'd need a plugin or a special app on my phone. So as I got exploring all of this, all these options, they were awful. I hated all of it. Every accessibility feature that I tried, it was wonky on me. And I felt like I was trying on clothes. It might help with one thing, but it would ruin another. Like it would fit in the shoulders, but then pull tight across the chest. So nothing fit me right. And sometimes when I'm trying on clothes, I say, oh, I'm in between sizes. But really, it's because they don't make clothes to fit my kind of body. And I've accepted this. So this is where the idea of the in-betweeners comes in for web users too. So they're not using a screen reader, but they're also not browsing at 100%. So this whole gap in between, and it's a huge range of users. So it's like we need bespoke solutions because everybody's different, right? So I wanna take a quick poll. How many of you use a screen reader? Anybody? No, okay. How about your browser zoom feature? I use it all the time, man. What about reader mode in your browser? Any voice assistant? Do you ask Siri and Alexa for things? Yeah. Any other assistive tech that anybody wants to share? Because like I said, I don't know them all. And what about the idea of being an in-betweener? Does that resonate with people? Do you feel like that's you? Yeah, cool. So let's talk about some of the pain points that I've experienced. Because as soon as I got started back at the computer, I had a really hard time. My eyes were a mess. They didn't want all that light. I was very like photosensitive. And my brain hated all the motion. Like I couldn't look at things. I couldn't be on a zoom meeting for more than like 20, 30 minutes without almost having a seizure. And I'm used to working very fast on my computer, right? I'm sure, you know, if you use it a lot, this is what we do, right? You scan quickly, you jump back and forth. You've got your tabs going. You've got your browser windows. I'm going back and forth between my code editor and my browser. So I tried to take it slow. And it wasn't even working at this point. I was just like online shopping because it was the holidays, right? I have tried to take it out. But I had things to do, you know? But like everyone else, like I live on the internet, I needed it and I work on the internet, which I think has been, it's afforded me a different perspective on the whole situation. And I didn't really know how I was going to be able to work like this. So let's take a look at that. So I started with my operating system settings, like I said, I'm on a Mac. And boy, was I disappointed when I did. First off, on a Mac, the only way to change the text size is to change your display resolution. So there's only five settings. And this is the one that I started on. You had the most space on the screen. I wish this had a pointer. Oh, no, it does. And you can see how small the text is up here. And this is where I like to kind of notice like the screen size, because that's where you can really tell what's happening. So this is the most zoomed out. And this is what they label it. They label it more space. And then the opposite is large text. So they're saying you have to trade one off to have the other, which I didn't like. So let's see what they look like in order. This is number two. We see we have a lot less space, but the text is getting bigger. I can read more up at the top here, but it's still not enough for me. So this is where I am now. I am all the way zoomed in. But I can only fit one window on my screen, which I have to say it drives me nuts. I'm used to having things like right next to each other. And even like a whole separate monitor doesn't really help. So the accessibility system settings that Mac offers, none of them help with text. I can zoom on hover. I can speak the selected text or I can invert my color display. But if I wanted to be, if I wanted the text to just be bigger, that's what, this is my only option. So I went to the browsers because most of what I do is in a browser. And like everyone else, email is probably the most crucial part of my job. Every project, every task begins and ends with an email. And if I'm lucky, there aren't a million along the way. So of course, it turns out that my biggest issue was with my email. Now I'm on a Mac, but we're a Microsoft campus and we use Outlook 365. The desktop client for a Mac is awful. There's no accessibility features and everything is a minuscule. So I use the web mail version and I try to leverage the browser's built-in features. So this is an email from Siteimprove. Is anybody here from Siteimprove? Okay, good. Because they're the company that my university pays for accessibility testing. It runs an automated check and it sends me an email report in this lovely table. And this is Firefox with my zoom at 100%. And I'm on a 27-inch iMac with my resolution decreased so that the text appears the largest that it can. So that last setting. So I can't read this report. Like this table here, this too small for me. So let's watch this video and see what happens. When I start zooming in. So yeah, you can see I'm at 100% right now. So I'm gonna, yeah, I can't really read that. Command plus, I'm at, wow, what, 120, 150? Still can't read it. The text isn't actually getting bigger. Oh, just got smaller. And it's getting smaller. Thank you. Oh, and now, good. Outlook has closed my other left column. But now this other left column is huge. I can't, and this at the top is taking up almost half of my viewport height-wise. So I still can't see this. And I can zoom in again because I tried to collapse the other column and I couldn't. So now I'm zoomed in even more. I think I'm at, yeah, 250. And it's not doing anything. And now, you know, like this is huge. I can't do anything. And I don't have a scroll bar to scroll from the left to the right. Oh, now I do. I'm at 500%. And now I can finally see all the content. But I can't view it all at once. So it's pretty worthless to me at this point. So not a good, not a good, not a good mix. Now there might be a niche issue, right? How many of us get reports emailed to us with table format in an email? I mean, this is the only one I get. But let's take a look at my bank. This is Bank of America. I don't know if you know this, but when you zoom in, your media queries get triggered. So this is at 120% up on the top. And my browser's default zoom, that's what it's set to. And when I zoom into 170, the email switches to a completely mobile layout. So instead of the page reflowing, as I would hope it would, it's gone mobile on me. There's a CSS maven named Stephanie Eccles, who we'll talk about more in a bit. And she reminds designers that viewport size is not a proxy for device or user capabilities. So keep that in mind. All right. Now how many of us have written a media query to switch menu types between mobile and desktop? Common. And I've never been a big fan of the hamburger menu, but I accepted as the standard mobile navigation method. And here, this is the DQ website for that conference, the Axcon conference. And I'm not a big fan of when I zoom in too much and I just get a mobile version, but it's worse when you get a mix. So let's see what that looks like. So the menu's up in the top right. And I might expect it to just drop down right there, but it opens up to the left. Like the desktop site would. Just a little confusing. The question is, do we have a better pattern for that? Because navigation is tough, right? I like this one from Smashing Magazine. They always do a lot of things well. So instead of their design being responsive, it really accommodates this reflow idea nice. So let's take a look at what this looks like. So there's two menus. Oh, sorry. Let's play. There's two menus. You've got your big one. And then there's an opening for that one. And it has the same elements in it. And it just toggles between display flex and display none. So let's try that again. Ah, sorry. We'll get to that in a second. Yeah, so if I could show you the source code again there. Let me try that. There we go. So there's display flex and display none. So it's just toggling them, but it's the same exact navigation. I thought that was pretty clever because it also is good accessibility. Because if you put things to display none, the user doesn't see them. A screen reader won't read them. So it's good. Infinite scroll drives me nuts. So compulsions like snacking, they've always been hard for me to control. I've always had what I call an open container policy. Like if I have a bag of Oreos and it's not open, it's fine. I don't have to touch it. I can leave it there and I don't wanna eat any of them. But as soon as that bag is open, my compulsive brain can only think of one thing and that's eating every last cookie in that bag. And then it convinces my stupid mouth to comply and it won't stop going until that bag is empty. So whenever I'm on a site with infinite scroll, I just can't stop myself. That FOMO is overwhelming. And I know that social media, shopping, the dating apps, everything is designed to take advantage of this weakness. They don't want me to stop. So it never gives me an option to look at more. But that's all I need is an option. So with things like cookies, I've taken to buying the individual bags, like I buy the box of the four packs. And that gives me a sense of portion control in things. And even though I can definitely eat more than one pack, I at least have that sense of control. It's not like I need to eat all of them at once. The container that's open is already empty. So that's what like pagination, that classic method provides. It's a sense of control. It gives you a digestible chunk. This is our library catalog. And they used to have just a load more button and it was off to the right. And nobody really liked that. So they switched back to a classic pagination style. And what I like about that, especially in like shopping sites, is that you can control how many results per page you view. That's a big thing for me. So overall, I just felt overwhelmed. I had too many choices. I had too many choices, but I also was disappointed because there were choices I wanted that I didn't have. And it felt there were just like too many hands in this process, right? Like the Mac had stuff for me, my operating system had stuff, my browser had stuff. And then there were these, which I didn't even get to. But overall, you know, like the responsibility on accessibility for now has been up to us with the authors. And the user doesn't really have a lot to say in it, right? And I just stopped trying eventually. Like I got so fed up that I just stopped trying. And that's what happens when a user can't use your site. Eventually, they'll just stop trying. They'll give up and say, this site isn't designed for me, I can't use it. So I'll use another site. And I've gotten caught in that too. I know I have. I say, well, this feature is just so cool for, you know, like users that can really use it. And I don't wanna take that away from them. So I'll just hold onto it for now and I'll figure out a hack for the accessible for screen readers and stuff later. It's not a good way to go. Now in this section, let's talk about how some of these modern CSS features and semantic HTML have been added to help us out. I'm by no means an expert on these modern CSS features. I have tried to learn a lot of it, but it's just too much, you know, for today. So I'm gonna introduce you to these features and I'll point you to the most helpful features that I think are good for in-between users and people with cognitive and learning disabilities. And I'll point you to the experts where I go to learn these things. And there are some really great CSS experts these days. And really to learn these, it's gonna take more time than we have in an hour. So before that, let's talk about the number one basic best thing that you can do to make your site accessible for as many people as possible. And that's using semantic HTML. By doing that, you will take advantage of the power of every user agent in existence. Anything that's meant to read the web is designed to read the HTML first. Always back to the guy who invented it. He says that this is what the web was invented for. He delivered the keynote at AXCON this year and this is what he said. He wanted a language that was universal to any type of document independent of hardware, operating system, language, culture, ability, disability, the thing you wanna make it for. And he said it should apply to any crazy idea you wanna share with people. Like a blog where you write diary style letters to the brain tumor that you removed and is in a, in a, in a tumor bank. DearTalula.com. Crazy ideas. So what he came up with was HTML, which is semantic by design. It has structure, all the tags have meaning and can be applied to any kind of document. So when your user agent, either a browser or an assistive device gets to a webpage, it starts with the HTML. If you have CSS or JavaScript in your HTML, then it will load that too, but only because the HTML tells it to. So if you turn off CSS and JS, you should still have access to the document and because of those tags, it should still make sense. Now this is the footer for my library website. Now Drupal loves a good div explosion and this is not, this is not the code that Drupal output. I just changed it all to divs so you could see a bad example. So yeah, you see everything is either a div or a paragraph, a span, or, and that's it. I think I had, I think I had a heading, but no, I guess I don't. And all of those are meaningless. Like divs, spans, like for, in terms of meaning, they have none. You use them for layout, but if you really want to give them meaning, you have to use like CSS and using like class nav or even roll navigation doesn't mean anything to a screen reader. So this is our actual footer and it does use semantic HTML. So it has sections, it has a footer, it actually has a section tag, a nav tag, an H2 tag, and then a navigation setup as an unordered list. So those are good semantics, that's what we want to keep. You remember the document I referenced from Koga, the making content usable for people with cognitive and learning disabilities? Highly recommend checking that out whether you like your page as the designer styled it or with no CSS, just the raw HTML, or in my new favorite, reader mode. This is Firefox's reader mode but all the major browsers have their own. So in addition to turning off the author styles, it has a nice easily readable style applied to it. Like, unlike this, the list elements have a nice amount of space, I can read those, and it shortens the width. So I don't have all of this, you know, non-margin at the edge of this document. And I have a couple of other accessibility features here I can quickly tap into. Onto modern CSS. Remind me, how many people write CSS? All right, great. So we will go through all this. Did anyone become a web designer to make the internet ugly? No, I didn't. And we want the internet to be a more beautiful place. But the sea change now towards greater accessibility is that even more than form, we need to function for as many users as possible. And if you're listening or following anyone or anything talking about CSS these days, you know that it's an exciting time to be working in CSS, which is really like the first time I've ever heard that in 20 years, right? Nobody says that. So these are some of the things that makes CSS great these days. And it's our challenge, and I see it more as an opportunity more than a challenge. Instead of making something to emulate print like a photorealistic, flat, boring site, we get to make sites that are multi-dimensional and build on modern ideas of the intrinsic web design and new responsive. So modern CSS really means that features that replace, we have features that replace hacks we used to use. So we use CSS grid instead of tables. And in general, they use less code to do more. And since CSS is all about progressive enhancements, you don't have to worry about breaking other things as much, right? Everything is, it's fine. One of my other favorite CSS mavens is Miriam Suzanne. And she has a tech talk called CSS is Rad. Anybody seen that online? No, it's awesome. I highly recommend taking care, taking a look at that. She has a really interesting view of CSS in my opinion. She comes from a theater background, which I do too. And she talks about a webpage as a strange performance art piece. She talks about how the code is like a script and a theater script can be interpreted in infinite number of ways. Every time you perform that, it's different for the audience. It depends on the actors, the direction, the set, everything. So she equates that to CSS. She says, we want to leave room for the audience to move around and imagine and make associations. Everybody should be able to bring their own lives, take away their own experience, and have a conversation afterwards. And that is in reference to theater, but she says it's true for a webpage too. And it should be welcoming. And beyond all, it should give the user room to participate. We should meet the users where they're at. So I'll take one step further and add that the key to providing that space is by providing flexibility in your design. And that's the beauty of modern CSS. It affords us new flexibility with minimum code. It's like sweatpants with elastic waistbands. Unless your user asks for a bespoke suit, this is good fit for all. It's also great because it helps future-proofing. Because who knows what's next, right? We talked about voice assistance. Who knows, like there's virtual reality. Who knows what we're gonna have to do to take care of those other ways of interacting with the internet. There's been a lot of new CSS features recently. So let's talk about what we can do to quickly upgrade our sites to be more accessible for in-betweeners that'll have a real impact. So we'll look at relative units, CSS math functions, which I love because I'm a math nerd. CSS grid, new media queries for user preferences. And we'll touch on a very new feature called container queries, which people in CSS are very excited about. All right, relative units. So where do we need unit flexibility? Mostly type, spacing, and sizing, right? And all of these can be made relative using CSS units. We have REM, we have M, we have percentages. We have view heights and view widths. We have V min and V max. And Safari just introduced different versions of the view height and view width. There's a small, large, and dynamic versions. In grid, we also have an FR unit, which is cool. I'll show you that when we talk about grid. And this unit, the CH unit, anybody using that? It's a cool one, yeah. It's the width of the zero character for whatever font you're using. So that reader mode that I showed you before, that's probably set to be 80 characters wide. So that's how you can do it on your websites. So they don't have to use reader mode. I don't know about you guys, but REM and M always confuse me. And these are the references that I go to. This one, Guide to CSS Units for Relative Spacing by Stephanie Eccles. I have links to all of these on a website, on a GitHub page for you. So you don't have to get these. I'll give you the one at the end, and it'll direct you to all of them. She's got a lot of tutorials and stuff, and they're all really good. I always refer to this one, Guide to CSS Units for REM versus M. And other things. Are there any other relative units that anybody else knows about that I'm not aware of? Is that Miss Amy? Cool. All right, now it's my math nerd time. So the basic CSS math functions are calc, min, and max. And these behaviors you might expect. But my favorite thing about them, and the reason that they're really cool, is that you mix those units. You don't have to just calculate the pixel size. You can subtract pixels so that you have the height where you want it. I use this all the time. The min is great, because you get to put in which one is smaller. It'll calculate that for you and use the one that's appropriate. Max is the same. And yeah, these are great things for that. The video's always nice, if you like a video. But even better than that is clamp. And clamp, I got lazy and I pulled a screenshot from Stephanie Eccles. I didn't want to retype all of this. So she uses clamp along with variables, the CSS custom properties. And clamp lets you give a minimum value, a maximum value, and then an ideal value. And that I love. So that makes things super flexible because you can use your font size. So what she does, and this is a good technique, is she defines these variables in the root selector. And now, because she's done that, she can use them everywhere. So right here in the H1, you can choose the variable for that. And it works great. And then you can use that anywhere else. And if you name them right, you know what you want to use. Your variable names, as long as they're semantic as well, you're set. Ah, CSS grid. I think CSS grid is the best layout tool CSS has ever seen. I was excited when I saw Flexbox, but when I saw grid in action, ah, fell in love. If it's possible to fall in love with CSS. Which, maybe it is. So grid gap is a really cool feature, and that avoids all of our padding and margin hacks. But even better than that, I love these template options because they let you set up things like a repeat. And you can use this fraction unit. So this means I want my first thing to be two, whatever, and then one fraction unit. So the rest of the columns will be equally sized, and except the first one, it'll be twice that size. Um, rows, you can calculate things and do what you need there. This grid template areas, this is one of my favorite grid features, but people who talk about accessibility and grid, they'll tell you to avoid this because one thing that you can do with this, and the reason that I like it, is that it lets you switch the order of things. So semantically for your HTML, everybody will tell you, do it in the HTML. Don't change the order of things in the CSS. But I have found a use case. In my CSS, we're mobile first, so this is for the smaller viewports. And then, so I have my slider in grid area E. But when I'm on a bigger viewport, when I'm on a desktop, I move the slider up to the first thing. I'll show you what this looks like. So this is the library webpage on a desktop. And our marketing people wanted a chance to get to people, you know, like when they first come to our site. So this was the compromise that we made because we thought our mobile users, they're probably just outside, they're probably on campus and they wanna know what time we're open until or how to get to us. We don't need to bother them with a slider at the top, that'll take up the whole thing. So I used the grid template areas to switch it on them and I moved the hours up to the top for them. We have new media queries for user preferences. And these are, again, pretty, what's it called, self-explanatory. You have queries for prefers reduced motion, prefers color scheme, contrast and forced colors. And Steph Eccles, again, has a good article on preference queries and what you can do with them. So container queries are so new, I only know the basics, but I eagerly await using them. And these are what we're gonna transition to from media queries. So remember I said that they shouldn't be a proxy for other things. This is what's gonna avoid that, these container queries. So instead of responding to the viewport size, it's gonna respond to the container size. So if you put something in a sidebar versus in the main content of your site, it can respond to that. Amazing, right? Let's go back to these Koga objectives. What can we use to quickly upgrade our sites to be more accessible for them that will have the biggest impact? Now this, I think it comes down to really one thing, comes down to reducing the cognitive load. And there are some simple ways that we can do that. We need to be simple and clear, as simple and clear as possible. For Koga users, they need to allow autofill and have unlimited time on forms. You should consider progressive disclosure style forms. And above all, I encourage you to respect the user preferences first. So simple and clear, first off, headings. I scan headings all the time, that is my biggest thing. So you need to be sure there's only one H1 on a page, make sure they're easily scannable and semantic. And don't use them to make your text bigger, right? Because that ruins the semantics. And you have to educate your authors about that too. This is a Wiki site that one of my coworkers put together. And she decided, she wanted it to stand out as much as possible. She wanted people to be able to get the steps that they had to take. And she showed it to me and she said, what do you think about this? Is it clear? And I said, no, you used H2s for all of your steps. Like, you're supposed to use those to label this, to be a heading here. These are all meaningless to me now. And but because she had an editor that she could just decide, right? Like pull down a heading tab and label it. That's what she did. So, watch out for your authors. Simple and clear is the best in email, I think. I subscribe to sticker mules emails just because they're so simple and easy. And I like ordering stickers for things I don't need. So this is like the clearest marketing email ever. Like when do you just see an unsubscribe link like that? This is like the most beautiful thing I've seen in web design in a long time. Oh, all right. So progressive disclosure style forms. These are forms that just break things up for you. Like when you do your taxes and it tells you what you can expect and their chunks, they're easily digestible. So this is what's really good for people. It sets user expectations, it's good. So we have one of these and I'll show it to you. Oh, no, how do I do? This is for our internal help forms. So this is designed for librarians who are very smart but it's just an issue of cognitive load. It's too much for them to go through all at once. So we tried to make it as easy as possible for them. We broke it up into steps. We gave them a chance to correct things. So if they click on this, they can go edit this. They can go through here and edit it. And it changes the submit button. It does change its state if you get to the end of the form and break it up. What this also did for us is this second option. It lets us figure out what questions we need to ask our users because let's see if I can get back to it. There we go. So yeah, I want something fixed and now I have all these options. And this is another place where I reordered things and they tell you not to, but I did it because rules are made to be broken. So yeah, but there's different questions for everybody for each one of those options in a second. So I have this whole thing switched around now, right? The author's no longer at the top. The user's at the top because we want to give them the room and freedom to move around comfortably where they're at. Right, you want to meet the user where they're at. We don't want to make them come to us. So we honor them settings, we let them choose their user agent, add-ons, et cetera, and they need, and then we try to make it pretty. So if your ego is in this and that really bothers you, may I suggest working in print again? And the number one thing I learned is that if you want to know your user, like really know your user, there's just no better way than living your user's experience. I'm not saying you have to get a brain tumor, like don't wait for that. Don't wait until you develop a disability. DQ had some cool things, they're called empathy labs, and it sounds amazing, but I don't think you even have to go to one of those. You can just test things, like these things that I said, like Command Plus, you can do that all day. Try a screen reader for a few hours. Even watch a video of someone else using a screen reader, that's really eye-opening for me. And one challenge that we'll see in the future, as we put the designer and the author last in this pecking order, we said there were two thirds of design problems that can be prevented in the design phase. But what does that mean? If we're no longer trying to fix everything in the design phase? It just means it's not all on us anymore. The major browsers have gotten together, and they decided to take some responsibility for these things themselves, and they created some benchmarks together, called the Interop 2022, which is a cross-browser initiative to find and address the most important interoperability pain points on the web platform. The end result is a public metric that will assess progress toward fixing these interoperability issues. This is Mozilla's statement, and they just talk about how they're taking it really seriously. And they say the key is that the more semantic information the browser has, the better it can do at providing accessible versions of content. So back to the number one most important thing, use that semantic HTML. So to recap and have a minute for questions, we talked about cognitive accessibility, how it's the largest segment of users that's growing every day. We look at how options can overwhelm in-betweeners, users like me, when nothing fits. And we looked at how semantic HTML and modern CSS offer us meaning and flexibility, and prepares this for the future of the web. Like I said, it's an exciting time to be working in CSS, to be a web designer, and I think it's just an exciting time to be alive. So here's the resource. It's a GitHub page, which unfortunately, wouldn't let me do a link shortener. So write that one down, and you'll be able to download this presentation later. So I'd like to thank everyone at the University Libraries who helped me get this presentation together, and a big thanks to DrupalCon for encouraging first-time presenters and giving me this opportunity day. But most of all, I thank you for listening and being here today. So any questions? Yeah. I've seen them, and I've heard a lot of talk in the accessibility community about them, and they're not effective. They're not a good option. They just, they're kind of a widget to slap on your page to show that you care about accessibility, but it's really like for no one, it doesn't really do much. Anybody else have experience with those? Yeah? Oh yeah, yeah, agreed. Did everybody hear that? Okay, great. I'll repeat it for the mic actually. Those tools, they don't work. People that are using their own tools is again, putting the user first, right? Let them choose their tools, and if your site is accessible already, then you get better SEO results and it's overall just better. Thank you. Yeah, I didn't try anything like that, but that's a great idea. Physical non-digital tools, yeah. I print everything out, my whole presentation on paper today because I didn't trust that I'd be able to see the notes on this screen. So yeah, paper all the time for me. Yeah, yeah, they don't help me. Yeah, yeah, yeah. Yeah. Before I acquired my disability, those were users that I didn't test for. I neglected them and that was one of the things I learned in this that keyboard only users, like because now I do a lot more of that myself. So yeah, thank you for bringing that up. Yeah, so the question is where do you draw the line? I don't know. That's, I think, you know, like you have to build it in from the start, right? The accessibility, you have to do it in the design phase and the earlier you get started, the less problems you have. When you try to add it on at the end or at any other point in the process, you really complicate things for yourself. Things like color contrast in like backend stuff, like I want to say things like, well, it depends on your users, you know, and you test it with them. But, you know, like, but this whole talk is about how you can't perceive what your users need and what they don't. So, especially if it's like a backend thing, I would say sacrifice the look and feel or try to find a happy medium, you know, like just take that extra couple of steps of testing, you know, like a bunch of things and grab a couple of users, ask them what they think, can they read this and go from there. But yeah, it's very hard to find where that line is. Yeah, yes. Yes, you really would like that lovely cover bar chart thing but that's not very accessible. But he can't sell it to his boss. Yeah. And I'm not sure how to solve that problem. Well, you tell me when you find out. In the back, cool. Yeah, did everybody hear that? The admin themes can be customized. I hadn't heard about gin until today, so I'm excited about that one. Any other questions or comments? Yeah, yeah, they put them on YouTube and load them up for everybody. So yeah, anything else? All right, thank you everybody. Okay.