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

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 Accessible Buttons Matter for Your Website

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

5 Common Image Alt Text Mistakes

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

Scenario 3: Event Photos

Conclusion

Unwrap Web Accessibility: A Gift for All Shoppers

‘Tis the Season for All Shoppers

Holiday Shopping Challenges

Understanding Web Accessibility

Paint a Clear Picture with Alt Text

What is Alt Text?

Be Descriptive

Avoid Redundancy

Write for People, Not Search Engines

Design for Sound Off Videos

Make Your Email Campaigns Web Accessible

Heading Towards Holiday Content

Don’t Let Web Accessibility Be Your New Year’s Resolution

Creating Web Accessible Links

What are Descriptive Links?

Why Use Descriptive Links?

Types of Links That Need to Be Accessible

Anchor Text

Image Links

Adjacent Links

Creating Valid and Accessible Links

Start with Valid HTML

Write Helpful Link Text

What About the Title Attribute?

Focus State and Keyboard Navigation

When Should You Use a Button Instead?

Designing Accessible Buttons and Linked Images

Understanding Touch Target Size Accessibility

Take the Next Steps Toward Web Accessibility

Heading Towards Web Accessible Content

Semantic HTML

What is Semantic HTML?

Why Semantic HTML Matters

Page Formatting

What are Headings?

What Does “Hierarchical” Mean?

One h1 per Page