LIVE Q&A: Web Accessibility Best Practices with Amber Hinds
๐ **Source:** [LIVE Q&A: Web Accessibility Best Practices with Amber Hinds](https://www.youtube.com/watch?v=H6ACpH5v_dY)
> [!note]+ Document Notes
> tags: [web-accessibility, wordpress, beaver-builder]
> author: Equalized Digital
> source: YouTube
> reference: https://www.youtube.com/watch?v=H6ACpH5v_dY
> date created: 2024-12-31 10:00
>
> # ๐ท๏ธ Title: LIVE Q&A: Web Accessibility Best Practices with Amber Hinds
>
<!-- deep-read:sections start -->
## ๐งฐ Action Inbox
- [H1] Install Accessibility Checker plugin for automated testing โ 05:23 #accessibility-testing
- [H2] Create contrast grid for brand colors โ 15:45 #design
- [H3] Add accessibility statement to website footer โ 58:30 #legal-compliance
## ๐งญ Table of Contents
- [๐ Summary](#-summary)
- [๐ Main Content](#-main-content)
- [๐๏ธ Notes](#๏ธ-notes)
- [๐ References](#-references)
- [๐ฃ๏ธ Paraphrase](#๏ธ-paraphrase)
- [๐ฐ Newsletter](#-newsletter)
- [โ
Action Items](#-action-items)
- [๐งช Hypotheses](#-hypotheses)
- [๐ Methodology](#-methodology)
- [โ Questions](#-questions)
- [๐ฎ Future Research](#-future-research)
- [๐ก Implications](#-implications)
- [๐ง Learning Styles Assessment](#-learning-styles-assessment)
- [๐ Accessibility Assessment](#-accessibility-assessment)
- [๐ DEIB Assessment](#-deib-assessment)
- [โ
Logical Validity](#-logical-validity)
- [๐ก๏ธ DARVO Analysis](#-darvo-analysis)
- [๐ฏ Conclusion](#-conclusion)
### ๐ References
- [Accessibility Checker Plugin](https://wordpress.org/plugins/accessibility-checker/)
- [Contrast Grid Tool](https://contrast-grid.equalizeddigital.com)
## ๐ Summary
- Amber Hinds from Equalized Digital discusses WordPress accessibility best practices in live Q&A format
- Critical focus on fixing blockers first: empty buttons/links, missing alt text, form labels, and color contrast
- Emphasis on testing early and often during development rather than retrofitting after launch
- Warning against accessibility overlays - they don't work and may create legal liability
- Recommendation for simple, accessible design patterns over complex components
## ๐ Main Content
This live Q&A session covers practical WordPress accessibility implementation strategies. Amber Hinds explains that web accessibility ensures websites work for everyone regardless of how they interact with technology - whether using screen readers, keyboard navigation, or mobile devices with zoom requirements.
The session emphasizes a severity-based approach to fixing accessibility issues, starting with critical blockers that prevent users from completing essential tasks like purchasing products or submitting forms. These include unnamed buttons and links, missing alternative text on images, inaccessible form controls, and contrast failures.
Key legal considerations include the Americans with Disabilities Act in the US, various provincial laws in Canada, and the European Accessibility Act affecting organizations with โฌ2 million+ annual turnover or 10+ employees serving EU markets.
## ๐๏ธ Notes
#### โฑ๏ธ [00:00](https://youtu.be/H6ACpH5v_dY?t=0) โ [H1] Introduction and accessibility overview
- Key idea: Web accessibility ensures websites work for everyone regardless of interaction method
- Evidence: "One in five people in the United States, one in four working adults" have disabilities
#### โฑ๏ธ [05:23](https://youtu.be/H6ACpH5v_dY?t=323) โ [H1] Critical accessibility issues to fix first
- Key idea: Start with critical blockers that prevent essential actions
- Evidence: "Empty buttons that don't have any names... screen reader would just say button"
#### โฑ๏ธ [08:45](https://youtu.be/H6ACpH5v_dY?t=525) โ [H2] Using Accessibility Checker plugin interface
- Key idea: Severity-based prioritization helps focus remediation efforts
- Evidence: Shows plugin interface sorting issues by critical, serious, and minor levels
#### โฑ๏ธ [12:30](https://youtu.be/H6ACpH5v_dY?t=750) โ [H2] Bottom-of-funnel testing approach
- Key idea: Test conversion pages first, then work backward
- Evidence: "Test your checkout page or contact form page first and fix everything there"
#### โฑ๏ธ [15:45](https://youtu.be/H6ACpH5v_dY?t=945) โ [H2] Handling brand color accessibility issues
- Key idea: Create contrast grids to find viable color combinations
- Evidence: Demonstrates contrast-grid.equalizeddigital.com tool showing passing/failing combinations
#### โฑ๏ธ [19:20](https://youtu.be/H6ACpH5v_dY?t=1160) โ [H3] WCAG-compliant color variations
- Key idea: Slight color adjustments can maintain brand identity while meeting standards
- Evidence: Shows Figma example with "WCAG green" darker variant for white backgrounds
#### โฑ๏ธ [22:15](https://youtu.be/H6ACpH5v_dY?t=1335) โ [H2] Testing throughout development lifecycle
- Key idea: Fix accessibility in components before scaling across pages
- Evidence: "Test and fix issues with your accordions the first time... than waiting until you have them on 500 pages"
#### โฑ๏ธ [26:00](https://youtu.be/H6ACpH5v_dY?t=1560) โ [H2] Recommended testing tools
- Key idea: Browser extensions complement automated testing plugins
- Evidence: Demonstrates Headings Map and Landmark Navigation extensions
#### โฑ๏ธ [30:45](https://youtu.be/H6ACpH5v_dY?t=1845) โ [H3] User-specific accessibility priorities
- Key idea: Different disabilities require different solutions
- Evidence: "Screen reader users need semantic names... deaf users need captions... low vision users need contrast"
#### โฑ๏ธ [33:20](https://youtu.be/H6ACpH5v_dY?t=2000) โ [H1] AI impact on accessibility
- Key idea: Accessibility overlays fail to deliver promised accessibility
- Evidence: "Federal Trade Commission fined... Accessibby... million dollars for false advertising"
#### โฑ๏ธ [37:10](https://youtu.be/H6ACpH5v_dY?t=2230) โ [H3] AI coding limitations
- Key idea: AI-generated code often lacks accessibility because it's trained on inaccessible websites
- Evidence: "Most AI is trained on average websites and most websites are not accessible"
#### โฑ๏ธ [40:15](https://youtu.be/H6ACpH5v_dY?t=2415) โ [H2] Legal compliance requirements
- Key idea: Multiple jurisdictions have accessibility laws affecting different business types
- Evidence: "European Accessibility Act... โฌ2 million in turnover annually or 10 employees or greater"
#### โฑ๏ธ [45:30](https://youtu.be/H6ACpH5v_dY?t=2730) โ [H3] Landmark regions implementation
- Key idea: Use semantic HTML tags or ARIA roles to create navigation landmarks
- Evidence: "Banner tag for header... main for main content... or use ARIA role"
#### โฑ๏ธ [48:00](https://youtu.be/H6ACpH5v_dY?t=2880) โ [H2] Nonprofit accessibility strategies
- Key idea: Create accessible template systems to reduce costs
- Evidence: "Come up with a handful of starters... remediate them all... then customize lightly"
#### โฑ๏ธ [55:20](https://youtu.be/H6ACpH5v_dY?t=3320) โ [H1] Client education and maintenance
- Key idea: Train clients on accessibility basics during handoff
- Evidence: "Include accessibility in that training... show them how to add meaningful link text"
#### โฑ๏ธ [58:30](https://youtu.be/H6ACpH5v_dY?t=3510) โ [H3] Accessibility statements as legal protection
- Key idea: Accessibility statements can prevent lawsuits by showing good faith effort
- Evidence: "Having that accessibility statement can be protective... anyone who really cares will contact you first"
## ๐ References
- [Accessibility Checker Plugin](https://wordpress.org/plugins/accessibility-checker/)
- [Contrast Grid Tool](https://contrast-grid.equalizeddigital.com)
- [Overlay Fact Sheet](https://overlayfactsheet.com)
- [Equalized Digital](https://equalizeddigital.com)
## ๐ฃ๏ธ Paraphrase
- Web accessibility means building websites that work for all users regardless of their technology or interaction methods, benefiting the 20-25% of the population with disabilities
- Priority should be given to fixing critical blocking issues like unnamed buttons, missing alt text, and contrast failures that prevent essential user actions
- Testing and fixing accessibility issues during development is far more cost-effective than retrofitting completed websites
## ๐ฐ Newsletter
**WordPress Accessibility: Start Smart, Build Better**
Great news for WordPress developers! Accessibility expert Amber Hinds shared practical strategies for building inclusive websites without breaking budgets.
**Key takeaway:** Focus on critical blockers first - unnamed buttons, missing alt text, and contrast issues that actually stop users from completing tasks. The free Accessibility Checker plugin helps prioritize these fixes.
**Smart approach:** Test accessibility while building components, not after launching 500 pages. Create accessible templates and reuse them across projects.
**Tool spotlight:** The contrast grid tool helps find brand-compliant color combinations that meet accessibility standards.
Resources: [Accessibility Checker](https://wordpress.org/plugins/accessibility-checker/), [Contrast Grid](https://contrast-grid.equalizeddigital.com), [Learn WordPress](https://learn.wordpress.org/)
## โ
Action Items
#### WordPress
- Core: Integrate accessibility testing into component development workflows
- Themes: Review default color palettes for WCAG compliance
- Plugins: Audit accessibility of core UI components and form controls
- Community: Develop accessibility training materials for meetups
- Documentation: Create accessibility-first coding examples in Developer Docs
#### DevRel
- Developer advocacy: Promote accessibility-first development practices in talks
- Education: Create workshops combining BeaverBuilder with accessibility best practices
- Developer experience: Integrate accessibility testing into recommended workflows
- Developer marketing: Highlight accessibility features in product messaging
- Community management: Moderate accessibility discussions and share resources
#### Community
- Maintainers: Provide accessibility review templates and checklists
- Contributors: Create first-issue programs focused on accessibility improvements
- Ecosystem: Coordinate accessibility standards across page builder plugins
## ๐งช Hypotheses
- Teams using accessible component libraries reduce remediation costs by 80%
- Automated accessibility testing during development catches 70% of common issues
- Websites with accessibility statements receive fewer legal complaints
- Simple designs require less accessibility remediation than complex interfaces
### ๐ Methodology
- A/B testing: Compare remediation costs for template-based vs custom development
- Longitudinal study: Track accessibility compliance over time with different testing approaches
- Survey analysis: Measure correlation between accessibility statements and legal issues
### โ Questions
- How can AI tools be trained specifically on accessible code patterns?
- What accessibility testing integration works best in CI/CD pipelines?
- How do accessibility overlays actually perform in user testing?
### ๐ฎ Future Research
- Effectiveness of different accessibility training methods for content creators
- ROI analysis of accessibility investments across different industries
- User experience impact of various accessibility implementation approaches
### ๐ก Implications
- Practice: Accessibility must be integrated into development workflows from the start
- Policy: Legal requirements are expanding globally and becoming more specific
- Security: Accessibility overlays may introduce additional security vulnerabilities
- Education: Developers need practical training on accessible coding patterns
- Funding: Accessibility work requires dedicated budget allocation, not afterthought treatment
### ๐ง Learning Styles Assessment
Reading level estimate: 12th Grade (Flesch-Kincaid)
#### ๐ Visual learners
- Present: Plugin interface screenshots, contrast grid demonstrations, browser extension visuals
- Improve: More before/after accessibility fix examples, visual workflow diagrams
#### ๐ Aural learners
- Present: Full video presentation with clear audio narration
- Improve: Audio-only podcast version, key point summaries
#### ๐ฃ๏ธ Verbal learners
- Present: Clear definitions of technical terms, real-world analogies
- Improve: Glossary of accessibility terms, comparison tables
#### ๐งฉ Kinesthetic learners
- Present: Plugin installation instructions, hands-on testing examples
- Improve: Step-by-step remediation checklists, practice exercises
#### ๐ง Logical learners
- Present: Severity-based prioritization system, legal compliance framework
- Improve: Decision trees for accessibility choices, cost-benefit analyses
#### ๐งโ๐คโ๐ง Social learners
- Present: Live Q&A format, community interaction
- Improve: Discussion prompts, peer review exercises
#### ๐งโโ๏ธ Solitary learners
- Present: Self-paced video content, individual reflection time
- Improve: Self-assessment quizzes, personal practice projects
#### ๐ฟ Naturalistic learners
- Present: Real-world case studies and examples
- Improve: Industry-specific accessibility patterns, ecosystem thinking
### ๐ Accessibility Assessment
#### Screen reader semantics
- Present: Discussion of semantic HTML, headings structure, landmark regions
- Improve: More examples of proper ARIA implementation
#### Keyboard navigation
- Present: Mentions of keyboard-only users and navigation patterns
- Improve: Specific tab order and focus management examples
#### Contrast and readability
- Present: Extensive contrast discussion with practical tools
- Improve: More examples of text sizing and spacing considerations
#### Text resizing and reflow
- Present: Discussion of zoom functionality and mobile considerations
- Improve: Specific responsive design accessibility patterns
#### Media and captions
- Present: Emphasis on captions and transcripts for video content
- Improve: Audio description examples, sign language considerations
#### Forms and interactions
- Present: Form label requirements, button naming
- Improve: Error handling patterns, form validation examples
#### Standards reference
- Maps well to WCAG 2.1 AA success criteria, particularly perceivable and operable principles
### ๐ DEIB Assessment
#### Cultural breadth
- Present: Global legal requirements discussion (US, Canada, EU)
- Improve: More diverse geographic examples, cultural accessibility considerations
#### Inclusive language
- Present: Uses person-first language, avoids ableist terms
- Improve: More examples of inclusive content creation
#### Neurodiversity support
- Present: Structured Q&A format, clear section headings
- Improve: Discussion of cognitive accessibility needs
#### Representation
- Present: Includes diverse real-world examples (schools, nonprofits)
- Improve: More varied industry and organizational examples
#### Psychological safety
- Present: Respectful discussion of disabilities and accessibility needs
- Improve: More emphasis on user dignity and autonomy
### โ
Logical Validity
#### Strong reasoning
- Deductive strength: Legal requirements โ accessibility compliance needed
- Inductive strength: Multiple case studies support general principles
- Causal reasoning: Clear links between accessibility barriers and user exclusion
- Analogical strength: Effective comparisons between different disability needs
#### Fallacies
- Appeal to consequences: Some fear-based examples about lawsuits, though balanced with practical advice
- No significant logical fallacies identified
#### Tone of voice
- Overall tone: Professional, encouraging, practical. Balances urgency with actionable advice
### ๐ก๏ธ DARVO Analysis
- Deny: No denial patterns identified
- Attack: No attacks on accusers present
- Reverse victim/offender: No victim/offender reversals noted
- Emotional cues and rhetoric: Appropriately empathetic toward people with disabilities, urgent but not alarmist about legal compliance
## ๐ฏ Conclusion
Web accessibility is not optional - it's a legal requirement in many jurisdictions and a business imperative for reaching 20-25% of the population with disabilities. The key is starting with critical blocking issues that prevent essential user actions, using tools like Accessibility Checker to prioritize fixes, and building accessibility into development workflows from the beginning rather than retrofitting. Simple, semantic designs are easier to make accessible and maintain than complex components with third-party add-ons.
## ๐งฑ Refactor Appendix
### ๐ Literature Split Pad
Purpose: Stage CEE units that become Literature notes.
Split level: H3
### [H1] Accessibility overlays fail to provide meaningful compliance
> [!quote] [LIVE Q&A: Web Accessibility Best Practices](https://www.youtube.com/watch
---
## Full Transcript
[00:10] Heat.<br>[00:25] Heat.<br>[00:44] >> [music]<br>[01:19] >> Hey, hey, hey.<br>[01:34] Hey,<br>[01:43] hey,<br>[01:45] hey. [music]<br>[01:53] >> [music]<br>[02:04] >> All right, and we are live.<br>[02:08] How's everybody doing today?<br>[02:10] Hey, let's do a quick pre-flight check.<br>[02:13] Do me a favor and type yes in the<br>[02:16] comments if you can hear me. Okay.<br>[02:23] And uh while we're waiting for that,<br>[02:25] just want to say hi to everyone for<br>[02:26] showing up. Thank you so much. Looks<br>[02:28] like we got a great showing. Um I've got<br>[02:31] some folks uh from Texas, New Jersey,<br>[02:34] the UK, Oregon,<br>[02:37] Norway, Canada. Wow, this is a great<br>[02:40] showing. New Zealand. Hey, thanks so<br>[02:42] much. Oh, we got a thumbs up for Yes.<br>[02:45] All right.<br>[02:49] Okay. So, welcome uh if we haven't met,<br>[02:53] I'm Anthony. I'm going to be your host<br>[02:55] today and I'm really excited about this<br>[02:58] session because it's all about<br>[02:59] accessibility.<br>[03:01] And you know, accessibility is one of<br>[03:03] those topics that everyone knows is<br>[03:05] important, but sometimes we just don't<br>[03:08] know where to start. So, our goal today<br>[03:10] is to help you feel more comfortable<br>[03:13] about this topic.<br>[03:15] So before we begin, I just want to set<br>[03:18] some expectations.<br>[03:19] This is a 1-hour Q&A and it's a<br>[03:22] continuation from our free accessibility<br>[03:25] course. If you haven't taken that<br>[03:27] course, no problem. It's available in<br>[03:29] our courses library. So check it out at<br>[03:31] your convenience.<br>[03:33] And if quick heads up, if you're new to<br>[03:35] YouTube live, there's about a 30 to 60<br>[03:39] second delay between when you post a<br>[03:41] question in the chat and when we see it<br>[03:43] on our end. So, if you submit a<br>[03:45] question, just hang tight. I promise<br>[03:48] we're not ignoring you. Okay. So, now<br>[03:51] that we got all that away, let's bring<br>[03:54] in our special guest.<br>[03:59] I'd like to introduce our special guest,<br>[04:01] Amber Hines. She's been an entrepreneur<br>[04:03] since 2010<br>[04:06] and she became the CEO of Equalized<br>[04:08] Digital in 2016,<br>[04:10] a company that specializes in WordPress<br>[04:12] accessibility. She has spoken at<br>[04:15] numerous uh numerous events. You've<br>[04:16] probably seen her events like CloudFest,<br>[04:19] Word Camp US, Accessibility Summit, and<br>[04:23] more. She's also the co-host of two<br>[04:26] podcasts, The Accessibility Craft and WP<br>[04:31] Product Talk. And so when she isn't<br>[04:33] working, she is busy traveling in an RV<br>[04:36] with her husband and four daughters. So<br>[04:38] Amber, thank you so much for being here<br>[04:40] today.<br>[04:42] >> Thank you for having me, Anthony. I am<br>[04:45] happy to be here.<br>[04:47] >> Well, we're excited to hear what you<br>[04:48] have to say. And now that we've laid the<br>[04:51] foundation and set the stage, let's jump<br>[04:55] right in. So, we're going to start with<br>[04:57] some submitted questions first.<br>[05:00] These were uh open for people to submit<br>[05:03] and we basically have them available.<br>[05:06] And after we go through these submitted<br>[05:08] questions, we're going to go through our<br>[05:09] live audience questions. So, Amber, are<br>[05:11] you ready?<br>[05:13] >> I'm ready. Let's do it.<br>[05:14] >> Okay. So, let's start with something<br>[05:16] easy. Okay. Let's start off with<br>[05:17] something easy first. What is web<br>[05:19] accessibility and why does it matter?<br>[05:23] >> Web accessibility is all about ensuring<br>[05:27] that a website can be used by everyone<br>[05:31] regardless of how they interact with<br>[05:33] that website. Whether they are using a<br>[05:37] traditional computer mouse and keyboard<br>[05:40] or they are using some sort of assistive<br>[05:42] technology like a screen reader or um<br>[05:46] maybe they don't even use a mouse, they<br>[05:49] only use a keyboard or they don't use a<br>[05:51] keyboard, they use a switch device<br>[05:53] instead. Um they could be on a mobile<br>[05:56] phone, they could be on a computer<br>[05:58] that's zoomed in and so on their<br>[06:00] computer and their desktop it actually<br>[06:02] looks like the mobile view of the<br>[06:03] website. So really website accessibility<br>[06:05] is just about ensuring that we can reach<br>[06:09] the most people and the most people can<br>[06:11] take whatever actions we want them to<br>[06:13] take on the website regardless of how<br>[06:15] they use that website.<br>[06:17] >> Okay.<br>[06:18] >> And why is it important? Uh the why it's<br>[06:21] important really comes down to the fact<br>[06:24] that a huge percentage of our population<br>[06:29] has some sort of disability. uh the<br>[06:32] number from the World Health<br>[06:34] Organization is something like one in<br>[06:36] five people in the United States. It's<br>[06:38] one in four working adults. These are<br>[06:41] people who have money. They can be your<br>[06:43] customers uh or your client's customers<br>[06:46] if you're building websites for other<br>[06:48] organizations.<br>[06:49] And really, it's a basic human right if<br>[06:53] you think about all of the things that<br>[06:54] you do. You know, how many times have<br>[06:57] you ordered a product in the last week<br>[07:00] off a website, right? Or ordered food<br>[07:03] for delivery or look up the times for a<br>[07:07] hair salon or a phone number for your<br>[07:09] kids school. All of these things are<br>[07:12] things that are necessary for life and<br>[07:15] we want to ensure that all people can<br>[07:18] have that same access that you and I<br>[07:20] have.<br>[07:22] >> Awesome. Well, we definitely know that<br>[07:24] accessibility is important. that's why<br>[07:25] everyone's here. So, what accessibility<br>[07:28] issues should every site fix first?<br>[07:33] >> So, that is a really good question. It's<br>[07:35] also kind of a complex question because<br>[07:37] not every website is the same. I do have<br>[07:40] a screen share up though if you want to<br>[07:42] pull that up. Uh, we at Equalized<br>[07:45] Digital make a plugin called<br>[07:47] Accessibility Checker and it has a free<br>[07:49] version on WordPress.org and a paid<br>[07:51] version. This particular screen is in<br>[07:53] the paid version, but you can get all<br>[07:55] the same information in the free version<br>[07:57] on an individual post. And what I'm<br>[08:00] showing right here is our open issues<br>[08:02] list that shows sorted by severity what<br>[08:05] the problems are because I think that<br>[08:07] this is a helpful way of knowing where<br>[08:10] to start. So the things that we<br>[08:12] recommend starting with are things that<br>[08:14] we would consider critical blockers.<br>[08:16] This is something that would literally<br>[08:18] stop someone from being able to get<br>[08:21] information or take an important or<br>[08:25] desired action on a website such as<br>[08:27] purchasing a product or submitting a<br>[08:29] form. Uh so some of these critical items<br>[08:33] that you want to look for and fix are<br>[08:35] things like empty buttons that don't<br>[08:37] have any names. So a screen reader user<br>[08:39] would encounter it and it would just say<br>[08:40] button. It wouldn't actually tell them<br>[08:42] what the button does. Another one that<br>[08:44] is very similar is empty link. So,<br>[08:45] they'd just hear link, they wouldn't<br>[08:47] hear where the link goes. Uh any sort of<br>[08:50] image maps or images that are missing<br>[08:54] the alternative text attribute, not just<br>[08:57] that it's an empty one, but if it is<br>[08:59] actually not missing, it doesn't even<br>[09:01] have that alt attribute at all.<br>[09:03] Likewise, if it's empty, but it's<br>[09:06] actually supposed to be meaningful, um,<br>[09:09] and it's a linked image. So, anytime a<br>[09:12] linked image doesn't convey where the<br>[09:14] link is going, it doesn't have the right<br>[09:16] direct the right alternative text to<br>[09:18] name the link, then that would be a big<br>[09:20] problem. Um, ambiguous anchor text is<br>[09:23] another one where it really can stop<br>[09:25] people from knowing how to follow links.<br>[09:27] And what do I mean by ambiguous anchor<br>[09:28] text? That's things like read more,<br>[09:32] learn more, click here, download, but it<br>[09:35] doesn't say what. If you have to say<br>[09:37] learn more about what download what then<br>[09:40] you know that that link isn't<br>[09:41] meaningful. It's not going to be<br>[09:43] helpful. Any sort of issues related to<br>[09:46] zooming and scaling. So think about and<br>[09:49] a lot of us have probably done this.<br>[09:50] I've done this recently which is I've<br>[09:53] been on my phone. I'm looking at a<br>[09:54] website. I'm like gosh this text is so<br>[09:56] small and I zoom in. Well you can only<br>[09:58] pinch zoom if a website allows it. So,<br>[10:00] if the website is blocking that, that<br>[10:02] would be like critical functionality<br>[10:04] that's going to impact a lot of us. Uh,<br>[10:07] missing form labels, missing table<br>[10:09] headers, uh, making sure your sliders<br>[10:11] are accessible, having the pause button,<br>[10:14] which I know BeaverBuilder has that<br>[10:15] built in, which is great. So, if you're<br>[10:17] using BeaverBuilder sliders and you have<br>[10:18] them set to autoplay, make sure you've<br>[10:21] always turned on that pause button<br>[10:22] setting, that sort of thing. Um, making<br>[10:25] sure your blinking and scrolling content<br>[10:27] doesn't cause issues, your videos have<br>[10:30] captions and transcripts. Those are<br>[10:32] probably like the most critical things<br>[10:34] that I would focus on first. Obviously,<br>[10:36] there's a whole big list, but I would<br>[10:37] really think when you're assessing where<br>[10:39] to start is what are things that are<br>[10:43] literally going to block people from<br>[10:45] doing what I want them to do on the<br>[10:47] website. Um, and you can even start<br>[10:49] bottom of funnel and work your way up.<br>[10:52] So test your checkout page or your<br>[10:54] contact form page first and fix<br>[10:57] everything there and then move back up<br>[10:59] towards, you know, how they come in, but<br>[11:02] start at the bottom where that<br>[11:04] conversion happens.<br>[11:05] >> Well, this plug-in looks really<br>[11:07] intuitive and I like how it lists all<br>[11:10] the things that we should kind of be<br>[11:11] paying attention to. So, we'll<br>[11:13] definitely we linked that uh<br>[11:16] accessibility checker into the comments,<br>[11:18] so feel free to check it out. And um so<br>[11:21] the next question I think that makes<br>[11:23] sense to ask is what's the best way to<br>[11:25] deal with brand colors that aren't<br>[11:28] accessible?<br>[11:30] >> This is a great question. We get this<br>[11:32] all the time and this does happen with a<br>[11:35] lot of our remediation clients. Um so<br>[11:37] the first thing that we do and I'll just<br>[11:40] show you I gave an example and this is<br>[11:43] totally a fake city website that we have<br>[11:45] for our demo for our plug-in. Um, but<br>[11:49] the first thing we do when we have<br>[11:50] someone come to us is we'll actually<br>[11:52] build out a contrast grid. And this is a<br>[11:55] free tool if you just go to<br>[11:56] contrast-grid.equalized.com<br>[12:01] and we go get, you know, I'll inspect or<br>[12:04] sometimes, you know, in the builder you<br>[12:07] can actually get what the color codes<br>[12:09] are or sometimes the clients can give<br>[12:10] you their color codes if they have a<br>[12:11] brand guide, but a lot of times they<br>[12:13] don't. So, I might just inspect and with<br>[12:15] an eyropper go figure out like what are<br>[12:17] the specific color codes and then I put<br>[12:20] those into<br>[12:22] my contrast grid. And what it does is it<br>[12:25] shows me I'm going to turn off right now<br>[12:26] everything that doesn't pass. And so<br>[12:28] then I know, okay, here are all of the<br>[12:30] color combinations that work. And this<br>[12:33] is really helpful because then I can I<br>[12:36] can either send this link because it<br>[12:38] it'll update the URL and keep the colors<br>[12:40] to the client or I can screenshot it and<br>[12:43] sometimes I just screenshot it and send<br>[12:44] it to them. And I say, "Okay, we need to<br>[12:46] talk about the fact that all of your<br>[12:50] peach buttons with white text fail<br>[12:52] contrast." And we can see in our<br>[12:56] contrast grid that that doesn't work.<br>[12:58] Well, black does pass. And you could<br>[13:01] have we could change all the text on<br>[13:03] these buttons to black. Are you okay<br>[13:05] with that? And sometimes they are yes.<br>[13:07] And they'll say okay yes let's do that.<br>[13:09] Or sometimes they'll be like no I really<br>[13:10] don't like that or I really want white<br>[13:13] text. So then we start to say okay can<br>[13:15] we make it a little darker or can we um<br>[13:19] you know maybe make if you don't like<br>[13:22] how close the black is with the peach<br>[13:24] maybe we make a lighter version of the<br>[13:26] peach. And I actually have a different<br>[13:28] example from a real website project.<br>[13:30] This is a a Figma file for one of our<br>[13:33] clients. And they had this color green.<br>[13:36] Let me go to the style guide. They had<br>[13:39] this really bright color green. And it<br>[13:42] didn't work with on white. It works fine<br>[13:46] on black from a contrast perspective.<br>[13:48] And so we had this conversation with<br>[13:49] them and they said, "Okay, we're okay in<br>[13:52] certain scenarios with coming up with a<br>[13:54] darker green." And so we came up with a<br>[13:57] darker green that we called WIKAG web<br>[13:59] content accessibility guidelines green<br>[14:02] which means it passes on white. And then<br>[14:05] we in certain situations would use<br>[14:09] different colored greens. So, in this<br>[14:12] screenshot of or this Figma file, you<br>[14:15] can see that there's a list of blog<br>[14:18] posts that have a um a green what would<br>[14:23] be the category for the post above it.<br>[14:28] And this is using the WIKAG, the darker<br>[14:30] green because it's on white. Down below,<br>[14:34] we have one of their buttons that says,<br>[14:36] it's a link that looks like a button<br>[14:37] that says more news. And it's the<br>[14:39] brighter green with the black. And<br>[14:41] what's interesting about this is when<br>[14:43] you see those colors on the style guide<br>[14:45] next to each other, you go, "Wow, those<br>[14:46] are really different colors." But when<br>[14:49] you have them in this sort of context<br>[14:50] and they're not super close to each<br>[14:52] other to the eye, at least to my eye,<br>[14:57] they don't actually look that different,<br>[15:00] but they do have different scenarios<br>[15:02] where we do it. So this that's kind of<br>[15:03] how we try and assess it was we'll<br>[15:06] create a grid, we'll figure out what<br>[15:07] combinations don't work, and then we'll<br>[15:09] say, is there a way we can slightly<br>[15:11] tweak this or can we add an additional<br>[15:14] so that we can make sure we're passing<br>[15:15] in different scenarios.<br>[15:18] That was really a great example. And<br>[15:20] that um contrast grid that you showed us<br>[15:24] is also looks like a very helpful tool.<br>[15:26] So, thank you.<br>[15:28] >> Yeah. Yep. And you can just get to that.<br>[15:30] It's just totally free on our website.<br>[15:32] So,<br>[15:35] >> all right. So, what do we need to do for<br>[15:38] accessibility before and after we launch<br>[15:42] a website?<br>[15:45] I mean, the biggest thing is testing and<br>[15:50] fixing as you go. So, our accessibility<br>[15:54] checker plugin you can put on a website<br>[15:56] at any time, whether you're starting to<br>[15:58] build or whether it's already out there<br>[16:00] and it has a ton of content. Um, but I<br>[16:05] would say you want to try and think<br>[16:08] about accessibility in bite-sized<br>[16:10] chunks, if you will. Um, we'll<br>[16:13] frequently do things when we come into<br>[16:15] an existing website, we'll say, "Okay,<br>[16:17] let's fix everything we need to fix in<br>[16:19] the header and the footer." And then<br>[16:22] that way we get those global areas that<br>[16:24] are really going to impact every user on<br>[16:26] every page. And then from there in our<br>[16:30] automated tools, you'll start a page<br>[16:32] with kind of a a 100% score. And then<br>[16:35] you know the only problems that show up<br>[16:37] in automated scans are problems that are<br>[16:40] being added as you build out the page<br>[16:41] with the content. Uh which is helpful<br>[16:44] because then you can teach yourself if<br>[16:47] you're the one adding content or your<br>[16:49] content creators if you have a team of<br>[16:51] people that are adding content that to<br>[16:55] really watch and test and make sure that<br>[16:57] they're adding content in a accessible<br>[17:01] way. Um, and I would say doing that as<br>[17:04] early as possible if you're building a<br>[17:06] new website is really important. Uh, I<br>[17:10] would sometimes, you know, we do like<br>[17:14] style guide pages for clients where we<br>[17:18] put tabs on it and we put an accordion<br>[17:20] on it and we put, you know, different<br>[17:23] [clears throat] column examples and<br>[17:24] things like that and all the headings<br>[17:26] and then we use that to style and say,<br>[17:28] "Okay, we're going to do this design,<br>[17:30] but first we're going to get a whole<br>[17:32] page that looks the way we want it to<br>[17:34] look." and then we can roll those<br>[17:36] components out across every page. Well,<br>[17:40] if you're doing that for design<br>[17:41] purposes, also test accessibility<br>[17:44] because you want to make sure that you<br>[17:46] are<br>[17:48] starting from an accessible place. And<br>[17:50] it's much better to<br>[17:53] test and fix issues with your accordians<br>[17:56] the first time you start using them than<br>[17:59] waiting until you have them on 500<br>[18:01] pages. So, I would say the earliest in<br>[18:04] the dev process that you can start<br>[18:05] testing and fixing problems, the easier<br>[18:07] it's going to be down the road.<br>[18:09] >> Yeah, that makes a lot of sense.<br>[18:11] Especially with BeaverBuilder, you're<br>[18:12] able to, you know, duplicate modules and<br>[18:15] rows and pages. So if we're able to make<br>[18:19] those um like you said components or<br>[18:22] modules uh already accessible when we<br>[18:25] duplicate it we can know going forward<br>[18:27] that it's going to also be accessible<br>[18:29] instead of trying to re go back and fix<br>[18:31] everything afterwards. So that's great<br>[18:33] advice.<br>[18:35] >> Yeah.<br>[18:35] >> Um that kind of leads me to my next<br>[18:37] question is so what tools do you<br>[18:40] recommend we you know use for testing<br>[18:42] accessibility?<br>[18:45] Well, of course, I'm going to recommend<br>[18:47] our accessibility checker plugin. Um,<br>[18:51] uh, the other testing tools that I use<br>[18:54] tend to be browser extensions. I do<br>[18:57] occasionally use the Wave browser<br>[19:00] extension, which is all these are free<br>[19:02] browser extensions. Uh, especially on a<br>[19:05] website that I don't have admin access<br>[19:08] to. If I want to just see the front end,<br>[19:10] that's a helpful extension. Um, there is<br>[19:14] another one that I really like. If you I<br>[19:16] don't know if you can share my screen<br>[19:17] again if it's still up. I could demo a<br>[19:20] couple of browser extensions that are<br>[19:21] super handy. Um,<br>[19:23] >> yeah, definitely. Let's go ahead and<br>[19:27] >> I'm going to go ahead screen share. So,<br>[19:28] feel free to share.<br>[19:30] >> Yeah. So, so one that I really like is<br>[19:33] called the headings map plugin browser<br>[19:36] extension. And what this does is it<br>[19:39] gives you a full outline of the page and<br>[19:42] the headings and what order they're in.<br>[19:45] Um, and you know, from an SEO<br>[19:48] perspective, we want to have an H1.<br>[19:50] Well, you also want to have an H1 for<br>[19:52] accessibility. And then you want your<br>[19:54] headings to follow in correct numerical<br>[19:57] order. So, this can tell us whether or<br>[19:59] not there's a problem. Like, we can see<br>[20:00] right away this website doesn't have a<br>[20:02] heading one on the homepage, and it<br>[20:04] highlights it for you. Um, and you can,<br>[20:07] you know, jump down and see things like<br>[20:09] even this upcoming events is a heading<br>[20:11] two. And then we've got farmers market,<br>[20:14] local artist showcase, Tuesday science<br>[20:16] talk, city council meeting. These are<br>[20:18] all also H2s, but actually these are<br>[20:20] items that are nested under upcoming<br>[20:22] events. But because the heading<br>[20:25] structure hasn't made these H3s, it's<br>[20:27] kept them as H2s. that might not be<br>[20:29] clear to someone on a screen reader that<br>[20:32] farmers market and local artist showcase<br>[20:34] are actually events as opposed to just<br>[20:36] some other section on the web page. Um,<br>[20:39] so I really like this browser extension.<br>[20:42] It it does landmarks as well, but it's<br>[20:45] not my favorite for landmarks. The one<br>[20:47] that I really like for doing landmark<br>[20:49] regions is um it's called<br>[20:54] landmark navigation.<br>[20:57] I want to say I'll have to find it and<br>[20:58] send it to you so you can put it in with<br>[21:00] the notes. Um, but the reason why I like<br>[21:04] this is because when you hover over any<br>[21:07] one of the landmark regions, it shows<br>[21:09] you both what their name is. So, we can<br>[21:11] see we've got it's kind of behind it<br>[21:13] right now, but there's a navigation<br>[21:15] language area. There's a secondary<br>[21:17] header menu navigation primary. So, it<br>[21:20] shows me that they have unique names,<br>[21:22] but it also highlights them. And this is<br>[21:24] really helpful if you're checking to<br>[21:26] make sure that all of your content is<br>[21:28] contained in a proper landmark region.<br>[21:31] Like this website, it seems fine.<br>[21:33] Sometimes I've seen things where there's<br>[21:36] a bonus little footer<br>[21:38] widget area down here, but it's not<br>[21:41] actually in the footer, which is content<br>[21:43] information. Um, this website actually<br>[21:46] has a lot like I don't know if the<br>[21:47] contact form needs a landmark region.<br>[21:49] It's maybe a little excessive, right?<br>[21:51] Um, but [clears throat] like this is a<br>[21:53] browser extension that I use a lot. So,<br>[21:56] those are probably the three that I use<br>[21:59] the most on top of our accessibility<br>[22:01] checker plugin.<br>[22:04] Well, we'll definitely um share those<br>[22:07] resources that you mentioned um in the<br>[22:09] show notes and that we'll email email<br>[22:12] out to everyone. So, don't worry if we<br>[22:13] don't have these available for you to<br>[22:15] view right now. We will definitely make<br>[22:17] sure that you get them. All right. So,<br>[22:21] um I'm there's a this is a pretty good<br>[22:24] question that someone asked was what<br>[22:26] fixes do you think makes the biggest<br>[22:29] difference for users? Because I mean<br>[22:30] sure there's a long list of things that<br>[22:32] we can do but what's like you know if we<br>[22:34] had to do like an 8020 rule what's the<br>[22:36] most you know important or makes the<br>[22:38] biggest difference?<br>[22:41] What what is always difficult about that<br>[22:43] question is that<br>[22:46] a lot not all users have the exact same<br>[22:48] needs. So the things that make the<br>[22:52] biggest difference for screen reader<br>[22:54] users<br>[22:55] are the things I mentioned like having<br>[22:59] proper semantic names and elements. So<br>[23:04] if something is a functions as a button<br>[23:06] so like it opens and closes a modal it<br>[23:08] should actually say it's a button. and<br>[23:09] it shouldn't be a link, right? Um, and<br>[23:13] and having the names, having headings in<br>[23:16] the proper order is super helpful for<br>[23:18] screen reader users. Um, having<br>[23:20] meaningful link text for someone who is<br>[23:23] deaf or heart of hearing, probably the<br>[23:26] most important thing is having captions<br>[23:28] and transcripts. Um, for people who have<br>[23:32] low vision, color contrast really<br>[23:34] matters a lot. Um, so it is difficult to<br>[23:38] say, you know, here's three things that<br>[23:40] you absolutely have to do because it it<br>[23:42] really depends upon<br>[23:44] who is in the audience and what you're<br>[23:46] targeting. Um, I wish I could say<br>[23:49] there's like just a few things that are<br>[23:51] the most important, but unfortunately I<br>[23:53] can't.<br>[23:54] >> No, those are that's a fair answer and<br>[23:56] you know definitely like you mentioned<br>[23:58] there's different audience that have<br>[24:01] different needs. So we have to be<br>[24:02] cognizant of that. Um, I think<br>[24:05] [clears throat] another question that is<br>[24:07] top of mind for every industry right now<br>[24:10] is AI. So, how is AI impacting website<br>[24:14] accessibility?<br>[24:18] Well, it's impacting it in a couple of<br>[24:21] ways. There's been a lot of talk about<br>[24:25] accessibility overlays in more recent<br>[24:27] years, and there's a great website I<br>[24:29] recommend called the overlay fact sheet,<br>[24:32] which has a lot of information about the<br>[24:36] tools. You may have seen them on<br>[24:37] websites. It they have like the<br>[24:39] accessibility icon, which is kind of<br>[24:40] like a little starfish guy. And when you<br>[24:43] click it, it opens up this whole<br>[24:44] toolbar, and it'll have sometimes it'll<br>[24:46] have a screen reader. It'll be like<br>[24:47] pause all the animation, change the<br>[24:49] color contrast, increase font size.<br>[24:51] Sometimes it's like change to a dyslexia<br>[24:53] friendly font like all these different<br>[24:54] buttons and tools. Um,<br>[24:58] and then those tools also try to use AI<br>[25:02] to understand the website and fix things<br>[25:04] that you, you know, like if you don't<br>[25:06] have images with alt text, it may try to<br>[25:08] read the image and insert all text, that<br>[25:10] kind of thing. Um, those have<br>[25:13] increasingly been found not to work for<br>[25:16] accessibility. Uh actually here in the<br>[25:19] US the um what is it the Federal Trade<br>[25:23] Commission fined one of the bigger<br>[25:25] overlay makers Accessibby last year in<br>[25:28] January they find them a million dollars<br>[25:31] for false advertising and they literally<br>[25:32] said you your tool can't make websites<br>[25:34] accessible and you're promising<br>[25:36] something you can't deliver. Um and in<br>[25:40] Europe as well that's being shown like<br>[25:42] those are not sufficient for meeting the<br>[25:45] European Accessibility Act. So there's<br>[25:47] that whole side of AI that I think got a<br>[25:49] lot of hype and it was like we're going<br>[25:51] to fix this and we're going to speed it<br>[25:52] up and people have started realizing in<br>[25:55] recent years that those don't actually<br>[25:56] help. The other situation with AI that<br>[25:59] is really difficult is that a lot of<br>[26:02] people are using AI to code things right<br>[26:06] now. Um you know like they might say oh<br>[26:09] I want a Beaver Builder module that<br>[26:11] doesn't currently exist. I'm gonna go to<br>[26:12] AI and help it build me a custom one,<br>[26:16] right, to match the specific design. And<br>[26:19] and that only works in so far as if AI<br>[26:23] is one prompted really well. And you<br>[26:26] can't just say make it accessible<br>[26:29] because to be totally honest, most AI AI<br>[26:32] is trained on average websites and most<br>[26:34] websites are not accessible, which is<br>[26:37] sad but true. And so a lot of times AI<br>[26:41] does not deliver accessible code and and<br>[26:45] so you would have to then understand<br>[26:47] what the problems are and be able to<br>[26:49] look at it and say no this this is not<br>[26:52] right. This is what I needed to do and<br>[26:53] you have to be able to test it just like<br>[26:55] you have to understand security right or<br>[26:58] WordPress coding standards. If you are<br>[27:00] using AI to help you build a plug-in or<br>[27:04] you know do something specific in your<br>[27:06] theme, then you have to know that. If<br>[27:09] you're an expert, then AI can really<br>[27:11] help you build things well. But if you<br>[27:13] don't know that, then it could just add<br>[27:16] problems.<br>[27:18] >> Yeah, that's a good tip. Um, so we're<br>[27:20] all uh relieved to hear that uh you<br>[27:23] know, AI cannot replace us. we still<br>[27:25] need to be the experts to oversee and<br>[27:28] make sure everything is working as um<br>[27:30] you know as designed.<br>[27:32] >> So, thank you for kind of going through<br>[27:34] some of these submitted questions. Um<br>[27:36] I'm going to go ahead and shift gears to<br>[27:39] open up the live Q&A. Um so, if you have<br>[27:42] questions, uh feel free to enter it into<br>[27:46] the comments. And one thing that helps<br>[27:48] me see it easier, if you can just put a<br>[27:51] Q uh right in front of your question,<br>[27:54] that kind of like stands out for me. So,<br>[27:56] if you go ahead and do that. But right<br>[27:59] now, I do have um one question that came<br>[28:02] in was<br>[28:06] is is um can you tell like what laws are<br>[28:11] required? Um is there any specific laws<br>[28:14] that are required for any like specific<br>[28:16] businesses? like accessibility wise.<br>[28:20] >> Sure. Uh so I'm going to first say I'm<br>[28:22] not an attorney or legal expert. So this<br>[28:25] is my understanding as a web<br>[28:26] professional who focuses in<br>[28:27] accessibility and we are not giving you<br>[28:29] any legal advice. Um, but they'll<br>[28:49] website to be accessible. There are also<br>[28:54] laws like the Americans with<br>[28:56] Disabilities Act which can impact<br>[28:59] businesses that are considered places of<br>[29:01] public accommodation.<br>[29:03] And um typically that's businesses that<br>[29:07] are brickandmortar, but there have also<br>[29:09] been cases for like for example Blue<br>[29:11] Apron, which was one of those meal kit<br>[29:13] delivery websites. uh they don't have a<br>[29:16] brickandmortar location, but they still<br>[29:18] got sued under the Americans with<br>[29:20] Disabilities Act for not having an<br>[29:22] accessible website. Uh and then there's<br>[29:25] a lot under the Americans with<br>[29:27] Disabilities Act that impact um city and<br>[29:30] local government and state government<br>[29:32] websites as well. In Canada, the there's<br>[29:37] some government laws that go across all<br>[29:39] of Canada. In some provinces, there are<br>[29:43] laws that also impact for-profit<br>[29:45] businesses or nonprofit organizations.<br>[29:48] Specifically, uh the in Ontario, the<br>[29:52] Accessibility for Ontarians with<br>[29:53] Disabilities Act or the AODA<br>[29:56] and in Manitoba has the their<br>[30:00] accessibility act goes down as small as<br>[30:04] any business that has one employee has<br>[30:06] to have a website that is accessible.<br>[30:09] The biggest one that has recently come<br>[30:11] into play and that a lot of people have<br>[30:13] been talking about is the European<br>[30:15] Accessibility Act. This impacts any<br>[30:18] websites in EU member countries or that<br>[30:23] serve there. So your business might be a<br>[30:25] US business, but if you have a<br>[30:27] sufficient amount of customers in one of<br>[30:30] these EU member countries, then this<br>[30:31] would apply to you. And that impacts any<br>[30:37] website for an organization that has<br>[30:39] more than โฌ2 million in turnover<br>[30:42] annually or 10 employees or greater. Um,<br>[30:46] and so that's the biggest one that came<br>[30:48] into enforcement in June of last year<br>[30:53] 2025<br>[30:54] and has caused a lot of people in the<br>[30:57] WordPress space to pay attention because<br>[30:59] obviously Europe is very big. Um,<br>[31:02] government websites almost everywhere in<br>[31:04] most countries around the world are<br>[31:05] required to be accessible.<br>[31:08] >> All right. Well, that's definitely some<br>[31:11] laws to think about and we all kind of<br>[31:12] have to do our individual research to<br>[31:14] see if it applies to us.<br>[31:17] So, can you tell us a little bit more<br>[31:20] about<br>[31:22] how do we indicate a landmark region?<br>[31:27] >> Yep. So, it's going to be different in<br>[31:29] different tools and I don't have a<br>[31:30] BeaverBuilder website open right now, so<br>[31:33] unfortunately I can't show that in<br>[31:35] there. Um, but I think I did show it in<br>[31:38] that course and if not, maybe we can do<br>[31:40] a follow-up<br>[31:41] version. Um, [clears throat]<br>[31:43] that specifically answers this. But the<br>[31:45] short answer is there's two ways to do a<br>[31:48] landmark region in HTML. One is actually<br>[31:52] using the specific semantics. So like a<br>[31:56] banner tag would be what you would wrap<br>[32:00] around a header. Um<br>[32:03] the content info is like footer. Main is<br>[32:09] what your main content is. So actually<br>[32:11] having that there. Um, or you can use<br>[32:15] Arya to add a RO and define it as a<br>[32:20] landmark if you need to make like a<br>[32:23] certain section or if you're remediating<br>[32:27] something that is a div and you can't<br>[32:29] change the tag. Uh, I believe in<br>[32:31] different parts of BeaverBuilder there<br>[32:33] are actually drop downs where you can<br>[32:34] set a specific you can choose what it<br>[32:37] is. So you might say, "Oh, instead of a<br>[32:39] div, I want this to be a section." And<br>[32:41] then if you were to give it an Arya<br>[32:42] label and it's a section tag, then that<br>[32:44] makes it a landmark region. Um, you<br>[32:48] should be able to do that in the editor<br>[32:49] in BeaverBuilder in most cases.<br>[32:53] All right, cool.<br>[32:55] Um, we have a question coming in from<br>[32:59] Vibrant Content.<br>[33:01] They asked, "Our nonprofit clients want<br>[33:05] accessible websites, but are often boked<br>[33:08] at paying more for the extra time and<br>[33:11] care and expense required to actually<br>[33:13] make the sites accessible. What would<br>[33:16] you recommend?"<br>[33:18] So, what I would recommend to an agency<br>[33:21] that if you serve a lot of nonprofit<br>[33:25] clients<br>[33:27] and you<br>[33:29] now I want to be careful about this<br>[33:30] because there are some nonprofits that<br>[33:32] have very large multi-million dollar<br>[33:34] website budgets. So, you have to kind of<br>[33:37] figure out like who is your nonprofit<br>[33:39] client. if they are one of those more<br>[33:41] budget sensitive, the way I would do it<br>[33:44] is I would come up with a handful of<br>[33:49] starters, whatever this means for you.<br>[33:52] um where you've taken some sort of theme<br>[33:56] uh or like BeaverBuilder kit and built<br>[34:00] out like this is these are options for<br>[34:02] homepages, this is an about page, this<br>[34:05] is a contact page, like whatever<br>[34:07] commonly is needed on these sites and<br>[34:10] then I would remediate them all. And<br>[34:13] then when you're having conversations<br>[34:14] with these clients, you would say, "We<br>[34:17] can do this for a lower budget, if you<br>[34:20] use one of our templates and we<br>[34:22] customize it lightly for you, right?<br>[34:24] Like you change it to their brand<br>[34:25] colors, you add their logo, maybe you<br>[34:27] rearrange some of the sections, but<br>[34:29] you're using something that you know was<br>[34:31] already your own, like it's already<br>[34:34] accessible to start." And then you say<br>[34:36] to them, if the other option if you<br>[34:38] don't like this is we go full custom and<br>[34:41] we're doing a full custom design for you<br>[34:44] and we're doing a lot of um testing as<br>[34:47] we go and all of that kind of stuff,<br>[34:50] but it's more expensive and then they<br>[34:51] have a choice. And so you're almost kind<br>[34:53] of creating two paths for your<br>[34:56] customers. And that way there is a path<br>[34:59] because it's more repeatable and you're<br>[35:01] reusing it that you can make it less<br>[35:05] expensive. The other thing I would say<br>[35:07] is that<br>[35:10] you can make accessible websites less<br>[35:13] expensive if you don't include<br>[35:17] really complex components. So sliders<br>[35:21] are one that it can be more difficult to<br>[35:23] make accessible<br>[35:25] and perhaps you just don't allow sliders<br>[35:29] on those websites. Then you don't have<br>[35:31] to worry about remediating it [laughter]<br>[35:33] and fixing it, right? Um, the other<br>[35:36] thing I would be very careful about, and<br>[35:39] I've seen this with a lot of builders,<br>[35:41] so it's not just a BeaverBuilder thing,<br>[35:43] but there's all these third-party<br>[35:44] add-ons where someone's like, I'm<br>[35:46] building BeaverBuilder modules or I'm<br>[35:49] building Elementor modules or whatever<br>[35:51] that is. I tend to see more problems in<br>[35:54] these third-party plugins than actually<br>[35:56] from the company themselves. So if you<br>[35:59] stick to more core BeaverBuilder<br>[36:01] components as opposed to going out and<br>[36:04] finding someone else who builds things<br>[36:05] for BeaverBuilder,<br>[36:07] then you are more likely to have an<br>[36:09] accessible website.<br>[36:11] That's not to say that there aren't<br>[36:12] accessible third parties, like people<br>[36:15] that are building it. It's just I tend<br>[36:17] to see more problems with those. So<br>[36:18] trying to think, can this be more<br>[36:20] simple? It doesn't mean it can't look<br>[36:22] nice, but can it be more simple? And<br>[36:24] that is a way to make it more<br>[36:25] cost-effective. Um, but the other thing<br>[36:28] too, like the total honest thing for a<br>[36:32] lot of these clients is there's just a<br>[36:35] reality of depending upon how they get<br>[36:38] their funding,<br>[36:40] they have to invest in accessibility and<br>[36:43] it's not optional. And<br>[36:46] I have a perfect example that is it's a<br>[36:49] it's a great example to share with<br>[36:51] people, but it's sad, which is we had<br>[36:55] someone come to us. They had a website,<br>[36:57] not a BeaverBuilder site, but they had a<br>[36:59] different site that was built. They made<br>[37:02] these really great video like music and<br>[37:07] art lessons that they sold to public<br>[37:09] schools. and they would also go in and<br>[37:12] do lessons with elementary school kids.<br>[37:15] And they were just like great people.<br>[37:17] And the nonprofit was really cool. And<br>[37:20] they had a bunch of contracts with very<br>[37:23] large school districts, one of which was<br>[37:24] the Los Angeles Public School District.<br>[37:27] And they came to us because when they<br>[37:31] had first built their website and they<br>[37:32] had first started creating these videos,<br>[37:36] accessibility was something maybe they'd<br>[37:38] never heard of. the web developer that<br>[37:40] they worked with hadn't done anything on<br>[37:43] it and then they got contacted by<br>[37:48] multiple of their school districts<br>[37:49] including LA public schools which is a<br>[37:51] huge contract that was like the majority<br>[37:53] of their funding<br>[37:55] saying<br>[37:57] before we can renew your five-year<br>[37:59] contract all your stuff has to be<br>[38:01] accessible<br>[38:03] and and it wasn't just their website it<br>[38:06] was their website but it was also So<br>[38:09] they weren't captioning their videos.<br>[38:11] They had to provide sign language<br>[38:12] interpretation for their videos and they<br>[38:16] they in the long run they ended up like<br>[38:18] they couldn't do it in the timeline that<br>[38:20] needed to be done. And they lost so many<br>[38:23] of their contracts with the schools<br>[38:25] because the schools said we can't<br>[38:26] procure this content. We can't have<br>[38:28] teachers and students going somewhere<br>[38:30] that's not accessible. Um because the<br>[38:32] schools would lose their federal<br>[38:34] funding, right? that the nonprofit<br>[38:35] actually ended up closing down and they<br>[38:38] were not a huge nonprofit and losing a<br>[38:42] few contracts literally ended their<br>[38:45] nonprofit and it was really sad because<br>[38:46] I thought like the content and the<br>[38:48] things they were trying to do was great<br>[38:50] but that it's like one of those things I<br>[38:54] think that nonprofits have to consider<br>[38:57] it it can't be ignored because it may be<br>[39:02] the end of the nonprofit.<br>[39:05] which is such a downer. I'm so sorry. I<br>[39:07] told a really horrible sad story, but I<br>[39:10] don't know. Like I'm I'm assuming<br>[39:12] there's a lot of agency owners here and<br>[39:14] I'm like these are the kinds of things<br>[39:15] that are like they really do happen, you<br>[39:17] know, and the lawsuits they do happen.<br>[39:19] They're not a huge number. I hate to<br>[39:21] scare people about that, but like<br>[39:24] for certain industries, if you're<br>[39:26] selling to certain places, right, your<br>[39:28] nonprofit that sells to schools, you<br>[39:31] can't if you sit on it too long cuz they<br>[39:34] just sat on it and then they tried to<br>[39:35] argue and then they right like and then<br>[39:37] their time ran out. So, it's better to<br>[39:39] get ahead of it if you can, even if<br>[39:41] you're making small fixes over time. And<br>[39:43] that's another thing I would tell<br>[39:44] nonprofits if they're remediating<br>[39:45] something. Um, it's not overnight, but<br>[39:50] certainly the header and the footer and<br>[39:53] the navigation menu could be fixed in a<br>[39:55] month, right? And then you pause and<br>[39:57] then a month later you do something<br>[39:59] else, right? Like figuring out how to<br>[40:01] space it out is can be really helpful<br>[40:04] and it's nice for the agency because it<br>[40:06] gives you some recurring revenue because<br>[40:07] you get them on kind of a retainer and<br>[40:09] you know what to expect. Um, but it's<br>[40:10] also can help make it more affordable<br>[40:12] for them because it's not like some<br>[40:14] giant investment they have to make in<br>[40:15] one month.<br>[40:17] I think this leads me to a next question<br>[40:19] because you mentioned you know schools.<br>[40:21] Uh this comes from school presser. He he<br>[40:24] runs a company that designs websites for<br>[40:26] schools and he asked uh without an<br>[40:30] expensive content maintenance contract.<br>[40:33] How do you keep your clients from<br>[40:35] undoing all of your accessibility<br>[40:37] optimizations? So how do they how do you<br>[40:39] prevent them from messing up their<br>[40:40] website?<br>[40:43] So to be totally honest, this is why<br>[40:46] accessibility checker was initially<br>[40:47] built was because we were launching a<br>[40:51] lot of websites for universities and<br>[40:53] then they don't have any sort of budget<br>[40:57] for content management on an ongoing<br>[41:00] basis. And so we'd build it, the<br>[41:02] department or the school at the<br>[41:04] university would take it over and<br>[41:05] sometimes they'd even have just like<br>[41:07] student workers [laughter]<br>[41:08] adding blog posts, right? Um, so there<br>[41:12] there are a couple of ways that I think<br>[41:14] you can handle this. Um, one is<br>[41:18] hopefully you're doing some sort of<br>[41:20] training for your clients when you hand<br>[41:22] off a website to them. You know, showing<br>[41:25] them the important things they need to<br>[41:26] know. Include accessibility in that<br>[41:28] training. So, of course, we have<br>[41:31] accessibility checker on every website<br>[41:33] and then we have conversations with<br>[41:37] clients. Uh, and and like I said<br>[41:40] earlier, we will always get even on a<br>[41:42] remediation project, we'll get the<br>[41:44] website to a point where if we open a<br>[41:47] blank page and we run a scan without<br>[41:49] adding any content, it's going to be<br>[41:51] 100% inaccessibility checker because<br>[41:53] there's no problems in header, footer,<br>[41:55] sidebar, widget areas, right? anything<br>[41:57] that's global has been fixed. And once<br>[41:59] we get to that point on remediation, we<br>[42:02] then sit down with the client and we<br>[42:05] say, "Okay,<br>[42:07] anytime you start a new blog post, it's<br>[42:09] 100%." And we train them on don't, you<br>[42:13] know, if you're adding things before you<br>[42:14] hit publish, you need to check this. And<br>[42:16] if it's not 100%, you need to look at<br>[42:18] the problems. And we talk about some of<br>[42:20] the common problems. We show them here's<br>[42:22] how you add meaningful link text. here's<br>[42:24] how you add alternative text to an<br>[42:26] image. Right? All of the common problems<br>[42:27] that we know they're going to make, we<br>[42:29] make sure we include that in our<br>[42:30] training. Um the and I think that, you<br>[42:34] know, that is really important. Um we do<br>[42:37] produce regular content that is also<br>[42:40] training content. Uh, so we'll encourage<br>[42:42] them to subscribe to our newsletter, but<br>[42:44] occasionally with some clients, if we're<br>[42:46] like, "Oh, this is really going to be<br>[42:48] applicable to them because we made<br>[42:49] something about a specific builder or<br>[42:51] about a specific industry that we think<br>[42:53] is relevant to them," we might just<br>[42:54] email it to them. And this is a nice<br>[42:56] like friendly way to stay in front of<br>[42:59] your customers anyway, so that they<br>[43:01] remember you and they decide, okay, next<br>[43:03] time I need something on the website,<br>[43:04] I'm going to go back because this whole<br>[43:06] time they've been helpful to me. even<br>[43:07] though I wasn't paying them, they would<br>[43:08] occasionally send me an article or<br>[43:10] something that I thought was interesting<br>[43:11] or useful. Um, so we'll do that which is<br>[43:14] kind of a like gentle nudge of reminder<br>[43:16] on training. Um, we also try if we can<br>[43:20] to get people on some sort of monitoring<br>[43:22] plan and that is not always a monthly<br>[43:24] plan. Uh sometimes it's only quarterly<br>[43:26] if they don't have a big budget. And<br>[43:29] we've had a few where it's like every<br>[43:31] six months or even just annually. And<br>[43:34] they pay for<br>[43:36] some number of hours for us to do a<br>[43:40] automated check-in with accessibility<br>[43:42] checker and then manual testing of a few<br>[43:45] pages. And then from there,<br>[43:48] we will sit down with them and say,<br>[43:52] "Okay, here are the problems we noticed.<br>[43:54] Sometimes they came from maybe a plug-in<br>[43:56] update." And so that means that they<br>[44:00] might not be able to fix it. And so<br>[44:02] either it has to be reported or they<br>[44:04] then hire us to do a small like little<br>[44:07] remediation pass. Other times it's<br>[44:09] content. And so we talk to them and we<br>[44:11] say, "Hey, remember that that training<br>[44:12] we had when we launched the website?<br>[44:14] Let's go back over it." or we noticed<br>[44:16] that you inserted this new plugin and<br>[44:18] here's a thing that isn't great about<br>[44:20] it. Does it need to be switched or can<br>[44:24] you change how you're using it? Right?<br>[44:25] So, if you can get them on some sort of<br>[44:27] like monitoring, even if it's only<br>[44:29] annually, that's nice. It's a nice touch<br>[44:31] point. And I'll be totally honest to<br>[44:33] agency folks that are here, like having<br>[44:35] those touch points is also helpful if<br>[44:37] you want to sell other work because a<br>[44:39] lot of times they get used to talking to<br>[44:41] you once a quarter and they're like,<br>[44:42] "Oh, wait. maybe we should add this<br>[44:44] other thing so you can sometimes also<br>[44:46] upsell them.<br>[44:48] >> That's a great advice for you know us<br>[44:51] agency owners because uh yeah sometimes<br>[44:53] our clients do mess up the site but we<br>[44:55] sometimes just have to educate them and<br>[44:57] coach them on what good looks like and<br>[45:00] in a way it's a great way to like you<br>[45:02] said touch base with them and maybe<br>[45:04] offer them some additional services. So,<br>[45:08] um I think I can squeeze in one more<br>[45:11] question. Uh for you folks that are<br>[45:13] asking questions specifically about<br>[45:16] BeaverBuilder, uh feel free to submit<br>[45:19] any of those to our support team. Um and<br>[45:22] if we can't answer that, then we'll<br>[45:23] definitely answer it in a different<br>[45:25] maybe future blog post or email, but<br>[45:27] we'll make sure that we'll collect all<br>[45:28] your questions here and get back to you.<br>[45:31] Um so, one last question on the topic of<br>[45:34] clients.<br>[45:36] Um, Maxine asks, "Clients sometimes want<br>[45:40] an accessibility." I I want to think<br>[45:43] that's overlay because of optics. Maybe<br>[45:45] it's that kind of that thing that you<br>[45:46] were talking about with the AI. Um,<br>[45:50] anyways, it makes a user think the site<br>[45:52] is fully accessible.<br>[45:54] >> How can we talk them out of this?<br>[45:58] >> Different clients react different ways,<br>[46:00] but generally we have had good luck in a<br>[46:03] couple of ways. We will share the<br>[46:05] overlay fact sheet with clients and<br>[46:07] we'll say go read this. This has a lot<br>[46:09] of information. Um we have had clients<br>[46:14] um where you know we'll send them the<br>[46:18] FTC ruling against excessive and be like<br>[46:20] here you go read this like if they were<br>[46:22] like what about accessibby because they<br>[46:24] that's someone that has a lot of venture<br>[46:25] capital so a lot of people have heard<br>[46:26] about it. So they're like well this<br>[46:28] literally they got fined and it says<br>[46:30] they're not they can't make a website<br>[46:32] accessible. that really can convince a<br>[46:34] lot of people. Um the other thing we<br>[46:36] have done because we occasionally have<br>[46:38] remediation customers who come to us who<br>[46:40] already have an overlay and so you know<br>[46:44] my first reaction is I want to turn the<br>[46:45] overlay off immediately but they are<br>[46:49] worried that doing that will make their<br>[46:52] website worse. Uh so the way we handle<br>[46:56] that is we copy their site to staging.<br>[47:00] We turn the overlay off. We audit the<br>[47:03] homepage with the overlay on and the<br>[47:05] homepage with the overlay off and 99% of<br>[47:09] times we find very little um improvement<br>[47:14] with the overlay on. Like I did this<br>[47:15] recently for one with user way and you<br>[47:17] couldn't even tell the difference like<br>[47:18] it wasn't really fixing anything. And<br>[47:21] then and then we do something like oh<br>[47:23] and if you increase the font size in the<br>[47:25] user way overlay all your text overlaps<br>[47:28] because it doesn't adjust responsively<br>[47:31] and so it actually breaks your website.<br>[47:33] So like literally showing them those<br>[47:35] things then they're like oh okay yeah<br>[47:37] actually and and then I'm like and how<br>[47:38] much are you paying per month for this?<br>[47:40] Like let's just turn it off. And and so<br>[47:42] usually that has been helpful. Um there<br>[47:45] is also a annual report that a company<br>[47:49] called user centrics wait no sorry<br>[47:52] usablenet<br>[47:54] usablenet puts out about accessibility<br>[47:57] lawsuits and the numbers in the United<br>[47:59] States and last year I think about 25%<br>[48:02] of the lawsuits were against<br>[48:04] organizations that already had an<br>[48:06] accessibility overlay on it. Um, so I've<br>[48:08] occasionally shared that with people and<br>[48:10] said, "Hey, you know, this is not going<br>[48:11] to guarantee protect you."<br>[48:15] >> All right. Well, that's some good advice<br>[48:17] and we're definitely have to try to<br>[48:19] convince our clients not to have the<br>[48:21] overlay.<br>[48:23] >> Yeah.<br>[48:25] >> All right. So, I just want to start wrap<br>[48:29] this up with saying thank you so much,<br>[48:31] Amber. Um, you've shared so much<br>[48:34] expertise today. Uh this is very<br>[48:37] incredibly helpful and if some of you uh<br>[48:39] want to learn more, I encourage you to<br>[48:41] watch the free course on accessibility.<br>[48:44] Amber goes like a really deep dive and<br>[48:46] she does more screenshots and examples<br>[48:49] and real case studies so for you to kind<br>[48:51] of help you with your um client<br>[48:54] projects. So definitely make sure you<br>[48:56] check that out if you haven't done so<br>[48:57] already. But uh once again, thank you so<br>[48:59] much Amber for for joining us today.<br>[49:03] >> Yeah, thank you for having me. Can I<br>[49:05] shout out real quick? I saw a question<br>[49:07] about the accessibility pol or not a<br>[49:09] question, a statement. Someone<br>[49:10] recommended um an accessibility policy<br>[49:13] or statement the footer is a great way<br>[49:15] to visualize my site is accessible<br>[49:17] better than overlays. And I definitely<br>[49:19] agree with that statement. Um even if<br>[49:22] your website is still in progress, it is<br>[49:25] really helpful to have an accessibility<br>[49:27] statement that says, you know, we do<br>[49:29] care about this. we're working on it and<br>[49:31] if you need help, here is how you can<br>[49:33] contact me. Um, and I've had multiple<br>[49:36] attorneys uh who specialize in this tell<br>[49:40] me that uh actually having that<br>[49:42] accessibility statement can be<br>[49:44] protective of lawsuits because anyone<br>[49:46] who really cares is going to go and<br>[49:48] they'll contact you and ask for help<br>[49:50] first and then if you help them, right,<br>[49:52] then they'll be happy. Um, or if you fix<br>[49:54] the problem. So, so I appreciate the<br>[49:56] comment that that person put that. I<br>[49:58] think that is spot on. So,<br>[50:00] >> all right. Thank you for highlighting<br>[50:02] that.<br>[50:04] >> Yeah.<br>[50:05] >> So, thanks again everyone for joining<br>[50:06] us. This video will be available for<br>[50:09] replay on our YouTube channel and we<br>[50:12] appreciate you being part of the<br>[50:14] BeaverBuilder community and uh make sure<br>[50:17] that you um like and subscribe to our<br>[50:19] YouTube channel if you haven't done so.<br>[50:21] All right, everyone. Thank you so much.<br>[50:23] And uh if you want to learn more, visit<br>[50:25] equalizeddigital.com<br>[50:27] where you'll find accessibility tools,<br>[50:30] services, and free educational<br>[50:32] resources. All right, signing off. Take<br>[50:34] care.<br>[50:48] [music]<br>[51:01] Hey,<br>[51:10] hey,<br>[51:15] hey.
<!-- deep-read:sections end -->