How-to Guides Archives- Page 8 of 8/Category

Creating Accessible Web Forms
In today’s digital world, ensuring your content forms are accessible is more important than ever. Whether you’re a website owner, a developer, or a content creator, ensuring that everyone can use your forms is key to providing a great user experience. This article will dive into why accessible content forms matter, how to ensure your forms meet accessibility standards and tips for creating inclusive digital spaces. Let’s explore how you can make your forms better for everyone!

Why Should Content Forms Be Accessible?

Accessible content forms are crucial for several reasons:
1. Inclusivity: Everyone should have equal access to information and the ability to participate in discussions. By making your forms accessible, you’re ensuring that users with disabilities can join in the conversation just as easily as anyone else.
2. Legal Compliance: In the United States, there are legal requirements for digital accessibility under laws like the Americans with Disabilities Act (ADA). Making your forms accessible helps you stay compliant and avoid potential legal issues.
3. Broader Audience: Accessible forms reach a wider audience. More people can engage with your content when your forms are easy to navigate and use, leading to increased traffic and a better community experience.
The Importance of Accessible Forms

Accessible forms are not just about following the law—they’re about creating a better, more inclusive online environment. Here’s why it matters:
1. Improves User Experience: Accessible forms provide a smoother experience for all users. Features like clear navigation, readable text, and proper color contrast benefit everyone, not just those with disabilities.
2. Enhances SEO: Search engines favor well-structured websites that are easy to navigate. By making your forms accessible, you improve your SEO, leading to higher search rankings and more visibility.
3. Fosters Community: An inclusive forum encourages participation from a diverse group. When users feel they can easily engage with your content, they are more likely to become active members of your website.
How to Create Accessible Digital Forms

Creating an accessible digital forum involves several key steps. Here’s a breakdown to help you get started:

1. Understand the WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) are standards designed to make web content more accessible. They provide a framework for creating content that is usable by everyone, including people with disabilities. The guidelines are organized into four principles:
- Perceivable: Information must be presented in a way that all users can perceive, such as providing text alternatives for images.
- Operable: Users must be able to navigate and interact with your site using tools like keyboard navigation and screen readers.
- Understandable: Content must be easy to read and understand, with clear instructions and a consistent layout.
- Robust: Your content should work well across various devices and browsers, ensuring compatibility with assistive technologies.
2. Ensure Text Readability

Text readability is vital for all users, especially those with visual impairments or dyslexia. Here’s how you can improve it:
- Use Clear Fonts: Choose fonts that are easy to read. Avoid overly decorative fonts and ensure your text size is large enough to read comfortably.
- Provide Text Alternatives (WCAG 1.1.1): Include alt text for images, charts, and other non-text content. This helps users who rely on screen readers understand what’s in the visuals.
3. Implement Keyboard Navigation

Many users with disabilities rely on keyboards rather than mice. Make sure your forms are fully navigable using keyboard shortcuts:
- Focus Order (WCAG 2.4.3) : Ensure that users can tab through all interactive elements in a logical order.
- Keyboard Shortcuts (WCAG 2.1.1): Implement keyboard shortcuts for common actions to improve efficiency.
4. Use Descriptive Links and Buttons

Links and buttons should be easily identifiable and descriptive:
- Meaningful Link Text (WCAG 2.4.4): Avoid vague link text like “click here.” Instead, use descriptive text that tells users where the link will take them, such as “Read more about our forum guidelines.”
- Button Labels (WCAG 3.3.2) : Ensure buttons have clear labels that describe their action, like “Submit” or “Cancel.”
5. Ensure Color Contrast and Visual Elements

Good color contrast and visual elements are essential for readability:
- Contrast Ratios (WCAG 1.4.3): Use high contrast between text and background colors. Use tools like the WCAG Contrast Checker to verify that your button colors meet accessibility standards.
- Visual Cues (WCAG 1.3.3): Use visual indicators, such as icons or patterns, in addition to color to convey information. This helps users who are colorblind or have low vision.
6. Test with Real Users

Testing is crucial to ensure your forum is truly accessible:
- User Testing: Involve real users with disabilities in your testing process. Their feedback can help you identify and address accessibility issues you might not have considered.
- Automated Tools: Automated accessibility testing tools such as WAVE or Lighthouse to catch common issues. But remember that these tools can’t catch everything.
7. Stay Updated with Accessibility Trends

Digital accessibility is an evolving field. Stay informed about the latest updates and best practices:
- Ongoing Training: Regularly train your development team on accessibility best practices.
- Community Resources: Participate in accessibility forms and follow industry news to keep up with new developments.
Wrapping Up

Creating accessible web content forms is more than just meeting compliance standards—it’s about fostering a welcoming and inclusive digital space for everyone. By adhering to WCAG guidelines, enhancing text readability, ensuring keyboard navigation, and conducting regular accessibility tests, you can build a forum that all users can navigate and enjoy.

To take your commitment to accessibility to the next level, schedule a complimentary ADA strategy briefing with 216digital. Our team of experts will help develop a strategy to integrate WCAG 2.1 compliance into your development roadmap on your terms.Start integrating these practices today to build a more inclusive and user-friendly forum for everyone. Reach out today to start making a difference!
Greg McNeil

August 14, 2024

How-to Guides

accessible forms, ADA Compliance, digital accessibility, forms, Web Accessibility, web development, Website Accessibility
ADA Compliance for Videos
If you’re a website owner, developer, or content creator, you might already be familiar with the importance of making your site accessible. You might have heard about adding alt text to images or ensuring that your site is navigable using just a keyboard. But what about videos?

Videos are a powerful way to communicate with your audience, but if they aren’t accessible, you could be missing out on a large portion of your audience and might even run into legal issues. In this article, we’re diving into ADA compliance for videos, why it’s important, and how to make sure your videos are accessible to everyone.

What is ADA Video Compliance?

ADA stands for the Americans with Disabilities Act, which was passed in 1990 to prevent discrimination against individuals with disabilities. While it originally focused on physical spaces like buildings, the ADA has evolved to include digital spaces, including websites and the content they host. When we talk about ADA compliance for videos, we’re referring to making sure that your videos can be accessed and understood by everyone, including people with disabilities.

ADA compliance for videos is closely related to the Web Content Accessibility Guidelines (WCAG), which provide a set of standards for making web content more accessible. The most recent version, WCAG 2.1, lays out specific guidelines for making videos accessible.

Why is ADA Video Compliance Important?

You might be wondering why ADA video compliance is so crucial. There are a few key reasons:
1. Inclusivity: Making your videos accessible ensures that everyone, regardless of ability, can engage with your content. This isn’t just the right thing to do, it also makes good business sense. When your content is accessible, you open up your site to a broader audience.
2. Legal Requirements: The ADA requires that digital content be accessible, and failure to comply can result in lawsuits. While the law may not specifically mention videos, courts have interpreted the ADA to include all web content, including multimedia such as videos.
3. Better User Experience: Accessible videos provide a better experience for all users. Features like captions can help people understand your content in noisy environments or when they’re not able to use sound.
4. Search Engine Optimization (SEO): Adding captions, transcripts, and other accessibility features can also help with SEO. Search engines can’t watch videos, but they can read captions and transcripts, which can help your content rank better in search results.
WCAG 2.1 Video Requirements

Understanding and following WCAG guidelines can help make sure your videos meet ADA requirements. The latest version, WCAG 2.1, sets clear rules for making videos accessible, which are important for legal reasons.

WCAG 2.1 details most video-related requirements in Section 1.2. This section focuses on providing alternatives for time-based media like audio and videos. Here are the key guidelines for video content for Level A and AA:
1. 1.2.1: For prerecorded videos with no audio, there must be an audio track that gives the same information.
2. 1.2.2: Captions should be included for all prerecorded audio in videos.
3. 1.2.3: Prerecorded videos should have audio descriptions.
4. 1.2.4: Live videos should include captions for all spoken content.
5. 1.2.5: All prerecorded videos must have audio descriptions.
Tips for Creating Accessible Videos

Provide Captions for Multimedia Content

Captions are text versions of the spoken part of a video or audio. They display the dialogue, sound effects, and other audio cues. For example, if a character in a video says, “I’m going to the store,” the caption will show this text on the screen. Captions are usually placed at the bottom of the video, so they don’t cover up important parts of the visuals.

SC 1.2.2 Captions (Prerecorded) states that all prerecorded video and audio content must have captions. This helps people who can’t hear or who prefer to read understand what’s going on in the media.

Think About Your Audience When Writing Captions

Just adding captions to your videos isn’t enough. You need to ensure they’re accurate, easy to read, and truly helpful for viewers.

Here’s what your captions should do:
- Include All Dialogue and Key Sounds: Capture every word spoken in the video, and don’t forget important sounds and music—for instance, sound effects from sports events.
- Match the Audio and Video: Make sure captions sync up with what’s happening in the video. They shouldn’t lag behind someone speaking or an animation on screen.
- Be Readable: Use a font size that’s big enough for everyone to see comfortably.
- Cover All Your Videos: Add captions to every video you share, even on social media.
Watch Out for Automated Captions

When it comes to captions, it’s best to steer clear of automated tools. While AI has gotten a lot better, these automatic captions still make mistakes that can be annoying and distracting for viewers.

If you do use automated captions, make sure to check them thoroughly for errors. The ideal approach is to create your own captions and transcripts while you’re working on your video scripts.

Include Audio Descriptions

Audio descriptions are better than transcripts for people who are blind or visually impaired. Think of them like a podcast that explains what’s happening in a video. They provide information without requiring the viewer to see the screen.

Adding audio descriptions to your videos might feel a bit unusual at first, but it quickly becomes second nature. Audio descriptions are specifically created to help users with vision loss by describing the visual elements of a video. They include a voice track that fits into the pauses between dialogue and other audio; whenever you can, include audio descriptions in your videos.

Provide a Transcript

WCAG guidelines don’t require transcripts for pre-recorded videos with audio. However, if you publish videos without audio, you need to provide a detailed transcript to meet WCAG SC 1.2.1 (Audio-only and Video-only).

While captions alone can make videos accessible, providing transcripts is a good practice. Transcripts let people read at their own pace, which helps those using assistive technology, non-native speakers, and individuals with learning disabilities.

Make Sure Your Video Player Has Accessible Controls

Many people use keyboards to navigate the web without a mouse. Keyboard accessibility is an important part of making websites usable for everyone, but video players can sometimes create problems for keyboard users. These issues usually come from poor coding or JavaScript problems.

To check if your video player works well with a keyboard, open your website in a browser and use the Tab and Shift-Tab keys to move through the controls. As you test, ask yourself these questions:
- Can I use all the controls on the video player?
- Does the keyboard seem to get “stuck” on any control or part?
- Which part is currently selected by the keyboard?
Avoiding Flashing Content

Videos that flash or flicker can be problematic for people with photosensitive epilepsy. WCAG guidelines recommend avoiding content that flashes more than three times per second to prevent triggering seizures.

How to Install Videos on Your Website to Be Accessible

Now that you understand the importance of ADA video compliance and the relevant WCAG guidelines, let’s talk about how to install videos on your website to ensure they are accessible.

Choose an Accessible Video Player

The first step is to choose a video player that is designed with accessibility in mind. Many popular video players, like YouTube’s embedded player, already have features like keyboard accessibility and customizable captions. If you’re using a custom video player, make sure it meets WCAG guidelines by testing it with keyboard navigation and screen readers.

Add Captions to Your Videos

When you upload a video to your site, you’ll want to make sure it has captions. If you’re using a platform like YouTube, you can upload your own captions or use the platform’s automatic captioning feature, though it’s a good idea to review and edit these captions for accuracy. If you’re hosting videos yourself, there are many tools available for creating and syncing captions.

Provide Transcripts

After you’ve added captions, the next step is to create a transcript of the video. You can offer the transcript as a downloadable file or display it directly on the page below the video. Providing a transcript not only helps with accessibility but can also improve your site’s SEO.

Include Audio Descriptions

For videos with important visual content that isn’t described in the audio, consider creating a version of the video with audio descriptions. This can be as simple as adding a voiceover that describes key visual elements or creating a separate audio track that users can turn on if they need it.

Test Your Videos for Accessibility

Once you’ve added all the necessary accessibility features, it’s important to test your videos to ensure they are actually accessible. This means watching the video with captions and a screen reader, navigating the player with just a keyboard, and making sure the video content is clear and understandable, even without sound or visuals.

Use an Accessibility Checker

There are many tools available that can automatically check your site’s accessibility, including your videos. These tools can identify issues you have missed and suggest ways to fix them. Regularly running these checks can help you maintain ADA compliance as you add new content to your site.

Make Accessibility a Priority

Web accessibility isn’t just a legal requirement—it’s a way to make your content more inclusive and reach a wider audience. By focusing on ADA video compliance, you’re taking important steps to ensure that everyone, regardless of ability, can enjoy and engage with your content. Whether you’re a website owner, developer, or content creator, making your videos accessible should be a top priority.

Remember, accessibility is an ongoing process. As you continue to create and share video content, keep WCAG guidelines in mind, and make it a habit to review and update your accessibility features regularly. Not only will this help you avoid legal issues, but it will also help you create a more inclusive and welcoming online experience for all your users.

If you need help with video accessibility or legal compliance, we’re here to help. Schedule a briefing with 216digital today so that you can confidently take this next step into digital accessibility.
Greg McNeil

August 9, 2024

How-to Guides

Accessibility, ADA Compliance, ADA Website Compliance, videos and audio content, Web Accessibility, web development, Website Accessibility
Why Web Accessible Fonts Matter for Your Website
Design, page layout, and navigation all play a big role in making a website accessible. But the smaller details—like font—are just as important. Designing accessible content isn’t just about picking an easy-to-read font. Even with accessible fonts, people with low vision, cognitive, language, and learning disabilities might still have trouble reading due to factors like font spacing, size, and contrast —to name a few.

Let’s go over what makes a font accessible and how you can choose the right one for your website.

WCAG and Accessible Fonts

Websites are considered ADA-compliant when they follow the Web Content Accessibility Guidelines (WCAG). These guidelines make web content more accessible for people with disabilities. Fonts play a big role in this—they need to be clear, readable, and usable by everyone, including those with visual impairments or cognitive disabilities.

WCAG includes many sections that focus on content visibility and design, helping website owners and designers pick fonts that are accessible. Here are the key WCAG sections that relate to fonts:
- Presenting Web Content in Different Ways: Fonts should be easy to read when resized or presented with different styles or spacing.
- Making Web Content Easy to See or Hear: Consider a font’s family, size, spacing, and color to make sure the content is easy to see.
We’ll dive deeper into these principles and explain how they relate to specific font styles and families.

The Importance of Using Accessible Fonts

Using accessible fonts on your website is really important for people with disabilities, making sure they can easily read your content. But it’s not just for them—everyone benefits from easy-to-read fonts. Many people skim through text rather than reading every word, especially if they’re distracted, stressed, or juggling multiple tasks. That’s why a clear, easy-to-read font can be a big help.

Plus, accessible fonts can actually boost your site’s search engine ranking. How readable your text is plays a big role in how search engines like Google rank your website. Sites that are easy to read often get a higher ranking.

For more details on how accessibility and SEO go hand in hand, check out our guide on SEO and web accessibility.

So, What Makes a Font Accessible?

Choosing the right font isn’t one-size-fits-all, but some key things like size and color really do matter. Here are a few WCAG guidelines to help you pick fonts that meet ADA requirements.

Spacing

Spacing is a big deal when it comes to making sure your website is accessible. Good spacing helps keep your letters, words, and lines clear and easy to read without overlapping.

According to WCAG’s Success Criterion 1.4.12, you should also think about how text can be adjusted. Some people with disabilities or those using assistive technology might need to change text size or spacing to make reading easier. For instance, individuals with dyslexia might find that increased spacing between letters and lines helps them read better. It’s important that when users adjust text in their browsers, the words don’t disappear or overlap.

Use Sufficient Text Spacing

To make text readable, here’s what you should keep in mind for spacing:
- Line Height: Make it at least 1.5 times the font size.
- Paragraph Spacing: Set it to at least 2 times the font size.
- Letter Spacing: Add at least 0.12 times the font size.
- Word Spacing: Ensure it’s at least 0.16 times the font size.
To figure out the best spacing for your font, use the Google Fonts Type Tester. It’s a handy tool that helps you see how different fonts look with various spacings so you can pick what works best for your project.

Color Contrast

You might think that black text on a white background is easy to read, but it’s not always that simple. Just like text with too little contrast can blend into the background, text with too much contrast can strain your eyes and cause visual fatigue.

For instance, compare these two color combos:
- Light gray text on a white background (low contrast, hard to read).
- Black text on a white background (high contrast, easy to read).
Whenever possible, go for the second option to make your text easier to read.

WCAG offers tips on making your text readable for everyone, including those with vision impairments. They recommend using a contrast ratio of at least 4.5:1 for regular text and 3:1 for larger text. If you want to meet WCAG 2.1 Level AAA, which is the highest level of accessibility, you’ll need a contrast ratio of 7:1 between your text and background.

And remember, don’t rely on color alone to convey important information—always use other ways to ensure your content is accessible to everyone.

Size

WCAG does not have a specific minimum font size, but they do suggest that your text should be resizable up to 200% without losing content or functionality. This means your text should still be readable, and your layout should still work when someone zooms in. For instance, if your website text is 16px, users should be able to resize it to 32px without breaking the page layout.

This is especially important for people with visual impairments who may need to enlarge text to read it comfortably.

Text with Graphics

Some web designers use text within images instead of regular text blocks, but this can be a problem for accessibility. Regular text can be easily adjusted in size, spacing, and color to keep it readable. On the other hand, text in images doesn’t adapt well. It can get pixelated and hard to read when you zoom in, which is a big issue for people with visual disabilities.

According to WCAG 1.4.5, you should be using text instead of images of text whenever possible. For example, instead of putting text on a banner image, create a text element directly on your website. This way, screen readers can read the text, and users can adjust its size as needed.

How to Choose an Accessible Font Family

If you want to make your text easier to read, here are some tips to help with accessibility:
- Pick Simple and Clear Fonts: Use fonts that are easy to read and familiar. Steer clear of fancy scripts or handwriting styles.
- Avoid Confusing Characters: Choose fonts where letters and numbers are distinct. You don’t want “O” and “0” or “l” and “I” to look too similar.
- Limit Font Variations: Stick to one, two, or at most three different fonts. Too many variations can be overwhelming.
- Consider Spacing: Make sure there’s plenty of space around your text. Avoid making text too close together or overlapping.
- Check Color Contrast: Use tools like the WCAG Contrast Checker to verify that your text color stands out well against the background. Good contrast helps make reading easier.
- Avoid Tiny Text and Crowded Blocks: Don’t use very small font sizes or cram too much text into one space. It can be hard to read if the text is too small or packed too closely.
Examples of Accessible Fonts

Choosing the right font for your website and other digital projects can make a big difference. While there are many unique fonts out there, the most familiar ones are popular for good reasons. They are often the easiest to read and recognize.

Here are a few fonts known for their accessibility:
- Arial: This font is easy to read because it has wide letter spacing, clear distinctions between similar letters, and a high x-height (the height of lowercase letters). Arial works well with assistive technologies and screen magnifiers.
- Verdana: Like Arial, Verdana is designed for readability. It has a large x-height, bold outlines, and wide spacing between characters, making it clear and accessible for both people and assistive tech.
- Helvetica: Known for its bold outlines and generous character spacing, Helvetica is another great choice for accessibility. Its design helps people with visual impairments read more easily and is compatible with various assistive technologies.
- Times New Roman: This classic font is widely used because of its simple and clear design. It’s easy to read and understand, making it a reliable choice for many types of content.
- Tahoma: Tahoma is similar to Times New Roman but with a modern twist. Its clean design and good character spacing make it quick and easy to read.
Remember, there’s no one-size-fits-all answer when it comes to the most accessible font. It’s important to consider the specific needs of your audience when choosing a font.

Key Takeaways

Whether you’re designing infographics, videos, slideshows, or blog posts, choosing an accessible font is a simple yet powerful way to make your content more accessible. By following WCAG guidelines and selecting fonts that prioritize readability and legibility, you can create a more inclusive and user-friendly experience for all visitors. Remember, accessibility benefits everyone, and taking these steps can make a significant difference.

So, next time you’re designing a website or creating digital content, keep these tips in mind. Your audience will thank you, and you’ll be contributing to a more accessible and inclusive web.

Happy designing!
Greg McNeil

August 1, 2024

How-to Guides

Accessible Design, accessible fonts, Fonts, Web Accessibility, Web Accessible Design, Website Accessibility
Why Accessible Buttons Matter for Your Website
As a website owner, developer, or content creator, you’ve probably heard the term “web accessibility” tossed around. But what does it really mean, and why should you care? Specifically, how do accessible buttons fit into this equation? In today’s blog post, we’ll break down everything you need to know about web accessibility for buttons. We’ll cover why it’s essential, the guidelines you need to follow, and practical tips on creating buttons that everyone can use.

Why Web Accessibility for Buttons is Important

Let’s start with the basics: what is web accessibility? Simply put, web accessibility means designing websites and digital tools so that everyone, including people with disabilities, can use them. This includes people with visual, auditory, cognitive, and motor impairments. Accessible buttons play a huge role in this.

Think about how often you click a button online—whether you’re submitting a form, making a purchase, or navigating to another page. Now imagine trying to do those things if the buttons were hard to see, difficult to click, or didn’t make sense when read by a screen reader. For millions of people, this is a daily reality.

Creating accessible buttons isn’t just about following guidelines—it’s about ensuring that everyone can interact with your website easily and effectively. By making your buttons accessible, you’re not only improving the user experience but also reaching a wider audience, boosting your SEO, and demonstrating social responsibility.

Understanding the WCAG Guidelines for Accessible Buttons

The Web Content Accessibility Guidelines (WCAG) are the go-to resource when it comes to web accessibility. They provide a set of recommendations designed to make web content more accessible to people with disabilities. When it comes to buttons, there are specific guidelines to keep in mind.

Perceivable

Text Alternatives (WCAG 1.1.1)

Every button should have a text alternative that conveys the same information as the visual button. This can be done using alt text or aria-labels. This ensures that users who rely on screen readers can understand the button’s purpose.

Contrast (WCAG 1.4.3)

Buttons should be easily noticeable by all users, not just those with disabilities. Color plays a significant role in this. You’ll want to ensure that both the button color and the text have sufficient contrast. Buttons should have a high contrast ratio of at least 4.5:1 between the text and background colors to ensure they are easy to see, even for users with visual impairments.

Operable

Keyboard Accessibility (WCAG 2.1.1)

Make sure that all buttons can be accessed and activated using a keyboard. This is crucial for users who cannot use a mouse. Not all users are able to use a mouse to navigate the web which means users need to be able to navigate and click on buttons using just their keyboard.

Focus Indicators ( WCAG 2.4.13)

When a button is selected or “focused,” it should be visually distinct so users can easily see which button they’re interacting with. Button elements should be designed to give a clear visual cue to the user. WCAG 2.4.13 recommends at least a 2 CSS pixel thick perimeter around the button.

Understandable

Clear Labels (WCAG 3.3.2)

When creating buttons, make sure the labels are clear and easy to understand, so that users know what will happen when they click the button. You can use WAI-ARIA (ARIA roles) to help with this. By including ARIA labels in your HTML, you can avoid confusion and anxiety around buttons and clearly communicate what action will follow when the button is clicked.

Consistent Navigation (WCAG 3.2.3)

If your website uses buttons for navigation, ensure that the buttons are consistent across pages to avoid confusion.

Robust

Screen Reader Compatibility (WCAG 4.1.2)

Did you know that buttons have different states besides their default one? This includes hover, click, active, and more. Each of these states needs to have clear cues so that users with disabilities and assistive technologies can easily use them. It’s important to make sure your buttons work on different devices and web browsers, including with tools like screen readers.

We recommend testing your content with different types of screen readers, like NVDA, Voiceover, or JAWS, to ensure that they are being announced as buttons and not links.

How to Create Accessible Buttons

Now that you understand the importance and guidelines of web accessibility for buttons, let’s explore the practical steps you can take to make them accessible.

Use Semantic HTML

One of the simplest ways to make your buttons accessible is to use the correct HTML elements. For example, use the <button> tag for buttons rather than trying to repurpose other tags like <div> or <span>. The <button> tag is designed for user interaction and is inherently more accessible because it’s recognized by assistive technologies.

Here’s a quick example:
```
<button type="submit">Submit</button>
```
This button is easy for screen readers to identify and interact with. It also works well with keyboards, making it accessible to a broader audience.

Make Sure Button Labels are Clear and Descriptive

Button labels should be straightforward and describe the action that will occur when clicked. Avoid using vague labels like “Click Here” or “More” because they don’t provide enough context. Instead, be specific. For instance, “Submit Form,” “Download Report,” or “Add to Cart” are much better options.

A clear label helps everyone, but it’s especially crucial for screen reader users. When the screen reader announces the button, the user should instantly understand what will happen if they activate it.

Provide Alt Text or ARIA Labels for Buttons

If your button uses an image or icon instead of text, you need to provide an accessible name for the button. This can be done with alt text or an aria-label. This ensures that screen readers can announce the button’s function to the user.

Here’s an example:
```
<button aria-label="Search">
<img src="search-icon.png" alt="">
</button>
```
In this case, the aria-label tells the screen reader that this is a search button, even though the button itself only displays an image.

Ensure High Contrast for Better Visibility

High contrast between the button text and background is essential for users with visual impairments, including color blindness. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

For example, if your button has white text on a blue background, make sure the shade of blue is dark enough to provide sufficient contrast.

Test Keyboard Accessibility

Many users rely on a keyboard rather than a mouse to navigate a website. Ensure that all buttons can be accessed using the Tab key and activated with the Enter or Space key.

To test this, try navigating your site using only the keyboard. If you can’t reach or activate a button, you’ll need to adjust your code to make it keyboard accessible.

The Role of Button Labels in Web Accessibility

Button labels are crucial in web accessibility. They guide users on what to do next and are particularly important for those using screen readers or other assistive technologies. Here’s how to get button labels right:

Write Alt Text as Simple Sentences

If your button includes an image or icon, write alt text that clearly and succinctly describes the button’s action. Alt text should be simple, direct, and written as a complete sentence whenever possible.

For example:
```
<button aria-label= "Download report">
<img src="download-icon.png" alt="Download report">
</button>
```
This alt text tells the user exactly what the button does. Avoid overly complex or vague descriptions, as they can confuse users.

Avoid Repeat or Redundant Button Labels

On some websites, you might find multiple buttons with the same label, like several “Learn More” buttons on a single page. This can be confusing for users who rely on screen readers, as they won’t know which “Learn More” button corresponds to which section of content.

To avoid this, make sure each button label is unique and descriptive. If you have several buttons that perform similar actions, differentiate them by adding context. For example:
- “Learn More About Our Services”
- “Learn More About Our Products”
- “Learn More About Our Team”
Testing and Maintaining Accessible Buttons

Once you’ve created accessible buttons, it’s important to test them regularly to ensure they work as expected. Here are some ways to test your buttons:

Screen Reader Testing

Use a screen reader like NVDA (Windows), Voiceover (Mac), or JAWS to navigate your website. Ensure that each button is announced correctly and that its purpose is clear.

Keyboard Navigation

Test your site using only a keyboard to make sure that all buttons are accessible and functional. Check that the focus state is visible and that buttons can be activated with the Enter or Space key.

Color Contrast Testing

Use tools like the WCAG Contrast Checker to verify that your button colors meet accessibility standards.

Ongoing Maintenance

Web accessibility is not a one-time task. As you add new content and features to your website, make sure that any new buttons meet accessibility guidelines. Regularly audit your site to catch and fix any issues.

216digital’s a11y.Radar ADA Monitoring

With 216digital’s a11y.Radar, maintaining an ADA-compliant website is easier than ever. This automated platform continuously audits your site, reporting on accessibility efforts by your team or an external agency. You’ll get real-time updates on potential issues, access to an intuitive dashboard, and tools to manage and resolve problems.

Key Features:
- Dynamic Dashboard
- Compliance Scans
- Detailed Issue Reports
- Issues Over Time Tracking
- Manual Testing Reports
- Email Alerts
- Current Compliance Status
Schedule a complimentary ADA Strategy Briefing to speak with one of our accessibility experts about a11y.Radar ADA Monitoring today.

Button Up for Web Accessibility

Web accessibility is essential for creating an inclusive online experience, and accessible buttons are a crucial part of that equation. By following the WCAG guidelines, using clear and descriptive labels, and testing your buttons for accessibility, you can ensure that your website is usable by everyone.

Remember, accessible buttons not only help users with disabilities—they improve the overall user experience for everyone. As a website owner, developer, or content creator, making your buttons accessible is a simple yet powerful way to make your site more inclusive and effective.

So, the next time you add a button to your website, take a moment to consider its accessibility. It’s a small effort that can make a big difference.
Greg McNeil

July 23, 2024

How-to Guides

Accessibility, Accessible Buttons, ADA Compliance, ADA Website Compliance, web development, Website Accessibility
5 Common Image Alt Text Mistakes
If you’re a website owner, developer, or content creator, you’ve probably heard about the importance of alt text for images. Alt text, short for alternative text, is crucial for web accessibility. It helps people with visual impairments understand what’s in the images on your site, using screen readers. It also has SEO benefits, helping search engines understand and index your images. However, writing good alt text isn’t always straightforward. Here are some common mistakes people make and how to avoid them.

1.Some Images Should Use an Empty Alt Attribute

One of the most common mistakes is thinking every image needs alt text. Not all images require detailed descriptions. Decorative images, like those used purely for design or spacing, should use an empty alt attribute (alt=””). This tells screen readers to skip these images, preventing unnecessary clutter for users.

For instance, if you have a decorative border or a purely aesthetic icon, you don’t need to describe it. Including alt text for these elements can overwhelm users with information and make their browsing experience frustrating. Always ask yourself if the image conveys essential information. If not, it’s a good candidate for an empty alt attribute.

2.Context Matters

Context is everything when it comes to writing alt text. The same image might need different alt text depending on where and how it’s used. For example, a picture of a dog on a veterinary website might need different alt text than the same picture on a pet adoption site.

Let’s say you have an image of a golden retriever. On a veterinary site, the alt text might be “Golden retriever receiving a check-up at the vet.” On a pet adoption site, it could be “Golden retriever available for adoption.” The context gives users the specific information they need based on where they are and what they’re looking for.

3.Screen Readers and Search Engines Already Know That It’s an Image

Another mistake is being redundant in alt text. Screen readers and search engines already know the element is an image, so you don’t need to start with “Image of…” or “Picture of…”. Jump straight into the description.

Instead of saying, “Image of a woman using a laptop,” just say, “Woman using a laptop.” This makes your alt text more concise and easier for screen readers to process. Remember, simplicity and clarity are key.

4.Write Alt Text as Simple Sentences

Good alt text is clear and straightforward. Using simple sentences helps ensure that everyone can understand your descriptions, including those using screen readers. Avoid complex phrases and jargon that could confuse users.

For example, if you have a photo of a sunset, instead of saying, “A stunningly beautiful sunset with hues of orange and pink casting a magnificent glow over the tranquil sea,” you could say, “Sunset over the sea with orange and pink colors.” Simple, right? It’s all about making the information as accessible as possible.

5.Don’t Repeat Captions in Alt Text

If your image already has a caption, don’t just copy and paste it into the alt text. Alt text and captions serve different purposes. Captions are visible to all users and often provide context or additional information, while alt text is specifically for those who can’t see the image.

For instance, if you have a caption that says, “John Doe speaking at the annual tech conference,” the alt text could be “John Doe at a podium,” giving a brief description without repeating the same information. This way, you enhance the user’s understanding without redundancy.

The Importance of Web Accessibility

Web accessibility is about making the internet usable for everyone, including people with disabilities. Alt text plays a significant role in this effort. By providing descriptive alt text, you ensure that all users, regardless of their abilities, can access the information on your site.

Accessible websites don’t just benefit those with disabilities. They can improve the overall user experience, increase your audience reach, and even boost your SEO. Search engines like Google use alt text to understand what images are about, which can help your site rank better in search results.

Practical Tips for Writing Good Alt Text

Here are some practical tips to help you write better alt text:
1. Be Descriptive but Concise: Aim for a balance between being detailed and keeping it short. Generally, 125 characters is a good length to shoot for.
2. Focus on What’s Important: Describe the most important aspects of the image. Think about what information the user needs to understand the image in the context of the content.
3. Avoid Redundancy: As mentioned, don’t use phrases like “image of” or repeat the caption.
4. Use Proper Grammar and Punctuation: Even though alt text might seem less formal, proper grammar and punctuation help with clarity.
5. Think About the User’s Experience: Always consider how a user relying on a screen reader will interpret your alt text. Will it provide the necessary information in a clear and straightforward manner?
Common Scenarios and Examples

To make things clearer, let’s look at some common scenarios and examples of good alt text.

Scenario 1: Product Images

If you’re running an e-commerce site, your product images need good alt text. For a photo of a red dress, a good alt text might be “Red cocktail dress with ruffle sleeves.” This description is concise and gives potential buyers the information they need.

Scenario 2: Infographics

Infographics can be tricky because they often contain a lot of information. A good approach is to summarize the key points. For example, if your infographic shows the steps of a process, the alt text might be “Infographic showing 5 steps to start a blog: Choose a platform, Pick a domain, Set up hosting, Design your site, Publish content.”

Scenario 3: Event Photos

For event photos, focus on who, what, where, and when. An image from a company event might have alt text like “CEO Jane Smith speaking at the annual company meeting in June 2023.”

Conclusion

Writing effective alt text is an essential skill for anyone managing a website. It’s not just about ticking a box for accessibility; it’s about making your content accessible and useful for everyone. By avoiding common mistakes like over-describing, repeating captions, or using complex sentences, you can create a better experience for all users.

Remember, the goal of alt text is to provide essential information to those who can’t see the image. Keep it simple, relevant, and in context, and you’ll be well on your way to making your website more accessible and inclusive. Web accessibility isn’t just a legal requirement; it’s a way to show that you care about all your users, making your site more welcoming to everyone.

At 216digital, our expert team can assist you in developing a strategy to make this journey of WCAG 2.1 compliance as smooth as possible. Contact us today to schedule a complementary ADA Strategy Briefing so that you can confidently take this next step into digital accessibility.
Greg McNeil

July 15, 2024

How-to Guides

Accessibility, Alt text, digital accessibility, Image Alt Text, Website Accessibility
Unwrap Web Accessibility: A Gift for All Shoppers
‘Tis the season of joy, laughter, and, of course, holiday shopping! As the holiday spirit fills the air, retailers are gearing up to capture their share of the holiday shopping extravaganza. But in the midst of the twinkling lights, festive decor, and holiday cheer, there’s an aspect you may be overlooking – web accessibility.

To add an extra dose of cheer to this season, our team at 216digital has put together a list of simple and immediate steps that every online retailer can take to ensure their online content caters to all shoppers.

‘Tis the Season for All Shoppers

The holiday season is when people actively hunt for gifts and turn to online shopping in their quest for the perfect presents. However, many website owners are missing out on a massive, often overlooked market share: people with disabilities.

According to the World Health Organization, roughly 16% of the world’s population has some form of disability. When your website isn’t accessible, you’re closing the door on this large group of potential consumers.

To put this into perspective, let’s consider some statistics:
- In the United States, approximately 27% of adults have some form of disability. That’s more than 61 million people who could become your future customers.
- Shoppers with disabilities have a combined disposable income of about $490 billion. By neglecting their needs, you are missing out on a substantial source of revenue.
- Research has shown that 71% of disabled customers will leave a website if they find it difficult to use. Therefore, improving web accessibility can have a direct impact on your conversion rates.
Holiday Shopping Challenges

For people with disabilities, shopping online can pose challenges. According to WebAIM’s 2023 analysis of the top 1 million websites on the internet, a staggering 96.3% of them had severe accessibility issues. These issues included the inability to view product descriptions, make a purchase, or book an appointment.

During the holiday shopping season, people with disabilities may face even more challenges while shopping online. For instance:
- Most holiday promotions are shared through email or social media, which can be challenging to access for some people with disabilities.
- Each website update, which often includes fresh branding, promotional banners, and product pages, presents an opportunity to introduce new accessibility barriers
- The holiday rush can overwhelm customer service teams, making it more challenging for people with disabilities to receive the assistance they may need.
So, how can you make your website accessible to all holiday shoppers?

Understanding Web Accessibility

Web accessibility is about making your website usable and navigable by people with disabilities. That means designing and developing your holiday content in a way that allows everyone to access and use your site effectively.

Here are a few key aspects of web accessibility you should focus on this holiday season.

Paint a Clear Picture with Alt Text

During the holiday season, visuals play a significant role in attracting shoppers to your site. In fact, 75% of online shoppers rely on product photos when purchasing. However, some users may have visual impairments and rely on screen readers to navigate your website. To make sure they don’t miss out on your visually appealing content, it’s crucial to use image alternative text or alt text.

What is Alt Text?

Alt text is a description added to an image’s HTML code. It provides a textual alternative to the image, allowing screen readers to convey the image’s content and function to users who cannot see it.

When done right, it can help paint a picture of your products and services. Unfortunately, many businesses forget to provide alt text, or they treat it like a file naming system. For example, an image of a size chart with alt text that says “size chart.” It might as well not be there.

You can write more helpful alt text by following these best practices:

Be Descriptive

When adding alt text to your images, be descriptive but concise. For instance, if you’re selling a holiday-themed sweater, the alt text could be “Cozy red holiday sweater with reindeer patterns.” This way, users with visual impairments understand the image’s content.

Avoid Redundancy

It might seem helpful but do not include phrases like “picture of” or “image of” in your alt text. Screen readers will know from the preceding HTML tag to announce the alt text as an image. Including these phrases in your description will only disrupt the user’s experience.

Write for People, Not Search Engines

It’s important to remember not to treat alt text as an SEO tool. Many content creators make the mistake of trying to include keywords in their site’s alt text. But while alt text can contribute to SEO, your priority should be accessibility and user experience. Remember, at the end of the day, you’re trying to sell a product to a person, not Google. So, focus on creating descriptive and concise alt text that helps users with visual impairments understand the image’s content.

For more information on alt text, check out our article “Understanding Image Alt Text Descriptions.”

Design for Sound Off Videos

Videos are an engaging way to showcase your holiday products or promotions. However, videos often rely on visual and auditory elements, which can be problematic for those with hearing impairments. To make your videos more inclusive:
- Invest in High-Quality Audio: If you use VoiceOvers or soundtracks in your videos, ensure that the audio quality is top-notch. Clear audio is essential for users who rely on sound to understand your content.
- Use Audio Descriptions: For videos with crucial visual content, provide audio descriptions. Audio descriptions are narrations that explain what’s happening in the video. This helps users with visual impairments understand the context and content of the video.
- Proof Captions by Hand: Automatic captioning can be unreliable, and errors in captions can lead to misunderstandings. Take the time to review and edit captions to ensure they accurately reflect the spoken content.
Make Your Email Campaigns Web Accessible

Email marketing is a powerful tool during the holiday season. However, most of the images used in email marketing lack accessibility.

For instance, in many promotional emails, you’ll find special offers, product names, sale prices, and other important information. If all of this information is only presented in images, it excludes people who rely on screen readers.

As a general rule, businesses should avoid using images as the sole content of their emails. And when images are used, they must include descriptive alt text. However, there’s more to email accessibility than just alt text.

To ensure that your emails reach and resonate with all potential customers, consider the following:
- Set the Role Attribute of Every Table to “Presentation.”: Tables in emails can be challenging for screen readers to interpret. By setting the role attribute of every table to “presentation,” you tell assistive technologies that the table is for layout purposes only, making the email easier to navigate.
- Underline Inline Links: When creating links in your emails, use descriptive link text. For example, instead of “Click here,” use “Shop our holiday collection now.” This provides clarity and context to users.
- Make Sure Links are Descriptive: When creating links in your email content, use descriptive anchor text that indicates where the link leads. Avoid generic terms like “click here” and instead use specific text that tells users what to expect when they click.
Heading Towards Holiday Content

It’s that time of year when new content and blog articles are in full swing, highlighting future sales and this year’s latest products. However, the essential element of all good content is using headings. Headings aren’t just big, bold, decorative text. They’re the signposts that guide readers through your content from most to least important.

For instance, just like a tree has a trunk, main branches, and smaller branches, your content should have a main heading, subheadings, and further divisions if necessary.
- Here are a few pointers when you are generating your online content:
- Write concise, meaningful headings that provide insight into the content.
- Elements that are repeated across different pages within a site should maintain a consistent order. That one bold font may be more eye-catching, but that doesn’t mean you need to use it.
- Headings and labels should aid shoppers in navigating content and understanding their current location by clearly describing the topic or objective.
Don’t Let Web Accessibility Be Your New Year’s Resolution

The holiday season is the perfect time to implement these changes and make your website more accessible. So, don’t let web accessibility be your New Year’s resolution; make it a top priority for your online business now, and watch your holiday sales soar.

Ready to get started? Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital. We will help you take the steps towards making your content web accessible on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.
Greg McNeil

December 8, 2023

How-to Guides, The Benefits of Web Accessibility, WCAG Compliance
Creating Web Accessible Links
The Internet has always been about connectivity. The links that crisscross every site play a vital role in guiding users as they explore the online realm. As one of the most basic elements of web accessibility, hyperlinks help users navigate to another page to access different types of digital content. While creating hyperlinks is easy, making them web accessible takes careful consideration. But how can we make sure they are accessible to everyone?

What are Descriptive Links?

A descriptive link provides clear information about where the link will take the user. Instead of generic terms like “click here” or “read more,” a descriptive link might say “learn about our sustainability practices” or “view our summer collection.”

Why Use Descriptive Links?

People using screen readers either tab through links or bring up a list. This can take the link out of the context of the surrounding text. However, descriptive link text provides clarity, aiding users with assistive tools in grasping the destination of a link without additional information. By ensuring links are descriptive, users can confidently know the link’s destination, allowing those using assistive technologies to navigate more efficiently.

Types of Links That Need to Be Accessible

There are three types of links that need to be accessible:

Anchor Text

Anchor text is clickable text linking to another page or file. The best practice is to ensure it’s descriptive. For example, instead of “Click here for more information about web accessibility,” use “Learn more about web accessibility.”

Image Links

Images links are clickable images or call-to-action buttons that link to another page or file. When using an image or button, an alternative text (alt text) must describe its purpose. This helps screen readers in conveying the link’s purpose to the user.

Adjacent Links

Adjacent links are two links next to each other that point to the same destination—for example, an image with text beneath it both linking to the same page.

Creating Valid and Accessible Links

Start with Valid HTML

The foundation of any accessible website is its underlying code. Think of your site’s HTML as the skeleton, providing structure and meaning. Just as a well-built house begins with a solid foundation, a fully accessible website starts with clean, valid HTML.

When crafting links, it’s essential to use the correct tags and attributes. The <a> (anchor) tag is the standard for creating links.

Here’s a basic example:
```
<a href="https://www.example.com">Visit our homepage</a>
```
This link is valid and clear, ensuring that screen readers and other assistive devices can interpret and present it correctly to the user.

To be a valid link, it must have the following:
- A href Attribute: The location or URL of the anchor, page, or resource. Without the href attribute, the <a> tag won’t work.
- Link Content Text describing where the link is going. This could be plain text or the alt attribute of an image.
- Opening and closing tags: An opening tag begins the link, and a closing tag ends it. A closing tag always precedes the element with a /.
Write Helpful Link Text

The actual text of your link is crucial for web accessibility. Avoid generic terms like “click here” or “read more.” Instead, aim for descriptive, context-rich text that clearly indicates the link’s destination or purpose.

For example:

Instead of using
```
 <a href= "#">click here</a>.
```
Use:
```
 <a href="#">View our comprehensive guide</a>.
```
This approach benefits those using assistive technologies and improves the user experience for everyone, making your content more intuitive and navigable.

What About the Title Attribute?

The title attribute can provide additional information about a link. However, not all browsers present the title attribute accessibly, so individuals using keyboards or touch-only devices might not see this information. Therefore, using the title attribute on <a> elements is not recommended.

Focus State and Keyboard Navigation

Web accessibility isn’t just about screen readers. Many users use keyboards for navigation due to motor disabilities or personal preferences. It’s essential to ensure that all links are navigable and clearly highlighted when accessed via a keyboard.

This is where the WCAG’s success criteria 2.4.7, focus visible, comes into play. Essentially, when someone tabs through a website using the keyboard, the “focused” element (like a link) should have a clear visual indicator, such as a border or a change in background color.

If you’re using CSS, you might apply a focus style like:
```
a: focus { 
outline: 2px solid black; }
```
This will give a black outline to any link that’s currently selected via keyboard navigation.

Moreover, make sure that the tab order (the sequence in which elements are selected when tabbing through) is logical and follows the flow of your content.

When Should You Use a Button Instead?

Links and buttons are often used interchangeably on the web. However, they serve distinct purposes:
- Links: Primarily navigate users from one page or resource to another.
- Buttons: Used for actions like submitting a form, opening a popup, or toggling content.
From an accessibility standpoint, it’s essential to use them appropriately. Screen reader users, for instance, might need clarification if a link behaves like a button or vice versa.

So, if you’re leading users to a different resource, use a link. Consider using a button if you’re prompting an action on the same page.

Designing Accessible Buttons and Linked Images

Design plays a significant role in digital accessibility. For buttons and linked images:
1. Clear Labels: Ensure every button or link has a clear label. This assists not just visually impaired users but everyone. “Read more” is often ambiguous. Instead, be specific, like “Read more about web accessibility.”
2. Contrast: Make sure there’s enough contrast between the button’s link text and its background. This helps people with visual impairments and disabilities easily identify and read content.
3. Descriptive Alt Text for Linked Images: If an image acts as a link, ensure it has descriptive alternative text. This allows screen reader users to understand the purpose of the link. For instance, instead of “image1.jpg”, use “Click to view our accessibility guide.”
4. Focus Indicators: Ensure links and buttons have a visible focus indicator. This helps keyboard-only users identify which element is currently in focus.
Understanding Touch Target Size Accessibility

Touch target is the area that responds to a user can press or click. It’s especially vital for touchscreen devices. Here’s what you should consider:
1. Minimum Size: According to many WCAG guidelines, the touch target size should be at least 24×24 pixels. This ensures even users with motor disabilities can easily tap the element.
2. Spacing: Ensure there’s enough space between tappable elements. Crowded links or buttons can lead to mistaken taps or clicks, frustrating users.
3. Visual Feedback: When a user taps a link or button, provide visual feedback, like a color change, so they know their tap was successful.
4. Font Size: The smallest acceptable font size is 14 points, but anything between 14 to 18 points, or equivalently 18.5 to 24 pixels, is considered compliant by WCAG.
Take the Next Steps Toward Web Accessibility

The digital realm has evolved, and web accessibility has emerged as a fundamental right, not just a trend. Making your website accessible isn’t just about compliance but inclusion. It’s about ensuring everyone can access and enjoy the content you’ve painstakingly created, regardless of their abilities. And while the nuances of accessibility can seem daunting, there are experts available to assist you.

216digital has been at the forefront of web accessibility, armed with the tools, knowledge, and experience to make your online space both compliant and welcoming for all. We will help you take the steps towards web accessibility on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.

So, if you’re committed to creating a digital space where everyone feels valued, don’t leave it to chance. Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital, where web accessibility is more than just a checklist—it’s a mission.
Greg McNeil

October 10, 2023

How-to Guides

Accessibility, ADA Compliance, ADA Website Compliance, Links, Web Accessible Links, web development, Website Accessibility
Heading Towards Web Accessible Content
Content is the backbone of your website. You’ve crafted a brilliant website or churned out stellar content, but have you ever paused to consider if everyone can access and experience it? If your website’s content is not easy to find, navigate, and consume, you risk losing visitors and potential earnings.

The importance of having web accessible content and structure can’t be stressed enough. If you’re new to this concept, fret not! This article shares the basics of building user-friendly web page content, from accessible headings to typography.

Semantic HTML

Have you ever wondered how screen readers help visually impaired users navigate websites? It all boils down to the magic of Semantic HTML.

HTML, or HyperText Markup Language, is the foundation of your website. It’s the code behind the scenes that structures your website’s content. Using semantic HTML elements correctly is like setting a well-organized table for dinner: everything is in its right place, and the guests know where to find what they need.

What is Semantic HTML?

Semantic HTML enhances the accessibility and user-friendliness of web content. It gives context and meaning to web page content using tags that align with human language and logic instead of non-semantic tags, which are meant solely for computer interpretation and don’t hold inherent human meaning.

Take the tag <p> for instance. This semantic tag denotes that a specific text block is a standalone paragraph, providing users with clarity about the text’s structure and informing the browser on how to present it. On the other hand, non-semantic tags like <b>, which merely instructs that the text be bold, dictate only visual presentation without conveying additional contextual significance.

Why Semantic HTML Matters

Well-structured and semantically sound HTML aids search engines and assistive tools like screen readers in deciphering the nature and context of the content you’re sharing. Such HTML constructs make it simpler for browsers and accessibility technologies to grasp the meaning and interrelations within your website content.

To illustrate, through semantic HTML, screen readers can identify the hierarchy of headers on a page (from <h1> to <h6>), determine where the webpage or section footer (<footer>) is, or discern added navigation aids (<nav>) in data tables.

With such semantic guidance in HTML, people using assistive technologies will be able to comprehend the layout and intent of your web content. In fact, heading navigation is very common. The 2021 Screen Reader User Survey by WebAIM, shows that 67.7% of users use headings to find information.

Page Formatting

A well-structured webpage isn’t just visually appealing; it’s easier to understand and navigate. Think of your website as a book. It becomes easier to follow with a proper table of contents and clear headings.

What are Headings?

One of the fundamental elements in creating web accessible content is the proper use of headings. Headings aren’t just big, bold text. They’re the signposts that guide readers through your content. Think of headings as the chapter titles in a book. You wouldn’t flip open a book and find chapters named randomly. Similarly, your web content should be clearly labeled in your HTML markup.

A clear, well-structured heading system aids those using assistive technology and benefits your average reader by allowing them to skim and understand the flow of your content quickly.

What Does “Hierarchical” Mean?

At its core, a hierarchical structure means organizing content in a specific order or rank. In the context of a webpage, this refers to the arrangement of headings from most to least important. For instance, just like a tree has a trunk, main branches, and then smaller branches, your content should have a main heading, subheadings, and further divisions if necessary.

The h1 is the most important heading level, while the h6 is the least. For example, you will use h1 for the page title, whereas h2 would be a subheading and so forth if needed. The hierarchical structure allows both readers and screen readers to navigate through content easily.

One h1 per Page

The cardinal rule of web accessibility is that there should be only one main heading (h1) per page. Like a book’s title, this serves as the page’s main topic or purpose. Subtopics or related points should be categorized under subheadings like h2, h3, etc.

Having multiple h1s on a web page is bad practice for accessibility and SEO. It creates a flat and meaningless structure. However, it’s not a WCAG 2 AA violation.

WCAG on Headings

The Web Content Accessibility Guidelines (WCAG) is the go-to standard for web accessibility. However, WCAG is not very specific on its requirements for headings.

However, a few WCAG 2 AA criteria do specifically address headings and structures. For instance:
- Success Criterion 2.4.6 Headings and labels: Ensure headings and labels aid users in navigating content and understanding their current location by clearly describing the topic or objective
- Success Criterion 3.2.3 Consistent Navigation Level: When navigation elements are repeated across different pages within a site, they should maintain a consistent order unless the user decides to alter it.
- Success Criterion 1.3.1 Info and Relationships: The information and its structural relations provided visually should also be discernible through its code. This implies the necessity of using the correct HTML tags, like h1 through h6, to represent heading levels.
In essence, headings should be used to define content clearly and should be applied in a consistent and meaningful manner. Doing so aids all users, especially those using screen readers, in navigating and comprehending a website more effectively.

What Makes Good Heading Text?

A screen reader user can access a list of headings and skim through them to decide where to start reading on a webpage. While there is no accessibility requirement for the length of a heading text, usability is a factor to consider.

Making complete paragraphs into headings results in a horrible screen reader experience. Write concise, meaningful headings that provide insight into the content.

When you are generating your headings, ask yourself the following:
- Does the header describe the content being discussed?
- Are you able to skim the content using only headings?
- Does every page have a clear and unique heading above the content?
Headings in Design

Here are some factors to consider when incorporating headings into your website’s design.

Using Heading Labels for Styling

When used appropriately, headings guide the reader through the content, highlighting the main topics and their relative importance. However, choosing heading levels based on their visual appearance or sizing rather than their semantic meaning is a common mistake.

For example, using an h2 tag simply because it looks “right” visually rather than because it denotes the second level of importance or hierarchy is misguided. This can confuse both users and assistive technologies, making content less accessible.

All Caps

Using all capital letters makes the text more challenging to read. When every word is in uppercase, it loses its unique shape and starts to look like a rectangle. Research has shown that text in all caps is particularly hard for those with dyslexia. Make life easy for your readers; avoid using all capital letters.

Crafting Web Accessible Content with 216digital

Navigating the intricacies of web accessibility can be challenging, but the rewards are immense. An accessible website is not just a legal obligation but an opportunity for your voice to be heard. Your content is valuable, and it should be accessible to everyone. If you’re still unsure where to start or how to enhance your website’s accessibility, the experts at 216digital are here to help.

If you’d like to talk further about your web accessibility initiative, Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital. We will help you take the steps towards making your content web accessible on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.
Greg McNeil

October 5, 2023

How-to Guides

Accessibility, ADA Compliance, ADA Website Compliance, web development, Website Accessibility, Website Accessibility Tools
Does Your Image Need Alt Text to be Web Accessible?
Images are the bread and butter for any website. You put a lot of time and effort into creating engaging visual content for your audiences. But that’s only half of the battle — making your content accessible to as many people as possible is the other half.

Despite the accelerated pace of the digital era, many businesses and organizations still lag behind in making their websites accessible to people with disabilities. This is partly due to the lack of awareness and/or technical knowledge of different web accessibility barriers and how to solve them.

What happens when your users have visual impairments? How do they receive and understand this visual information?

In this article, we answer one of the most commonly asked questions — does my image need alt text to be web accessible?

Image Types And Alternative Text

Before we analyze an image for web accessibility, we must first take a step back and think about its purpose. Is it to inform, evoke emotion, serve as a link, or just for visual appeal?

To understand how to make the image accessible for users with assistive technologies (AT) like screen readers, ask:
- “What is the message the image is trying to convey?”
- “Is the message simple or complex, emotional or actionable?”
An online tool like an image decision tree can help categorize your image. Or, think about if the image disappeared. Would you still understand the content’s meaning without it?

If the answer is yes, the image is purely decorative. However, the image is necessary if the image provides the user with valuable information and context.

Once you determine what kind of image you are working with, there are some basic web accessibility guidelines to consider.

Decorative Images

There is a lot to consider when it comes to decorative images. If you find yourself saying, “But what about X? or “How about Y?” you might need to reevaluate your image as it might not be decorative.

One of the most challenging images to categorize tends to fall in the “emotional” or “mood” category since these images are more subjective. What one person considers decorative, another might consider informative. So, use your best judgment.

Hiding Decorative Images

While decorative images can enhance visual appeal, they don’t convey any meaningful information. If the image is decorative, then programmatically, the image needs to be hidden from assistive technology.

There are several ways to hide alternative text, including using empty or null alt (alt=””), using ARIA role=” presentation”, or implementing the image as a CSS background. This will signal the AT device to ignore this image as it is not vital to understanding the content.

However, it’s important to note that an empty or null alternative text attribute is not the same as a missing attribute. If the alternative text attribute is missing, the AT device might read the file name or surrounding content instead to provide the user with more information about the image.

While aria-hidden= “true” is an option, be cautious, as it will remove the entire element from the accessibility API.

Informative Images

If you decide your image is informative, there are a lot more things to consider. Visually impaired individuals often rely on screen readers to navigate the web. These devices read out textual content, but they can’t “see” images. To bridge this gap, we must have programmatically-discernible alternative text within the website’s HTML.

Alt text is a brief description that conveys the essential information of an image. But having alternate text is not enough — it must also be meaningful. For example, the alt text for a picture of a woman baking might be” Woman baking” — does that convey the whole message? Instead, the alt text should be “Racheal Ray preparing chocolate chip cookies.”

Of course, AT users will have to listen to your alternative text, so do not go overboard. While your descriptions should paint a vivid picture for the user, limiting the number of characters to only 150 is best practice. If you need to add more context to the image, you can use other, more descriptive methods to add more detail.

To learn more about writing alt text, check out our blog post, Understanding Image Alt Text Descriptions.

Charts, Graphs, and Other Complex Images

Sometimes written copy is part of an image, such as in the case of charts, graphs, or diagrams. These images contain too much information to fit into an alt-text description. Instead, you need two parts to describe them. The first part is a short description to identify the image and, if required, the location of the long description. A long description is a textual representation of the essential information conveyed by the image.

Description Containing Structured Information

We can use the <figure> and <figcaption> to associate visible text with an image. When using <figure> and <figcaption>, the alt attribute can be more minimal, and the <figcaption> can be more expressive.

This approach provides a link next to the image that will send the user to a separate web page or a section containing a more detailed description of the image. However, the link text must clarify the destination and associate it with the image. The <figure> and <figcaption> elements can also be used for groups of images.

To identify the complex image, we can also provide accessible names to the image programmatically using the aria-describedby attribute. AT devices will ignore the image’s alt text when these attributes are present and read the ARIA label instead without forcing the users to leave the page. However, this approach can only work if the long description is text-only and does not require structural information.

Meeting Image Accessibility Standards

In an increasingly digital world, ensuring that every user, irrespective of their ability, can access and understand your content is paramount. Ignoring the significant segment of people with disabilities is not only a detriment to your brand’s inclusivity but also a missed opportunity for engagement and growth.

Partnering with 216digital takes the complexity out of the equation, providing expert guidance, tools, and techniques tailored to your needs. We understand that every aspect of your site requires thoughtful consideration, and we’re ready to assist you every step of the way. Don’t leave your web accessibility to chance; schedule a Complimentary ADA Strategy Briefing with our team today, and let us help you make your site truly accessible for everyone.
Greg McNeil

August 10, 2023

How-to Guides, WCAG Compliance

Accessibility, ADA Compliance, ADA Website Compliance, Alt text, Image Alt Text, Website Accessibility
Understanding Image Alt Text Descriptions
Even though digital transformation is progressing rapidly, many online businesses still lag behind in making their websites accessible to people with disabilities. This is partly due to a lack of awareness or technical knowledge of different accessibility issues and how to solve them.

In this article, we will cover one of the most common accessibility barriers — providing alternative text descriptions for images. When done correctly, alt text can paint a complete picture for people who cannot perceive images visually. Unfortunately, many content creators and developers forget to provide alt text or write something that doesn’t quite hit the mark.

So, what exactly is Image Alt Text, and how should you integrate it into your website?

What is Alt Text?

Image alt text, also called image alternative text descriptions, is the written copy that appears in place of an image on a website if the image fails to load on a user’s screen. This text can also help screen-reading tools describe images to visually impaired users and allows search engines to better crawl your website.

Alt text should be brief but vivid enough to clarify the image’s content to someone listening to the description. This includes any information contained within graphs or charts. Well-written alt text doesn’t just describe a photo but also communicates its purpose and context.

But how do you add alt text to images?

How to Add Alt Text to Your Images?

Image Alt Text is the descriptive text that is included in a website’s foundational HTML code to describe an image on a webpage.

However, adding Alt Text to images varies slightly depending on your web-building platform. Generally, when you upload a photo, there should be an ‘Alt Text’ or ‘Alt Description’ field where you can input your description.

For HTML users, you can add Alt Text to an image by including the ‘alt’ attribute within the ‘img’ tag:
```
<img src="example.jpg" alt="A description of the image">
```
Suppose you use a Content Management System (CMS) like WordPress. In that case, there’s a designated field for image optimization where you can create and change the image’s alt text.

When Should I Use Alt Text?

According to the World Wide Web Consortium (W3C), all images must have a text alternative that describes their function or the information they represent. However, that doesn’t mean every image should be treated the same.

Follow these rules when writing alt text:

1. Images of Text

Does the image contain text?

If readable text is presented within an image, the text alternative must contain every word in the image. However, it’s essential to mention images with text should be avoided, except in the case of logos.

2. Functional Images

Is the image used in a link or a button, and would it be hard to understand the function if it wasn’t there?

Suppose an image is used as a link or button. In that case, the alt text must describe the functionality and destination, if it doesn’t already from the text or graphical content. For instance, a button to “download in App Store” image link would have an alternative text description stating: “Click here to download the Bittrex app on the App Store.”

3. Informative Images

Does the image contribute meaning to the current page or context?

Informative images are images or illustrations that convey vital information to the context of information surrounding them. The text alternative for these images should include the image’s essential information. The description should be colloquial as if you are explaining it to someone sitting next to you. For example, suppose an image is of a truck driving. In that case, the alternative text should state: “A truck driving over rough terrain”.

However, complex images such as infographics or diagrams used to convey data or detailed information should have a complete text equivalent to the data or information provided in the infographic or chart.

4. Decorative Images

Is the image purely decorative or not intended for the user?

If an image’s only purpose is to add visual decoration, it does not require alt text. However, the image must then be explicitly marked as presentational so that it is ignored by screen reading software. It must still have an alt attribute, so give it “null” alt text, which is an alt attribute with no value, as seen below:
```
<img src=”../img.jpg” alt=”” />
```
Need help with how to treat a specific image? The W3C has developed an alt text decision tree to help you determine the right approach depending on the image’s purpose.

Image Alt Text Best Practices

Ultimately, image alt text needs to be specific and representative of the topic it supports. Just adding alt text isn’t enough. It’s essential to ensure it’s effective.

Here are some best practices to follow:

Describe an Image and Be Specific

Alt Text should accurately represent the content and function of an image. Use both the image’s subject and context to guide you. For example, instead of writing “dog” for an image, use a more specific description such as “A golden retriever playing fetch in the park.”

Avoid Redundancy

It might seem like a helpful cue, but remember not to include phrases like “picture of” or “image of” in your alt text. Screen readers and Search Engines will know from the preceding HTML tag to announce the alt text as an image. Including these phrases in your description will only disrupt the user’s experience and waste valuable characters.

Write for People, Not Search Engines

Many content creators make the mistake of trying to stuff keywords into their site’s alt text. While it’s true that alt text can contribute to SEO, your priority should be accessibility and user experience. If you can naturally fold a keyword into your alt text, excellent. But don’t fall into the trap of treating alt text like an SEO tool.

Review for Spelling Errors and Punctuation

Like all website content, proper punctuation makes information easier to understand. Ensure that your alt text is free of mistakes for a professional and clear description.

In addition, when hiding decorative images, you should be aware of spacing when using a null or empty alt text. If there is a space between the quotes, assistive technologies may still pick it up as alt text, confusing the user.

Image Alt Text Example

Alt text that doesn’t appropriately describe the image and its purpose could prove detrimental or puzzling to website users relying on assistive technology.

Follow alt-text best practices, and you’ll get a feel for what needs to be said. A more detailed description may be beneficial. However, there are instances when it can be redundant. Consider the example below.

Bad Alt Text
```
<img src= "example.jpg" alt="a city's bridge at night">
```
The line of alt text above is technically descriptive — but it does not describe the image in a meaningful way for the user. Yes, the photo above shows a city’s bridge, and it is night. But this is also a picture of Cleveland, Ohio — and the Detroit-Superior Bridge. These are essential specifics that your users might need to comprehend the image if it’s on, say, a blog post about Cleveland landmarks.

Good Alt Text

With context in mind, a better alt text for this image might be:
```
<img src= "example.jpg" alt="Cleveland Ohio's Detroit-Superior Bridge at night">
```
Why is Image Alt Text Important?

We’ve already alluded to several reasons why image alt text is essential. However, understanding these reasons will help you write the best alt text possible for your users. Below we’ll look at the significant reasons image alt text is essential.

Web Accessibility and User Experience

Image alt tags allow screen reader users to understand what is happening on a webpage besides the written basic text. Images may be the only form of instruction for some websites or other digital assets. Without alt text, these users may miss out on the information conveyed through images, affecting their overall site experience. It is, therefore, a key component in meeting the World Wide Web Consortium (WCAG) success criteria for image alternative text descriptions.

Ignoring these standards could lead to potential legal consequences due to non-compliance with the Americans with Disabilities Act (ADA). Such non-compliance limits your website’s audience reach and could result in lawsuits or hefty fines. Hence, incorporating alt text in your website design is an inclusive practice and a legal imperative.

Search Engine Optimization

Search engines like Google, unable to visually understand images, rely on Alt Text to determine their content. This information helps them provide relevant results for image searches, significantly boosting your website’s visibility.

However, while Alt Text can contribute to SEO, it should not be used to manipulate search rankings by overstuffing keywords. Google can penalize such practices, leading to a decrease in your overall SEO performance.

Learn more about Web Accessibility and SEO Optimization: A Powerhouse Combination.

Take the Next Steps Toward Accessibility

In a digital era where inclusivity and accessibility are of utmost importance, alt text is a vital tool for website owners and developers. If, until now, you were not aware of the importance of image alt text, don’t stress! You can add these elements at any time to increase the accessibility of your website.

If you’d like to talk further about your web accessibility initiative, Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital. We will help you take the steps towards web accessibility on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.

Remember, alt text is not just an option—it’s an essential step in building a successful and accessible online presence.
Greg McNeil

July 10, 2023

How-to Guides

Accessibility, ADA Compliance, ADA non-compliance, ADA Website Compliance, Alt text, Image Alt Text, Website Accessibility, Website Accessibility Tools

Why Should Content Forms Be Accessible?

The Importance of Accessible Forms

How to Create Accessible Digital Forms

1. Understand the WCAG Guidelines

2. Ensure Text Readability

3. Implement Keyboard Navigation

4. Use Descriptive Links and Buttons

5. Ensure Color Contrast and Visual Elements

6. Test with Real Users

7. Stay Updated with Accessibility Trends

Wrapping Up

What is ADA Video Compliance?

Why is ADA Video Compliance Important?

WCAG 2.1 Video Requirements

Tips for Creating Accessible Videos

Provide Captions for Multimedia Content

Think About Your Audience When Writing Captions

Watch Out for Automated Captions

Include Audio Descriptions

Provide a Transcript

Make Sure Your Video Player Has Accessible Controls

Avoiding Flashing Content

How to Install Videos on Your Website to Be Accessible

Choose an Accessible Video Player

Add Captions to Your Videos

Provide Transcripts

Include Audio Descriptions

Test Your Videos for Accessibility

Use an Accessibility Checker

Make Accessibility a Priority

WCAG and Accessible Fonts

The Importance of Using Accessible Fonts

So, What Makes a Font Accessible?

Spacing

Use Sufficient Text Spacing

Color Contrast

Size

Text with Graphics

How to Choose an Accessible Font Family

Examples of Accessible Fonts

Key Takeaways

Why Web Accessibility for Buttons is Important

Understanding the WCAG Guidelines for Accessible Buttons

Perceivable

Text Alternatives (WCAG 1.1.1)

Contrast (WCAG 1.4.3)

Operable

Keyboard Accessibility (WCAG 2.1.1)

Focus Indicators ( WCAG 2.4.13)

Understandable

Clear Labels (WCAG 3.3.2)

Consistent Navigation (WCAG 3.2.3)

Robust

Screen Reader Compatibility (WCAG 4.1.2)

How to Create Accessible Buttons

Use Semantic HTML

Make Sure Button Labels are Clear and Descriptive

Provide Alt Text or ARIA Labels for Buttons

Ensure High Contrast for Better Visibility

Test Keyboard Accessibility

The Role of Button Labels in Web Accessibility

Write Alt Text as Simple Sentences

Avoid Repeat or Redundant Button Labels

Testing and Maintaining Accessible Buttons

Screen Reader Testing

Keyboard Navigation

Color Contrast Testing

Ongoing Maintenance

216digital’s a11y.Radar ADA Monitoring

Button Up for Web Accessibility

1.Some Images Should Use an Empty Alt Attribute

2.Context Matters

3.Screen Readers and Search Engines Already Know That It’s an Image

4.Write Alt Text as Simple Sentences

5.Don’t Repeat Captions in Alt Text

The Importance of Web Accessibility

Practical Tips for Writing Good Alt Text

Common Scenarios and Examples

Scenario 1: Product Images

Scenario 2: Infographics