Podcast E566 – 5 Ways to Make Websites Accessible  ## Metadata - Author: [[Podcast – Kitchen Sink WordPress]] - Full Title: Podcast E566 – 5 Ways to Make Websites Accessible - Category: #podcasts - URL: https://share.snipd.com/episode/a829c4db-214f-4254-9fd2-ad153f40340d ## Document Notes ## Highlights - **Semantic HTML and Proper Structure** - Use semantic HTML5 like `<header>`, `<nav>`, `<main>`, `<article>`, and `<footer>` for better site structure. - Ensure headings (H1-H6) are in logical, hierarchical order; avoid skipping levels for screen reader clarity. Transcript: Adam Silver So starting with number one, semantic HTML and proper structure. Now what this means and why it matters? Well, it means it's the meaning to the web content. It ensures assistive technologies like screen readers can interpret the site correctly. The best practices here are using HTML5 elements like header, nav, main, article, footer to structure the site. Also, ensuring headings are used logical and hierarchical order, H1 through H6, and avoid skipping the heading levels because it will and can confuse screen readers and the users Who are visiting the website. ([Time 0:02:23](https://share.snipd.com/snip/f60f1ff1-0faa-48f8-a6dd-775c34e9dfde)) - **Keyboard Navigation** - Make all interactive elements (links, buttons, forms) keyboard-accessible using the tab key. - Utilize ARIA roles (Accessible Rich Internet Applications) cautiously and accurately for complex website components like dropdown menus. Transcript: Adam Silver Okay, that's number one. Number two, keyboard navigation. Now, why it matters? Well, some users rely on keyboards or assistive technologies to navigate the website versus, you know, a mouse. You know, I personally use an expert mouse trackball. It's crazy old. It's just what I've been using forever. But some people can't use a mouse, so they use a keyboard instead. And the best practices here are to ensure all interactive elements, links, buttons, forms are focusable, reachable by using the tab key. That's a big one. And I didn't't realize that's so important, but it is. Also use ARIA, which stands for Accessible Rich Internet Applications, roles sparingly and correctly for the complex components like a drop down menu. ([Time 0:02:57](https://share.snipd.com/snip/df1bf641-d9e9-466f-b950-8725920afb4c)) - **Color Contrast and Visual Design** - Maintain a 4.5:1 contrast ratio for regular text and 3:1 for large text according to WCAG standards. - Use tools like WebAIM contrast checker; avoid relying solely on color to convey information; supplement with labels/icons. Transcript: Adam Silver Again, things I didn't know about until recently. So, all right, those two on keyboard navigation. Number three, color contrast and visual design. This one is a big one to me because as I've gotten older, my eyesight has not gotten any better. Some people it does, not for me, but anyway. So why it matters, of course, users with visual impairments, including color blindness, need sufficient contrast to retext and interpret visual elements. I know this is a thing for me, also the size of text as well. The best practice here would be maintain a contrast ratio of at least 4.5 to 1 for normal text, 3 to 1 for large text, and per the WCAG, which is the Web Content Accessibility Guidelines Standards, that's what you want to do. Also, avoid relying on a color alone to convey information. Use labels or icons alongside the color. So there's that. And lastly, use tools like the WebAIM contrast checker to test your color scheme. I find myself often making fonts slightly bigger, zooming in for myself, but also making sure the colors aren't causing any issues because certain color combinations become really To read, even close up. ([Time 0:03:38](https://share.snipd.com/snip/f4e34b35-9cf5-4edf-b1fd-201d6c948e08)) - **Accessible Media and Content** - Provide meaningful alt text for all images, describing their content and purpose. - Include captions or transcripts for video and audio; ensure downloadable documents (like PDFs) are also accessible. Transcript: Adam Silver So that's just on me personally. Okay. Number four, accessible media and content. Now, why it matters, of course, is because multimedia content like images and videos should be accessible at all, including those with hearing or visual impairments. The best practices here would be provide alt text for images describing the purpose of content meaningfully, not just have an image up and nothing behind it, if you will. So if it's a picture of mountains or a trail or a river, you want to have that word describing the image as well. Include a caption or a transcript for video and audio content. And now I just feel bad and guilty because I don't do that for what I have obviously, this is audio, but I don't have the transcripts anymore. I used to do them and I stopped. Anyway, I have to bring that back. That's gonna have to come back. All right. And ensure downloadable documents are also accessible, properly structured PDFs. If you are putting up content in the PDF format as well or downloadable formats. ([Time 0:04:47](https://share.snipd.com/snip/90895ca0-4f3d-40e7-953e-e92d0d092197)) - **Testing and Compliance** - Regularly test your site’s accessibility with plugins like WP Accessibility or tools like WAVE and AXE. - Conduct manual tests, use screen readers, follow WCAG 2.1 guidelines, and aim for at least AA compliance. Transcript: Adam Silver Okay. And number five, testing and compliance. Now why it matters, accessibility is an ongoing process. It's obvious, right? The regular testing ensures that the site meets the standards and the user's needs. The best practices would be using a plugin, WP accessibility or tools like WAVE or AXE to audit the site. Conduct manual tests with keyboard navigation, screen readers like NVDA or voiceover. And of course, follow the WCAG 2.1 guidelines and aim for AA compliance as a minimum standard. So it's a lot to take in. It's a lot to do. It's hard to go back sometimes, but moving forward, you can always kind of include these things in the overall scope and milestones of building a new site. So I'm going to start doing that as well. And considering and focusing on these areas, not only ensures the compliance with legal standards, because some of these are legally required these days based on where the funding Is coming from as well, state and federal monies. ([Time 0:05:43](https://share.snipd.com/snip/96287510-0b29-44f6-bdb1-09ee7f7eee9b)) - **Personal Anecdote and Community Support** - Adam Silver's son survived a motorcycle accident but lost his leg, highlighting life's fragility. - He emphasizes the importance of community support during challenging times and encourages helping others. Transcript: Adam Silver And I'm recommending you all to lean into your community, whatever that community is. I happen to be very lucky as I have three communities with WordPress being the oldest one that I've been a part of for a very long time now. The other two of my communities are my men's group called F3, as well as my running groups, that part of my life as well. I bring this up because for those who don't know, my son was in a motorcycle accident on December 18th. He did survive, thank God. Literally, he shouldn't have, but he got very lucky. But he lost his left leg from the quad down. He's 22 years old. Many of you in the WordPress community heard about it and reached out, direct messages through different means, email, et cetera, texting who know me well, and have supported myself And my family in ways I could never have imagined. For that, I thank you. So as we wrap up 2024 and head into 2025, I recommend getting past any drama that may be around the place that you spend time in right now, in the world itself. Lead in your community. Give help when you can. Ask for help when you need it. And with that, I'm going to wrap up this week's episode, this year's final episode as well. ([Time 0:07:01](https://share.snipd.com/snip/4559f197-7c5b-45bf-8bbf-563fc0d8a5f4))