Accessible Marketing: Are You Making These Mistakes?

Creating accessible marketing isn’t just about ticking boxes; it’s about expanding your reach and connecting with a wider audience. Overlooking accessibility can lead to missed opportunities and even legal trouble. Are you making these common mistakes that are costing you customers?

1. Ignoring Alt Text on Images

One of the most frequent accessibility errors I see is missing or inadequate alt text on images. Alt text, or alternative text, is a short description of an image that screen readers use to convey the image’s content to visually impaired users. It’s not just about describing what’s in the picture, but also the purpose of the image.

Pro Tip: Think about the context. Is the image purely decorative? Then use an empty alt attribute: alt="". Is it a crucial part of conveying information? Then describe it clearly and concisely. Don’t just say “logo”; say “Acme Corp logo, linking to the homepage.”

Here’s an example. I had a client last year, a small bakery in the Virginia-Highland neighborhood of Atlanta, who completely neglected alt text on their website. They had beautiful photos of their pastries, but screen reader users had no idea what they were missing! After adding descriptive alt text like “Close-up of a chocolate croissant with flaky layers” and “Assortment of colorful macarons on a display shelf,” they saw a noticeable increase in engagement from users with disabilities.

Common Mistake: Keyword stuffing. Don’t cram keywords into your alt text. It’s bad for accessibility and bad for SEO. Focus on accurate descriptions.

2. Low Color Contrast

Imagine trying to read light gray text on a white background. Frustrating, right? That’s what many users experience when websites and marketing materials have insufficient color contrast. The Web Content Accessibility Guidelines (WCAG) sets specific contrast ratio requirements, and failing to meet them excludes a significant portion of your audience.

To ensure your color choices are accessible, use a color contrast checker. A popular and free tool is the WebAIM Contrast Checker. Enter your foreground and background colors (in hex code, RGB, or HSL), and it will tell you if you meet WCAG AA or AAA standards.

Pro Tip: Design with accessibility in mind from the start. Choose color palettes that naturally offer good contrast. Many online tools can help you generate accessible color palettes.

Common Mistake: Relying solely on your own judgment. What looks “fine” to you might be illegible to someone with low vision. Always use a contrast checker.

3. Neglecting Captions and Transcripts for Video and Audio

Video and audio content is incredibly engaging, but it’s useless to users who are deaf or hard of hearing without proper captions and transcripts. Captions are synchronized text that appears on screen, while transcripts are written versions of the audio content.

Most video platforms, like Adobe Experience Cloud, offer automatic captioning, but it’s crucial to review and edit these for accuracy. Automatic captions are rarely perfect, and errors can significantly impact comprehension. I remember seeing a political ad that auto-captioned “affordable healthcare” as “a Fordable haircut.” A pretty big difference!

Pro Tip: For live videos, consider using a real-time captioning service. These services provide highly accurate captions with minimal delay.

A transcript should be available even if you have captions. Transcripts provide an alternative way to access the content and are also beneficial for SEO. Make the transcript easily accessible, such as a link below the video or audio player.

Common Mistake: Assuming automatic captions are “good enough.” Always review and edit them carefully.

4. Poor Keyboard Navigation

Many users rely on keyboard navigation to interact with websites and applications. This includes people with motor impairments, screen reader users, and those who simply prefer using a keyboard. A website that isn’t properly navigable by keyboard creates a major barrier.

To test keyboard navigation, unplug your mouse and try navigating your website using only the Tab key, Shift+Tab (to go backwards), and the Enter key. Can you access all interactive elements, such as links, buttons, and form fields? Is the focus order logical and intuitive?

Pro Tip: Pay attention to the “focus state” of elements. When an element is focused, it should have a clear visual indicator (e.g., a highlighted border) so users know where they are on the page.

Common Mistake: Forgetting to test keyboard navigation after making website updates. Changes to the code can inadvertently break keyboard accessibility.

5. Complex or Unclear Form Labels

Forms are essential for collecting information, but they can be a nightmare for users with disabilities if they’re not designed with accessibility in mind. Clear and descriptive form labels are crucial.

Each form field should have a corresponding label that is explicitly associated with the field using the <label> tag and the for attribute. This ensures that screen readers can correctly announce the purpose of each field. Don’t rely on placeholder text as a substitute for labels, as placeholder text disappears when the user starts typing.

Pro Tip: Use ARIA attributes (Accessible Rich Internet Applications) to provide additional context or instructions for complex form fields. For example, you can use aria-describedby to link a field to a descriptive text block.

Common Mistake: Using vague or ambiguous labels. For example, instead of “Name,” use “First Name” and “Last Name.”

6. Ignoring Semantic HTML

Semantic HTML uses HTML elements to convey the meaning and structure of content, rather than just its appearance. For example, using <h1> for the main heading, <p> for paragraphs, <ul> and <li> for lists, and <article> and <nav> for structural elements.

Screen readers rely on semantic HTML to understand the organization of a page and provide users with meaningful navigation. Using <div> elements for everything, even if it looks visually correct, deprives screen reader users of this crucial information.

Pro Tip: Learn the semantic HTML elements and use them appropriately. It will make your code more accessible and easier to maintain.

Common Mistake: Overusing <div> elements for layout purposes. Embrace the power of semantic HTML!

7. Not Providing Sufficient Time to Complete Tasks

Some users need more time to read content, fill out forms, or complete other tasks. If your website or application imposes strict time limits, you may be excluding these users.

WCAG recommends providing users with the ability to extend or disable time limits whenever possible. If a time limit is essential, provide a warning before the time expires and give users the option to extend it. We ran into this exact issue at my previous firm. A client in Buckhead, a financial services company, had a strict 3-minute timeout on their online application form. Many users, particularly those using assistive technologies, were unable to complete the form in time. After extending the timeout to 10 minutes and providing a warning message, the form completion rate increased significantly.

Pro Tip: Consider the cognitive load of your website or application. Break down complex tasks into smaller, more manageable steps.

Common Mistake: Assuming all users can complete tasks at the same speed.

8. Lack of Focus Management

When a user interacts with a dynamic element on a webpage, such as opening a modal window or submitting a form, the focus should be managed appropriately. The focus should be moved to the relevant element, such as the first interactive element in the modal window, or a confirmation message after form submission.

Without proper focus management, users can become disoriented and lose their place on the page. This is especially problematic for screen reader users, who rely on the focus to understand what’s happening.

Pro Tip: Use JavaScript to programmatically set the focus to the appropriate element after a dynamic event. For example, after opening a modal window, use element.focus() to move the focus to the first interactive element within the modal.

Common Mistake: Leaving the focus on the element that triggered the dynamic event. This can be confusing and disorienting.

9. Forgetting About Mobile Accessibility

With the majority of web traffic coming from mobile devices, it’s essential to ensure that your marketing materials are accessible on smaller screens. Mobile accessibility involves optimizing your website and applications for touchscreens, screen readers, and other mobile-specific assistive technologies.

Use responsive design to ensure that your content adapts to different screen sizes. Make sure that touch targets are large enough and have sufficient spacing to prevent accidental taps. Test your website on a variety of mobile devices and assistive technologies.

According to a Nielsen Norman Group report, designing for mobile accessibility often improves the experience for all users, regardless of disability.

Pro Tip: Use a mobile accessibility testing tool to identify potential issues. There are many free and paid tools available.

Common Mistake: Assuming that a website that is accessible on a desktop computer will automatically be accessible on a mobile device.

10. Not Testing with Users with Disabilities

Ultimately, the best way to ensure that your marketing materials are accessible is to test them with users with disabilities. Get feedback from people who actually use assistive technologies and rely on accessible design. Their insights will be invaluable in identifying and addressing accessibility issues that you might otherwise miss.

There are many organizations that offer accessibility testing services. You can also recruit users with disabilities through disability organizations or online communities. This is what nobody tells you: real user testing is the only way to guarantee true accessibility.

Pro Tip: Compensate users for their time and expertise. Accessibility testing is a valuable service.

Common Mistake: Relying solely on automated testing tools. While these tools can be helpful, they can’t catch everything. Human feedback is essential.

Creating truly accessible marketing requires a commitment to inclusivity and a willingness to learn and adapt. By avoiding these common mistakes, you can reach a wider audience, improve the user experience for everyone, and demonstrate your commitment to social responsibility. Don’t wait for a lawsuit or negative publicity – start prioritizing accessibility today. And remember, AI can help with accessibility too.

If you’re an Atlanta entrepreneur, make sure your marketing is accessible to everyone. It’s not just the right thing to do, but it’s also good for business. For more insights, consider reading our expert marketing expert interviews.

Don’t treat accessibility as an afterthought. Bake it into your marketing processes from the start. By making accessibility a priority, you’ll not only reach a wider audience but also create a better experience for everyone.