 Hi, welcome to Designing in the Browser. Today, we're diving into accessible media as we continue our series on accessible interfaces. With images and media being such an important part of information sharing on the web, it's important to know when you should be applying accessibility features to graphics and how to make sure the content in your media is accessible to all. The first thing to consider when it comes to media accessibility is purpose. What is the point of this media? Where is its utility? Often, injected media is an important part of your webpage experience, providing critical information or clues that builds upon your story or user experience. This is meaningful data and thus meaningful media. Occasionally, we'll have additional decorative elements that are not a core part of the website's content. These elements could be things like decorative borders, which could be an image behind a card or illustrations that don't add increased meaning or even an SVG animation of a title. If you have decorative media rather than meaningful media, you may not need to give that media attributes to make sure it's screen reader accessible. In fact, adding these attributes could be cluttering the page. Keep the alt tag available, but leave the contents of it empty. And this is really important because you don't wanna have decorative elements like borders and other things adding clutter to screen reader users. But when you do have meaningful media, it's important to have some descriptor for screen readers and even for search engines to get a better understanding of your content. Even though alt attributes have been around for 25 years, according to studies done for the 2019 web Almanac, 49.9% of pages still fail to provide alt attributes for some of their images and 8.7% of pages never use any alt attributes at all. And that's a lot of missing information. So if you have an image-heavy site or have any meaningful media for that matter, make sure you provide an equally meaningful description. Here we see a page with an image and a caption or paragraph that says, I love my boy with a heart emoji, a heart eyes emoji. Now this paragraph, I love my boy, doesn't really make any sense if this image is something that doesn't get loaded to the page or if a user is unable to visually see the image. And that's where it's important to have descriptive alt tags. So here the alt tag is fluffy white and red golden doodle chewing on a big stick in the grass. This gives some context to this paragraph of I love my boy. It gives context for what it's referring to. And it also isn't just a generic descriptor of dog because dog isn't a great label for this image. What you should be describing is what exactly is that type of dog? What context is the dog in? What mood or what action is happening here? So having something more descriptive than the general dog is important. And that's why I described what we're seeing, the location, that's the grass, and then tried to also describe the action. So chewing on this big stick. And so it's important to have this context for the rest of your page to make sense in this case. Again, it really depends on the context of the page because if this image was included within an article and this level of description was infused within the text of that article, you wouldn't need so much detail for an alt attribute. And you might not need an alt attribute at all. In this example here, we have this paragraph that's describing some content and an image next to it. And this paragraph is describing this fun weekend where Disco was really enjoying the big grassy fields and had sticks to chew on. And so now when I write the alt tab to describe the image, I'm writing it in context to what the rest of the page is saying. So here the alt tab becomes a photo of Disco from this weekend in the grass chewing on a big stick. So this also assumes that there might be more descriptive photos of Disco throughout the site and maybe readers would already have a sense for the physical description of this dog. But it's an example of where we're keeping in mind the content of the page. And this relevant piece of content, which is the visual image on this page, gets an alt tag that is relative to the rest of the text content on this webpage. You may even wanna show a caption like this to your non-screen reader audience or include a caption with a link or other relevant information. The figure element and fig caption are perfect for this. Now in this example, we're using figure and fig caption within figure to showcase this caption that describes the image and gives it context in this page. So this says photo of Disco from this weekend and the descriptive text on the page is describing the weekend and these big grassy fields and how much fun he's having. But we're also using an alt tag that says fluffy red and white golden doodle chewing on a stick in the grass. This alt tag is describing the image while the fig caption is giving context to the image. So you can use this in a couple of ways. Figure works not just with images but also with other types of media and even with charts and graphics or videos. It's especially important to describe these charts and graphics so that the information is clear for your users in the alt text or in the caption. The main thing here is, does the information you're presenting make sense whether or not the visual image is there and does it fit in with the context that you're providing? Speaking of other types of media, when you're working with video or audio content try to provide captions. This way there are multiple ways to understand this content and internalize it. Sometimes in reading a blog post I prefer to have it in audio form and sometimes when I'm watching a video I'm unable to listen to the sound so I'll turn on captioning. Actually prefer closed captioning when watching videos in general. You can use the Q pseudo element to style these time captions in media with a limited set of CSS properties and those include background, color, font, line height, opacity, outline, Ruby position, text combine upright, text decoration, text shadow, visibility and white space. There are also a few experimental CSS properties that even target these accessibility features in audio. These include voice family, richness, cue after, volume and much more. They let you adjust the playback voice based on the vibe you wanna portray for your site. It's truly amazing how many ways you can use CSS to style your website and how exciting the future of web styling looks to be. I hope you enjoyed today's short episode about making media more accessible. Remember when you make the experience more accessible to some you make it better for all and to continue your accessibility journey make sure to tune into the last episode in the series all about accessible animation. I'll see you there.