061: Accessibility Ask Me Anything with Equalize Digital and Digital A11y

This episode is a recording of a March 2024 WordPress Accessibility Meetup where we held an open question-and-answer session on a wide variety of web accessibility topics. We discussed building accessible websites, accessibility testing, selling accessibility to clients or internal stakeholders, and more. If you want to watch a video recording from the meetup, you may do so on the Equalize Digital website: Accessibility Ask Me Anything with Amber Hinds, Chris Hinds, Steve Jones, and Raghavendra Satish Peri.

Listen

Mentioned in This Episode

Summarized Session Information

In this comprehensive session, Amber, Chris, Steve, and Raghavendra shared valuable insights on various aspects of web accessibility, focusing on practical solutions and strategies for creating inclusive digital experiences. Topics ranged from building accessible websites, implementing accessible content strategies, to navigating the complexities of accessible technology in webinars and software training.

Key takeaways include the importance of using automated tools like the Accessibility Checker plugin and browser extensions such as WAVE and HeadingsMap for identifying and correcting accessibility issues. For content creation, a dual approach that combines training with the right tools was emphasized, alongside the use of semantic HTML and the Gutenberg editor for ensuring accessible output in WordPress sites.

The discussion highlighted the necessity of making e-learning content accessible to all users, including providing transcripts for videos and ensuring e-learning platforms themselves support accessibility features. The importance of maintaining HTML semantics for both accessibility and SEO purposes was also underlined, particularly in the context of structuring content with appropriate heading levels and ensuring links are distinguishable and descriptive.

In the context of conducting accessible webinars or Zoom sessions, adjustments to accessibility and notification settings were discussed to minimize distractions for screen reader users. The balance between enabling chat functionality for engagement and managing its accessibility was explored, with personal adjustments and strategies shared for navigating these platforms effectively.

The session also addressed concerns about long-form content, the conversion of PDF files to HTML for better accessibility, and the design considerations for underlined text and link differentiation. The significance of having an accessible website redesign plan, including an effective accessibility statement and transparent communication about ongoing accessibility efforts, was stressed as a proactive measure against potential accessibility lawsuits.

Q: How do we ensure that the semantic heading structure is logical when editors (not aware of accessibility) can pick and choose components and put them in any order?

Amber highlighted the importance of a dual approach to ensure proper selection by content editors, emphasizing the necessity of training and tools. She underscored the role of their Accessibility Checker plugin in providing immediate feedback to content creators directly within the content creation environment, especially useful for those without accessibility knowledge.

For non-WordPress sites, browser-based tools like WAVE were recommended, along with the HeadingsMap browser extension, which aids in the evaluation of heading structures, albeit with limitations in recognizing custom blocks within WordPress.

Steve addressed the technical aspects of implementing accessible heading structures, particularly in custom blocks. He pointed out the challenges in programmatically determining the correct heading level and the importance of offering clients options to choose appropriate heading levels for custom content blocks. This customization is essential for accommodating diverse content structures, such as nested team member listings, which may require headings at various levels.

Paola, reflecting on her experience as a content creator unfamiliar with web development, shared her strategy for maintaining proper heading order on her personal WordPress site. She is able to adjust heading orders and styling through the WordPress customization toolbar, highlighting the balance between aesthetic considerations and accessibility requirements. Her approach illustrates the accessibility challenges faced by non-developers and the importance of intuitive tools that enable content creators to achieve both visually appealing and accessible web content.

Q: I have a client who wants guidelines for a QR code-driven app/landing page that will mainly be used outdoors to display information about memorial markers or sculptures in a park setting. They’re asking about font size, word count per page, and navigation. What recommendations would you have for a website like this?

You have to consider the importance of adhering to WCAG guidelines while considering the unique environmental factors of outdoor use. Steve suggested using a minimum font size larger than the standard recommendations, possibly around 16 to 20 pixels, to accommodate users in outdoor settings where visibility might be compromised.

Steve emphasized the need for concise content, suggesting a word count limit to prevent information overload. He also recommended utilizing HTML elements like bullet points for clarity. To enhance usability on mobile devices, navigation should be simplified, avoiding complex dropdowns or sliders. Given the outdoor setting, Steve also advised increasing color contrast significantly beyond the standard specifications to ensure readability in sunlight.

Steve highlighted the challenges of accessing QR codes for non-sighted users and recommended clear instructions and accessible features accompanying them. Raghavendra added the importance of tactile markers or alternative text descriptions, possibly in Braille, to aid users in locating and understanding the QR codes. He expressed concerns about QR code security and the practical difficulties of scanning them in crowded or noisy outdoor environments.

Further discussing content descriptiveness, Amber inquired about the level of detail desirable for artwork descriptions on the landing page. Raghavendra advocated for creative, simple, and plain language descriptions that provide a vivid “mind’s eye” view of the artwork, emphasizing the importance of reading level accessibility, ideally targeting an eighth-grade level or lower to accommodate the general public. This approach aims to make artwork descriptions engaging and accessible to all visitors, enhancing their experience of the art in a public space.

Q: How did Equalize Digital generate leads and convert them
to paying clients when you were first starting out? What strategies
would you recommend to a new web accessibility agency looking to grow its client base?

Chris emphasized the importance of perseverance through initial failures and highlighted six key strategies that proved effective for Equalize Digital:

Specialization: focusing on a niche within web accessibility that you are passionate about and foresee demand for. This involves starting with a narrow focus and expanding from there.
Presence and value: Engaging in activities that increase your visibility and provide real value to your target audience, such as creating content, public speaking, and hosting meetups.
Building an engaged list: developing methods to gather contact information passively, enabling you to provide more value and eventually extend collaboration or service offers.
Sales process and CRM utilization: establishing a structured sales process and utilizing a CRM for tracking, coupled with persistence and patience, recognizing that efforts today will yield results in the future.
Networking and mentorship: engaging with peers, seeking mentorship, and building relationships with individuals ahead in the business to gain valuable advice and insights.
Continuous improvement: constantly seeking ways to improve the company and acknowledging that improvement is an ongoing process.

Amber added to Chris’s points by stressing the importance of creating high-quality content that genuinely helps people and noting the long-term benefits of such an approach. She shared her own experience of creating a detailed blog post that was organically shared within the community and emphasizing the impact of valuable content on lead generation and brand reputation.

Raghavendra shared his perspective on content creation, illustrating how everyday experiences can be transformed into engaging content that attracts visitors and fosters engagement. He underscored the significance of addressing niche topics, providing mentorship, and leveraging networking opportunities, even in a virtual setting, to establish a strong presence within the accessibility community.

Q: I have developed a WordPress site using MilSuite, a WordPress platform for the US Department of Defense, and I have no idea how to make it accessible. I’m not tech-savvy and don’t know much about plugins. Where would you recommend that I start?

Amber recommended starting with automated testing tools like WAVE to identify and correct basic accessibility issues, emphasizing the importance of making simple yet impactful changes such as ensuring navigational menus are accessible through keyboard tabbing, using headings correctly, creating meaningful link texts, and providing alt text for images. For government websites that might include charts, graphs, and tables, Amber stressed the need to make these elements accessible by providing data tables for graphs and ensuring color is not the sole means of conveying information, suggesting the use of patterns to differentiate data visually for those with color vision deficiencies.

Raghavendra added the importance of accessible forms, advising visible labels for form fields, avoiding placeholders as the sole form of labels, providing clear and easily locatable error messages, and steering clear of auto-moving carousels to ensure consistent navigation.

Steve pointed out the necessity of becoming an advocate for accessibility within organizations, encouraging outreach to departments capable of implementing changes. He underscored the potential benefits of partnering with accessibility specialists, either internally or through external vendors, to ensure thorough testing and training for users of milSuite.

Q: Let’s discuss ways to learn accessibility. What resources did you find helpful when you were learning to code from an accessibility-first perspective?

Steve offered a comprehensive overview of resources and strategies for learning web accessibility from a developer’s perspective. He emphasized the importance of diving into official documents like the WCAG guidelines and leveraging various tools and platforms for hands-on learning.

Steve’s journey into accessibility was propelled by the development of the Accessibility Checker, necessitating a deep dive into accessibility standards and practices.

Steve and Amber recommended the following resources for those looking to enhance their understanding and implementation of accessible web design:

WCAG guidelines: the foundational documents for web accessibility standards.
Mozilla MDM docs: offers developer-friendly explanations and code examples for web accessibility.
Accessibility Checker documentation: provides detailed guidance on resolving accessibility issues detected by the tool.
Browser extensions: Tools like WAVE, Axe DevTools, Google Lighthouse, HeadingsMap extension, Color Blindly, and Tabally offer immediate feedback on accessibility issues on web pages.
Linters: the Axe Accessibility Linters for Visual Studio Code, helping developers identify and fix accessibility issues in their code.
Screen readers: utilizing VoiceOver, NVDA, or JAWS to test websites from the perspective of users who rely on these tools.
WordPress plugins: including the Accessibility Checker plugin and WP Accessibility by Joe Dolson for implementing accessibility features and practices on WordPress sites.
Community resources: leveraging Slack groups, Twitter, and Facebook groups for support and knowledge sharing on accessibility issues.
Educational platforms: The A11Y Collective and WordPress Accessibility Day offer video resources and training materials to further accessibility knowledge.

Steve and Amber underscored the learning-by-doing approach as crucial for developing an accessibility-first mindset. They advocate hands-on experimentation with tools and code to understand and implement accessibility principles effectively. They highlighted the value of community support and peer review in navigating accessibility challenges, emphasizing the role of collaboration and shared knowledge in fostering an inclusive web.

Q: What kind of training or certifications do you think are necessary in order to specialize in accessible WordPress design?

Raghavendra emphasized the foundational importance of understanding the fundamentals of accessibility over obtaining certifications. He shared his journey from learning HTML at W3 Schools to delving into accessibility practices, highlighting that real-world application and collaboration with other accessibility professionals provided him with significant insights and clarity on WCAG compliance, usability, and design experience for individuals with disabilities.

Raghavendra noted that while certifications, such as those from the International Association of Accessibility Professionals (IAAP), can enhance knowledge by requiring the exploration of a broad range of topics, including various disability types and universal design for learning, the essence of mastering web accessibility lies in continuous practice and application. He specifically mentioned his experience with the IAAP’s Certified Professional in Accessibility Core Competencies (CPACC) and the Web Accessibility Specialist (WAS) certifications, which broadened his understanding but were complemented by practical learning through platforms like edx.org for JavaScript, HTML, and CSS fundamentals.

In the context of WordPress, Raghavendra pointed out that while the platform offers accessible themes and plugins, such as the Accessibility Checker, critical evaluation and testing are essential to ensure true accessibility. He cautioned against relying on claims of ADA compliance without thorough testing, sharing an example of testing a carousel plugin that failed basic accessibility criteria.

Raghavendra also addressed the value of certifications in professional advancement. While he views certifications not as a primary learning tool but rather as a means to enhance existing knowledge, they have proven beneficial in gaining employment and building credibility with clients. Specifically, he suggested the Department of Homeland Security’s (DHS) Trusted Tester program as a comprehensive course for learning accessibility auditing in depth, indicating that such structured learning paths are instrumental in understanding the technical aspects of accessibility audits.

Q: Can you explain the governing body behind the efforts around WCAG? Are these guidelines a good approach for international compliance instead of just US-focused? Are there other international standards we should be aware of for multinational brands?

WCAG, which stands for the Web Content Accessibility Guidelines, operates somewhat like an open-source project where volunteers globally contribute to its development and updates. This collaborative and inclusive approach ensures that the guidelines are comprehensive and consider a broad spectrum of accessibility issues and solutions recognized worldwide.

Amber affirmed that WCAG serves as a robust standard for testing and measuring web accessibility on an international scale, not just within the United States. The guidelines are widely accepted and referenced by laws in various countries, making them a solid foundation for achieving international compliance in web accessibility. However, she also mentioned that some regions, like the European Union, might have additional or specific laws related to accessibility that don’t directly reference WCAG. In such cases, while WCAG remains a reliable standard, it’s important for organizations also to familiarize themselves with local regulations to ensure full compliance. Consulting with a legal professional is recommended for those concerned about legal compliance in specific jurisdictions.

Chris expanded on the discussion by distinguishing between compliance with laws and standards. He highlighted the gray areas between the two, noting that some solutions might claim legal compliance without providing a quantifiable standard. Legal texts often describe accessibility in qualitative terms, such as providing an “equivalent experience,” which can be subjective. In contrast, WCAG offers measurable and quantifiable criteria for accessibility, making it a preferred standard for demonstrating compliance in a clear, provable manner. This quantifiability is crucial when addressing complaints, regulators, or legal challenges, underscoring the importance of adhering to established standards like WCAG for moral and practical reasons.

Q: I currently write articles for my blog in Markdown and make layout and visual edits in Elementor. Do you know of a more accessible-friendly content editor for WordPress, both in terms of accessible usage and ensuring that the content on the page being edited is accessible?

Amber and Raghavendra shared insights and personal workflows to enhance both the accessibility of using content editors and the accessibility of the outputted content on web pages.

Raghavendra prefers a multi-step process for content creation, starting with drafting in Microsoft Word to utilize its heading and list tagging features, then transferring the content to WordPress’s Gutenberg editor. This approach leverages Gutenberg’s ability to generate accessible semantic HTML from Word documents, minimizing the need for extensive manual adjustments.

For users who encounter difficulties with screen readers in Gutenberg, Raghavendra suggests a workaround that involves temporarily enabling the Classic Editor to make specific edits before disabling it again. This technique allows for a blend of Gutenberg’s block-based advantages with the Classic Editor’s accessibility features for screen reader users.

Despite Gutenberg’s improvements in screen reader accessibility since its initial release, Raghavendra acknowledges that certain blocks, like tabs, accordions, and tables, may still require sighted assistance for optimal configuration. He reminisces about the Classic Editor days when he would write HTML directly or use external tools for complex elements, a process that Gutenberg has changed significantly due to its block-based approach.

Amber supports the use of WordPress’s core block editor over third-party page builders for both editing and final content accessibility. She points out that third-party tools often fail accessibility testing, leading to significant issues in their blocks.

Amber and Raghavendra both emphasize the importance of relying on core blocks or custom-developed blocks to ensure accessible outcomes. They also encourage users to advocate for accessibility improvements with page builder developers, suggesting that community feedback, such as opening issues on GitHub or WordPress support forums, can influence positive changes in these tools.

The discussion concludes with a consensus that, for those prioritizing accessibility in WordPress content creation, the block editor offers a more accessible editing experience and ensures more accessible content output than most third-party page builders.

Q: Google page speed often flags links in the body content as meeting more than colors to distinguish them from non-linked text. A lot of my clients don’t like underlined links. I sometimes get away with a light dotted underline, which satisfies accessibility checking, but what are some suggestions other treatments or links beyond just colors?

Raghavendra shares his experience working with sighted assistants who sometimes mistake unadorned text for a link, illustrating the confusion that can arise when links are not visually distinct. Amber raises a crucial point about the potential for WCAG compliance issues when links are not adequately differentiated from regular text. While WCAG guidelines do not mandate underlining as the only method of differentiation, the practice of underlining links has become a de facto standard due to its clear communication to users that a text element is clickable.

Steve and Chris further discuss the importance of adhering to user expectations and the problems that can arise from using underlines for purposes other than indicating links, such as emphasis or decoration. They note how such practices can lead to user frustration when text appears clickable but is not, highlighting the value of standardization in web design.

The discussion also touches on resistance from clients who may view underlined links as outdated or incongruent with their brand aesthetics. Amber recounts an instance where a client requested the removal of underlines from links because they found them too conspicuous. This situation was resolved by adjusting the link color to a less vibrant shade, maintaining accessibility while addressing the client’s concerns about visual prominence.

This conversation underscores the balancing act between maintaining accessibility standards, such as clear link differentiation, and meeting aesthetic preferences. While alternative methods for denoting links can be explored, the clarity and familiarity of underlining should not be underestimated. Moreover, the discussion emphasizes the importance of understanding the underlying reasons behind design preferences and finding creative solutions that uphold accessibility principles.

Q: When a website has a lot of accessibility issues that are being addressed through a redesign, what can be done to protect the company from accessibility lawsuits before the website redesign is finished?

Steve and Amber emphasize the importance of having a comprehensive accessibility statement. An accessibility statement plays a crucial role in demonstrating a commitment to accessibility and providing clear avenues for assistance.

Amber mentions that based on insights from attorneys within the accessibility field, the accessibility statement should prominently feature methods for obtaining help, ensuring these methods are effective and lead to real support rather than dead ends.

Expanding on this, Steve suggests that listing known accessibility issues in the statement can also be beneficial, noting it as a best practice rather than a requirement.

Raghavendra further emphasizes the importance of transparency about known barriers. He highlights the need for an easily accessible contact option, such as a dedicated phone number, to facilitate direct communication with someone who can provide assistance and empathy.

Amber shares a practical example from her experience with universities undergoing mandated remediation under the Office of Civil Rights (OCR) of the U.S. Department of Education. She recounts a scenario involving a community college using an inaccessible third-party platform for class registrations. When the platform vendor was uncooperative with making necessary accessibility improvements, the OCR considered it acceptable for the college to communicate the platform’s accessibility issues directly to users. This involved not only including information in the accessibility statement but also placing a clear notice near the registration link, advising of the platform’s limitations, and offering alternative methods for registration.

This discussion highlights the importance of proactive measures in addressing accessibility concerns, particularly when facing legal and compliance challenges. An effective accessibility statement, transparency about known issues, direct communication channels for assistance, and clear notifications about inaccessible elements are key strategies for demonstrating an organization’s commitment to accessibility and inclusivity while working toward comprehensive solutions.

Q: I’m a software trainer at a media company. I train linguistics on how to use a scripting tool to create docs and audio descriptions. We are starting to hire blind QCers to review the audio descriptions to make sure they are accurate and accessibility friendly. They will be using our software, which we’ve made accessible. My question is, do you have any resources or advice on how to best conduct training for blind users? I make online courses, one-on-one trainings, documentation, et cetera. I would love to hear your your experience in training. I want to make sure I am inclusive in my speech and make the QCers feel comfortable.

When training blind users, especially for roles that involve reviewing audio descriptions for accuracy and accessibility, adopting a holistic and inclusive approach is crucial. Raghavendra emphasizes the importance of guidance and preparation, suggesting that a thorough explanation of the software’s visual layout and functionalities by a sighted assistant can greatly enhance a blind user’s understanding and efficiency. This preparatory step ensures that blind users are not just familiar with their screen readers but also with the specific product they are testing.

For e-learning content, Raghavendra highlights the preference of many blind users for transcripts over videos. Transcripts allow for faster navigation and easier access to specific information, accommodating the high reading speeds of screen reader users. This preference underlines the necessity of providing comprehensive, accessible transcripts for all video content to ensure inclusivity.

You need to ensure that the e-learning platform itself supports accessibility features. Since many e-learning tools automatically generate certain components, it’s vital to verify that these components are accessible or to work directly with the platform providers to address accessibility gaps.

Chris contributes by underscoring the importance of verbal descriptions for visual elements in presentations. This practice not only aids blind attendees during live sessions but also enriches the transcripts used for later review. It ensures that all learning materials are comprehensively accessible, regardless of the user’s preferred method of consumption.

Amber suggests consulting with organizations experienced in training blind individuals, such as the Carroll Center for the Blind. These organizations can offer insights into effective training methodologies and potentially provide consultation services to develop accessible training programs.

By considering these varied approaches and resources, trainers can create an inclusive, supportive environment that empowers blind QCers to excel in their roles.

Q: Someone mentioned having an H2 heading titled ‘popular products.’ underneath each product part, use H3s for product names. However, for SEO purposes, they were advised to change the popular products heading to a div, and make the product title titles, H2s instead. Is that correct?

The panel unanimously disagreed with the advice to change an H2 heading titled “popular products” to a div and make the product titles H2 headings instead. This approach was criticized for several reasons:

Poor usability for screen reader users: Raghavendra pointed out that altering the semantic structure in this way significantly decreases usability for individuals using screen readers. Screen readers depend on headings to navigate and understand a page’s structure. Removing a relevant heading like “popular products” removes an essential navigational aid.
Loss of context: Without the “popular products” heading, there is no context to differentiate the products under this category from other products on the page. This could confuse users about why certain products are highlighted.
SEO impact: Raghavendra, drawing on his SEO expertise, emphasized that search engines use headings to understand the content and structure of a page. Headings provide a semantic relationship between the title and the content that follows, which is crucial for SEO. The original advice to use a div instead of an H2 for “popular products” overlooks the importance of headings in helping search engines understand page content and structure.
Importance of HTML semantics: The group highlighted the necessity of maintaining HTML semantics for accessibility and SEO. Proper use of headings ensures that content is structured logically, making it easier for all users to navigate and understand the website and helping search engines index content more effectively.

Q: I have a web page with a list of publications from a faculty member. They put the link to the article at the end of the citation. Would it be better to create a hyperlink on the text of the citation, as opposed to placing the link at the end?

Raghavendra shared that he incorporates links in two ways: by placing the link at the end of the citation and by embedding the hyperlink within the text of the citation itself. However, he emphasized the importance of ensuring that the link text is descriptive and meaningful.

Q: Amber and Chris, your very first contact at NASA, what was their job title? If they’re thinking of approaching bigger organizations, it’s handy to know who can become a cheerleader within the company.

Amber and Chris shared insights about their initial contact for a project with NASA, highlighting the importance of networking and building relationships in securing large organizational projects. Their first point of contact was not directly with someone from NASA but with a developer named JJ, the owner of Loan Rock Point, who had an existing contract with NASA and knew he wanted to bring Equalize Digital into the project. This emphasizes the strategy of connecting with vendors or contractors who are already working with the target organization as a way to get introduced to larger projects.

After initial discussions with the vendor, they were then connected to Abby, the director of web modernization at NASA. Abby’s role as a department head within such a significant organization underscores the necessity of reaching high-level contacts who have the authority or influence to champion projects within their organization.

Q: How is Gen AI being used in accessible tech?

In a discussion about the use of Generative AI (Gen AI) in accessible technology, Steve and Amber explore the potential and challenges associated with integrating AI into accessibility solutions. Steve acknowledges the utility of AI from a development perspective, where it can assist in identifying accessibility issues, such as evaluating code for ARIA attribute necessity or leveraging tools like GitHub Copilot for accessibility insights.

However, when considering generative AI’s application for end-users, especially in augmenting their experience based on individual disability spectrums, Steve points out the complexity involved. The challenge lies in how generative AI can accurately assess and address the unique needs of users with diverse and possibly multiple disabilities. While there’s optimism about the future capabilities of AI in creating personalized experiences for users based on their specific abilities, there’s also recognition that this level of sophistication may be years away.

Amber raises a critical concern about the training data for AI, highlighting that if AI is trained on predominantly inaccessible content, its understanding and standards for web accessibility might be skewed. Additionally, the current inability of AI to generate adequate alt text exemplifies the limitations of AI in fully understanding and meeting accessibility requirements.

Q: Social media icon links. Love the Equalize Accessibility Checker. I get an aria-hidden and link opens a new window, or top warnings connected with my social media links. Please explain what to do.

Amber addressed concerns regarding social media icon links that trigger warnings in the Equalize Accessibility Checker, specifically related to the use of aria-hidden attributes and links that open in new windows or tabs. She outlined the best practices for managing such links on websites, emphasizing the general recommendation against opening links in new tabs or windows. This practice aims to maintain user flow and avoid disrupting their navigation experience, except in cases where leaving the current page would result in lost progress, such as within a form.

However, if there’s a need or a strong preference for links to open in new tabs or windows, Amber advises providing a clear warning to users. This approach aligns with WCAG guidelines and Section 508 compliance, which advocate for informing users about the behavior of links that lead to new tabs or windows. For instances where opening links in new tabs or windows is necessary, Amber suggests using the free Accessibility New Window Warnings plugin available on WordPress.org. This plugin automatically adds the appropriate aria-label and a visible icon to alert both sighted and non-sighted users that the link will open in a new window or tab.

Q: For blog posts, how long is too long? I’ve been working on a post on multimedia, and I generally shoot for about 1,200 to 2,500 words, but this one ended up closer to 3,000. Should I pare it down, or is it OK? What do you think?

there isn’t a definitive “too long” when it comes to content length. Amber shared her experience writing a comprehensive post on the WCAG 2.2 summary, which amounted to 5,883 words. This example underscores the point that the length of a blog post should primarily be determined by the goals of the article, the target audience, and the complexity of the topic being addressed.

The key is to ensure that the content is well-organized, using headings to structure the post logically and make it navigable for readers, including those using assistive technologies. As long as the content is engaging, informative, and addresses the readers’ needs or solves their problems, longer posts can be as effective as shorter ones. Amber also touched on the importance of the content’s ability to maintain reader interest from beginning to end, noting that comprehensive, in-depth exploration of a topic can be highly valuable and engaging for the audience.

Raghavendra concurred with this perspective, indicating that the content’s relevance and the way it addresses the user’s needs are what matter most, not necessarily the word count.

Amber concluded by suggesting that while there might be occasions where breaking up content into multiple parts could be beneficial, there is generally no such thing as “too long” for blog posts as long as the content is relevant and effectively organized. This approach aligns with best practices for creating accessible and user-friendly content that serves the needs of a diverse audience.

Q: My clients love PDF files. When possible, I try to convince them to convert the content to HTML, but often they don’t. What are your thoughts on that?

Whenever possible, converting PDF content to HTML is the preferred approach due to its inherent accessibility, SEO benefits, and overall user experience advantages.

Steve champions the conversion of PDFs to HTML and advocates webpages as the best format for content delivery online. This method ensures content is easily accessible, navigable, and indexable by search engines, which can significantly improve a website’s visibility and reach.

However, Amber and Raghavendra acknowledge that there are scenarios where PDFs are necessary or preferable, such as documents intended for printing or specific forms that require a fixed layout. In these cases, Raghavendra emphasizes the importance of making PDFs accessible by properly tagging them. This involves ensuring that PDF documents are structured in a way that screen readers and other assistive technologies can interpret and navigate, aligning with WCAG guidelines.

Amber provides an example of a project where a PDF was the most suitable format due to its intended use as a printable resource. Yet, she reiterates the necessity for such PDFs to be accessible, highlighting the responsibility to adhere to accessibility standards regardless of the content format.

Steve concludes by reinforcing the value of HTML for content not specifically designed for printing. He points out the additional benefits of increased search engine optimization (SEO) and the natural accessibility features of well-structured HTML content.

Q: Have you had user’s feedback that underlined text is hard to read? Users with some form of reading disabilities? Of course, we should make sure we’re not underlining a long text or paragraph, but we also want to make links descriptive so it might not be a word or two.

Chris acknowledges the concern while suggesting moderation in the use of underlining, especially for hyperlinks. He points out that while underlining is a conventional way to denote links, it’s important to balance descriptiveness with brevity to ensure that links are both informative and easily readable.

Underlining lengthy texts or insufficient spacing between lines can exacerbate the readability issue. This can visually clutter the text and challenge users, particularly those with reading or visual impairments. This insight underscores the importance of considering how stylistic choices, such as underlining, affect web accessibility and user experience across diverse audiences.

Q: Can I have your insights on conducting an accessible webinar or zoom session? In many blind-focus sessions, the host usually asks attendees not to use the chat because the notification is distracting to screen-reader users and also makes it hard for them to navigate and listen to the chat while listening to the main session. However, the chat function is widely used in other disability events. Also, it is a useful feature for those who do not like to speak on the mic but want to share their thoughts. How would you strike the balance for the potential accessibility conflict?

Raghavendra shared insights on managing accessibility and notification settings in platforms like Zoom and Teams. He highlighted the importance of adjusting these settings to minimize distractions from screen reader notifications, which can be triggered by chat messages, emojis, and participant actions within the session.

Amber reflected on her experiences hosting webinars with blind speakers, noting the practice of assisting them in disabling chat notifications to prevent distractions. She raised a thoughtful question about the fairness of access to the chat feature and whether it might be more equitable to disable chat for all participants. However, Raghavendra expressed that he personally finds the chat function manageable and valuable, even participating in it during sessions. He described using screen readers effectively to simultaneously listen to the webinar and read the chat, leveraging features like separate audio channels for the webinar and the screen reader.

Chris added a perspective on the impressive ability of experienced screen reader users to comprehend rapidly spoken content, emphasizing the importance of not underestimating individuals’ capabilities to process and engage with digital content in real time.

Q: In the blog themes, the logo or site name is an H1. That means if the site name is in the footer, it’s also an H1. How would you handle that? My understanding is that there would only be one H1 on your page, which is the page title.

This is a mistake in your blog theme. It should not be an H1. In fact, it might not even be a heading at all: the site title.

Q: I’m using an icon as a button, but it gives empty link warning. How to fix that in WordPress?”

It depends on how you’re creating your button. Depending on what it is, this could be a developer-level fix or something that you could just change in the editor.

Transcript

>> CHRIS HINDS: Welcome to episode 061 of the Accessibility Craft Podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin.

This episode is a recording of a March 2024 WordPress Accessibility Meetup where we held an open question-and-answer session on a wide variety of web accessibility topics. We discussed building accessible websites, accessibility testing, selling accessibility to clients or internal stakeholders, and more. WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend.

For show notes, a full transcript, and additional information about meetups, go to AccessibilityCraft.com/061.

And now, on to the show.

>> PAOLA GONZALEZ: By the way, my name is Paola, and I’m going to be moderating today’s panel. I am the content specialist at Equalize Digital, so pretty much about 80% of everything that you see on social was posted by me, and I help planning meetups.

So now take it away, Amber.

>> AMBER HINDS: Yes. Thank you, so I think most people know me because I help run meetups, so you see me a lot if you come to meetups. But for anyone who doesn’t, or maybe who’s watching this on YouTube after the fact, I am Amber Hinds. I’m the CEO at Equalized Digital. We’re a mission-driven organization that focuses all on WordPress accessibility. It stemmed out of a business that started with me as a freelancer, and then it grew into a full agency with Chris and Steve and some other team members.

We really started doing accessibility in around 2016, and have gotten deeper and deeper into it, because it was a passion that I realized I loved, and I think they loved too.

I’ll hand off to Chris, if you want to introduce yourself and share a little bit.

CHRIS HINDS: My name is Chris Hinds. I handle our company’s sales, HR and finance efforts. That’s primarily what I’ve been doing with the company for a long time, even since our agency days back in the mid 2010s. I have done some project management and project fulfillment work, but I feel like I’m at my best when I’m helping connect people with the right solutions, whether that’s accessibility, a new bespoke website, or a combination of things.

So if you’ve ever reached out to Equalize Digital needing help with something related to accessibility or website, you have probably exchanged emails or spoken with me at some point, and if you haven’t spoken with me yet, but you feel like you need some help with something related to accessibility, I would be happy to talk to you and try to connect you with the best possible solution, whether that is us or Raghav, who will introduce himself in a minute, or with someone else entirely who isn’t even here.

My goal is really just to get people connected with the thing that’s best for them based on their goals.

Steve?

STEVE JONES: Yes, I’m Steve Jones. I’m owner and CTO here at Equalized Digital. I oversee the development of our accessible products and services, most notably our Accessibility Checker WordPress plugin.

Unlike Chris, I’m more of the man behind the curtain who Amber drags out every now and then to come and talk to you guys, so I’m happy to be here.

>> AMBER: And then Raghav, do you want to introduce yourself?

RAGHAVENDRA SATISH PERI: Yes. Hi, everyone. My name is Raghavendra Satish Peri, everyone calls me Raghav, and I’m the founder of DigitalA11y. I do a lot of consulting with large and small enterprises. I work here with Equalize Digital, sometimes a lot with Amber, both on WordPress Accessibility Meetup, and the yearly conference also.

PAOLA: Thank you, everyone, for your introductions, so, Amber, for our first question, Petra [phonetic] asks: “How do you ensure that the semantic heading structure is logical when editors that may not be aware of accessibility can pick and choose components and put them in any order?”

AMBER: So I think there’s a couple of different ways that we can ensure that content editors who don’t know anything are choosing things appropriately, and it’s twofold. One is creating training. I think you have to train people, so whether that’s a customer who’s going to be managing the website after you’ve built it and you’re handing it off, you need to include some basic accessibility training to them or your internal team.

I think including tools is really important, so obviously that was a lot of the motivation behind our Accessibility Checker plugin, was to get them information right where they’re creating content because that is the easiest. But if you don’t have a WordPress website or something, there’s other browser-based tools that can be used like WAVE.

On the heading structure specifically, there’s a free plugin that I love called Headings Map.

I say plugin. It’s not actually a plugin. It’s for your browser.

STEVE: It’s a browser extension.

AMBER: OK. It’s a browser extension. All right. Thank you.

So I love that one because I just have it, and I use it all the time in addition to some of the stuff in WordPress. WordPress core has that outline tool in the block editor, but it only recognizes the WordPress heading block. It doesn’t recognize any custom blocks which would include sometimes block libraries, so it’s almost useless.

So that Headings Map browser extension, which we can definitely include some… I think we can include some links to this when we post the recording.

Steve, I might hand this off to you. One of the things that we’ve thought about a lot on this as we’re building custom blocks… Because when we build websites, we use core blocks and we use custom ACF blocks typically. We don’t use a lot of block libraries or things. But when we’re building something like an accordion or even a team block, where there’s going to be a group of people that are pulled from a team post type, and then there’s a heading above it, this is, like, what category they’re in for their team, right?

STEVE: Yes

AMBER: We’ve realized that you can’t just say, by default, that’s going to be an H2, because a client might come along and be, like, “But I want to show a team of people nested three levels down.” So then we have to build options for them to choose their heading level and all those custom blocks, and I don’t know if you want to speak to that at all about how you think about when someone needs a choice for a heading level?

STEVE: Yes. I don’t know that we can necessarily from a programmatic standpoint choose the exact right heading. We might be able to choose the next right one, but we could block ones that we know absolutely should not be next. But then you can get into a lot of technical stuff when it comes to WordPress websites and stuff, and what’s hard coded, what else exists on the page, what’s the heading order of things outside of the content area.

So there’s a lot to think about, and I think that goes back to your initial point, was education. Really having the knowledge of what correct semantic heading order is.

PAOLA: Yes, and I’ll add something really quick. As a content creator that does not know anything about developing – I call myself a mogul in that aspect – what I do is that, for example, I was working on my personal website and I installed a theme for it, and the heading orders were all messed up, so what I had to do in that case as a non-developer was I had to go on to the customization bar that comes on the left on WordPress.

So that helps me work with the heading order there and the styling. Because sometimes what content creator people think about usually it’s how it looks, not how accessible it could be, so that could be a way to deal with that aspect. You can have a correct heading structure and still make things look how you want them to look. You just have to know how to use the customization tool in WordPress, which is very easy.

So I think we’re going to have another question for Steve.

Peter said that he has a client asking about guidelines for a QR code-driven app landing page that will mainly be used outdoors to display info about memorial markers or sculptures in a park setting. They’re asking about font size, word count per page, and navigation.

So, Steve, what recommendations would you have about a website like this?

STEVE: Yes, yes. Thanks for the question, Peter. This is definitely a unique one. I think as far as compliance, you’re still held to the normal WCAG guidelines in this regard. Because my assumption is that people would be using their phones to scan these QR codes to pull up this website on their phone. I hope that’s the correct assumption. But I think you’ve got to take environment into consideration here too.

These people will be outside. I don’t know if I want to nail down a minimum font size. But if it was me, I’d probably go a little beyond the guidelines, and I’d probably stick with something like a minimum 16-pixel font.

AMBER: Yes, or even like 18 or 20 maybe on a mobile phone.

STEVE: Yes. I’d definitely go up from what the guidelines are, because people would be outside. They’re kind of looking at real-life elements and their phone at the same time, and then I think your heading font sizes should go up from there accordingly.

As far as word count, I’d probably be as concise as possible while still conveying the message. A word count like 250, 300-something, that might even be too much too.

So you can use HTML elements to help convey that information quicker, like bullet points, and of course, having the right semantic headings as we’ve just talked about. If there’s navigation involved in this page that comes up, I’d make it as simple as possible and as intuitive as possible, probably not dropdowns. It’s going to be on a phone in most cases here, so probably not like the typical expanding, sliding menus. Probably something as simple as possible for the navigation.

Plus, since it’s outside, I would definitely put a lot of consideration into color contrast as well. I’d go well beyond the spec there, because you got to think, not everybody has the latest OLED, bright million nits, whatever, brightness screen on their phone. Maybe some people do, but most people on average have a typical phone, and so I would up that color contrast quite a bit to make sure that it’s readable outside in the sunlight.

So finally, as far as the QR code, now I think this is probably the biggest consideration to think about. I think if you have a QR code on… If it’s on a pedestal or right next to the monument, or [inaudible] or something, right? I think you have to have clear instructions right next to that QR code, and I think that you need to explain the accessible features of that QR code, and maybe offer some alternative. Because that’s going to be hard for somebody that’s not a sighted user to be able to scan a QR code with a phone.

Now, I think the phones are pretty good about these days and have accessible features to help you take pictures of people and where to move it and stuff. But I’d be real cautious about that and take extra steps to make sure that that’s accessible.

AMBER: I’d be curious what Raghav has to say about this answer. Scanning QR codes outside and visiting a website to learn about a piece of artwork. How detailed would you want it to be? And what features would you need?

RAGHAVENDRA: So I think Steve covered most of it…

AMBER: Do you know Braille? Next to the QR code?

RAGHAVENDRA: No, I don’t know Braille. No.

[laughter]

>> AMBER: No? OK.

>> STEVE: Oh, yeah.

AMBER: So some people might want Braille next to the QR code, like, on the sign, telling them there’s a QR code there.

RAGHAVENDRA: Yes. Yes. You need to be specific, because if it’s an offline QR code on the paper, what happens is, “Where should I put the phone? Where is it?” So you need a tactile type of thing, where there’s a symbol or something where I can…

STEVE: Yes. Is an alternative URL a good solution?

RAGHAVENDRA: Yes, so I don’t use QR codes in public spaces a lot, because I’m afraid of the security. I have an iPhone, and so many people around me, I’m, like, “OK.” Because it’s very difficult to take your phone and waving it in the air and, like, “Did it come? Did it come?” And there’s a lot of noise. You can’t hear voiceover if you’re in a public space.

[laughter]

>> STEVE: Yes, that’s true. The security thing is something to be mindful of. You know, we were at a conference last year, I think, and Amber and I ran into a data scientist. He was a data scientist or something like that, and he had a QR code on his phone ready to go, and Amber just scanned it. I was, like, “Oh, he’s got you now, Amber.”

[laughter]

AMBER: Yes. To get his contact information, like his LinkedIn and all this stuff.

I’m curious on the actual text on the website. If you were wanting to learn about a sculpture or a piece of artwork or something, how descriptive would you want the wording about it to be? And what do you feel are important details that someone would want to consider when they’re trying to decide how much to write about a piece of artwork?

RAGHAVENDRA: Like how a sighted person describes it. I go with a lot of friends to museums and art places, some people are very artistic and creative in describing the art stuff, so those are the people that I want to be around with, because they make even a restaurant or the usual things. A police standing near a traffic signal, a friend of mine describes it so well, and that gives me a mind’s eye view of what’s happening around me, so same thing to do with artwork.

You need to hire someone who’s creative and keeps it simple, so I read a lot of simple English, so how simple can it be? Plain language.

AMBER: Yes. Reading level is probably really important. If we’re talking general public, we want it to be eighth grade or lower. Yes, not really complex.

PAOLA: Yes, that makes total sense.

AMBER: I’m going to let you go to your next question, but I realized we didn’t say this, so we had a few questions that we got ahead of time, so we have those, but we are going to get to questions in the Q&A as well, so feel free to put those in, but I just wanted to give everyone that background.

PAOLA: Yes, so on the sale side, Simon asked: “How did Equalize Digital generate leads and convert them to paying clients when you were first starting out? What strategies would you recommend to a new web accessibility agency looking to grow its client base?”

Chris, do you want to start with this one?

CHRIS: Yes, and I’m popping these in the chat as we go for these questions we received ahead of time, so I’m happy to speak to this first, and I spent some time reflecting on this this morning since we got this question in advance. I’ll provide the short version first, which is we tried a lot of things, like, a lot of things, and we failed a lot of times before we figured things out, and I think that’s the first thing, if you’re feeling frustrated or discouraged, which I’m not insinuating that the person that’s asking this question is feeling that way, but if you’re a person out there who’s feeling frustrated or discouraged because you feel like you’re working your butt off and nothing’s catching, just keep trying new things.

However, here’s what worked for us. I have a list of six different things and I don’t know if they necessarily have to happen in exactly this order, but I do feel like they build on one another, so the first one and maybe the most critical is to specialize in something that you believe there is or is going to be demand for and that you genuinely have a reason to care about, and try to make this narrow, so start narrow and try to own that narrow space, and then expand outward from there rather than being the everything person who will do anything that someone comes to you for, like a digital marketing generalist. Not that that’s not valuable. It’s just that lumps you in with a lot of people versus being a specialist.

Also, as you go, if you decide what to go into, interview existing or prospective customers, ask them what they need, what’s keeping them awake at night, and build offers around those things, so that’s number one.

Number two, do everything you can to be present, relevant, and provide real value for people who need the thing you’re going to specialize in, so that’s creating articles, podcasts, public speaking, meetups, right? We’re all here, so do those things.

You’re engaging in a marketing effort right now for us. This is WordPress Accessibility Meetup. We run it as volunteers, but this has a marketing benefit for Equalize Digital, and we’re also providing you with a lot of value.

So you need to find things that you can do within whatever you want to specialize in where you’re doing the same thing. You’re providing value, but you’re also creating a positive marketing outcome for yourself.

AMBER: Can I chime real quick on this point? Or the first one, maybe. One thing I think that’s worthwhile to think about is that accessibility is a niche, but it also is really broad.

I was talking to someone who they are in Northern California and they’ve started doing a lot of work with wineries, and becoming the person who does not just winery websites, but accessibility for wineries, like you know, or maybe you are the one who really knows about reservation platforms. Which reservation platforms are accessible and which ones are not. Or e-commerce, if they’re able to sell wines of the month subscriptions or something like that.

So thinking even maybe more niche, which I know sounds weird because we’re not just like that thing. But to give a more concrete example to what Chris is saying, I think it’s helpful to think about, like, the tighter you get in your audience, I think that can be wonderful.

CHRIS: Being a niche of a niche does not hurt.

STEVE: The riches are in the niches, right?

[laughter]

CHRIS: I love that. I might put that on a t-shirt, Steve.

So number three on my list was have ways to passively, or as passively as possible, get people’s information so that you can contact them, then give them even more value, and then eventually ask them to collaborate with or hire you, so really a list of engaged customers and potential customers is hands down your most valuable business asset, and if you aren’t building that right now, you should find a way to start.

Number four, and this is where I have literally been doing this for years, and the process always changes and evolves. But have a heavily dialed in process for sales and connect it to a CRM where you can track and measure things, so have scripts for calls, emails, track sequences for every stage of a deals lifecycle, don’t be afraid to call people, be friendly and helpful even when you get a no, and recommend other companies, if they’re a better fit. Build referral relationships with those companies you’re recommending.

Be proactive and patient, and this is a rule in sales. Effort today yields results in about 90 to 120 days, so what you did four or five months ago is going to have ripple effects today, so consistent effort gives better dividends than a bunch of effort, like little pockets of a lot of effort.

Number five, go out and meet your peers. Kind of like what you’re doing right now. You’re networking with one another in the chat. Maybe you go to WordCamp events, maybe you go to events in your community. Get out there and meet people, get coaching and mentorship, try to build relationships with people who are 10 years ahead of you in business, at least one person that you can reach out to and ask for advice.

Number six, and then I’ll be quiet and let other people answer this question, because I know I’m not the only person with valuable advice here. Don’t stop improving, so we’ve collectively, like this team.., and there’s members of this team who aren’t on this call.

What do you think Amber? This is, like, a third or half the team, right? There’s a bunch of other people who aren’t here, but we’ve achieved a lot. But there are probably arguably about a hundred things we want to fix about our company right now, and after those 100 things are done, there’s going to be another hundred things, so just constantly improve.

AMBER: You’re never done.

So circling back, I think, to the initial of just attracting people, I think it’s worth saying that what has been most beneficial for us. One is creating really good-quality content.

I published a blog post over the weekend last weekend about WCAG 2.2. It’s almost a 6,000-word blog posts, and it has tons of screenshots and a lot of detailed, and then I saw today that my friend, Kyle [phonetic] in the Admin Bar shared it in his Facebook group. I never asked him to do that. He just did it.

So I think if you’re creating really helpful, meaningful content, then that makes people want to share it with other people and keep coming back to you, and I think that’s really important over the… I see sometimes where people are publishing these 800-word blog posts that are just half an idea? [inaudible] sometimes when I read them, and I’m, like, “No one’s going to share that.”

Raghav maybe you can follow up with your experience as a freelancer. But you do a lot of this content creation, and I think that brings people back to your website, right?

RAGHAVENDRA: Yes. The Digital Element [phonetic] gets over quite a million visitors a year, and it’s purely driven on content.

Today, when we spoke about QR codes, the idea is still in my mind, so I already noted that I haven’t written about QR codes, and maybe that is one.

Last week, I was in the restaurant, and the staff was not engaging with me, but with my sighted partner, so why is that?

Do they think only sighted people pay the bill, or they can choose what is for the blind people? So I’m writing on that.

So what happens is once you start creating content, you see patterns everywhere that you can create content of.

The last post that I wrote is on WordPress. Because I was working with a designer who said, “You are saying add the call-to-action button, but you don’t know what it reads as a link in the screen reader. Why do you need a visual button when it’s a link?” And we wrote a blog post on that. Is it really a link or a button? [inaudible] be. What is it?

So I create a lot of content, and that brings visitors, that brings people asking. I do a lot of mentorship. I run a largest accessibility community out of India. I also do networking. I don’t travel anymore, otherwise I would have traveled to speak at engagements or be in the conferences, so whatever Chris covered, I do all of that.

>> AMBER: Yes. I would say that’s another big area that I put into, which I’m not doing as much right now. But the first couple of years that we created Equalize, and we had pivoted from our just generalist marketing agency into Equalize, I put a lot of effort into doing podcast interviews. I like podcast interviews because it gets you in front of someone else’s audience and it’s not…

The 6000-word blog posts, you guys, it took me like 10 hours to write that and create all the screenshots and find all the examples. It’s a huge time investment. A podcast interview is, like, you talk with them a little bit via email or on a podcast matching platform. PodMatch , I think is the one that I found the best out of the ones I tried, but I can follow up on that. But then you show up for about an hour and you just talk, and then it goes out.

So I do feel if creating all that content is hard, that is a good way to get in front of other people’s audience and share your knowledge and attract more attention.

PAOLA: Yes. Those are great answers, everyone.

So moving on to the next one, Tonya [phonetic] has developed a WordPress site using milSuite, a WordPress platform for the US Department of Defense, and says that she has no idea how to make it accessible. She mentioned she’s not tech savvy or a muggle and doesn’t know much about plugins.

Amber, where would you recommend that she can start?

AMBER: Yes. When I saw this come in, I messaged her to be, like, “Can I view this?” She sent us a URL. I was, like, “Can I view this?” Because I tried to go there and it wanted me to log in with my Department of Defense credential. She’s, like, “Oh, no, it’s not public.” Because I was, like, it’d be good if we can give some.

Although, I would say, if you are not a tech savvy person, the best place to start is probably by using some of the automated testing tools and just fixing some of the things that you can.

If she probably doesn’t have the ability to install Accessibility Checker on there, she should go talk to her whoever runs that, because I’m sure it’s a multi-site or a network, and they have the ability to install and get them to install it. But if not, using WAVE would be great, if she’s able to scan it with wave.

The things that I think about for a non-tech savvy person that can really have meaningful value is just doing some quick testing with your tab key and make sure that you can get through the navigation menu, so when you tab to sub items, it actually opens and is visible to you, and isn’t just hidden.

I would say, check your headings. Make sure you’re using headings in the correct order. We talked about that Headings Map browser extension.

Link. Having links that are meaningful, so don’t link the word, “here,” “click here,” “learn more.” Like links that actually communicate something about where they’re going can be really important.

We always talk about alt text on images, describing images.

The other thing that comes to mind when I think about this as a government website is I don’t know if it has things like charts and graphs and tables. But if it does, then for any sort of graph, if it’s just like a screenshot of a bar chart, for example, you need to also provide a table of that data so that people who can’t view the image can still access the same information. Or you also want to think about not using color alone, sometimes in graphs, the red and the green mean different things, but to someone who’s red-green, colorblind, it looks exactly the same, and we’re looking at a bar chart and we have no idea how to tell what those are.

So maybe having patterns on your bar charts if you’re creating them, and you would do that wherever you create it. Like in Excel or Sheets, you’d apply a pattern to it instead of just having a solid color.

Then, of course, making sure your tables have appropriate headers, because that’s a big mistake that people forget. They just put everything in this table data, and then maybe they make it bold, so it looks like a header, but it’s not really a header.

Those are some things that come to mind for me. What about you, Raghav?

RAGHAVENDRA: I think we did not touch base on forms, visible labels for form fields, avoiding placeholders, and appropriate error messages, and easy to find error messages, not just, you know, not in line. Just give even links on the top of the form. That’s one.

Avoid carousels if you can that are auto moving. I think you should keep the navigations consistent, and that’s all from me. I think a lot of WordPress websites come up with these forms.

>> AMBER: Steve, do you have any thoughts?

STEVE: Yes. I think sometimes in organizations, such as government or Higher Ed, you have to achieve the accessibility stuff that you would like to achieve or need to achieve, sometimes you have to become an advocate. You got to seek out the departments that actually do have the ability to make the changes in the platforms they’re using, and so I wouldn’t be afraid to try to find out who those people are, identify them, send out emails to them. I don’t know if they have a track or something. Open a ticket to see if you can get some change made on those sites from the people that actually can access the platform.

AMBER: Yes. I think if they are able to partner with an accessibility specialist, whether there is one internally at the Department of Defense, or if not, bringing in an outside vendor, I think, would probably be helpful, and making sure both the testing is done, but also that there’s training resources available for people that are using milSuite.

Obviously, I’ve never accessed it because I’m not in the military, so I have no idea. But yes.

PAOLA: Great.

CHRIS: I’ll chime in just one more thing, sorry.

Tanya, I know, like, from the perspective of not really knowing where to start, if you wanted to send me an email, “Chris@equalizedigital.com,” I’m not going to sell you anything. I just happened to be working on an e-book right now in partnership with another organization that’s focused on real-world steps that more novice people can take to start to tackle accessibility meaningfully.

So if you email me, I will just send you some stuff that I have drafted that will give you some things that you can take to start to make at the very least the content on the page more accessible, and introduce some better best practices there. It wouldn’t get you to a hundred percent, but it would be a starting point, and maybe is approachable as a list of best practices to introduce.

Happy to do that if you want to send me an email, that was all I was going to say.

PAOLA: Yes. Those are great tips, everyone, so let’s talk about ways to learn accessibility.

Steve, can you start off with some resources that you found helpful when you were learning to code from an accessibility-first perspective?

STEVE: Sure. My intro into accessibility is a little different than I think most, because we had done some accessibility stuff early on in our previous agency. But then we came up with the idea to make the Accessibility Checker, so to make a tool that evaluates for accessibility, you got to learn it, and I was drinking from a fire hose, so it was it was a lot at first. But there’s some practical places where you can go.

There’s documentation. There’s the WCAG guidelines, I think, that we all reference those as the official docs.

As Amber mentioned, she has written a gigantic blog post with a supplement for the WCAG 2.2 guidelines. We also have an Accessibility Craft Podcast episode about that, which is out or it’s coming out? Not sure.

AMBER: It came out on Monday.

STEVE: Oh, it came out this Monday, so the latest episode of Accessibility Craft, check that out. Those are the official docs, and there’s a lot of good code examples in there that will help.

As a developer, I’ll use the Mozilla MDM Docs. They have some pretty good accessibility docs. They’re not official, but I have found those very useful, and they explain things to me in a developer way, and they get to the point.

As a developer, I just want to know the right way to do it. A lot of times, I don’t want to get caught up in all the words.

Also, not to keep tooting our own horn, but our Equalize Digital Accessibility Checker documentation is very well written. Amber has done a fantastic job of writing that documentation.

To be honest, if I’m working on a client website and I see an error in the Accessibility Checker, and I’m not 100% sure, and I made the Accessibility Checker, right? So I’ll click on that link, and I’ll run over to the documentation, and Amber’s got it listed out. This is what it should look like. This is what’s wrong, and this is what it should look like, with code examples. I love that, and it’s super helpful.

The Accessibility Checker is not just scanning and telling you what’s wrong. It’s an education tool of sorts. It highlights what’s wrong, and then we provide you with documentation on how to resolve that.

Next, there’s browser extensions, which we’ve mentioned a few of those already here on this meetup. But there’s WAVE, which is a front-end browser extension that evaluates one page at a time, just like a front-end evaluation. It’s a great tool.

Another one similar to that is the Axe DevTools. I’ll use that quite a bit. Google Lighthouse, which is built into the Chrome browser, or most Chromium browsers, if you use another browser like Brave.

We mentioned the Headings Map extension. That’s great. You just hit that and it pops up on the side, and it shows you your heading. It’ll highlight ones that are out of order. There’s a color blindly that we’ve used that simulates the way different people perceive colors. I don’t know if I’m explaining that correctly.

AMBER: Yes, and different types of color blindness.

STEVE: Yes, different types of color blindness. That’s a cool tool.

Then another one that we’ve used frequently is called Tabally. It’s T-A-B-A-L-L-Y. In that one, you initiate that browser extension and it basically goes through, and it maps the tab order of the website. From a visual standpoint, it’s cool, because it draws a visual line from the first tab order, the second, third, down the page, and you can see where if your tab orders off, it’ll highlight that.

So those are great tools and super low barrier of entry for the browser extensions to just start getting in there and playing around, and seeing what’s actually wrong, and in that process, you start to learn these things and absorb them.

Moving more into development stuff, you could use some linters. In WordPress world, we still are rely heavily in PHP, so it’s not always super easy to lint PHP.

So when I say linting, that’s in your IDE. I use Visual Studio Code, and you can install plugins inside of Visual Studio Code, which can then check code as you’re coding, so if I’m writing a React block for WordPress, and I write something that’s inaccessible, it’ll highlight it and tell me why it’s not accessible, and so the little linter that I’ll use for that is the Axe Accessibility Linters, and that’s for Visual Studio Code.

You can just go in their plugin, search, “Axe Accessibility Linter.” That’s probably the best one that I’ve seen, and probably really the only one that I use in my IDE for that.

Moving away from the code stuff, I think you move into testers and evaluation, so there’s screen readers. If you’re not familiar with using a screen reader, I would suggest you get in there. If you’re on a Mac, you could use Voiceover. If you’re on a PC, you could use NVDA or JAWS, which I think JAWS costs money. But initiating that on your computer and using it, and see what it tells you, and be brave. Close your eyes and try to use your keyboard to tab through a website and experience what it’s like to not be able to see the website.

If you’re writing code, like, if you’re writing a modal or some tabs, something that expands, something that loads dynamic content, test it with the screen reader and see what that experience is like.

AMBER: All of it is just learning by doing.

STEVE: Yes, it totally is, and that’s the kind of person I am. If you give me a whole bunch of documentation to read, no way. I’m not going to do it. But if you tell me, “We have to achieve this, and it has to meet this,” then and I’ll go, “OK, I could figure that out.” And I’m like, “OK.” So I go to these tabs and it hits the first tab… I’m talking about dynamic contact tabs on a website. It hits the first tab and then it just jumps down past. It doesn’t go through all the tabs, so now I need to code in something, to grab that tab and to announce the screen reader that it is a tab, and then to use the arrow keys to go back and forth between all the tabs in that component, so, yes, it is a lot of learning by doing, and exploring and playing. I mean, it’s vital.

So there’s WordPress plugins as well. We’ve mentioned ours quite a few times, Accessibility Checker plugin. Install that. Go to a post or page, save a post or page, see what it says. It’ll list out errors or warnings, and typically, errors are things that can be programmatically found pretty accurately, and warnings are typically things that require a human to audit and evaluate that and resolve it, and you can click on it and then you can hit the view on page, and it’ll just jump you around over to the front end of the website and highlight that issue on the page for you.

There are some other accessibility plugins that kind of help make your website more accessible. The WP Accessibility plugin by Joe Dolson is very helpful in that regard to adding skip links and things like that, so check those out, explore those.

Finally, I would say I’m lucky enough to have to have auditors and testers testing my code, such as Amber and Raghavendra, and Chris has mentioned this too. It’s about community too. Utilize Slack groups. Utilize Twitter. If you’re stuck on an accessibility issue, put it out there. I’m sure probably one of us will will chime in.

There’s Facebook groups. We’ve got a Facebook group that is amazing for questions like that, so utilize your community, utilize people on your team. It’s always good to have a second set of eyes on something, even if they’re not the accessibility expert. It’s a long list, but that’s what I have.

>> AMBER: So I might throw two in, and then I think Paola was going to switch us over to doing questions in the Q&A. But the ones that all just say real quick as far as learning resources that are helpful.., so the A11Y Collective, which is a project started by some people from Level Level in the Netherlands. They have a lot of training videos that are useful, and then of course, Raghav and I and Peter who’s here and Isla and Adrian and some other people who are attending are all organizers of WordPress Accessibility Day.

If you go to “WPaccessibility.day/past-events,” you can actually watch all of the videos for free from the past WordPress Accessibility Days, and so I highly recommend that as a training resource as well.

PAOLA: Yes, thank you. That was very comprehensive.

Now we’re going to jump into the Q&A that you guys have been posting. The first one that I’m going to read is from Laurel: “What kind of training or certifications do you think are necessary in order to specialize in accessible WordPress design?”

AMBER: Raghav, do you want to talk about this? Because you probably have the most certifications out of all of us on this call.

RAGHAVENDRA: So I think, more than certifications, we need to know the fundamentals of accessibility, because certifications help to enhance your knowledge. That’s what I realized. First I learned HTML from W3 schools. Then I learned accessibility by doing it rather than… When I got started in 2008, 2009, there were very few resources available online back then, and what I learned from W3C websites and other places is, when you practice it, then when you work with other accessibility professionals, you get a lot of clarity on what is really a failure of WCAG, or is it usable? Is it a great design experience for someone with disability? That is where the thing is.

When I did certifications, that enhance my knowledge because I have to go read a ton of stuff. I did IAP, CPACC, where I learned about various disability types, universal design for learning, and when I did Web Accessibility Specialist, I need to learn a bit of JavaScript. I learned CSS, so I went to edx.org. I did fundamentals of JavaScript, HTML, CSS, so that is where the certification set.

The key is to always stick to the fundamentals when you’re creating any accessible website, either on WordPress or any platform. In WordPress, by default, you get a lot of accessible themes now, either 2023, 2022 theme, and there are a lot of plugins out there.

We all spoke about Accessibility Checker on WordPress. But at the same time, you need to do a lot of testing before you choose which plugin or which theme. Because I really found out that there are plugins out there that say, “Oh, we are ADA compliant.” And I was testing one carousel yesterday, and the “previous/next” buttons are just read as “buttons.” And the carousel content is hidden visually, because they used aria-hidden on the entire content.

So there’s a lot of learning you need to have, both technically and from the usability side of it, because you want to make it easy rather than.., so there’s two things here, making it accessible and making it usable, which should go hand-in-hand.

AMBER: So do you feel like the certifications, they’re not necessarily the best way to learn? But I’m assuming certifications can maybe help with getting clients. Is that from your experience?

RAGHAVENDRA: Yes. Certifications are not definitely to learn. If you want to learn about accessibility, you want to do audits. I would suggest the DHS Trusted Tester. It’s a very thorough course on how to perform accessibility audits for WCAG, and the steps outlined on how to test each success criteria and all that.

The course is defined in such a way that you learn really, because there’s a lot of practice work that goes into it, and then you have to score about 90% to pass the exam, so you learn the technicalities of auditing. But if you want to really learn accessibility, you have to keep doing the work day in, day out, learning new things.

As Steve said, you have to build your own, sometimes code samples, test them out. I do a lot of work in that space, because that’s the only way I realized I learn.

Certifications come in handy to get new employment, and lately, when clients ask, “Are you IAP certified?” “Are you a certified accessibility consultant?” This is one of the recent and last one here. This I’m hearing a lot.

PAOLA: Thank you. Going on to our next question, Karina asks: “Can you explain the governing body behind the efforts around WCAG? Are these guidelines a good approach for international compliance instead of just US focused? Are there other international standards we should be aware of for multinational brands?”

If anyone wants to take that one.

AMBER: So the governing body behind WCAG. WCAG is basically what would be considered like an open source project, so anyone can volunteer and contribute to it. I’m going to try and go fast because I want to get through everyone’s, but I’m going to say the short answer on, are they a good approach for international compliance? Yes. People who contribute to them are around the world, and there are laws around the world that reference them. They’re the best standard for testing or measuring accessibility that we have worldwide, they’re not just US focused.

The only other thing is there are some things… Like, I know in the EU, European union, they have some laws that are specific that don’t necessarily reference WCAG, but also have their own guidelines, so you may need to check with a specific country. If you’re really worried about legal compliance, I always recommend talking to a legal professional of which none of us are. But, yes, I would say using WCAG outside the US works well.

CHRIS: Yes, and I’ll just add to that the idea of compliance with laws versus compliance with standards. This is a very gray area, and some solutions will promise that they will make you comply with specific laws. If you actually read the legal text of the laws themselves, the legal text does not create a quantitative, measurable accessibility standard that you can actually prove. It’ll say something like it offers an equivalent experience. That’s more of a qualitative or very subjective way of analyzing accessibility.

That’s not that one is more valuable than the other, right? But it’s just in terms of standards, you really want to hold yourself to the thing that is most measurable, most quantifiable, that can be proven, that can be charted on a graph, right? Because that is ultimately what is provable, that can be shown to whether it’s a lawyer, or just someone who’s registering a complaint, or a regulator, whatever it is, and that’s why WCAG is often referenced because it really is the most comprehensive standard that exists.

PAOLA: Thank you. Great answer. Going on to the next question, Simon asks: “I currently write articles for my blog in Markdown [phonetic], and then make layout and visual edits in Elementor. Do you know of a more accessible-friendly content editor for WordPress, both in terms of accessible usage and ensuring that the content on the page being edited is accessible?”

AMBER: Raghav, I’d be curious, what do you think is the best, most accessible way to edit content in WordPress?

>> RAGHAVENDRA: So I follow a multi-step here. What I do is I write everything in Word document. I tag all the headings lists. I don’t use Elementor. I use Gutenberg because it outwards accessible semantic HTML. But when you post it, the Word document in Gutenberg, it creates all the blocks automatically, and you don’t have to do a lot of tweaking.

Just in case there is something that is not accessible, when I’m testing on the front-end, there’s a code, and you can view the entire code. I can go change the code in the editor, so this is one way.

So people who find it difficult with screen reader to move into Gutenberg and edit, what you can do is you can enable the Classic Editor after you put everything in Gutenberg and see where you want to edit the content, edit that piece of content, and then disable the Classic Editor.

AMBER: That’s an interesting idea to go back and forth between too. I know a lot of people have said that there’s still some major accessibility challenges in the block editor. I know from an accessibility standpoint, a lot of the blind users that I’ve spoken with do use the classic editor plugin, and they’re always… I mean, you’re really tech savvy, so maybe you figured out workarounds for the block editor.

>> RAGHAVENDRA: I think [inaudible]. Because I’ve been using Gutenberg since its initial release, and it’s improved a lot when it comes to using with screen reader. Because you can do a basic blog where I couldn’t do tabs, accordions, and tables as successfully as a sighted person could do it, because you need to go through multiple…

When classic editor was there, I used to write all the HTML code or use a table generator, put all my content in there, take the HTML, put it in the text form of the classic editor, and move on from there. But Gutenberg is very different. You need to have a sighted person work on some of the aspects in the blocks, definitely.

AMBER: Yes. I think the quick answer, in my opinion.., and feel free to conflict me or disagree. But I think that if you’re using WordPress core blocks and not custom blocks from the block library, the most accessible experience will be with the block editor rather than some page builder like Elementor or Beaver Builder or oxygen, any of them. I’m not trying to call out any specific one. Like, all of them, pretty much, I think from an editing standpoint, block editor is going to be better than any of those third-party tools.

RAGHAVENDRA: I don’t deny. Because I use some page builders and I couldn’t even get to the edit screen and understand at least the text fields or what the field names are.

AMBER: Yes, and then I think on the other side of that question, ensuring the most accessible output, I kind of think it’s the same way, and that’s one of the many reasons why we don’t use any outside block libraries anymore. It’s either core blocks or we build our own. Because even the block library collections are not doing adequate accessibility testing and they’re releasing blocks that sometimes have major deficits, like you were talking about, Raghav, like it said, AA compliant, and then it had unlabeled buttons, and a carousel contact couldn’t even be accessed.

That’s not a great answer for people who like page builders. But I think if you really care about accessibility, you really have to start thinking about the page builder that you’re using, and if there is one that is really important to you, talk to them and tell them how important accessibility is, and hopefully, you can… If you open issues on their GitHub or on their WordPress support forum, maybe that will help them to see where there are problems.

I’ve had good luck with them making fixes when I’ve said “Hey, this doesn’t work in this space.”

PAOLA: Yes. Thank you for that one. Moving on to the next question. FJ Nelson [phonetic] asks: “Simple question, perhaps. Google page speed often flags links in the body content as meeting more than colors to distinguish them from non-linked text. A lot of my clients don’t like underlined links. I sometimes get away with a light dotted underline, which satisfies accessibility checking, but what are some suggestions other treatments or links beyond just colors?”

AMBER: OK, let’s round robin this. Everybody say, “I think that your links in body text have to have an underline.” Do we all feel the same way?

CHRIS: Strongly agree.

STEVE: Strongly agree.

AMBER: And Raghav is the certified professional here. What do you think?

RAGHAVENDRA: Underlines make it easy. I work with a lot of sighted assistants, and I say, “Here is a link,” and they’re like “No, it’s just paragraph.” And then I click on it and they say “Yes, I changed it’s color, so there’s a link.”

AMBER: I literally think that this would be a WCAG failure. Technically, it doesn’t say they have to be underlined. They have to look different. But the thing is, you can’t just make it bold because sometimes people use bold, for instance. You can’t just make it italics because sometimes they use italics, so then it’s, like, OK, well, maybe you don’t underline it and you have a color, but you have another little icon next to it that denotes it’s a link. But then, I’m, like, that’s even more distracting than an underline when you’re reading.

STEVE: Yes. I think there’s something to be said about standardization, too. Like you said, it may not be a violation if you use another method, but everybody’s just underlining them.

AMBER: That is why we don’t underline for emphasis. Because I’ve seen literally on heat mapping on websites when something was underlined for decoration, and people tried to click it. Because human beings see that and think it’s a link.

RAGHAVENDRA: Yes. Because I’ve been tracking [inaudible] clicks on some websites and that happens. They click on underlined text.

CHRIS: Yes. Yes. Clicky, clicky, clicky. Yes, I’ve seen that on screen recorders where someone’s trying to click something that isn’t clickable, so you can have the opposite effect or unintended effect if you use underlines, not for what they’re intended for. That’s kind of the flip side of this question.

The other thing I would say, too.., and we’ve done this in interactions with customers who are pushing back about a particular design element that they say, looks “dated” or just isn’t what they want or “doesn’t match their brand.” And one thing that often helps those conversations is if you can provide aspirational examples of people doing the right thing, so if you have a public sector organization who’s saying, “We think underlines are horrible” “We don’t want our links to be underlined,” show them “Whitehouse.gov” or show them “Nasa.gov,” which just re-launched in WordPress. Guarantee you those links are underlined on those websites.

AMBER: I just had this conversation actually with a client. We launched their website last year, and then they’ve had a turnover, and their marketing VP has changed, and the new person came and they’re, like, “Can we remove the underlines from links? They just jump out. They stand out too much. We don’t like it.” So I’m explaining why, and they’re, like, “Plus I don’t see other organizations doing this.”

I think they mentioned the New York Times and I was, like, “What are you talking about? I swear the New York Times has underlines on their links.” So I went and looked and I was, like, “OK, yes, they do.” And I screenshotted for them.

Then I was, like, “I think part of why yours stand out so much is because they have a really bright blue that’s almost like the blue in Equalize Digital branding, like our color, which was what their links were, and I was, like, “Look at the New York Times, they’re using more of a teal color, so it’s still passes color contrast, but it’s not this bright.” And they’re, like, “Oh, yes, we like it.” So we ended up just changing the color of their links so they wouldn’t “stand out” as much.

So sometimes you have to get it, like, what’s the underlying reason that they don’t want that? And maybe there’s a way to design it so that it’s still…

On the WordPress Accessibility Website, we don’t actually use color at all to denote links. They’re the same color as the surrounding text. We just use an underline, so they’re black, so maybe there are ways to do it, and now we’re going too long. All right.

[laughter]

PAOLA: Yes. Great answer, everyone. For the next one, Laurel asks: “When a website has a lot of accessibility issues that are being addressed through a redesign, what can be done to protect the company from accessibility lawsuits before the website redesign is finished?”

STEVE: An accessibility statement, right?

AMBER: So I think what I’ve heard from a lot of attorneys in the space – again, we’re not here giving legal advice – is that having an accessibility statement really helps, and your accessibility statement should say, number one, how to get help. That is probably the most important thing, and it needs to be a real way to get help, not like a contact form that goes to nowhere.

STEVE: Yes, and it should list known issues, right?

AMBER: Yes. I don’t think you have to. But yes, you’re going to say that Raghav. But it’s a best practice to list known issues.

RAGHAVENDRA: Yes. It’s a best practice. Because if there are any blockers that are there, it’s better to list and tell that you’re working on them, and what I also realized is, as Amber is saying about contact. It should be very easy, and you need a phone number. They want to talk to someone on the other side, who’s empathetic and who understands that. People always have seen, and some of the [inaudible]. We don’t see a disability help desk phone number, which is very specific, so you might need the right language also.

AMBER: So we’ve done some remediation with universities that were in colleges that were under mandated remediation with the Office of Civil Rights, which is part of the U.S Department of Education. This one community college, for example, the platform that people can register for the lifelong learning classes, it’s a third-party platform that is totally not accessible. But we couldn’t fix it. Community college couldn’t fix it, and the vendor was, like, “Yes, we’re not fixing it.” So they’re, like, “OK, well, we’re going to have to find a new platform, but it’s going to take us time”.

So the one thing the Office of Civil Rights said is “OK, we’ll consider this a pass.” But what they had to do was not just in their accessibility statement. Right above the link to go register, they had to put a message that says, “This platform is not accessible. Here are the alternate ways.”

So thinking about having it outside of your accessibility statement, because that was the big thing the Office of Civil Rights said, was they’re, like, “Don’t make people waste their time. If you know that this doesn’t work, don’t make them go there and figure it out. Tell them, and tell them what they can do to get the more accessible version.”

So I think that’s probably the other thing that possibly could be done on a website while you’re in process of building a new one or remediating.

PAOLA: Great answers, team. I’m going to the next one. Nara [phonetic] asks: “Hi, I’m a software trainer at a media company. I train linguistics on how to use a scripting tool to create docs and audio descriptions. We are starting to hire blind QCers [phonetic] to review the audio descriptions to make sure they are accurate and accessibility friendly. They will be using our software, which we’ve made accessible. My question is, do you have any resources or advice on how to best conduct training for blind users? I make online courses, one-on-one trainings, documentation, et cetera. I would love to hear your your experience in training. I want to make sure I am inclusive in my speech and make the QCers feel comfortable.”

AMBER: Do you want to answer this one, Raghav?

RAGHAVENDRA: So this is with regard to e-learning, how to make e-learning content accessible, so, if it is a training program…

AMBER: Yes. Or just like how to train people who are blind on testing?

RAGHAVENDRA: On testing?

AMBER: That’s how I understood this question to be.

RAGHAVENDRA: OK. I think it’s all about guidance. When we do testing, someone who’s blind already who’s using screen readers, they know how to use screen readers, but they don’t know the product that they’re testing.

I always have a sighted assistant who helps me identify what is there. Or either they explain how the platform looks visually before I start testing it, and once I test it, I’ll tell what I understood, and they’ll correct me from that.

If it is e-learning content, I do test e-learning content. When a lot of videos are there, blind people prefer not to.

Personally, I have worked with a lot of friends and community that I know. We read a lot of transcripts rather than videos. Because screen reader is much faster than listening to.., and we can jump toward spellings where we want. That is how we access e-learning content, so transcripts, those are a must for us.

PAOLA: Thank you. Just to give a bit more context, Nara added, how to online courses accessible. They said they use Articulate 360. I’m not sure if you’re familiar with that platform.

RAGHAVENDRA: It’s an e-learning platform. Articulates and Storyboard. I think there’s two, three e-learning platforms, so we need to see if the platform itself is having the features of accessibility, which sometimes, when you’re creating modules from those platforms, we need to test and see if we can implement accessibility, sometimes, it’s not possible because the components come from the platform directly, so we need to work with the platform.

PAOLA: Thank you, Raghav.

CHRIS: The other thing I’ll add as a presenter, which I always try to stay mindful of, and I know that we do this at our events, is if there are visual elements on a slide, say you’re presenting learning materials, to try to verbally describe those, because that will end up in the transcript that a blind person might use later to consume that material.

PAOLA: Thank you, and Amber, were you going to add something?

AMBER: Yes. I was just going to say the other resource that might be worth not necessarily using, but referencing some of how they do. The Carroll Center for the Blind, which I’ll put their link in the chat, “Carroll.org,” they do training for people who are blind on accessibility testing and some other things, and maybe looking at what their approach is in their non-profit organization, they might even consult with you or that kind of thing to help you figure out how you can create the most accessible materials for people who are blind.

PAOLA: Thank you, everyone. Going to the next question, Laura asks: “When I do evaluation on my side with WAVE, I get no script element errors on images that I have alt texts for. Could you please explain if this is something I need to fix and how to fix it?”

AMBER: You know, it’s funny. I was looking at one of our websites that we have almost ready to launch, and I was looking at Accessibility Checker, and I was, like, “Hey, we’re flagging some of these NoScript images too, just like Wave.”

Steve, that’s like a WordPress performance thing or something, right? What’s with the NoScript images in WordPress, and do we need to worry about those or not?

STEVE: Oh, I don’t know. I’m stumped on this one a little bit.

AMBER: I think this happens more when you’re using performance plugins, like maybe PerfMatters does this. It might have a second version of the image in a NoScript tag for certain types of images so that if you have JavaScript off…

STEVE: I think it’s in reference to lazy loading, I think.

RAGHAVENDRA: Yes. What happens is the lazy load images, it doesn’t load, and they’re deferred until in the performance, as Amber is saying, and they don’t pose any accessibility… The DOM is still there for the screen-reader user, and with the shortcut key G, you can still access the image and that all.

So while automation throws errors, we need to evaluate each one of them and see which one is valid. I always say that don’t just look at the automation results.

AMBER: I think if you do have alt text on it, then it’s fine.

STEVE: Yes, and I think from our standpoint… I think we were getting the issue where it was flagging two, right? It was showing both. Like, it was showing the NoScript and the image as duplicates, but, yes, I think it’s in reference to lazy loading, and I think it’s something that does require a little bit of a human evaluation, like Raghav has said.

PAOLA: Thank you, so the next one, it’s very specific. David asks: “Someone mentioned having an H2 heading titled ‘popular products.’ underneath each product part, use H3s for product names. However, for SEO purposes, they were advised to change the popular products heading to a div, and make the product title titles, H2s instead. Is that correct?”

AMBER: Lighting round. No.

[laughter]

>> STEVE: No. Wrong. I did a big thumbs down just in case anyone cannot see me.

[laughter]

>> PAOLA: Does anyone want to quickly explain why?

RAGHAVENDRA: Poor usability for screen-reader users.

AMBER: Yes. I mean, you need HTML semantics, and if you make that popular products not a heading, then it won’t show up in the headings, so someone can’t easily jump to it.

CHRIS: Yes, and so then you have a list of just product names with no context, potentially, right? You don’t know that these are popular products because the popular products label is no longer an H2.

STEVE: Yes. Does it exist on the same page as regular products or unpopular products?

[laughter]

>> AMBER: We’re all featuring unpopular products.

>> CHRIS: So Raghav, what were you going to say?

RAGHAVENDRA: As someone who practices SEO, Google reads the heading and reads the following content to get the semantic relationship. Because this is again, in accessibility, it’s called info and relationship. That is what even Google follows.

AMBER: Yes. This is one that it’s not just bad for accessibility. This is a bad SEO recommendation.

>> CHRIS: Yes, I was going to say, maybe the closing remark here is, David, maybe explore some other SEO professionals to work with, potentially.

AMBER: All right, so there’s a handful, and we only get 15 extra minutes of buffer with our captioner, so I’m going to say, Paula, when you’re saying them, why don’t you try to pick somebody to respond if you know who it might be best for, and then we’re going to try to be fast.

>> PAOLA: OK. let’s do that. Another very specific one. Stephanie asked: “I have a web page with a list of publications from a faculty member. They put the link to the article at the end of the citation. Would it be better to create a hyperlink on the text of the citation, as opposed to placing the link at the end?”

Raghav go for it.

RAGHAVENDRA: Yes. I do it both ways. I put it at the end, and I put it in the content.

>> PAOLA: Perfect.

AMBER: And you don’t want to make it link though, right?

RAGHAVENDRA: Yes. No, no, link text should be proper.

PAOLA: OK, great answer. Next one. Isla asks: “Amber and Chris, your very first contact at NASA, what was their job title? If they’re thinking of approaching bigger organizations, it’s handy to know who can become a cheerleader within the company. Thanks in advance.”

AMBER: OK, so I’ll answer this because they contacted me first. Our first contact for the NASA project was actually JJ, who I don’t remember his title, but he’s, like, the owner of Loan Rock Point, who was a developer who had the contract, and they knew they wanted to bring us in.

So sometimes on those bigger things, you need to build a relationship with the vendor who is serving the government. But then do you remember, Chris, who the job title was of the person they connected us with after we had multiple conversations… But we had multiple conversations with the vendor first.

CHRIS: I believe it was Abby, the director of web modernization at NASA, so like a large department head.

AMBER: Yes. Yes, it was. It was Abby who was first person we talked to.

PAOLA: Thanks. The next one. Nara asks: “How is Gen AI being used in accessible tech?”

I don’t know who knows a lot about AI, so whoever wants to take that one.

Steve? [laughs]

STEVE: So the Gen AI, we did have a question about this that we didn’t get to, and I think we could spend a whole meetup on that.

AMBER: We should have one. Or at least a podcast episode.

STEVE: Yes, a podcast episode, and to be quite frank, I’m not super, super versed in it. But as far as AI and accessibility, I think there’s great things. Like from a development standpoint, AI is super helpful in helping me identify what’s wrong. Like, I could place code in, or I could use GitHub co-pilot to tell me why is this not accessible? Or like, is this ARIA attribute necessary?

Now, when you get in the generative AI, where the AI is now for the end user to augment their experience, now that’s a whole can of worms that goes very deep. How does the AI actually do that? How does the AI evaluate the spectrum of the disability of the end user, and what if the end user has multiple disabilities? And what spectrum is each one of those disabilities? And how do they interact? Can AI get there, maybe. To augment the experience to make it a unique experience for each end user, based on their abilities. It could probably get there. Maybe that’s in 10, 20 years. I don’t know. Right now, I don’t know if it can fully evaluate that end users abilities.

AMBER: Yes. AI is trained on a ton of inaccessible stuff, so what do you think AI is going to think is the standard for the web?

STEVE: We can’t even get AI to generate adequate alt text right now, right?

[laughter]

PAOLA: Thank you. Next one, Laura says: “Social media icon links. Love the Equalize Accessibility Checker. I get an aria-hidden and link opens a new window, or top warnings connected with my social media links. Please explain what to do.”

Amber.

AMBER: OK, so in general, the best practice for users is not to have any links open in a new tab or window unless they’re going to literally break their flow. For example, in a form, when you have a privacy policy link in the middle of the form, you of course want that to open a new tab or window because you don’t want them to lose their progress in the form. Other than that, including social media links, the best practices is not open a new tab and windows, because users can choose to do that.

If you do have links that open a new tabs and windows, then the second recommendation that’s outlined in some of the WCAG understanding docs is that you would provide a warning. This is also required, like, for federal Section 508 compliance using the USWDS, US web design standards in the United States, if you’re building any organization that wants to follow those.

So in our plugin, this is telling you your social media link should not open in a new tab or window. Best thing to do is change them. Like ours, they just open in the same… People know how to use the “back” button, and they will come back to your website. It’s OK.

Although, if for some reason, you or a client really want them to, we have a free accessibility new window warnings plugin on “WordPress.org” that you can install. It will automatically add ARIA attribute or an aria-label, and a visible icon for sighted people, warning them that it opens a new window, and when you have that plugin installed, all of those issues in Accessibility Checker goes away. Installed and activated.

PAOLA: Thank you, and I posted the link to that plugin in the chat as well. Next question. Deneb asks: “Amber, for blog posts, how long is too? I’ve been working on a post on multimedia, and I generally shoot for about 1,200 to 2,500 words, but this one ended up closer to 3,000. Should I pare it down or is it OK? What do you think?”

>> CHRIS: Hey, Amber, how long was the WCAG 2.2 summary post you wrote and published over the weekend?

AMBER: Yes, I said that earlier, so it was actually 5,883 words.

>> STEVE: To be specific.

[laughter]

>> AMBER: Well, I counted because I wanted to see. How long is too long really depends on what the goal of the article is, who you’re targeting, and that kind of stuff. If it is a good piece of content that is appropriately formatted with headings, then to, like, create structure, and it makes sense logically for all that content to be together, then it doesn’t… You could have a 10,000-word post and it might not be too long.

I mean, from an SEO standpoint or something, I used to read [inaudible] a lot. All he did was create these epic… I mean, some of them were probably 10,000-word huge pages that talked all about this certain aspect of accessibility, with research and links and, and stuff, and it was great content, and from top to bottom, I would read it all because it solved my problem.

RAGHAVENDRA: I agree. I also.

>> AMBER: Yes, so I tend to think there is no such thing as too long, as long as it makes sense to keep it together and it’s solving the user’s problem.

Now, there might be reasons to say, “We’re going to do a part one and a part two.” But I don’t know. I don’t think anything is too long.

PAOLA: Yes. I 100% agree. For the next one, we have Stephanie: “I have a webpage with a list of publications from a faculty member. They put the link to the article at the end of the citation. Would it be better to create a hyperlink on the text of the citation as opposed to placing it in the link at the end?”

[crosstalk ]

AMBER: Oh, wait, I think we did this one.

>> PAOLA: Yes. It may have doubled. Next one. Bjorn asks: “My clients loves PDF files. When possible, I try to convince them to convert the content to HTML, but often it’s not. Thoughts on that?”

Steve.

STEVE: Yes. The content to HTML. Yes, convert it to HTML. Make a webpage. Why not? I think that’s the best approach.

Amber, do you have a difference of opinion?

AMBER: No.

RAGHAVENDRA: No. But if a PDF is the way, they need to tag them properly, because they need a sign of PDFs.

AMBER: Yes, so there are things where it does make sense that it has to be a PDFs. Anything that you think someone’s going to literally print out, like, you know, a brochure that they can print out, or you’re creating something… I mean, we did this for a client a long time ago during our agency days, they were an OBGYN, and we created, for women’s health month, like, a breast self-exam, little designed thing, with the idea that people would print it out and stick it in their bathroom or something, and it had branding from the client. But, like, we were intending that. That’s a PDF

So then I think, like Raghav said, they have to be accessible. They just have to be tagged just the same way, like most of the WCAG guidelines follow it.

STEVE: But if it’s valuable content, that is not necessarily intended for printout, right? Make it a webpage. You’re going to get the SEO juice off of that, and all the accessibility that comes along with making it semantic HTML.

PAOLO: Yes, sounds good. Next one. Stephanie asks: “What about underlining for headers?”

Raghav?

RAGHAVENDRA: The headings?

>> PAOLA: Yes. How do you feel about underlining headers? And I’m guessing that is in the context of links as well, right?

>> AMBER: Yes, what we were talking about.

>> RAGHAVENDRA: If possible, avoid links on headings, but I think sometimes it’s unavoidable, and then you need to underline them. Because…

[crosstalk ]

>> RAGHAVENDRA: Yes.

AMBER: But don’t underline your headings for design.

RAGHAVENDRA: Yes. For design, please do not. Yes.

PAOLA: OK. The next one: “Have you had user’s feedback that underlined text is hard to read? Users with some form of reading disabilities? Of course, we should make sure we’re not underlining a long text or paragraph, but we also want to make links descriptive so it might not be a word or two.”

CHRIS: Yes. I’ll chime in on this, and then I’ll let other people who know more about accessibility follow up. But I think that they kind of answered their own question a little bit. I think some of it depends on length. I definitely have trouble reading underlined text, if there’s not a lot of spacing between the rows of text, and it’s multiple rows of text underlined. It could really mess with my eyes, so, yes, if you have underlined hyperlinks, have it be reasonably descriptive but also not too long.

Would there be anything else other people would like to add?

PAOLA: I think that’s a pretty comprehensive answer.

The next one.

CHRIS: Wow, go me.

[laughter]

PAOLA: The next one: “Can I have your insights on conducting an accessible webinar or zoom session? In many blind-focus sessions, host usually ask attendees not to use the chat because the notification is distracting to screen-reader users and also hard for them to navigate and listen to the chat while listening to the main session. But chat function is widely used in other disability events. Also because it is a useful feature for those who do not like to speak on the mic, but want to share thoughts. How would you strike the balance for the potential accessibility conflict?”

I can ask that one to Raghav.

RAGHAVENDRA: So I think before any webinars or calls I do prep with my Zoom and Teams because it’s always a challenge, so there are a lot of settings, accessibility settings and notification settings. We need to turn them off, turn them on, according to the meeting, how you want them to alert you, and those settings are in there. We need to find them, and I think it’s a learning curve.

There’s a huge learning curve on these tools on how to navigate, both Zoom, Teams or any other platforms.

AMBER: Yes. I actually think this is an interesting question because we’ve never asked people not to use the chat, and if we’ve had a speaker who was blind, then we’ve usually, before we go live, walk them through how to turn off chat notifications in their Zoom settings if they don’t know how, because otherwise it does help. But this is an interesting thing that maybe I should think a little bit more about, like, is that unfair that they don’t have access to the same thing? And would it be better for everyone to not have chat?

Do you have any thoughts on that, Raghav? Or do you think it’s OK?

RAGHAVENDRA: No, it’s OK, so until the notification is not distracting the screen reader. Because what happens is every time someone joins the room, someone has put an emoji icon, chat, a text. The screen reader live region pops up and, blah, blah, blah, and we don’t hear anything else.

The real problem is not the screen reader speaking or announcing or something, sometimes, trying to stop it doesn’t stop it. It keeps on going, and that’s [crosstalk ]

AMBER: Do you feel like it’s OK for event to have chat though?

RAGHAVENDRA: I do chat. Right now, I read every chat that’s coming from the attendees.

AMBER: Yes. You’re just really good at multi-tasking.

[laughter]

You’re listening to the chat and…

RAGHAVENDRA: Yes. In JAWS, there’s a feature where in one ear, we can listen to the webinar, and in the other ear I’m listening to the JAWS screen reader.

CHRIS: Yes. I will say, too, like, I am never not blown away and impressed when I hear someone who uses a screen reader all the time, like, listen to their screen reader and it’s, like, very fast and I can barely hear anything. That’s what it sounds to me. I can’t understand it at all. But for them, it’s plain as day.

So I would say, too, don’t doubt people’s ability to parse this information that’s coming in, if that’s something that they’re very well versed in and very practiced at, right?

PAOLA: Yes, it’s definitely a superpower. Going on to the next question. We have a few minutes left, so let’s see if we can get through the last three questions.

Emily asks: “In the blog themes, the logo or site name is an H1. That means if the site name is in the footer, it’s also an H1. How would you handle that? My understanding is that there would only be one H1 on your page, which is the page title.”

Amber.

AMBER: This is a mistake in your blog theme. It should not be an H1. It arguably might not even be a heading at all, the site title.

PAOLA: Yes, that’s the answer. OK. Next question. Samara asks: “Hi, I’m using an icon as a button, but it gives empty link warning. How to fix that in WordPress?”

Steve.

STEVE: Screen-reader text or an aria-label, right?

>> PAOLA: OK.

AMBER: Yes, so it depends on how you’re creating your button. This could be a developer-level fix. Or it could be something that you could just change in the editor, depending on what it is. If you post a link to this in the WordPress Accessibility Facebook group, we can help you actually figure out how to fix the specific thing.

>> STEVE: Yes.

PAOLA: Great, and going back to our PDF question earlier, this is a follow-up: “So you can have the same information in multiple formats. I think of PDF as a print version too.” And Lori [phonetic] said that.

AMBER: Yes, so Lori said that. I think that’s fair. You could have a web page for something and then also a PDF, so maybe that’s the way to handle it with a client, where they’re, like, “Well, it really needs to have this designed,” or PDF, or whatever, so maybe you convince them to have both.

I saw there were two more that maybe didn’t copy over. One about QR code being the only thing that is presented on printed material.

Anna says: “I usually recommend putting both a QR and a short link.”

Do we think it’s helpful to have a QR and a short link?

>> STEVE: I think so.

>> AMBER: I think so too.

Sue recently read an article saying that links… Oh, this is about links not opening a new windows or tabs, so we might’ve addressed this already. Let me look.

So she’s asked: “Does anyone have a compelling reason not to do this other than the WCAG recommendation? ”

The reason why you have to warn people is when you open a new window or tab, the “back” button doesn’t work, and the normal expectation is, when I follow a link, if I want to go back where I was before, I can use my “back” button. But that doesn’t function when it’s in a new tab because there’s no history in that tab, so the way you get back is different. You’d have to close the tab, and so the idea behind the warning is it tells someone how they can get back without them having to explore and figure it out.

STEVE: Yes, and I think you mentioned that opening links in a new tab is something a user can choose to do. I know on a Mac, you can just hold down the “command” key and click, and it opens in a new window, and I think you can even set your browser settings to open all links in new windows, so it’s something a user can define, so why override that?

AMBER: Yes. I am actually going back through a lot of our older content where we were, like, opening things in new windows, and even though we have the warning and I am removing it as I update those pieces of content.

>> STEVE: The thing I like about accessibility when it comes to the development and stuff is that it does create some standards. It’s not something we have to think about anymore. It’s not, “Well, this client wants to open in a new link,” right? It’s just, “No, we just don’t do that. It’s not our standard.” And the same with underlining link text, like we spoke about earlier. It’s, like, “No, it’s just not something we do. We have a standard.” And that makes projects go a lot quicker.

AMBER: Yes, so we are definitely over time. Our captioning is going to stop in two minutes, so I think we should wrap up. But this has been great. We’ll have a recap with all of those links that were shared in the chat in a couple of weeks.

If you have any additional questions, you can always get a hold of us on the “EqualizeDigital.com” website. We also recommend checking out, if you’re not in the meetup group, or you can go to our events calendar either way and you can register for other upcoming events, and join the Facebook group, and you can post additional questions there as well.

So thanks, everybody.

PAOLA: Thank you, everyone. Bye.

>> RAGHAVENDRA: Thanks, Everyone. Bye.

>> STEVE: See you.

>> CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple podcasts, Google podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple podcasts. Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. Steve Jones composed our theme music. Learn how we helped make 1000s of WordPress websites more accessible at equalizedigital.com.

061: Accessibility Ask Me Anything with Equalize Digital and Digital A11y

Listen

Mentioned in This Episode

Summarized Session Information

Q: How do we ensure that the semantic heading structure is logical when editors (not aware of accessibility) can pick and choose components and put them in any order?

Q: How did Equalize Digital generate leads and convert them
to paying clients when you were first starting out? What strategies
would you recommend to a new web accessibility agency looking to grow its client base?

Q: I have developed a WordPress site using MilSuite, a WordPress platform for the US Department of Defense, and I have no idea how to make it accessible. I’m not tech-savvy and don’t know much about plugins. Where would you recommend that I start?

Q: Let’s discuss ways to learn accessibility. What resources did you find helpful when you were learning to code from an accessibility-first perspective?

Q: What kind of training or certifications do you think are necessary in order to specialize in accessible WordPress design?

Q: Can you explain the governing body behind the efforts around WCAG? Are these guidelines a good approach for international compliance instead of just US-focused? Are there other international standards we should be aware of for multinational brands?

Q: I currently write articles for my blog in Markdown and make layout and visual edits in Elementor. Do you know of a more accessible-friendly content editor for WordPress, both in terms of accessible usage and ensuring that the content on the page being edited is accessible?

Q: When a website has a lot of accessibility issues that are being addressed through a redesign, what can be done to protect the company from accessibility lawsuits before the website redesign is finished?

Q: Someone mentioned having an H2 heading titled ‘popular products.’ underneath each product part, use H3s for product names. However, for SEO purposes, they were advised to change the popular products heading to a div, and make the product title titles, H2s instead. Is that correct?

Q: I have a web page with a list of publications from a faculty member. They put the link to the article at the end of the citation. Would it be better to create a hyperlink on the text of the citation, as opposed to placing the link at the end?

Q: Amber and Chris, your very first contact at NASA, what was their job title? If they’re thinking of approaching bigger organizations, it’s handy to know who can become a cheerleader within the company.

Q: How is Gen AI being used in accessible tech?

Q: Social media icon links. Love the Equalize Accessibility Checker. I get an aria-hidden and link opens a new window, or top warnings connected with my social media links. Please explain what to do.

Q: For blog posts, how long is too long? I’ve been working on a post on multimedia, and I generally shoot for about 1,200 to 2,500 words, but this one ended up closer to 3,000. Should I pare it down, or is it OK? What do you think?

Q: My clients love PDF files. When possible, I try to convince them to convert the content to HTML, but often they don’t. What are your thoughts on that?

Q: Have you had user’s feedback that underlined text is hard to read? Users with some form of reading disabilities? Of course, we should make sure we’re not underlining a long text or paragraph, but we also want to make links descriptive so it might not be a word or two.

Q: In the blog themes, the logo or site name is an H1. That means if the site name is in the footer, it’s also an H1. How would you handle that? My understanding is that there would only be one H1 on your page, which is the page title.

Q: I’m using an icon as a button, but it gives empty link warning. How to fix that in WordPress?”

Transcript

Subscribe to Our Newsletter

More About Accessibility Craft

Connect With Us

Attend a Meetup Live

Listen

Mentioned in This Episode

Summarized Session Information

Q: How do we ensure that the semantic heading structure is logical when editors (not aware of accessibility) can pick and choose components and put them in any order?

Q: How did Equalize Digital generate leads and convert themto paying clients when you were first starting out? What strategieswould you recommend to a new web accessibility agency looking to grow its client base?

Q: I have developed a WordPress site using MilSuite, a WordPress platform for the US Department of Defense, and I have no idea how to make it accessible. I’m not tech-savvy and don’t know much about plugins. Where would you recommend that I start?

Q: Let’s discuss ways to learn accessibility. What resources did you find helpful when you were learning to code from an accessibility-first perspective?

Q: What kind of training or certifications do you think are necessary in order to specialize in accessible WordPress design?

Q: Can you explain the governing body behind the efforts around WCAG? Are these guidelines a good approach for international compliance instead of just US-focused? Are there other international standards we should be aware of for multinational brands?

Q: I currently write articles for my blog in Markdown and make layout and visual edits in Elementor. Do you know of a more accessible-friendly content editor for WordPress, both in terms of accessible usage and ensuring that the content on the page being edited is accessible?

Q: When a website has a lot of accessibility issues that are being addressed through a redesign, what can be done to protect the company from accessibility lawsuits before the website redesign is finished?

Q: Someone mentioned having an H2 heading titled ‘popular products.’ underneath each product part, use H3s for product names. However, for SEO purposes, they were advised to change the popular products heading to a div, and make the product title titles, H2s instead. Is that correct?

Q: I have a web page with a list of publications from a faculty member. They put the link to the article at the end of the citation. Would it be better to create a hyperlink on the text of the citation, as opposed to placing the link at the end?

Q: Amber and Chris, your very first contact at NASA, what was their job title? If they’re thinking of approaching bigger organizations, it’s handy to know who can become a cheerleader within the company.

Q: How is Gen AI being used in accessible tech?

Q: Social media icon links. Love the Equalize Accessibility Checker. I get an aria-hidden and link opens a new window, or top warnings connected with my social media links. Please explain what to do.

Q: For blog posts, how long is too long? I’ve been working on a post on multimedia, and I generally shoot for about 1,200 to 2,500 words, but this one ended up closer to 3,000. Should I pare it down, or is it OK? What do you think?

Q: My clients love PDF files. When possible, I try to convince them to convert the content to HTML, but often they don’t. What are your thoughts on that?

Q: Have you had user’s feedback that underlined text is hard to read? Users with some form of reading disabilities? Of course, we should make sure we’re not underlining a long text or paragraph, but we also want to make links descriptive so it might not be a word or two.

Q: In the blog themes, the logo or site name is an H1. That means if the site name is in the footer, it’s also an H1. How would you handle that? My understanding is that there would only be one H1 on your page, which is the page title.

Q: I’m using an icon as a button, but it gives empty link warning. How to fix that in WordPress?”

Transcript

Subscribe to Our Newsletter

More About Accessibility Craft

Connect With Us

Attend a Meetup Live

Q: How did Equalize Digital generate leads and convert them
to paying clients when you were first starting out? What strategies
would you recommend to a new web accessibility agency looking to grow its client base?