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

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

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

WCAG on Headings

What Makes Good Heading Text?

Headings in Design

Using Heading Labels for Styling

All Caps

Crafting Web Accessible Content with 216digital

Does Your Image Need Alt Text to be Web Accessible?

Image Types And Alternative Text

Decorative Images

Hiding Decorative Images

Informative Images

Charts, Graphs, and Other Complex Images

Description Containing Structured Information

Meeting Image Accessibility Standards

Understanding Image Alt Text Descriptions

What is Alt Text?

How to Add Alt Text to Your Images?

When Should I Use Alt Text?

1. Images of Text

2. Functional Images

3. Informative Images

4. Decorative Images

Image Alt Text Best Practices

Describe an Image and Be Specific

Avoid Redundancy

Write for People, Not Search Engines

Review for Spelling Errors and Punctuation

Image Alt Text Example

Why is Image Alt Text Important?

Web Accessibility and User Experience

Search Engine Optimization

Take the Next Steps Toward Accessibility