Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Navigating the World of Web Accessibility with Sara Soueidan
2 Plays2 minutes ago
I recently had the pleasure of chatting with Sara Soueidan, a renowned expert in web accessibility. Our conversation was a deep dive into the nuances of making the web more inclusive and accessible for everyone.
Follow Sara:
- Her course, Practical Accessibility: https://practical-accessibility.today/
- Her newsletter: https://www.sarasoueidan.com/newsletter/
- Bluesky: https://bsky.app/profile/sarasoueidan.com
- Mastodon: https://front-end.social/@SaraSoueidan
- Linkedin: https://www.linkedin.com/in/sarasoueidan/
- X: https://x.com/SaraSoueidan
Things we mentioned during our conversations:
- Making the web sweeter with Food Network and Cupcakes https://www.youtube.com/watch?v=M2l56RmQAQE
- Blockquotes in screen readers https://adrianroselli.com/2023/07/blockquotes-in-screen-readers.html
- The Blockquote element https://heydonworks.com/article/the-blockquote-element/
- The HTML Living Standard https://html.spec.whatwg.org/multipage/grouping-content.html
- WCAG Quick Reference (contains links to Understanding and Techniques docs) https://www.w3.org/WAI/WCAG22/quickref/
- HTML AAM https://www.w3.org/TR/html-aam-1.0/
- ARIA 1.3 https://www.w3.org/TR/wai-aria-1.3/
- My course :D https://practical-accessibility.today
- My newsletter https://sarasoueidan.com/newsletter/
Recommended
Transcript
Introduction to 'General Musings' Podcast
00:00:00
Speaker
Hello, my friend and friend, and welcome to my podcast, General Musings. My name is Kevin, and in this podcast, I talk about whatever is front of mind for me in any given week, usually in some way that's related to front end development. And
Guest Introduction: Sarah Sudan, UI Engineer
00:00:11
Speaker
a few weeks ago, I mentioned that it was as I was kicking things back up after the summer break that I took that I was planning to have some more guests on. And this week is the first one of those guest appearances where i'm going to be having a conversation with Sarah Sudan.
00:00:24
Speaker
For those of you who don't know Sarah, she is a UI engineer slash front end developer who's worked with companies all over the world. And she now primarily focuses on helping front end developers elevate their craft and do what they do even better.
Expertise in Web Standards and Accessibility
00:00:36
Speaker
Her expertise centers on the web standards, HTML, CSS, and SVG. And I've learned a ton of SVG stuff from Sarah over the years.
00:00:44
Speaker
And these days she has a particular emphasis on writing accessible code. Now, since 2014, she's been sharing all of this knowledge of hers through speaking engagements and workshops. but she's also more recently created a comprehensive accessibility course called Practical Accessibility, which she has designed to make web accessibility more approachable for her front-end designers and developers.
00:01:04
Speaker
And accessibility is going to be a big part of what we're talking about today, talking about why it's important and how developers can learn more
Discussion Topics Overview: Accessibility and More
00:01:11
Speaker
about it. And we're also going to talk about some other stuff as well, going into CSS course creation, and we're even going meander our way into making homemade mayonnaise as well as some other topics along the way there. And yeah, without further delay, let's jump right into it.
00:01:25
Speaker
So Sarah, just want to say thank you so much for your time and coming to join me today. I really appreciate it.
Understanding Web Accessibility and Inclusive Design
00:01:31
Speaker
Thank you for having me. Now, before we dive into the weeds of everything, because there's quite a lot that I want to ask you about, I think it's just important that we define what accessibility on the web means, because I think for anybody who's listening that might have heard it, but they don't quite know exactly what we're talking about.
00:01:48
Speaker
So web accessibility refers to making web websites and web applications accessible to people with disabilities. It is essentially about removing barriers to access or making sure that you don't create barriers to access so that people with disabilities can access the web, can understand it, can operate it using any kind of assistive technology that that that they're using.
00:02:07
Speaker
um Web accessibility... Well, that's the official answer. I usually go on and talk about the difference between accessibility and inclusive design and usability. though Should I go ahead and go?
00:02:20
Speaker
Yeah, yeah, that would be great. I'm curious now what the differences are, so definitely. Okay, so web accessibility targets issues that are specifically related to accessibility. But accessibility and inclusive design or web accessibility and inclusive design on the web, these two terms, accessibleive accessible and inclusive, are usually used interchangeably, but they do mean different things.
00:02:40
Speaker
and And usually when I'm teaching about accessibility, one of the first things that I do is I make it clear the difference between accessibility, inclusivity and usability. Because one of the most common phrases you will hear accessibility professionals say is just because it conforms to WCAG, i.e. it's supposed to be accessible, does not guarantee that it's going to be usable.
00:03:00
Speaker
So there's a difference between something being accessible and being usable. Inclusive design, I'm going to read this ah the definition here. um Inclusive design is about encapsulating a wide range of people from various backgrounds and ages and abilities and disabilities, genders, geographical locations, computer literate languages, and so on and so forth.
00:03:19
Speaker
It addresses diverse issues so that all users are involved to the greatest extent possible. Inclusive design encompasses accessibility because it targets all people. That includes people with disabilities.
Usability and Inclusive Design Principles
00:03:31
Speaker
So andcomp it encompasses accessibility and accessibility is therefore a natural outcome of effective inclusive design. You could also say that it's not inclusive. If it's not accessible, it's not inclusive. Accessible is subset of inclusive.
00:03:45
Speaker
Now, the difference between and Let me just give a couple of examples. Visualization is an inclusive design effort. It does not specifically target people with disabilities, but it is it targets all people everywhere um to speak different languages.
00:03:59
Speaker
We have also web performance. Web performance is an inclusive design effort to make sure that everyone can access the web, whether they are using low-end devices or a slow connection. Like i'm most thumb most of the times, I'm a fairly slow connection compared to others.
00:04:12
Speaker
So these are inclusive design efforts. They are not specific about accessibility, but accessibility is part of inclusive design. now Now, an inclusive designer is proactive in pursuing inclusion of everyone as much as possible, regardless of their ability or disability.
00:04:26
Speaker
And an accessibility designer, on the other hand, focuses primarily on the needs of people with disabilities. yeah That's the main difference. So in terms of the difference between accessibility and usability, I'm going to reference the official definition of usability from the International Standards Organization or the ISO.
00:04:45
Speaker
It defines usability as the the extent to which a product can be used by specified users to achieve specified goals effectively, efficiently, and with satisfaction in a specified context of use.
00:04:59
Speaker
Right. I'm going to repeat that. The extent to which a product can can be used by specified users to achieve specified goals effectively, efficiently, and with satisfaction in a specified context of use.
00:05:11
Speaker
So in other words, usability design should support diverse users in their diverse contexts to accomplish their tasks their tasks with effectiveness. Now, usability practice and research may not be specific about people with disabilities, but if you narrow down the definition of of um of usability, so it says...
00:05:29
Speaker
ah The extent to which a product can be used by specified users. If you narrow that definition down to specified users being people with disabilities, to achieve specified goals ah efficiently, effectively, with satisfaction in a specified context of use. If you replace context of use with someone using an assistive technology, then you will also see that usability encompasses accessible design.
00:05:51
Speaker
But something being accessible does not guarantee that it's going to be usable. It's not going to be usable if it's not accessible. This should be clear. But something being accessible does not guarantee that it's going to be usable. And I have some examples of that.
00:06:04
Speaker
Yeah, I'm curious actually now that you said that. I like trying to, it feels like it should be something that works either way. Well, because accessibility, I like to think of it as subsets. So accessibility is a subset of inclusive design. Inclusive design is a subset of usability. So what you want to aim for in general is to make sure that something is usable.
00:06:22
Speaker
That's going to guarantee that you have all inclusive design principles covered and that it's going to be accessible. Now, when we're talking about accessibility, how do you usually go about building an accessible product?
00:06:33
Speaker
What is um what what I call it the North Star of accessibility? Say you're just getting started with accessibility and you want to check if a website is accessible or you want to start building something accessible.
Reflecting on Accessibility and WCAG Limitations
00:06:43
Speaker
Usually you're going to go to check the web content accessibility guidelines. You can conform to a CAG, but still create an unusable experience.
00:06:52
Speaker
Because WCAG has specific requirements, but these requirements don't cover usability. First of all, WCAG doesn't cover every single possible accessibility barrier out there. This is the first thing. That's why it is always essential that you go beyond WCAG.
00:07:05
Speaker
Another example is WCAG, for example, WCAG requires that if you have an interactive component, if something can be operated with a mouse, that it then it must be operable with keyboard. What if you decide to make it operable using keystrokes or keys that the user is not familiar with?
00:07:20
Speaker
Technically, you've conformed to a gag because you can operate this um this thing that you've built. You can operate it using a keyboard, but it's not usable because if the user doesn't know which keys to use to operate it.
00:07:32
Speaker
Another example is links. There is a WCAG requirement that says that if you're using color to distinguish elements, then color alone is not color is not the only way used to distinguish elements.
00:07:46
Speaker
But it doesn't say that you have to use color to distinguish certain elements. For example, say you have a link in the middle of a paragraph. If you use um color with a low contrast, if you just change the color of the link to distinguish it from the text surrounding text, then you have to make sure that the color is accessible. Probably even better add a um and an underline, which makes it even more distinguishable from the surrounding text.
00:08:09
Speaker
But you don't really have to use color to distinguish text ah to distinguish the link. So technically, you can keep the link um the same color as the text, inherit the same color as the text, so it's no longer visually distinguishable from the surrounding text.
00:08:22
Speaker
that's still going to conform to a CAG. You didn't fail that criterion because you didn't use color to distinguish the links from their kind surrounding text. But the experience that you just created is terrible because nobody's going to be able to tell where the link is.
00:08:35
Speaker
This is one true example. i can think of many more, actually. I'd rather not because otherwise I'm going to spend the next five or ten minutes just talking about this. But yeah, I guess it's more like not following it in the strict sense of like what the guidelines are putting out to make something official or accessible. Like it's going beyond that to make sure that it is accessible. But like you said, it's also thinking about usability.
00:09:00
Speaker
in terms of that distinct as the example with the links making sure that a user actually knows that it's a link because it's visually different in multiple ways or you know all all the different sort of approaches we can take to make sure somebody knows something's a link but yeah i make sense now the the the making that distinction
00:09:20
Speaker
uh i'm actually really curious
00:09:23
Speaker
So that's raised a lot of questions. But before we get into them, ah when you're talking about all of this, you're, you know, you clearly know what you're talking about. It's sort of like if you get me going down a CSS rabbit hole, I can just go and talk about anything and go on all my, you know, tangents and everything. But I actually, i first knew about you mostly about learning about SVGs and there was some CSS stuff along the way as well.
00:09:46
Speaker
But now, basically everything I see you doing is accessibility related. And I'm just curious about how it how and why, I guess, it became important to you.
Sarah's Journey into Accessibility
00:09:58
Speaker
um Just because you you'd written an article back in 2019 saying, what a year of learning and teaching accessibility taught me. And in that article, you said that a few years ago, you didn't know what the term accessibility meant, that you built websites that were partially inaccessible because you didn't know any better. And fast forward to 2019, and you were at that point writing, speaking and running workshops on accessibility and how to build a more accessible and inclusive web. but So, yeah, it's a long introduction just to, I guess, I'll start with what what made you start thinking about accessibility more or taking it as a more serious topic than you had been previously?
00:10:43
Speaker
Okay, so I don't remember what it is exactly that I saw back then. I think it was somewhere around 2015 or 2016. I think it was around 2016. I don't know how, where. Maybe it was a talk. Maybe it was an article. Maybe it was a Twitter um tweet.
00:10:59
Speaker
Twitter was Twitter back then. It was still the community platform that we all loved and where connections used to happen. Okay. Someone mentioned something about accessibility, and I hadn't heard of accessibility before that, not once.
00:11:10
Speaker
And I think that what got me intrigued is hearing something along the lines of, if it's not accessible, then it's not, then you're basically building something that's not good.
00:11:22
Speaker
And that's what got me, you know, ah had a question mark inside of my head. I still remember that moment. I had a big question mark in my head, like, what is accessibility? And how does it exactly relate to the work that I'm doing?
00:11:34
Speaker
So I did a little bit of searching around, just quick search. And then I learned that accessibility is about building websites and applications or writing HTML and CSS, which is what I do as a front-end developer, writing HTML and CSS in a way that ensures that everyone, especially people with disabilities, are able to use what you're building.
00:11:53
Speaker
And then I saw a few examples of things that you're supposed to be doing, um basic things like adding alt text to images, which I already did. But there were also other things like a few ARIA attributes here and there,
00:12:04
Speaker
be adding a label or a name to a landmark when necessary. And because I was working a lot with SVG back then, so I started with CSS and then it was CSS and SVG. And then I started getting a little bit more into accessibility. I realized that SVG is a whole different domain. I'm not going to get into that because that alone is like at the accessibility of SVG.
00:12:23
Speaker
I think I had just finished working on a project where we did use a lot of SVGs for data visualization and stuff like that. And learning what I learned about accessibility, I realized that The thing that I had just built for that client, it was not fully accessible.
00:12:36
Speaker
So there was actually mixed feelings. The first one was guilt. And the second one was a little bit of shame. Shame. Nobody made me feel shame. It was something in internal. I'll explain it now. So I felt guilty because I'm not the kind of person that would create barriers to access, at least not intentionally.
00:12:52
Speaker
You know, I always had this image inside of my head and I still do to date. What if I ever meet someone, if I'm at a conference or somewhere, even walking in the streets, and someone with a disability comes up to me and says, hey, Sarah, you know that website that you built? I'm trying to use it, but I can't because, you know, because the way that you built it is, does it it's not making it possible for me to access it.
00:13:13
Speaker
That would make me feel terrible. That would make me feel extremely guilty. I'm not the kind of person that does that. I'm the kind of person who... who offers help to strangers without them asking. I have a lot of stories and anecdotes I could tell about that, but I'm not going to.
00:13:27
Speaker
um So I felt guilty. I knew that I had to change that. And the second reason is I have a very, very high bar that I set for myself for the quality of work that I deliver. And here's the thing. If you're building web user interfaces, they're called user interfaces.
00:13:43
Speaker
You're building an interface that is meant to be used by people. And if people can't use that interface, then what's the point? right And as a web developer, we have we have a really big impact because we are essentially building the web and not just the web. We're building the the interface, what people interface with on the web, you know what people see, what people interact with. If you remove the you from the UI, then you're not really a UI developer anymore. You're not a user interface developer. You're just an interface developer. Or as my friend Scott O'Hara would say, you're just a developer developer.
00:14:16
Speaker
So yeah, I realized that I needed to change something. I needed to learn more about accessibility and I started. How did I start? I started finding people who talk about accessibility, finding people who write about accessibility, looking into specifications. I'm one of the few weird weird people who love to learn from specifications directly.
00:14:35
Speaker
I started getting into that more and more. And then you start learning about screen meters and how to use a screen meter. I still haven't memorized all the key key presses yet, but, you know, i you there are guides online that I can pull up whenever I need to test with one. There's something extremely satisfying about knowing that you're building something that is making a positive change in the world and that can literally change someone's life.
00:14:55
Speaker
This, um I would love to mention something. i don't know if it's, this is definitely a tangent. I don't know i don't know if it's considered out of context, but how do why do Why am I focusing so much more on accessibility today?
00:15:08
Speaker
It's not just accessibility. So what i what I want developers to see or to get or to learn from my work is how to do what they do, but better by integrating accessibility into every step of the development process. So you're writing HTML, you should be ah thinking about accessibility. You're writing CSS, you should be thinking about accessibility.
00:15:28
Speaker
With what you do on a daily basis, writing code, it gives purpose to what you're doing. And um this reminds me of this video. So when I first started in this field, I was very much focused on CSS. I wrote a CSS reference for code drops.
00:15:41
Speaker
At that time, CSS masks and filters and clipping were still fairly new. and They were still making their way into browsers and Adobe, the web platform team at Adobe was working on these features. And I was working with some of the people at Adobe to about, and you know, learning about these features and writing tutorials about them.
00:15:57
Speaker
CJ Gammon, he was one of the most inspirational people that I had met in and the first couple of years when I started in this field. CJ was working for at Adobe. I don't know if he still is, but in order to showcase all the capabilities that CSS had introduced at that time, masking, clipping, filters and all that stuff, they created this app. I'm looking at it right now. you can i would love for you to provide this as a link in the podcast notes or something.
00:16:20
Speaker
It's called, ah they built an application, basically. They've collaborated with a food network to make, its the video is called, it's on YouTube, it's called Making the Web Sweeter with Food Network and Cupcakes.
00:16:32
Speaker
Basically, they built rebuilt an application. I think it was a native application. They built the web version of that application using web technologies. And but as I mentioned, CSS filters and a lot more. One of the most inspirational videos I've ever seen is this one because it starts at around two minutes and 18 seconds. If you fast forward to that part of the video, CJ showcases how, you know,
00:16:56
Speaker
People who are going to be using this application are people who are going to be cooking in the kitchen because it's an application that contains recipes for making cupcakes. And when you're making cupcakes cupcakes in the kitchen, you're going to have, it's going to be all messy. Your hands are going to be messy. There's going to be flour everywhere.
00:17:10
Speaker
If you're using an iPad or a laptop, you're probably you probably don't want to touch that ah with your hands when they're dirty or messy. So what they did, which was something that I had, it was the first time for me seeing that back then.
00:17:23
Speaker
They added two features to the application to the application. The first one is speech recognition. So you could talk to the application and ah say the name of the recipe or the name of the menu or whatever that you want to go to.
00:17:35
Speaker
So you can use your voice to navigate the application. And the second one is he used a leap motion device. That was my first time ever seeing that. and it's really cool. Elite Motion device basically ah basically allows you to also navigate the application using just moving yeah gestures, air gestures. You don't have to touch anything. Just wipe left swipe left, swipe right in the air. And it's it's going to move through the recipes.
00:18:03
Speaker
The beautiful thing about this application is that it is they thought about the user before building the application. You think about how are my users going to use this?
Designing with Users in Mind
00:18:12
Speaker
And then you make design decisions based on your user needs.
00:18:16
Speaker
Accessibility and inclusive design in general is also the same thing. You want to think about all the different ways that your users are going to browse and operate and use your websites and applications. And then you will make decisions and whether it's design or development based on those needs.
00:18:29
Speaker
Hopefully, this is how you un ensure that you build an accessible or inclusive um application. ah Yeah, this is it. So it makes a lot of sense because... We are building for users.
00:18:40
Speaker
And ultimately, what you want is to create something that is usable. And that's what got me into accessibility. I started diving more. I started learning more. And the more I learned, the more I fell in love with this.
00:18:51
Speaker
Because it raises the bar. And you you can really stand out in the community if you're building with a certain level of quality that nobody else is building with.
00:19:04
Speaker
um That was a long answer. it's a It's a great answer. I wish that all the terrible WordPress themes that do recipes could update and use something like that because they're already bad enough with everything. but I do lots of cooking, so it's always ah frustrating, as you said, when you're trying to cook and not touch your phone, ah but look at a recipe. it's ah Yeah, that that definitely piqued my interest. I'm going to be watching that video and i'll I'll make sure to include links to it or a link to it in the description.
00:19:33
Speaker
um in a sense though I can definitely relate it not a little bit with the accessibility side of things because in my own sort of journey in learning more about it was you know I started making content and then there'd be comments on videos or something that would it wouldn't even be like there wouldn't be negative comments it would just be what about this or you know certain things and I'd be like oh I hadn't even thought of that or you know it wasn't part of my thought process at all and that sort of and that same thing like you'd start seeing things on social media or you'd find other people to follow that were more in that and then you start learning more and more about it um and diving down that and there's only one video I ever took off of YouTube and it was looking at doing like a um a hamburger menu where I just made a div clickable no
00:20:20
Speaker
fact That was probably eight years ago, seven or eight years ago. And when I realized it was, I think two years ago, I realized that video was up. And I was like, and think I was looking at the original demo. I'm like, I'm going to take that down. It's going to make a lot of people angry. Yeah. yeah So was like, let's take that one off. And I actually made a new video looking at why that was a mistake and what what I learned from it. And, you know, hopefully that other people can take away from it.
00:20:43
Speaker
I love that. But I think... Yeah, for me, I can relate in the sense that you're saying reading the spec and stuff like I haven't, I do, I have looked at so that. But for me, it's usually in the CSS spec, but I usually regret every time I end up there. I don't, I don't enjoy reading it at all. I'm like, what am I doing here? Why am I? Yeah.
00:21:06
Speaker
I think, I mean, for both of us, are are you know it's that thing that happened where we sort of found out slowly and learned a bit more about it a bit more about it. And I'm curious, when it comes to accessibility, I think one of the biggest battles is just raising awareness of it in general.
00:21:22
Speaker
um It would be fantastic if it was, you know, more something that we just took for granted at the very early stages when developers are learning, but it's obviously not the case still.
00:21:33
Speaker
So i'm just curious if you have any
00:21:37
Speaker
advice, tips, especially for someone like me who's very, i try to incorporate it, but if you have, you know, just in general, if somebody's, i don't know, do you have any solutions to raising awareness about accessibility in general and usability and inclusive web design?
Raising Accessibility Awareness and Debunking Myths
00:21:53
Speaker
Well, the best way to raise awareness is to not stop talking about it. The thing that you can do, especially as an educator, you have a big impact. And one of the most impactful things that you can do is show how accessibility can be a part of the normal thought process but without making it feel like a burden. Because you can go a long way making something accessible just by making small tweaks here and there. If you look at the WebAIM Accessibility Survey results or...
00:22:21
Speaker
WebAIM 1 million survey results. but They basically survey the 1 million ah top websites and check, test them for how accessible they are. The most common accessibility issues that have been exactly the same for the past years are extremely easy to fix.
00:22:37
Speaker
So you have missing alt text on images or buttons and links missing labels or accessible names. You have documents missing lang attributes. How easy is that to add? These are small fixes that go a long way. So, or what they call the low hanging fruit.
00:22:51
Speaker
There are a lot of things that you can do. And I think that as a first step, as educators, what we can do is just like if I'm if i'm talking about a CSS feature, which is something that I recently did. I talked about the scroll target group property.
00:23:02
Speaker
We talk about how really awesome this thing is and not this particular thing, but, you know, anything that we're discussing in CSS or HTML. And make just make accessibility part of the process. People at some point will get used to hearing. So this is how I can use it.
00:23:17
Speaker
How can someone else using a different way of navigating use this? If um if someone is using a keyboard, are they able to use it? If someone is using a screen reader or speech recognition, how can how can they use it Now, this is for us as educators, just make sure that you add it to pretty much every wherever appropriate. The spreading awareness, like I said, it starts with talking about this thing more. and then because But then again, when you start spreading awareness, you're going to get some pushback.
00:23:42
Speaker
Right. some There's going to be some developers who are going to say that this is an edge case. We don't have any disabled users visiting our website or accessibility is just about screen readers and none of our users use the screen readers.
00:23:55
Speaker
So the first thing that I would do that I always recommend almost always do when someone pushes back, is debunk the myths about accessibility. People think that accessibility is just about a blind person using a screen meter.
00:24:06
Speaker
People think that accessibility is just being blind or deaf or having a motor disability or sitting in a wheelchair. People think that there's only one type of disability, which is a permanent disability.
00:24:16
Speaker
People think that there's only one type of assistive technology, which is a screen meter. But when you talk about web accessibility, you talk about people that have disabilities that use assistive technology to access the web.
00:24:27
Speaker
There are so many different types of disabilities and so many different types of assistive technologies. Eyeglasses. You're wearing one. I wear one. I'm just not putting it on one right now. Eyeglasses are a form of a assistive technology.
00:24:38
Speaker
You know, these pencil grips that they give kids to help them grab pens and learn how to use it to write. Those are assistive technology. Those are a form of assistive technology. Not all assistive technology is tech technology. Some of it is very air quotes primitive. Assistive technology on the web can be anything from screen reader. Things like...
00:24:58
Speaker
head wands, mouth sticks, using tracking, using a keyboard. Keyboard is a form of assistive technologies. People use keywords to navigate the web when they can't use a mouse. If they have it they have an RSI problem, which is a very common problem with people like us who code all day.
00:25:14
Speaker
ah Assistive technology also includes forced colors modes and high contrast mode and zoom. How many times do, how often do you zoom websites? i I do all the time. Most of the websites I have open in my tabs right now are zoomed in. I'm getting old. My eyes are getting strained.
00:25:28
Speaker
Like when you spend 95% of your time in front of a screen, you're bound to eventually, you know, need to start zooming in. So assistive technology is not just screen readers and disabilities are not just being blind or deaf. You have permanent disabilities that you are born with or that you acquire during your lifetime.
00:25:44
Speaker
You have temporary disabilities, which anybody could have at any moment in their life. You could have, God forbid, an accident and break a leg or break an arm. And then you're not going to be able to use your mouse or your keyboard to navigate the web. Maybe in that case, you're going to have to use speech recognition. Will you be able to use your own websites or application if you have to do that?
00:26:04
Speaker
ah There's also situational disabilities. A situational disability is an example. These are examples that I'm borrowing from Microsoft. ah They have this really nice um figure. i'm pretty it's very It's very popular. i don't have a link to it right now, but it shows a grid. It shows you different, that that dis disabilities can be temporary, situational or permanent. And then it gives you examples of those.
00:26:23
Speaker
A situational disability could be, for example, a and mother holding her baby and unable to use her arms to browse recipes, for example, or do something on her computer. A situational disability that also many people could be in at any moment is being in a very loud room.
00:26:40
Speaker
where you can't hear the person that you're talking to. This is a situational disability. So when you're talking about accessibility, we're not just talking about a few people with very specific accessibility needs.
The Importance and Legal Aspects of Accessibility
00:26:51
Speaker
We're talking about a wide range of disabilities, a wide range of assistive technologies. And you're also, when you're building accessible websites or... You're also building it for your future for your future self. So not only is now more than 1 billion people on the planet live with some form of disability, but each of us is bound to have and some type of disability at some point in their lives.
00:27:12
Speaker
It could be as soon as next week, God forbid, if you have an accident or whatever. It could be maybe in your 80s if you're... if you get low vision or um any glaucoma or any kind of other kind of disability.
00:27:26
Speaker
So yes, the first part is and raise talk more about accessibility. When you get pushback, debunk accessibility myths and then get people curious. And how do you get people curious by making it relatable?
00:27:37
Speaker
One of my favorite ways to do that, this is something I actually picked up from Leonie Watson. So there's an interview with Leonie where someone asks her how she gets people, you know, learn about accessibility.
00:27:49
Speaker
I'm going to quote her. I'm going to read the first part of what she said. One of the most effective ways actually in recent years has been to ask them if they use some kind of Home Assistant, Echo or Google Home or such. And many people, of course, now have.
00:28:01
Speaker
And then the next thing I ask them is how many times have you had a screaming match with it because it just didn't do what you wanted it to do? It just didn't listen to you. It answered the wrong question. It started the wrong activity. And the answer comes back almost invariably. Yeah, that's the situation. And I'm like, well, then Leonie explains how, what using technology is like. So their experience with using the Home Assistant is very similar to the experience that people experience.
00:28:24
Speaker
someone using assistive technology has. It's very similar, the same frustrations. You have accessibility needs or disabilities, Leone included. And as a screen reader user, we get to the point where we think we should be able to do something and it should be reasonably straightforward and possible to do. And we find we're just getting these kind of frustrating bumps in the road. So at that point, they stop talking about home assistance and they start talking more about accessibility. And Just getting people to know more about their frustrations, it gets them curious. ah Someone says, oh, hell, is that what the experience is like?
00:28:53
Speaker
That gets them curious. And then you start you can start taking the conversation in a specific direction. And Vitaly Friedman also has a post. It's about making a strong case for accessibility. And one of the things he mentions, like if you're trying to convince a stakeholder of the importance of accessibility,
00:29:07
Speaker
Now, today, because accessibility is the law, you are um you know, you you have to build something that's accessible because it's required by law. But I like to think, I hope that this is the last resort. So you don't have to even get to that point where you have to talk about the law. Visalli said that stakeholders often misread the value or the purpose of accessibility. And he says that you can't build empathy with numbers.
00:29:29
Speaker
So you can't just tell us, you know, you can't just use and reports and facts and charts in order to build empathy. Again, you make it relatable. If someone in the room is wearing eyeglasses, you talk about assistive technology and you show them example. And the best way for them to build some empathy is show them people using and trying to use their application or their product and seeing them frustrated, seeing how it feels for them.
00:29:51
Speaker
Yeah, so that's it. And then at some point, hopefully they will be like, okay, we want to make sure that what what we're building is accessible. How do we go about doing that? And that's where you start good getting more into WCAG. WCAG is the north star, but it's not the end. WCAG is the baseline of accessibility. But that's where you would normally start because it's a set of guidelines. It guides you. You get the bare minimum with WCAG. And then hopefully you do a little bit more to make sure that it's usable and do some user testing, get real people involved and stuff like that.
00:30:22
Speaker
Yeah. So, yeah, that when you were talking a little bit earlier, it made me think a bit of, don't know if you know, Salma Alam-Naylor, because she recently, or it was a while back now, probably six months ago, I did a quick talk with her because she'd lost the use of her hands and couldn't use the keyboard anymore and was realizing how hard everything is all a sudden. Yeah, I remember, think I remember you seeing you posting about that. Yes.
00:30:45
Speaker
Yeah. And it's a little bit like you said, it's not, I think a lot of people have that misconception that you said of when we talk about accessibility, we're just talking about screen readers and there's so much more to it than just that. And even every time I've done videos that focus on, or where I bring up keyboard navigation and stuff, it's not only, you know, there's different reasons people might use it. And there's always people that are like, Vim user here, who's very happy you're talking about this. Yes. Power users.
00:31:12
Speaker
Yeah. Accessibility benefits everyone. Everybody. Yeah. um my I guess for me when I started learning and once I finally you know or not finally once I started realizing it was important my biggest issue and I think a lot of people have the same thing is finding it difficult to learn or you know it you said that there's the WCAG which I think not enough people know about so that's the first place I think people should head to But it's very dry. and It's not like if you're just starting to get into it, I could see some people like trying to wrap their mind around exactly. And they have examples. It's also ambiguous in some places. And the same criterion can be interpreted in different ways. Even accessibility professionals sometimes have disagreements as to whether an issue of this particular thing fails WCAG criterion or not.
00:32:04
Speaker
There's, yeah, i ah i totally understand the sentiment. Yeah. So I'm just curious, like say if you had somebody who was just, they just, this is the first time they're hearing about accessibility and now they want to learn more.
Learning Paths and Tools for Accessibility
00:32:16
Speaker
You'd mentioned maybe some of the low hanging fruit earlier as well, because I think it is one of those things where you can quickly get into the weeds, but it's probably best to start with the easier things. But do you have advice for people that are just learning about it or wanting to get more, learn or wanting to learn more about it?
00:32:32
Speaker
Okay, ah I'm going to go back to when I started learning. There is no... Everyone's probably going to have a different path. But one thing I can recommend is try to find a structured path.
00:32:45
Speaker
So but you could, just like you if if you, if you learn CSS that way, that's how I learned CSS, is you just, you know, whatever comes up in a Twitter timeline, an RSS, in a newsletter, when you hear about something, you find a blog post and you read about that. With accessibility, is that helps.
00:33:00
Speaker
That's how I got started, definitely. And I ended up collecting everything that I know and turning it into something structured eventually. But it can it takes a lot more time than if you start with something structured. And I want to say this in a way that doesn't sound or that doesn't make accessibility sound like it's difficult. Accessibility is not...
00:33:17
Speaker
always difficult. Now, there are certain things that are complex, that's for sure, because when you start start creating complex interaction patterns, things are bound to get complex, right? Especially if you don't have any native HTML elements to present those elements, to to present those interactions. and I think we're going to talk a little bit about the technical side shortly.
00:33:35
Speaker
When you, if you don't have structured curriculum or someplace that guides you from point A to point B. third Point B, by the way, is not going to be the end point. ah You just need someone to guide you through the the beginning but so that you have all the necessary information, the foundational knowledge that you need so that you can keep going from there on on your own. So there is no end. Accessibility is a process. It's not an end goal. So you're never going to just make something accessible and be done with it.
00:34:05
Speaker
That's another tangent. And I again lost my train of thought. So you need a structured curriculum. This is why I try to avoid tangents. You need a structured curriculum. One of the challenges with browsing the web for various articles about different topics is that you will definitely come across the same topic discussed by two different accessibility professionals. And there's almost always, not and for not for every topic, but you will eventually come across something. You'll find an accessibility professional who has an opinion about this. And then you will find another accessibility professional who has a different opinion on the exact same thing.
00:34:36
Speaker
And then if you ask a screen reader user about this thing, what i this is what I usually do. Like if there are varying opinions, I usually try to get screen reader, someone, you know, we're building for people with disabilities, right? So I try to go to the people that we're building for. If I can't do usability testing, I at least try to reach out to people. There are a lot of amazing...
00:34:54
Speaker
disabled users available on social media and who love to be asked and who love to tell people what they need and how how we can help how we can help make the web better and more inclusive for them. If you ask a StreamVeter user about their experience, you might end up hearing something also different. So there is Some things in accessibility are black and white. There's right and there's wrong.
00:35:13
Speaker
Like if you're building a toggle button, there are certain accessibility requirements. If you're building a button that toggles the display of a navigation menu, you know or you will learn that you're going to need already expanded on that button so that it communicates to screen reader users that this button toggles the display of something. And it says it communicates whether that thing that's controlled by the button is expanded or not expanded.
00:35:34
Speaker
These things are cut clear. But then there are some gray areas. ah these You get to these when you start thinking about more complex interaction patterns and usability, not just accessibility.
00:35:45
Speaker
So when it comes to accessibility there or and usability, there are certain expectations, guidelines like the Authoring Practices Guide, or also known as the APG, APG is helpful for me. I only look at it for one thing, is to get an idea of what ARIA attributes are expected. we' talk We'll talk about ARIA later.
00:36:03
Speaker
And the second the most important thing I look i look for is ah keyboard interactions, because there are certain keyboard interactions that are expected for specific interaction patterns. You can find those there. So try to find a structured curriculum, some place to start. There are many courses online. You can start in any of those courses, of course.
00:36:20
Speaker
um Another thing I would recommend, so we said that WCAG is a dry document, and it definitely is, and it's also ambiguous, but WCAG is a normative document. So you have to conform to WCAG in order to be considered, for the website to to be considered accessible.
00:36:34
Speaker
But WCAG also has supporting documents. So there's the understanding WCAG, understanding WCAG document, and there is the techniques for WCAG document. These are multiple page documents.
00:36:45
Speaker
The understanding is is very helpful if you are seeing um a WCAG success criterion and you're not really sure what that criterion means or what the goals of that criterion are. You can go to the understanding page of that specific criterion and it explains the purpose of this criterion, and who it is for, who it benefits and how you could be able to meet it.
00:37:03
Speaker
And then the understand document contains links to the techniques documents. So it takes you to pages where you get suggestions. these so understanding with hag and Techniques for WCAG, these are non-normative, aka informative documents, which means that you don't have to do exactly what they say, but they are a good place to start if you absolutely don't know where to start. And they're also a good place to just learn more about accessibility and about WCAG. In the techniques, you can you will find things like if you're providing content using CSS pseudo elements, make sure that if it's decorated that you hide it. Or basically CSS techniques and HTML techniques to ensure that you could use in order to meet the requirements of the success cartoon.
00:37:45
Speaker
Right, yep. So there's WCAG, there's supporting documents, there's multiple more documents. There's ARIA and HTML is helpful. HTML accessibility API it mappings, if you want to get really deep and into HTML and ARIA, there are those documents. But again, I highly recommend finding a structured curriculum to start before you start going into the weeds of different topics later.
00:38:05
Speaker
I will say you're also being too humble and saying you can get any course. You do have your own course on this that people can use, but think it's a very good course. Thank you. As long as you find something structured and it meets your needs, then you should choose that. I don't want to come off as someone who's just trying to sell people something. oh know i built a course a course that I wish existed. i built the thing that I thought was missing on the web. So would I recommend my course to someone getting started with accessibility? Absolutely.
00:38:33
Speaker
But I am biased. And if I say that, people are just going to think that I'm just trying to sell them my course. me Yes, it is. Part of my livelihood comes from that course, so it does matter to me, but I don't want people to buy it just because it's something I made. I got a few emails when I first launched the course from people asking me if the course is suitable for them. And a few of those people I recommended against taking my course and suggested other resources because they had specific areas of focus in their work. and And my course is focused more on front development and HTML and CSS. So that's not going to be a fit for every single person out there.
00:39:07
Speaker
So for those who who I would recommend it, i have I have taken the course, so I highly recommend it. But we'll we'll talk more about that maybe a little bit after. One thing you brought up a couple times there was ARIA. And I remember when I first started that, that was like, I feel like when you first start learning about some of the accessibility things with the simple things, like the very easy things like, oh, don't take an outline off of a link or, you know.
00:39:31
Speaker
There's a few simple things. And then all of a sudden you find out about area and roles. And that opens up a can of worms a little bit. um But just in case somebody is listening who isn't even familiar with what area is, could you just give a really quick rundown?
00:39:45
Speaker
Yeah, so ARIA is a web standard. Just like we have HTML, we have the HTML specification, we have CSS. We also have ARIA, which has been around, I think, since 2006. It's a web standard that defines a set of attributes. These attributes can be used to extend HTML semantics. It defines specifically, it defines roles, states, and properties that you can use to make HTML element or HTML content more understandable by assistive technologies such as screen meters and speech control software.
00:40:14
Speaker
This is the short definition of ARIA. So it's a web standard that defines attributes. You can use these attributes to extend the capabilities of HTML when HTML semantics fall short.
00:40:26
Speaker
So ARIA has a specific use. It doesn't compete with HTML. It's not at a specification that you have. You don't have you need to choose but choose between HTML and ARIA. They complement each other. ARIA is, I like to think of it as an enhancement, a necessary enhancement a lot of times on top of HTML. So you start with HTML, do everything you can do with HTML.
00:40:46
Speaker
And if you have an interaction pattern that has specific requirements that you cannot find in HTML, that's when you turn to ARIA to find, you know, the attributes that will help you communicate the meaning or the purpose or the interactions of what you're building.
00:41:00
Speaker
Yeah, because we use, you know, the the classic saying is no area is the best area in that if you don't use it, if there is the existing element that you could use instead. No ARIA is better than bad ARIA.
00:41:11
Speaker
Yes, that's right. Yes. Sometimes ARIA is going to be necessary because there are still certain certain things in HTML that HTML can't do on its own. So you will need ARIA for those things. Yeah. Hopefully it's going to be.
00:41:22
Speaker
not go ahead. I was going to say, I think most of the time it's like you said, when it's more complex things, you' but like if you're building tabs or a carousel or something where there's an interaction going on where we don't have a native element for table grid or a list view and stuff like that. yeah Yeah. In in the post that we meant I mentioned off the very beginning, back from 2019, you actually wrote in there about ARIA saying ARIA is like a polyfill for HTML semantics, which I thought was a very nice way of putting it for for people who haven't heard of it before.
00:41:51
Speaker
Yeah, so usually you usually turn to a polyfill when you need it. So you try to use a feature and if support is missing in a specific browser, that's when you use a polyfill on top of the feature that you've already used.
00:42:05
Speaker
but With HTML, it's also the same. So the reason accessibility professionals emphasize the fact that ARIA is a is a polyfill is because when developers learn about ARIA, there is this misconception that it's either ARIA or HTML. And because ARIA can do more than HTML in some places, then they're just use ARIA and avoid using HTML.
00:42:24
Speaker
So there are yeah there are rules to using in ARIA because over overuse of ARIA or misuse of ARIA can create barriers
ARIA and HTML Semantics
00:42:32
Speaker
to access for people. And that's going to be worse. So your intention would be to use ARIA to improve the user experience and to make something more accessible.
00:42:39
Speaker
But what you end up with is the complete opposite. Off the top of my head, ARIA label is an example. A lot of people throw ARIA labels here and there. They're not aware that ARIA label or ARIA attributes in general, ARIA labeled by and ARIA label. And when the browser needs to compute the accessible name of an element, ARIA takes precedence over h HTML.
00:42:56
Speaker
So if you have a button that contains some text, what some developers will do is they will use ARIA label to provide additional description to the button. or they think that by providing... by using ARIA label, they are providing an accessible name to some users, whereas the label is going to also be accessible to... it's It's different. ARIA label is going to override the contents of the button. So if you provide a long sentence as a description in ARIA label, that is going to be exposed as the name of the button. It's like giving it's like using that sentence as a label, and it doesn't make sense.
00:43:25
Speaker
So misuse and overuse of ARIA can create barriers to access. That's why there are rules for ARIA use. There is an even I'm not sure which specification it is, but ah there are five rules of our use. The first one is that if you can use a native HTML element or attribute to create the pattern that you're creating, then do that. Unless, of course, there are exceptions. If accessibility support is not there or if there are styling limitations that you absolutely can't work around.
00:43:51
Speaker
So yeah, ARIA is polyfill and it's really important to keep this in mind. Another thing that can help with ensuring that you don't overuse ARIA is to think of it as a temporary solution. I heard this, I don't remember who said that a few years ago, but thinking of ARIA as just a temporary solution helps. ARIA provides semantics that are currently not available in HTML, but the Open UI group is already working on adding more features and more elements to HTML. And these elements will implicitly map to ARIA attributes so that you no longer need to use those ARIA attributes. You will just use the native HTML elements. And using native HTML comes with a lot of benefits. HTML, l ah most, not all.
00:44:27
Speaker
This is ah this one of my favorite things. I love talking about semantic HTML accessibility. And even in the course... In that, there is a specific there's one chapter about semantic HTML accessibility. And at the beginning of the chapter, I say this is my favorite chapter of the course because there's a lot more to HTML than just tag names, right? HTML elements are meaningful.
00:44:48
Speaker
They are semantic, but they're not meaningful. And then there are also some misconceptions. Now I'm steering in a completely different direction here. that so you'll hear You will often hear people say that div and span are not accessible or that they are not semantic. That's not true. They are semantic.
00:45:00
Speaker
they have ah they Their semantic is that they are generic containers. And I have my friend Scott O'Hara to thank for the first time. you know um I started thinking about HTML accessibility. It was because of of this this this discussion I had with him.
00:45:13
Speaker
Div and span are semantic. They are generic containers. And even if you look at the accessibility tree in the browser dev tools, you will see that Chrome, for example, exposes them as generic containers. But they're not meaningful semantics. They're not useful for assistive technology users. So if you use a div to mark up a button, the user's not going to know that this is a button.
00:45:30
Speaker
because the div is just a generic container, that's when you would have to use ARIA to polyfill the semantics that are missing on the div. But then there's a lot more work that you will have to do because just adding ARIA attributes is not going is not going to make the div interactive. It's not going to turn it into a button. It's just going to tell the user that this is a button, but it's not really a button until you make it behave like a button. And so you need to make sure that it's operable using the space key and using the enter key, not just the enter key or not just the space key.
00:45:58
Speaker
There's a lot of work that you will have to do if you go the route of just ARIA using div soup and then adding ARIA to add semantics. There's a lot of work that you need to do. But if you use native HTML elements, the browser is going to provide that functionality specifically for interactive elements is going to provide that for you.
00:46:13
Speaker
I love that you brought up divs and spans there just because i I get comments on videos where I'll use a div for whatever and someone will say something about, oh, but you should be using semantic tags. I'm like, I just needed to make two columns, so I just wrapped each one in a div because...
00:46:29
Speaker
I'm like, there is no semantics. You know what I mean? Like, I'm not making a column. Like, that doesn't make any sense. And I'm just like, I think, you know some people seem to get stuck on, I guess it's you learn first about divs and then you're like, oh, there's semantics and you start doing that. And then you just meet like that they go too far down that side of things. Yeah. Like using divs and spans is all of the sudden taboo. It's not. Yes.
00:46:49
Speaker
yeah They still have their use cases. They are generic containers and you can use them to, you know, create layouts or for styling hooks or whatever. You can even use them. You can use them anywhere. As long as you've used the meaningful semantics to expose the most important part of the interface or the content to the user, then you can use divs.
00:47:06
Speaker
Of course, there are also rules to that. so Some elements, there are certain relationships in ARIA. If you have an element and you have a child of that element, sometimes the relationship is very strict. You're you're not allowed to have a div between the parent and the child. Otherwise, it breaks that parent-child relationship. That's a more advanced level of ARIA. we're and We're not going to get into that now.
00:47:26
Speaker
But generally speaking, div and span are they are still useful. I use them all the time. will I will say the one, i did a ah challenge on my Discord maybe about a month ago, and it's something um' I've been thinking about how it just time with semantic HTML, I think might make HTML harder than any other language, just because at first it seems easy, right? Like your heading levels work. And once you understand what they're actually doing, it's pretty straightforward. You you have a main and you have a header and like at the, it seems like it's really straightforward, but then all of a sudden because it's about the meaning of things and meaning is subjective, it gets a lot harder really fast.
00:48:01
Speaker
One of my favorite examples, i think it was Stephanie Eccles who brought it up, was talking about having a testimonial that has an image in a person's name. And they're like, should it be a figure? Should it be a block quote? Should it be a block quote inside a figure? And, you know, there's all the different, ah you you sort of get into this rabbit hole sometimes and you start going into the semantics of something.
00:48:20
Speaker
I'm curious if you have any tricks or tips or anything just on that front there. This is one of those scenarios where you will find different opinions by different people. My rule of thumb is how is it exposed?
00:48:33
Speaker
You know, there are certain elements. ah You definitely need to learn what each HTML element, what the purpose of that element is. You don't want to go um using
00:48:45
Speaker
this is good This is a very extreme example, but you don't want to use a button to create a block code, for example. you don't want to use You don't even want to use a block code to create a pull code because a block code and a pull code is different. So what I would normally start with is what exactly is the definition definition of of a block code? What is the purpose? How is it defined in the specification? There are also going to be some rules, markup rules, that you're allowed to nest this element in that one or you're not allowed to do that.
00:49:07
Speaker
And then fire up a screen reader, see how it is going to be announced. so So it's interesting because Adrian Roselli, this is also one of the links that you can include in the description later. Adrian Roselli has an article exactly about block codes and how they are announced by screen readers. And he has this really long test page.
00:49:26
Speaker
There are multiple different marker patterns that you can use to mark up a block quote, right? Some of them is just a block quote. And then you follow the block quote with a paragraph that contains the site, which is not something I'm fond of.
00:49:38
Speaker
And then there is a block quote with a site inside of it. And then there is a figure and a fake caption. And then there's a block quote inside a figure with a fake caption. And then there's a block quote inside a figure with a footer instead of instead of a fake caption.
00:49:49
Speaker
Yes, there are multiple constructs. Some of them are from the W3C website. Some of them are from the HTML working group. some of Some people prefer this. Others prefer that. I like to base my opinions on actual test results.
00:50:00
Speaker
So there is this article by Adrian. I'm going to tell you what he recommends at the end of the article. Another article about the block code element by Hayden Pickering, who's also great at accessibility. So they are both professionals, but they have opposite opinions. So Adrian says, don't use this particular construct, but which is basically the one with the figure and the fig caption, if I'm not mistaken, because it's too verbose. It's not wrong.
00:50:21
Speaker
It's definitely not wrong because you're exposing information. But if you were to compare the output of using a figure and a fig caption with the output of using a block quote, for example, with which one is is it? I think the one ah he uses is the block quote with a footer inside of the block quote and then the site inside of the footer.
00:50:38
Speaker
And I have a couple of notes on this now. Adrian prefers the block code with the footer and the site inside of it, but Hayden prefers the figure and the fig caption. None of them is either right or wrong. They are both fine as long as you have markup that is valid. And the block code in most screen readers, according to the tests in Adrian's article, most of them are exposed as, you know, the screen reader announces quote, I think. It says block quote.
00:51:01
Speaker
So it is announced as a block code. And as just as an aside here, not all screen readers need to announce the exact same thing all the time. So if you're going to be testing the screen readers and something is not announced the exact same thing in all screen readers, that's fine.
00:51:13
Speaker
As long as you get the general idea. I would vote for Adrian's suggestion as well, because first of all, using Fibre and Ficcaption is not wrong. It's just more verbose, right? So if you do usability testing, if you're able, and i hope you are, because I think it would be fantastic and you get amazing insights when you see people with dis disabilities using your work.
00:51:33
Speaker
Maybe, maybe your users will say that the figure on the fig caption is just fine. So you would just use that. Or you will use a block code. I personally use the block code with a site inside of it. I don't use a footer. um A note on using the footer inside of block code, it's not going to be exposed as a footer because a footer is only going to be exposed as content info when it is in the context of... like It's a direct child of the body element, but some things are going to change in the future. These are outside also outside of this conversation. I think there are some changes coming. So footer and header are going to be announced differently in different contexts.
00:52:04
Speaker
That is a side note. Yeah, so it also helps to understand how something is going to be exposed. So when it comes to landmarks, you have main header, footer and article and stuff like that. Once you understand how something is going to be exposed or not exposed, that gives you the flexibility and leeway or space to choose whatever you want. For example, I use the header element and the footer element all the time just as styling hooks.
00:52:26
Speaker
These are semantics that i add in my HTML for myself because it makes it easier for me to read. And I use them as styling hooks in CSS. I know that the header inside of my article element is not going to be exposed as a header.
00:52:37
Speaker
I know that the footer inside of the block quote is not going to be exposed as a footer. But it's just there to add some sem for you, for yourself, or to make the code readable if you're working in a team. So, yeah, sometimes there's not going to be a right or wrong answer. There are some rules that you're going to have to follow to make sure that the markup is valid. Other than that, whatever works, fire up a screen reader, test it If you get different announcements, that's fine.
00:53:00
Speaker
And you will definitely have cases for native HTML elements that are announced completely, like very differently across browsers and screen reader combinations. And the summary element is one of bad examples.
00:53:11
Speaker
It is announced as a button in some browser and screen reader combinations, announced as summary in others. I think it's announced as a push button. There are, I think, yeah, it's also announced even disclosure triangle instead of summary or button. Yeah, so that's fine.
00:53:25
Speaker
And if you also want to get really deep into this, you will check the HTML accessibility API mappings or the core accessibility API i ah i mappings, which gives you an idea of how each HTML element is exposed, if it is exposed, and the accessibility API of each platform. And when you see the same element exposed in different ways, that's where and when you can expect that element to be announced differently across screen meters, and that's fine.
00:53:49
Speaker
You don't have to work around these announcements. One thing people would normally do and ah Okay, I know this answer is getting too long, but I would love to mention this. One thing a lot of developers would do is if they don't know better, if they think that a screen reader needs to announce the summary the same exact way across browsers and screen readers, is they will add the button role to it, for example, so that it is announced as a button everywhere.
00:54:11
Speaker
But if you do that, the button element, the native button element doesn't come with state. You will in some browser, and I think it was voiceover it when I did the like the latest test. I'm currently updating one of the course chapters with this update. I redid the tests and I think it was a voiceover. So basically the summary element comes with state built into it. The screen reader is going to announce whether the disclosure widget is open or closed.
00:54:32
Speaker
But if you add roll button to it, you lose that state announcement. So don't try to work your way around native API mappings. Yeah. yeah And I guess users, like, it's not like a user's jumping between different screen readers. They're used to the one they're used to. So they know what you know, when it's announced a certain way for that user, that's what they expect.
00:54:54
Speaker
And by trying to change that, it might even be worse. Yeah. yeah ah Speaking of screen readers, for me, that was it still is a bit of a struggle in that I remember the first time I'm like, oh, I can just open up narrator on my computer and let's see what happens. And I'm like, oh, everything, is you know, like it's it's a very it's it's not this I'm trying to think the right way to describe it.
00:55:16
Speaker
You sort of have to dive right into it. Like there's not like this gentle path and just starting to use a screen reader. It just it starts doing its thing. And if you don't know how to use it, you sort of are stuck and you might not even be able to exit the screen reader. And it's just keeps talking to you. I'm just curious for people who are, you know, they might have their own personal site and they just want to test it out for fun. and Do you have any tips for people of zero experience? Well, the the quickest tip is if you want to make the stream reader just shut up for a second, just press the control. That's going to make it just stop, pause for a second.
00:55:47
Speaker
But as soon as you start and moving around, you you know, navigating through the website, it's it's going to start talking again. I still get stuck all the time as well. Even when I think that I finally, like, you know, i know what key keyboard combination to use. For some reason, sometimes it works and sometimes it doesn't. So I get just as frustrated still.
00:56:05
Speaker
um But to get started, something I did at home was I had all keyboard shortcuts for all screen readers printed on paper. I had them sitting next to me. So if I'm going to test using NVDA, there are certain things that you're almost always going to need gonna want to do.
00:56:19
Speaker
Like you want the, one of the things is you want the screen reader to start reading the page top to bottom just to see if it makes sense. If some, if you, if you close your eyes and you're just listening to the screen reader, does it make sense? The structure, the order, the elements, how are they announced?
00:56:32
Speaker
And then there are you're going to do things like navigate by landmarks. Does it make sense? Are all landmarks ex exposed? ah You're going to navigate using headings. Does the heading structure make sense? You will navigate using keyboard.
00:56:43
Speaker
You will check if you can use different elements. There's going to be a lot of manual testing involved, and there are specific keyboard shortcuts for these tests. Try to memorize them. The more you use a screen reader, the more you will eventually. It becomes muscle memory. For me, it hasn't yet.
00:56:58
Speaker
I'm on Mac OS. I've gotten used to VARSOver more, but I find and NVDA a to be the easiest to use. I don't know. It's the only one where I can navigate through the page and it just does what I expect it to do. i have an I have a VM. I have a virtual machine installed on macOS so that I can test on Windows because JAWS and NVDA are the most popular screen readers.
00:57:17
Speaker
Test in the most popular screen readers. And the WebAM surveys also help you get an idea if you absolutely have to choose specific browser and screen reader combinations if you can't test in all of them.
00:57:29
Speaker
and I don't think a lot of people can unless it's their job to do it. It helps you get an idea of which browsers and screen reader combinations to use. So there's NVDA with Firefox or NVDA with Chrome. ah JAWS is most often used with Chrome as well, sometimes with Firefox.
00:57:43
Speaker
VoiceOver works best with Safari. it is They are made for each other, but some users will also use VoiceOver with other browsers. But if you absolutely have to choose, I would say VoiceOver with Safari, Firefox with NVDA, and Chrome with JAWS.
00:57:56
Speaker
with jaws
00:58:01
Speaker
So far, we've been talking a lot about semantics, area, and other things, but I don't think we can get through ah a conversation with me without talking about CSS. And CSS does play a role in accessibility as well. Earlier on, I mentioned the the outline none that is still plaguing the internet somehow these days. But outside of like, say, contrast ratios, because you're setting inaccessible color combinations or doing something like an outline none, how else can CSS impact accessibility?
CSS's Role in Accessibility
00:58:29
Speaker
So CSS can affect the accessibility information of HTML that is exposed to screen readers. There are ah the simplest example and the most common example is the display property.
00:58:40
Speaker
If you set the display none, then you're removing the element completely. You're making it inaccessible to all users and the browser is not going to even include it in the accessibility tree. Just a short, ah I've mentioned the accessibility tree before. The accessibility tree is a structure that the browser creates from your HTML and CSS. All the HTML elements that you're using, this is a very simplified definition.
00:59:00
Speaker
So basically the browser goes through all the HTML elements on the page. It finds the ones that carry meaning and it also checks your CSS. it sees It's going to check how the CSS, like if you if an element is hidden using display none, then it's going to remove that element. It's not going to include it in the accessibility tree. And so it's not going to be exposed to assistive technologies There are other attributes that also affect accessibility. Some of them are are fairly new. They haven't been implemented yet. I think there is the interactive attribute and the interactivity property. ah It's not there yet.
00:59:28
Speaker
um Other parts of CSS also us affect accessibility in different ways, like pseudo content. You have the before, after, and the marker elements, the pseudo elements. You can add content to the page using CSS. The contents of pseudo elements contribute to the accessible name computation of an element.
00:59:46
Speaker
And that's why it's um it matters what you add via CSS. If you're adding images and these images are just decorative, these images might get end up being announced as part of the element's accessible name, which is weird. So you'll want to be able to hide them. And now we have this the slash syntax for the content property, which you can use to add alt text for ah for meaningful content.
01:00:08
Speaker
Though the recommendation is to avoid using CSS to add meaningful content and make sure that the meaningful content still belongs in HTML because CSS is not always going to load. And there are also other usability issues like ah CSS pseudo content is not searchable using find and page, if I'm not mistaken. It's also not selectable.
01:00:25
Speaker
So the rule thumb is keep meaningful content in HTML. And if you're adding to creative content using CSS, hide it by using the slash syntax. Make sure you do that. I have an article actually on that. I was working on it last week and then I got preoccupied. I was supposed to release it yesterday, but that's probably going to um end up being either later this year this week or next week, early next week.
01:00:46
Speaker
It's all about alt text for CSS generated content. And then we have some of the new CSS stuff like CSS carousels and I mentioned this the scroll target group property earlier. I wrote an article about this. I don't know if people are aware aware of it um already. So basically what this property does is it promotes a group of regular HTML anchor elements or links and into what is known as a scroll marker, which allows you to create effectively the bootstrap scroll spy effect.
01:01:14
Speaker
The Bootstrap Scrollspy effect is where you have a set, I'm going to give ah but the most basic example, is you have a set of links like a table of contents, a sticky table of contents on an article page. And as the user scrolls through the article, when you reach a section, the link to that section gets highlighted in the table of contents.
01:01:31
Speaker
So historically, we've had to use JavaScript to create this effect, to use something like intersection observer to find which section is currently in view and then find the link to that section and then add like a class name or something to it to use it in CSS as a styling hook.
01:01:45
Speaker
The scroll target proof for... scroll target group property and the CSS overflow module level five. Basically, the the main premise of this specification is to allow you to create things like scroll markers or the scrolls by effect using only CSS. And this is where it starts to get, where CSS starts to get more into, instead of just affecting the visual presentation of elements, it starts to implement functionality.
01:02:09
Speaker
So it's less so with a scroll target group because with scroll target group, the browser is going to determine which link is active. And that link, when the browser determines that it's active, it's going to match the target current pseudo selector. And then you can use that to highlight the link visually.
01:02:25
Speaker
But the thing is, when you highlight the link visually, you are conveying, you are communicating the state of the link that is currently active. You're providing visual affordances and you need to make sure that these visual affordances are also communicated to screen reader users.
01:02:38
Speaker
And how do you do that? You're going to need ARIA because a link by default, there is no HTML native way to indicate that a link is active. That's where you would turn to ARIA and ARIA provides an attribute called ARIA current. And when you use ARIA current on a link, it's going to be exposed to screen readers as the active link.
01:02:55
Speaker
But the browser is doing now, this is supposed to be a CSS only solution to creating this growth spy effect. Right now, the browser determines which link is active and you can style it using CSS, but it does not communicate that same information to stream meters. So the active link needs ARIA current on it. Right now, it's not added by the browser, which currently the only browser that supports this. It's an experimental feature and Chrome is the only one that supports it. I filed an issue and there's currently a work in progress patch. to hope So hopefully this will be resolved because if the browser doesn't add ARIA current for you, you're going to have to use JavaScript to add ARIA current. So you will eventually need to use JavaScript.
01:03:29
Speaker
This is one example where CSS is starting to affect more than just the visual presentation and more than just including or um excluding an element from the accessibility tree or accessible name computation.
01:03:41
Speaker
And then you have the other parts of the CSS overflow module, which you use the cs ah the scroll scroll marker group. So there's the scroll target group used to create used to promote HTML links into scroll markers. And then there's the scroll marker group property, which can be used to create scroll markers. So the first property is you have HTML elements and you're enhancing them into scroll markers using a couple of lines of CSS. But this the previous, the other parts of the specification, the browser is going to create elements for you. And so basically CSS is crossing the line from just being a visual presentation language into something that is creating functionality. I don't like that.
01:04:18
Speaker
This is a very personal opinion. I'm a proponent of the principle of separation of concerns. I think that CSS should do what CSS does. But if this is something that is going to be implemented eventually, there is going to be, you're not going to need to raise awareness.
01:04:31
Speaker
Because as far as I know, the last thing I learned about this is the browser is not going to do everything for you when you use CSS carousel properties. There are still things that you will need to do. So you will need to learn about accessibility. You will need to learn about the requirements for the interaction patterns that you're creating.
01:04:47
Speaker
So at the end of the day, you will need to understand HTML. You will need to understand the accessibility requirements. And then see, you can use the CSS feature or whatever feature, whichever feature it is. There are now also HTML primitives like the popover API. Mm-hmm.
01:05:03
Speaker
These primitives or these HTML features provide a specific set of features, right? And then you need to compare that set of features that is that is provided by the browser to the requirements of the pattern that you're creating.
01:05:15
Speaker
You have certain requirements. Do these features and primitives provide all of the necessary requirements or is there something that you will need to add on top of that? So the popover API, which is a completely different topic now, it provides certain functionality. There are some semantics that are also added when you use it.
01:05:33
Speaker
But if you're creating more complex pattern with ah patterns with it, you will most probably going have to add some semantics in ARIA to make it fully accessible. I forgot where we started.
01:05:43
Speaker
It's okay. Even the popover is a good point to get to just because I'm between using popover. I was doing something. I don't remember what it was. I wish I could. But it was, is it a popover? is it a modal?
01:05:56
Speaker
Which type of modal would it be if it is a modal? Is it like, and you're just sort of looking at all this going, oh my goodness, this is way more complicated than I thought it would be now that we have these native features that sort of are are supposed to be helping us and exposing these things for us.
01:06:11
Speaker
Once you understand what a feature does and doesn't do, the doesn't part is very important. It gets a little bit easier. So you can just have a list of, okay, this is what this feature does and this is what I need. And you you can just compare the two lists and see what you need to do.
01:06:27
Speaker
Yeah. when Going back to the the direction, I guess we could say CSS is sort of heading with you know adding the content like it's doing with the some of the carousel spec.
01:06:39
Speaker
I guess i have two questions there, because I know that from from secondhand information, because I haven't read everything on it, but from what I understand, the level two spec there actually sounds... That's where you'll be able to connect things. Like you say, you build out all of the elements yourself, and then you can make the connections between them yourself.
01:07:00
Speaker
which to me sounds like maybe it should have been the original implementation or they should have waited or i like i guess i'm do you think on some things maybe they're they're rushing like let's get the level one because obviously i know the browsers tend to work that way is let's make the easier to implement one and then we add the complexity in a level two or you know they did that with grid going or not yeah grid with subgrid and we've seen a few cases of that do you think part of it especially with the speed of css are they just trying to add more stuff a little too quickly or is it do you think that's a little bit not even the issue it's more about that idea that we shouldn't be even impacting the you know we're we're entering css into this new realm that maybe it wasn't originally cut out for
01:07:44
Speaker
strong opinion about entering CSS into this realm that it wasn't originally made for because things on the web change, things evolve, and sometimes it can be for the better. So I'm i'm not a person who's... I do love the principle of separation separation of concerns, but some changes can be good.
01:07:58
Speaker
But with um with respect to the CSS carousels a module, I haven't heard of what you just said. Like, I'm not sure
01:08:08
Speaker
I do think it moved way too fast. do I don't have any like insider information or anything, but I suspect that if this was tested, if they had real assistive technology users test this, they would probably maybe not have implemented it the way they have implemented it at the moment. So I feel like it needs a lot more review, a lot more discussion. i think it did move really fast. And I don't know, it was it was just came out out of nowhere, for me at least, because one minute there was no CSS Carousels thing, and then the other minute there was the CSS Carousels gallery and this new specification and was already implemented in Chrome, and I hadn't heard of it before. Few people in the accessibility community had heard of it.
01:08:51
Speaker
Most but that I know hadn't. Yeah, I think it was a little hasty. think part of it, what's been happening anyway, at least with some of the things that are Chrome only right now, is Chrome's proposing something and they're prototyping it at the same time, which makes sense because it's a nice.
01:09:09
Speaker
It's nice that when you have a proposal, it's nice to be able to play around with it in a browser. But the problem is then it's going from canary behind a flag to somehow being in production really quickly, even though it's still just a proposal.
01:09:21
Speaker
yeah then it feels like we should be using it because it's now in the production version. and I'm just like, oh, that went really fast. And why why can't it just stay behind a flag for a while or just keep it in Canary and don't, like I guess they have their own ways of working. I don't know. I'm not involved in that. But sometimes I'm just leave it in Canary without...
01:09:37
Speaker
the flag who cares no one's using that except developers anyway and then at least it exposes it to because i think you know in them putting it out it has raised concerns about how it's done so we'll see what happens with the spec moving forward um on that front um and with that though i'm i am curious at your thoughts because i think a lot of interactive elements in general are really badly done from an accessibility point of view Do you think there's benefit to, say, a carousel like this that is, say, good but not great? Or i will i don't, maybe, depending on how you feel about it, but let's say it was good and not great.
01:10:18
Speaker
Is that better to have than people rolling their own solutions that tend to be worse? Or is it something that because it is part of the spec that it's either it should be perfect or not done?
01:10:32
Speaker
I think if the browser is going to do it for us, it should do it right. I shouldn't need to do anything on top of what the browser already does, but that's not the case. The last information that I had about this proposal is that even when it's done, there are still things that you as a developer will need to be aware of and that you will need to add in your HTML to ensure that it is fully accessible because there are certain parts of this that the browser is not going to do for you. Is it better than developers implementing their own not great version of these components?
01:11:00
Speaker
The only benefit for me personally is if the browser is going to do something so that I have to write less JavaScript, the less JavaScript I need to write, that's great. But personally, I would prefer if that happened in HTML instead of CSS.
01:11:15
Speaker
So instead of using CSS to create these tabs and not all components exist, Semantics of tabs are very specific. They can be used. There has been a discussion in the accessibility community. You could technically and even theoretically create a carousel using tabs semantics because there are some similarities between these two patterns.
01:11:37
Speaker
But what if a developer uses this feature for something completely different? They find a different use case. They create a different interaction pattern. That interaction pattern exposes the semantics of tabs, but it's not really a tabs component and it's not even a slider component.
01:11:50
Speaker
What happens there? um Another thing is this is, this is actually, this is the problem because if the browser is going to do this thing for them and it's going to expose certain semantics and the user, by user, I mean the developer, and the developer is not really aware of what's happening behind the hood.
01:12:04
Speaker
All they see is I use this property and it creates, it generates, it magically generates these dots and tabs. That's all, that's enough. If they don't know what's happening in the background, they can end up misusing it. And that's my primary concern. So I think that nothing is a substitute for proper learning. Developers need to understand HTML.
01:12:23
Speaker
They need to understand semantics, what's being exposed, what's not. They need to make it a habit to open the browser dev tools, get the accessibility tree, see what exactly is being exposed to screen readers and does it make sense or not.
01:12:35
Speaker
You have this component on screen. Check out how is it exposed. is the somatic Are the semantics exposed descriptive of the pattern that you're creating or are they completely separate, different?
01:12:47
Speaker
i um I personally prefer if browsers worked with the open UI to create a tabs or a carousel component in HTML. And that component would come would come with semantics built in. It come with would would come with interactions built in. Just like we have now a disclosure widget, the menu element is being worked on, which allows us to create action menus, which is very different from navigation menus, navigation menus, navigations,
01:13:13
Speaker
There was a discussion, tabs and carousels were part of a discussion, but they're not, they're inactive at the moment because there are other things taking priority. So yeah, that's where my preference is. I would prefer if we did get these things for free, but in HTML where they belong. So we still have that separation of concerns.
01:13:30
Speaker
And when you do that, when people When developers learn HTML, they will learn about what comes with this feature and what doesn't come with it and how it works behind the scenes. But you've moved the semantics up a layer into CSS. And when I last checked the specification, the specification didn't even talk about accessibility and how these elements... You're using CSS to generate elements. What are these elements mapped to? And these mappings are going to determine...
01:13:57
Speaker
the suitable places or interaction patterns to use these elements in. That makes sense. Yeah, I had heard about that they were working on something for Carousels quite a while ago, and I was expecting it to be an HTML thing first thing. And when it was all CSS, I was quite surprised when it, because like you said, it just sort of happened all of a sudden. i was like, oh, okay, that's interesting. And I actually, I haven't done much with it at all. And your post on them was one of the in-depth things that have given me some hesitation to diving deeper into it. But at one point I will have to play with them, I think, just to see what's happening.
01:14:32
Speaker
What I found frustrating is when you create the studio elements, when these dots are created, you you you can't really see them. They're not there. You're going to have to use anchor positioning and crawl snap to get the visual effect that you want. And you have to use anchor positioning. So you need to be aware. you need to be comfortable using all those features.
01:14:50
Speaker
I'm not very comfortable personally using CSS crawl snap. I've never really used it So i'm going to have to learn that too in order to create the CSS carousel the way I would want it to. So like I said, when CSS, if CSS curcels do make it into production in all browsers at some point, there will be some learning that needs to be done. There will be CSS learning, there will be HTML accessibility, and there will probably eventually be work that the developer will need to do to make them fully usable.
01:15:19
Speaker
That's a nice segue into something I want to talk to you a bit about because you mentioned you haven't really used scroll snapping. And like I said, from the very beginning, I learned ah you when I first found you online, a lot of your content was SVGs, but you also had CSS content before transitioning to do a lot of accessibilities. But the other day you mentioned how CSS has changed so much over the years and you were asking other people if they were able to keep up. I'm curious if you've been able to keep up with everything that's going on? I've been able to keep up knowing what's coming, but not learning or using it. And to be honest, a lot of the new features are, I don't have any use cases for them in my day-to-day work.
01:15:59
Speaker
So when it comes to layout, CSS Grid, Flexbox, these things, yes, absolutely. The has selector is where things that you will use and base style sheets and stuff like that. ah Basically anything related to CSS architecture and layout. and These are things that are very practical and things that I would use every day.
01:16:17
Speaker
My favorite, absolute favorite CSS additions are all the new properties and ah the syntax, like the slash syntax for the content property, everything that makes it possible for us to improve the usability of interfaces. um That's my sweet spot there, the sweet spot between accessibility and CSS. That's where where I love live.
01:16:36
Speaker
um I don't use most of the features. i haven't used scroll snapping yet. i haven't used scrolling the animations yet. I've only recently added transitions to the to my website, view transitions, geometry, complex calc functions. A few years ago, when I moved my website from Jekyll to Eleventy, I wrote some CSS back then.
01:16:58
Speaker
I was reading that CSS a couple of days ago. I don't know what I was doing. I literally don't understand what I wrote a few years ago. And that's not the CSS I want to write. I don't care if something is just a one-liner.
01:17:10
Speaker
i don't care if it's if it looks really smart when you look at it. If I can't read it one or two years later, i' i'm I'm probably not going to use it. And I'm currently not working on on any projects with Teams. So I have the freedom to choose what I use and what I don't use. And I will most likely be using primitive CSS more than all the fancy new features um like geometric functions, sine and cosine calculations. All of these are completely not interested.
01:17:42
Speaker
interested in in them but not in using them myself because i every time i see them used i'm just like i know i'm not going to understand exactly what's happening here but i'm always impressed when people are able to use them to do cool things yeah because i'm yeah i'm i was talking with amit sheen the other day and he was showing me some stuff he's doing with them and i'm just like that's cool i'm so overwhelmed just trying to understand what it is but i'm glad that it does but i do think that as much One of the things I like with CSS today is like it does feel like um like it is getting more complicated in a sense, but you don't need to use any of that extra stuff if you don't have a need for it. like For a beginner learning it now, it might seem like a much bigger undertaking than when we started with it.
01:18:32
Speaker
I think, and in a sense, they I know they're adding CSS4 and CSS5. And part of the reason for that idea, from what I understand, is to sort of say, like, learn, you know well, CSS3 is sort of the foundational parts. And then these other ones are sort of additions on top that you won't need at the beginning.
01:18:48
Speaker
And I think it's nice that a lot of new things are becoming easier. Like even some of the things like interpolate size for for some simple... Yeah, yeah. Like these little things that are just like, i didn't know I needed that, but I'm so glad we have it now. or Well, that one I knew we needed. But there's other examples of like small things that are even some like the scroll driven animations. You might never need it, but you might come across a project where you go, oh, thank God they have that because it's so much easier than it would have been without them.
01:19:17
Speaker
And the best parts are the ones that we can add as an enhancement. Yes. You don't need to wait for cross-processing support for those. Yeah. um I'm curious if there's any features that don't exist that you wish did exist.
01:19:30
Speaker
The only thing that I would, like if i if someone asked me what I want, I would want more interoperability and better support for existing things. HTML and CSS, both at the same time. So Jen Simmons, I think, asked a while ago on Mastodon, like if there's one thing that you would like Safari to support this year. Yes, saw that, yeah.
01:19:51
Speaker
My request was um content property support on the marker pseudo element, because right now Safari is the only browser that doesn't allow you to change the marker using the content property. It's stuff like that. So it's very small things, useful things that you actually use in your day-to-day projects, but it doesn't work in all browsers yet.
01:20:09
Speaker
I would rather browsers spend more time on ensuring interoperability of existing features before they moved on to new features.
AI's Impact on Accessibility and Developer Roles
01:20:15
Speaker
Yeah, definitely. And I think we're seeing that more, especially with the interop.
01:20:19
Speaker
and Actually, you could submit that now, maybe. I think the submissions are open for interop 2026 right now. 2026. Yeah. um So at least we have something. But again, they only only focus on a subset of things. and So there's always some that go by the wayside. And sometimes it's those little ones that we wish we had because it seems simple enough and it's silly that it's not there.
01:20:41
Speaker
So I don't want to steer too far off of CSS, but one one thing I do have to ask, because it's impacting everybody right now, is ah ai and I don't even want to worry too much about your thoughts in general. There's I have thoughts. I think everybody has thoughts on it as just a product in the world.
01:20:59
Speaker
But just in terms of accessibility, I'm very curious what your experience has been because I've dabbled with it. I do it more for testing and I do it with CSS, too. Like a new model comes out and like, is it actually going to be able to do anything?
01:21:12
Speaker
And anytime I or not anytime, most of the time, if I ask it to write HTML for something, it's just div soup. And then if I ask it to make it accessible, it does a little bit like we were talking about earlier, where all of a sudden there's area roles all over the place that are conflicting with the semantic elements it's put on there.
01:21:28
Speaker
um i haven't done any testing recently, so maybe there's a model that's better at it. um But I'm just curious if you've had any experience with it and better or worse than mine. ah Not personally. i've I've only experimented with it just to see how good it was. That was, I think, a year or so ago. And i mostly rely on other people's experiences, accessibility professionals testing AI.
01:21:51
Speaker
The last thing I read was that AI is getting better at describing the contents of images. But even if it does, um you you will still need to check that the description actually actually matches what you're trying to convey with communicate with the image, because the contents of the image can be described. Like you you can see a dog and there it can say it it will tell you that there's a dog, but maybe it's not the dog that you want to focus on. Maybe it's something specific about the dog.
01:22:15
Speaker
that you can have a portrait. Why are you showing this portrait? Are you just talking about different kinds of typography or is it the person or what they're wearing? um You will eventually you need to do the double checking yourself to make sure that the what AI is generating is actually useful.
01:22:30
Speaker
and There is also something I wish more people kept in mind is AI, artificial intelligence is not intelligent. It's not, it's not, you're not really talking to it someone carrying a PhD someone who is smarter than you.
01:22:46
Speaker
It is indexing content, I think. i'mm like I'm not even interested in the technical parts of that. Basically, it just, it's just collecting whatever it finds on the internet and then it's giving it to you in a different way. And because there's a lot of misinformation, accessibility misinformation on the web, it's It's not doing much better.
01:23:03
Speaker
um i don't rely on it. I don't use it. um I do ask chat GPT questions sometimes when it comes to vocabulary. So I use it as a dictionary. If I can't find the exact word that I want when I use DuckDuckGo, I'll just ask chat GPT because it's able to come so pick the exact word or give me a few options for words.
01:23:22
Speaker
So it's just a language assistant in that sense um that I sometimes use. But I don't use AI for other things. I know... this This is controversial. And if you use AI, you're going to be more productive, blah, blah, blah. But i I enjoy the process. First of all, I'm much faster building something myself if I know how to build it, like writing HTML and CSS. I'm much faster doing it myself than having to prompt AI and then fix their mistakes and tell it, no, don't do that. Do that.
01:23:47
Speaker
I hate that. That's why I've never used CSS frameworks because I've always been faster writing my own CSS instead of having to clean up all the stuff that CSS frameworks added. um Yeah, I'm not a huge AI fan. In terms of accessibility, you have automated accessibility testing tools. They will be able to help you do some things faster, but they're not going to be able to replace you, especially when it comes to accessibility, at least not yet. And I don't know if that's going to change in the future. I think it's going to take a lot of time before that happens, if it happens.
01:24:16
Speaker
Yeah, I think accessibility in particular is something that struggles with, like you said, there because there's so much bad information. And what it's scraping from, I think, a lot of the time, it's looking at just examples that are out there, like you said. So it doesn't it doesn't go in and look at the WCAG to figure out what it's supposed to be doing. It just goes, oh, here's something that seems to be using semantic elements. That must be the right way to do it. Yeah.
01:24:43
Speaker
and does it no yeah i and i agree with you they the i'm not in terms of productivity it's the most frustrating thing in the world and i think i was reading something the other day about because the it's i was surprised it's the someone with one of the high ups at aws saying that any company that's replacing junior engineers with it is making a mistake because you need someone who can you need the Right now, maybe it can. And even then, I don't think it can. But say it could even do the job of a junior. If it can't do the job of a senior, who's going to be your senior in five years when you have no juniors that are working on these skills and getting better at things? And yeah, yeah I'm curious on what the impact is going to be going forward. But I've already seen on LinkedIn, there's like jobs. I don't remember how they called it, but it was someone posted on Blue Sky. It was like 20 different people that had this role. Clean up? Yeah, AI clean up engineer or something like that. right It's just like fixing the problems of AI. Yeah.
01:25:35
Speaker
Shifting gears again, we talked a little bit about it. You have your course, Practical Accessibility, which again, very happy to recommend it. But ah more of a personal standpoint than like the content itself, because I've made several courses over the
Developing an Accessibility Course
01:25:50
Speaker
years.
01:25:50
Speaker
I'm curious what your experience in creating a course of that. It was a pretty big course. And what the like... How it went and the process of doing it all was. but You already mentioned that the reason you created it is you wanted it you wanted to create something that you wish you had when you first were trying to learn about all this, that guided path that you were talking about. Yes, there's also a little bit more background to that if you would like So when I decided to create the course, COVID had just hit. I think it was that year or the year before.
01:26:21
Speaker
ah Before COVID hit, I was running workshops on accessibility at events and conferences online ah over the world, basically at in-person events. And I'm not really a fan of running workshops online.
01:26:33
Speaker
That is slightly changing. I have plans for 2026 that I haven't announced yet, but hopefully I will in next month. I'm not a fan of running workshops online. i think someone did ask me if I could run the same workshop that I was running at the conference, but run it online. I didn't want to do that. And, you know, the internet connection in Lebanon is not really that great.
01:26:52
Speaker
um And there are, it's just different. In-person is much better. i prefer it. i prefer in-person events. But I had all of this content from the workshop and I had all of this accumulated knowledge over the years and ah I wasn't sure what to do with it. And what's good what good is knowledge if you have it and you don't do something good with it or if you don't share it with people? Because when you share it, it multiplies and people learn more and they experiment more and they create something better than what you have.
01:27:18
Speaker
um So i I knew that I wanted to do something with the content that I had. ah The first thing that I thought of is um maybe I could write a series series of articles. So basically turn the workshop content into a series of articles. But that brings me back to what I mentioned earlier about not having a structured curriculum.
01:27:34
Speaker
If I have a bunch of blog posts on the blog and someone wants to learn about accessibility, how do they know where to start or which article to move from? I wanted something a little bit more structured. And that's what got me thinking about um turning it into Basically recording the workshop itself as it was exactly, but recording it at home and then making the videos available on demand.
01:27:56
Speaker
But as soon as I started turning the workshop, you know, I wanted to review the content to make sure that it's not missing something. And I thought the workshop, but I thought, I think I made the announcement in May or June or something. I thought that the course was going to be ah ah was going to be ready in like two or three months.
01:28:16
Speaker
Boy, was I mistaken. I'm really glad that the first video, the announcement video, I was going to mention that the course is going to be available this summer. I'm so glad I never did that.
01:28:27
Speaker
It took me a year and a half or two years, a little less than two years to finish the course. ah The main reason is that I did everything on my um i own. I built the course website. It's a custom platform.
01:28:38
Speaker
I did everything myself, all the research. I had a couple of friends. had Scott O'Hara and Adrian Nozzoli. Thank you so much for both of them for reviewing the content of the chapters. I also did hire someone to work on the back end of the website because I'm not a back end developer.
01:28:53
Speaker
But everything else, everything I did myself, including designing. I'm using air codes here because I'm not a designer yet. So I did the entire website. I did the platform, ah the content, video recording, video editing. I learned so much. I underestimated the effort and the time required to create a course, but now I know better.
01:29:14
Speaker
So for my next course, I'm going to announce it at a proper time and I'm going to make sure that I set expectations straight. People have been incredibly ah supportive. I mean, I was really being hard on myself and that's why I burnt out while I was working on the course.
01:29:27
Speaker
Because all the time I had this pressure on myself. You told people that it's going to be ready and whatever by the end of the year. You know, I never really gave a specific deadline, but I had this deadline in my mind all the time.
Homemade Foods and Health
01:29:39
Speaker
I burnt out and I pushed through burnout for an entire year. And then a week before I published the course, Things started changing in the region here and the situation got worse and the burnout got worse. And ah yeah, but ah this course is one of my absolute favorite things that I've worked on. I've learned so much working on it. Yeah, I'm very proud of it.
01:30:04
Speaker
Yeah, i'm i'm I'm impressed that you're planning another one because I know for a lot of people, they're like, oh, my goodness, I'm never doing that again. It was way too much. I still I still haven't learned my own lesson about I always think I can do one in like six months and then it never, never happens. The one thing I did learn is the first time I did it, I did give a release date. And then on the website, I had to keep changing the release date to like six months later.
01:30:27
Speaker
And so I don't do that anymore. I'm not announcing it until I'm like 95% done. And then I'll give a like, it once I'm just doing the finishing touches, then I'll be like, okay, in two months, I'm releasing this. Yeah.
01:30:37
Speaker
Yeah. That sounds like a good plan. On a completely another shift of topic now, but just before I let you go, just wanted to bring up a while ago, i posted a picture of some sourdough bread that I'd made.
01:30:48
Speaker
i think that was back when we were both still using Twitter. So it was a while ago. um ah And you'd mentioned that you've never made your, at that time, you hadn't made your own bread, but you were making almost everything you eat, which included mayonnaise and a few other things. As someone who gets into lots of like weird hobbies and stuff, I sort of get it. But i'm I am curious For me, bread making is a lot easier than making my own mayo. I don't know. I still haven't tried. Whoa, really? Maybe it's just a preconception I have.
01:31:18
Speaker
um But I'm curious how you got into... I like i like making stuff. I've done sourdough. At one point, I was making kombucha. I make my own beer. i just like learning about the process as much as anything. Fermentation. Lots of fermentation. oh Yes, I'm definitely into fermentation in general. Yeah.
01:31:34
Speaker
Um, but it does always make me wonder how people get into sort of the hobbies or what, I guess for some people, it's not always a hobby, but I think, you know, just with, with food in general, it's an interesting thing. I like cooking and stuff too. So I'm curious how you got into going so far as making your own mayonnaise.
01:31:51
Speaker
It's very easy. It literally takes less than five minutes to make. okay Yes, it's really... How it started, I'm not really sure how it started, but I'm a health nut. And I'm very much into nutrition and health and gut health and brain health. And usually when I have discussions with people about these topics, almost every single time someone asks me if I'm a nutritionist or if I'm a nurse.
01:32:12
Speaker
And then when I tell them that I work in web development, the last reaction I got was, how is that related? And I'm like, it's not, it's just something i have a hobby. I read a lot of books about these topics.
01:32:25
Speaker
The more you learn about what's good for you and what's not good for you. And I try to look for healthy substitutes for things that I've been eating my entire life. I've stopped eating most sugar.
01:32:36
Speaker
i used to be an addict. I used to be a chocolate addict. I could not possibly go a single day without eating chocolate. Now i rarely have any chocolate.
Cooking and Nutrition Passion
01:32:44
Speaker
just i I just don't feel like i need to have chocolate anymore.
01:32:47
Speaker
Once you start to balance the sugar in your blood, everything changes. And with mayonnaise, it was mainly because of the oils used in the mayonnaise that they make. And also, there were some things related. that This is actually related related it ridiculous. It's because of weight gain and stuff like that. But it was mainly the healthy part.
01:33:06
Speaker
And I looked up the recipe. My mother always made mayonnaise at home, but I never really asked her how she did it. And eventually, I asked her. She said, it's just, you know, eggs and um some oil. i I ended up changing the oil that I used and, you know, a few, like a mustard and stuff like that. So I decided to give it a try.
01:33:23
Speaker
ah used to not like making mayonnaise before because the way my parents used to make it is they would have this blender. you would have the eggs and you add the, but the oil was added like a tiny bit at a time. They would literally stand on top of the blender and drops of oil. It would be just like a tiny line of oil.
01:33:43
Speaker
And that would take some time. And I always that us a thought, you know, it's not worth it. But then i someone taught me that it's you don't really have to do it that way. If you have a hand blender, a good have hand blender, just make sure that the container is the same size of as the blender. So when you put the blender inside the container, there's not a lot of space between the blender and the between the blender and the walls of the container.
01:34:05
Speaker
You just put all the ingredients there, including the oil, all of it. um That takes like two minutes. um You just put the blender, turn it on, don't move it.
01:34:16
Speaker
And you're going to start so seeing the mayonnaise get thick thick, thick, thick, thick. And at some point it's just mayonnaise. And then you put it in the fridge and it gets thicker and it tastes... I'm drooling. It tastes so good. I love to add garlic to mine. And the secret ingredient is onions.
01:34:32
Speaker
So I have both garlics and onions in that. It tastes really, really good. I eat it with everything, with eggs and with meat and with... um I love it.
01:34:43
Speaker
I haven't made some in a while. And they you the the I started making it with olive oil. So 100% natural, organic um and fresh. But olive oil has this, I don't know pognent is the word for it. It has a very strong taste.
01:34:58
Speaker
And you can you can taste that. And that's what I didn't like about it. So I eventually started switching to avocado oil. Avocado oil is very light and you don't yeah you can't taste the avocado oil.
01:35:09
Speaker
So what you end up tasting is just garlic and all the really nice th ah spices that you've added to it. It's very easy, but i I can't imagine myself making sourdough bread.
01:35:22
Speaker
I have never tried. I've never tried yet. So I should try it. It's definitely more involved. I wouldn't. ah t Yeah, I got I was doing well, I still do like regular bread as well, just with like the yeast. If you I would say start there because sourdough is definitely it takes a while to get, you know, it's multi day process. So I will um I will have to try and make my own mayo now and I'll report back to let you know how it goes because it does sound pretty easy.
01:35:49
Speaker
OK, let me know if you need a recipe or something. I will probably ask for one. Yes. Is there any other sort of food or things that you enjoy making?
01:35:59
Speaker
i mean, you said it's you're into like nutrition and like just trying to eat healthy and everything. But is there something that like you look forward to making versus just you're trying just to be yes healthy? Yes, well, it is it happens to be a very healthy meal and it's also very easy to make. It's called fette in Lebanese. I don't know if you've heard of it. It's ah the three main ingredients. is It's protein packed.
01:36:20
Speaker
So there's chickpeas. There is a meat of your choice. I usually use chicken and yogurt. It could be Greek yogurt or regular yogurt. So that's protein, protein, protein and lots of fiber.
01:36:31
Speaker
um With a yogurt, you... People are going to make it a little bit different when it comes to what they include in it. ah For example, for me, it's just ah chicken. You make that chicken. I usually make it in the air fryer. I have the chickpeas ready. I just add the chicken on top of the chickpeas and then I add the yogurt with some tahini and garlic. I add garlic to almost everything. I love garlic.
01:36:51
Speaker
um And then you add some fried bread. I don't know if you're familiar with fettouche, which is the Lebanese salad where you add. Yeah, it's the technically the same bread, but I also make it ah healthier version. I just spray some avocado oil and put it in an air fryer. Instead of deep frying the bread, I air fry it.
01:37:09
Speaker
This is my favorite meal of all time. It is packed with protein, easy to make, takes almost 30 minutes, you know, with the the time that you spend using the air fryer and stuff.
01:37:21
Speaker
That's my favorite meal. My favorite ah food used to be pizza. I still love pizza, but I don't eat it as much anymore because white flour give them gives me gut problems. White flour is not really healthy flour because they remove them everything that's healthy and ah nutritious about the wheat. They take that away and you're left with not that much nutrition anymore.
01:37:43
Speaker
So if I'm going to make pizza, I'm going to have to learn how to make bread and how to someday, someday I'll try that. Pizza dough pretty straightforward. We cheat a lot at home where we'll just put like a pita bread or like um anything, like a wrap, something, just stick it in the oven with some pizza sauce.
01:38:01
Speaker
And my older son always gets mad at me He's like, why didn't you make your make some dough? And I'm like, because it takes a while. I don't have time today to make dough, but it is much better. um but it's awesome Do you have, sorry.
01:38:13
Speaker
Do you have a specific pizza specific or special pizza oven that you use or do you use the? I just use, I got like one of those, like a pizza stone thing, I think they're called, but you don't even need one. But it's just like a circle ceramic dish. So it like it goes on instead of a baking tray.
01:38:30
Speaker
Okay, okay. I think it's similar to what people use here to bread. bre Okay, yeah. So it just holds the heat well while it's sitting on it. And it, yeah, i just it's high temperature, especially for pizza dough. It's just at a high temperature, but it works fine in the oven.
01:38:45
Speaker
i've I think it's better if you can get a really hot, like special thing for it. An uni oven. I would love to get an uni. Have you heard of them? You know them, right? I would love to get one. I recommended that to a friend once and he got it. And it he said it's one of the best things that he has bought.
01:39:00
Speaker
That's awesome. If I'm going to make pizza, I'm definitely going to need an uni oven. Yeah, you can you can do it without one. Yeah, I know. But it's just anything to make the process more enjoyable.
01:39:12
Speaker
Yes. Yeah, I understand that. Yeah, I've taken a ton of your time. So I really, really appreciate everything. It was a blast chatting with you and learning about everything that we talked about. So thank you very much. I'm going to put links for anybody who's listening. I'll put links to everything that we've talked about down in the description. And definitely, if you're interested in accessibility, make sure to check out Sarah's course, Practical Accessibility. Is there an in just in general, is there anywhere else people can follow you? Yes, Blue Sky, Mastodon, currently on LinkedIn. And I never thought I would say this, but I'm actually liking it there. And then there's my newsletter. So all of the updates that I usually typically post. it Basically, if you want to stay up to date with professional stuff, any new content, articles, podcasts, workshops, upcoming workshops, content. I don't like getting people to subscribe to my newsletter for discounts, but I do also share exclusive discounts for the course and future products in my newsletter.
01:40:04
Speaker
But if you're going subscribe, subscribe for the useful content. I post useful content there. i've I've actually just started um posting regularly. I started last week and I'm planning on doing it regularly. um i have an issue coming out hopefully next week.
01:40:18
Speaker
and So yeah, newsletter, LinkedIn, Blue Sky and Mastodon. i'm I'm also available on X, but I'm not as active there anymore because the platform is not the same as I used to be before.
01:40:29
Speaker
um i have... 118,000 followers, I think, over there. And when I post something, it reaches only about 6,000 people. So the algorithm sucks. There's no more connection happening there. Community has mostly moved either to Macedon or to Blue Sky.
01:40:44
Speaker
um That's where most of us are hanging um most of the time. Awesome. So thank you very much once again. I really appreciate it. It's a pleasure. Thank you for having me. And that's it for this week. As I mentioned, there's a whole bunch of links and descriptions down in the show notes. So go follow Sarah, sign up for her newsletter and all of that. And yeah, with that, I really hope that you enjoyed this as much as I had ah in chatting with her.
01:41:07
Speaker
Thank you so much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.