Content Additions Tutorial

At Zenyth, we believe in creating a digital world that is accessible to all. Some of the key components of this mission are the proper use of image alt text, document structure, link text, contrast, and inclusive language. This guide will help you understand how to correctly implement these and how to meet WCAG 2.1 level AA standards.

Images

What is Image Alt Text?

Image alt text, or alternative text, is a brief description of an image that is displayed when the image cannot be loaded or is being read by a screen reader. It's a crucial part of making your website accessible to people with visual impairments.

Why is Image Alt Text Important?

1. Enhances Accessibility: Alt text allows screen readers to describe images to visually impaired users, providing a comparable experience to those who can see the image.

2. Improves SEO: Search engines can't "see" images, but they can read alt text. This can help your website rank higher in search results.

3. Provides Context: If an image fails to load, the alt text will display instead, giving users an idea of what they're missing.

Best Practices for Writing Image Alt Text

1. Be Descriptive: The alt text should accurately convey the content and function of the image. For example, instead of "dog", use "a golden retriever playing fetch in a park".

2. Keep it Concise: While being descriptive, also aim to keep your alt text brief and to the point. A good rule of thumb is to keep it under 125 characters.

3. Avoid Redundancy: If the image is described in the surrounding text, it may not need alt text. In this case, an empty alt attribute (alt="") can be used. This does NOT apply to images used as the only content of a link or button. These require alt text.

4. Don't Use "Image of" or "Picture of": Screen readers already announce the image, so this becomes redundant.

5. Use Keywords Sparingly: While alt text can help with SEO, avoid keyword stuffing. It should feel natural and be primarily for the user, not the search engine.

6. Functional Images: If an image has a function (like a search button), the alt text should describe the action, not the image. For example, "search" rather than "magnifying glass". If the image is the only content of a link it should describe where the link goes.

Headings

Headings play a pivotal role in enhancing the accessibility and usability of your website. They provide a clear structure to your content, making it easier for all users, including those using assistive technologies, to navigate and understand your site.

The Importance of Headings

Headings serve two primary functions:

1. Content Organization: They provide a visual structure to your content, breaking it down into digestible sections. This makes it easier for all users to scan and understand your content.

2. Accessibility Enhancement: For users with visual impairments using screen readers, headings provide a way to navigate through the content. They can skip to sections that interest them, improving their overall user experience.

Understanding Heading Hierarchy

HTML provides six levels of headings, <h1> through <h6>. <h1> is the highest level, usually used for the main title or heading of a page, while <h6> is the lowest level, used for subheadings.

A well-structured heading hierarchy is like an outline of your content. It starts with a main point (<h1>) and breaks down into subpoints (<h2> to <h6>). Each level should logically follow its parent heading, creating a clear and coherent flow of information.

Best Practices for Using Headings

1. One <h1> Per Page: Each page should have one <h1> that describes the main content of the page. This helps both users and search engines understand the primary focus of the page.

2. Sequential Order: Use headings in a logical order. Don't skip heading levels (for example, going from <h2> to <h4>) as this can confuse users and disrupt the flow of information.

3. Be Descriptive: Headings should accurately reflect the content that follows them. This helps users decide if they want to read that section or skip to the next.

4. Do Not Use Headings for Styling: Headings should be used for structure, not for making text bigger or bolder. Use CSS for styling text.

5. Avoid Long Headings: Keep your headings concise and to the point. Long headings can be difficult to understand.

6. Use Keywords Wisely: While it's good for SEO to include keywords in your headings, ensure they are relevant and do not disrupt the readability and accessibility of your headings.

Implementing these best practices in your heading structure will significantly enhance the accessibility and usability of your website.

Links

Links are fundamental to the web, connecting pages and resources in a vast network of information. However, to ensure accessibility and a positive user experience, it's crucial to use links correctly. This section will guide you through the best practices for using links, their purpose, handling links that open in a new window, and images used as links, all in line with WCAG 2.1 level AA standards.

Understanding Link Purpose

The purpose of a link is to guide users to additional content or a different section of the same page. For users, particularly those using screen readers, understanding the purpose of a link is vital. 

Links Opening in a New Window (usability)

Links that open in a new window can be disorienting for users, especially those with cognitive disabilities or using screen readers. If it's necessary to have a link open in a new window, inform users beforehand. This can be done within the link text itself or immediately after the link in parentheses. For example, "read our accessibility guide (opens in a new window)".

Images as Links

When images are used as links, the image alt text serves as the link text. Therefore, the alt text should describe the link destination. For example, if an image of a house is linked to a page about real estate, the alt text could be "learn about our real estate services".

The Problem with "Learn More" and "Click Here"

While "Learn More" and "Click Here" might seem like clear instructions, they can be problematic for several reasons:

1. Lack of Context: These phrases don't provide any information about what content the user will access when they follow the link. This lack of context can be particularly challenging for users of screen readers, who often navigate by tabbing through links.

2. Inefficiency for Screen Reader Users: Screen reader users often navigate through a page by listening to a list of links. When multiple links have the same generic text like "Learn More", it's impossible to distinguish one from another without additional context.

3. Missed SEO Opportunities: Search engines use link text to understand the content of the linked page. Generic link text like "Click Here" doesn't provide any useful information to search engines.

Best Practices for Link Text

To create a more accessible and user-friendly experience, consider these best practices:

1. Use Descriptive Link Text: Instead of "Learn More" or "Click Here", use link text that describes the content the user will access. For example, instead of "Learn More", use "Learn More About Our Accessibility Services".

2. Keep Link Text Concise: While it's important to be descriptive, also aim to keep your link text brief and to the point.

3. Provide Context Around the Link: If it's necessary to use generic link text, ensure there's sufficient context around the link to help users understand its purpose.

4. Consistent Naming: If the same link appears multiple times on a page, the same description should be used each time.

5. Avoid URL as Link Text: URLs should not be used as link text as they can be hard to understand, especially for screen readers. Instead, use descriptive text.

Contrast

One of the fundamental aspects of web accessibility is ensuring that your text is easily readable for all users. This includes users with low vision, color blindness, or those using screens in high-glare situations. Text contrast, the difference in color between the text and its background, plays a crucial role in this. This section will guide you through the importance of text contrast and best practices to meet WCAG 2.1 level AA standards.

Text Contrast Requirements

Text contrast is determined by comparing the luminance (brightness) of the text color to the luminance of the background color. A higher contrast makes the text more distinguishable and easier to read.

Why is Text Contrast Important?

1. Enhances Readability: High contrast between text and background colors makes the text easier to read, especially for users with low vision or color blindness.

2. Improves User Experience: Good contrast reduces strain on the eyes and makes longer reading sessions more comfortable, improving the overall user experience.

3. Meets Accessibility Standards: WCAG 2.1 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Defining Large and Regular Text

In the context of web accessibility and the WCAG 2.1 level AA standards, text is categorized into two sizes: large and regular (or normal). Understanding these categories is crucial when considering aspects like text contrast.

Regular Text

Regular text, often referred to as normal or small text, is the standard text size used for the majority of web content. This typically includes body text, list items, and standard paragraph text.

According to WCAG 2.1 level AA standards, regular text should have a contrast ratio of at least 4.5:1 against its background to ensure readability for users with visual impairments.

Large Text

Large text is typically used for headings, titles, or other important information that needs to stand out.

WCAG 2.1 level AA standards define large text as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Large text has a lower contrast requirement of at least 3:1 against its background, due to its increased visibility compared to regular text.

Best Practices for Text Contrast

1. Check Contrast Ratios: Use online tools to check the contrast ratio of your text to its background. This will help ensure you meet the minimum contrast ratios required for accessibility.

2. Avoid Low Contrast: Light gray text on a white background or dark gray text on a black background can be hard to read. Aim for a higher contrast to enhance readability.

3. Consider Different User Settings: Remember that users may adjust their screen brightness or use high contrast settings. Test your website under different conditions to ensure your text remains readable.

4. Don't Rely on Color Alone: For users with color blindness, distinguishing between certain colors can be difficult. Ensure your content is understandable even without color.

Non-Text Contrast Requirements: A Deeper Dive

While text is a significant part of any website, non-text elements such as user interface components and graphical objects also play a crucial role in the overall user experience and accessibility. Ensuring these elements meet contrast requirements is key to creating an inclusive digital environment. This section will provide a more detailed look at non-text contrast requirements and the types of non-text elements they apply to, in line with WCAG 2.1 level AA standards.

Understanding Non-Text Contrast Requirements

WCAG 2.1 level AA standards require a contrast ratio of at least 3:1 for graphical objects and user interface components. This means that the difference in brightness between the element and its background should be at least 3:1. This requirement ensures that these elements are distinguishable and accessible to users with visual impairments, including low vision and color blindness.

Non-Text Elements and Their Contrast Requirements

Here are some common non-text elements that the contrast requirements apply to:

1. User Interface Components: These are interactive elements that users engage with to navigate and interact with a website. Examples include buttons, checkboxes, sliders, and form fields. For these components, it's important that the component itself and any visual indication of its state (like hover or focus) meet the contrast requirements.

2. Graphical Objects: These are images or parts of images used to convey information, indicate an action, prompt a response, or distinguish an element. This can include icons, infographics, diagrams, charts, and other visual elements used to represent information or functionality. The contrast requirement ensures that these elements are distinguishable and their information or function is clear.

3. Borders and Outlines: Borders around elements or outlines around or within components also need to meet the contrast requirements. This includes borders around buttons, form fields, or other interactive components, as well as outlines used to indicate focus state.

4. Visual Indicators of Actions or Responses: Any visual cues that indicate an action (like a button press) or a response (like a validation error) need to meet the contrast requirements. This ensures that all users can perceive these important cues.

5. States of Interactive Elements: Interactive elements often have different states, such as hover, focus, or selected states. The visual indicators of these states also need to meet the contrast requirements.

Best Practices for Non-Text Contrast

1. Check Contrast Ratios: Use online tools to check the contrast ratio of your graphical elements to their backgrounds. This will help ensure you meet the minimum contrast ratios required for accessibility.

2. Consider Different States: Interactive elements often have different states (like hover or focus). Ensure these states maintain sufficient contrast.

3. Don't Rely on Color Alone: For users with color blindness, distinguishing between certain colors can be difficult. Ensure your content is understandable even without color.