A11y World

Author: a11yworldblog

  • WCAG 1.1.1 and the Art of Hiding Decorative Images (Gracefully!)

    So far, we’ve talked about simple images needing concise alt text and complex images requiring robust long descriptions to meet WCAG Success Criterion 1.1.1. But what about images that don’t convey any meaningful information at all? What about those purely decorative images?

    This is where things can get a little tricky. While WCAG 1.1.1 demands a text alternative for non-text content, it also acknowledges that some images are purely for visual flair and would clutter the experience for users who don’t rely on sight.

    What is a Decorative Image?

    A decorative image is an image whose sole purpose is aesthetic enhancement. It doesn’t convey any information that isn’t already available in the surrounding text, or it’s purely for visual appeal without adding any contextual meaning. Examples include:

    Borders, spacers, or purely aesthetic background images.
    Icons that are purely visual complements to text (e.g., a small leaf icon next to “Our Green Initiatives” where the text itself is sufficient).
    Images that are part of a visual design but don’t add meaning (e.g., a swirling abstract pattern).
    Stock photos that serve as visual “filler” but don’t add specific information to the adjacent content.
    The Golden Rule for Decorative Images: An Empty alt Attribute

    For decorative images, the correct way to comply with WCAG 1.1.1 is to provide an empty alt attribute: alt=””.

    Why an empty alt attribute?

    Screen Reader Behavior: When a screen reader encounters an tag with alt=””, it understands that the image is purely decorative and will skip over it entirely. This prevents unnecessary announcements that would interrupt the user’s flow and add cognitive load.
    Accessibility Tree: An empty alt attribute effectively removes the image from the accessibility tree, ensuring it’s not announced to assistive technologies.
    WCAG Compliance: This is the officially recommended technique for decorative images under WCAG 1.1.1.
    Examples of Correct Usage for Decorative Images:



    Our Green Initiatives (where “Our Green Initiatives” is the primary information)
    Important Considerations and Common Mistakes:

    Don’t Omit the alt Attribute Entirely: While an empty alt attribute is good, completely omitting the alt attribute is bad practice! If the alt attribute is missing, some screen readers might announce the image filename, which is unhelpful and confusing. Always include alt=”” for decorative images.

    CSS Background Images for Pure Decoration: For truly purely decorative images that are not content-bearing, consider using CSS background-image property instead of an tag. Images included via CSS are inherently ignored by screen readers and don’t require an alt attribute.

    Example: Use this when the image is purely presentational and adds no semantic value to the content.
    Be Absolutely Sure it’s Decorative: This is the most crucial part! What you think is decorative might actually be informative for someone else.

    Think critically: If removing the image would make the content less understandable or would take away meaningful information, then it’s NOT decorative, and it needs proper alt text (or a long description).
    Example: An icon next to a link might seem decorative, but if it helps users quickly identify the link’s purpose (e.g., a printer icon next to “Print Page”), then it’s informative and needs appropriate alt text.
    Why Get This Right?

    Gracefully handling decorative images through alt=”” or CSS background images is vital for:

    Improved User Experience: Prevents screen reader users from hearing unnecessary and potentially confusing announcements, allowing them to focus on meaningful content.
    Efficiency: Makes navigating your website faster and less frustrating for assistive technology users.
    True Accessibility: Demonstrates a nuanced understanding of accessibility principles, ensuring that your website is genuinely usable for everyone.
    By mastering the art of distinguishing between simple, complex, and decorative images, and applying the appropriate WCAG 1.1.1 techniques, you’re well on your way to creating a more inclusive and user-friendly web for all!

  • WCAG 1.1.1 and the Art of Describing Complex Images

    In our last post, we explored the straightforward world of simple images and the power of the alt attribute. But what happens when an image isn’t so simple? What about charts, graphs, diagrams, or intricate infographics that convey a wealth of data or complex relationships? This is where WCAG Success Criterion 1.1.1 takes on a new level of importance, focusing on complex images.

    Defining a Complex Image

    A complex image is one that cannot be adequately described with a short alt attribute. It contains significant information or represents relationships that require more than a sentence or two to convey meaningfully to someone who cannot see it. Examples include:

    Graphs and Charts: Bar graphs, pie charts, line graphs showing trends.
    Diagrams: Flowcharts, architectural diagrams, scientific illustrations.
    Infographics: Visual representations of data and information designed for quick understanding, but often packed with detail.
    Maps: Especially those that convey specific routes, geographical features, or data overlays.
    The Challenge of Complexity: Beyond the alt Attribute

    For complex images, simply providing alt text like “A bar chart” or “A diagram of a process” is insufficient and fails to meet WCAG 1.1.1. Users relying on screen readers would gain almost no understanding of the valuable information presented visually.

    Strategies for Accessible Complex Images

    Since the alt attribute isn’t enough, we need to employ additional techniques to provide a comprehensive text alternative. Here are the most common and effective approaches:

    Long Description (Referencing a Nearby Text):
    This is often the preferred method. The alt attribute provides a brief, concise overview of the image, and a more detailed description is provided in the surrounding text on the page.

    Example: Bar chart showing quarterly sales for 2024. Then, immediately after the image in the content: “The bar chart above illustrates significant growth in Q3 2024, with sales reaching $X million, a Y% increase from Q2…”
    Long Description (Linked to a Separate Page):
    If the description is exceptionally long or contains a lot of data, you can link to a separate page or section containing the full text alternative.

    Example: Diagram illustrating the water cycle.

    For a detailed explanation of the water cycle diagram, click here. (Note: aria-describedby is a powerful ARIA attribute that creates an association between an element and a description, improving screen reader experience.)
    Long Description (Using details/summary element):
    This HTML5 element allows you to provide a collapsable section of content directly on the page, perfect for detailed descriptions.

    Example: Pie chart showing market share distribution for 2023. Detailed description of market share pie chart

    The pie chart illustrates the 2023 market share distribution across four key competitors. Company A holds 45% of the market, followed by Company B at 30%, Company C at 15%, and Company D at 10%.
    Key Considerations for Long Descriptions:

    Completeness: The description must convey all the information and relationships presented visually in the image. Imagine explaining it over the phone to someone who cannot see it.
    Structure: Use headings, lists, and paragraphs to make the description easy to read and understand.
    Data Tables: If the image is a graph or chart, consider providing the underlying data in an accessible HTML table. This is often the most effective way to convey numerical information.
    Why the Extra Effort?

    Ensuring complex images are fully accessible is critical for:

    Inclusivity: It allows everyone, regardless of their visual abilities, to access and understand crucial data and information.
    Information Equity: Prevents users from being excluded from understanding key insights presented visually.
    Compliance: Meeting WCAG 1.1.1 for complex images is a fundamental requirement for many accessibility standards.
    While it requires more thought and effort, providing comprehensive text alternatives for complex images is a hallmark of truly accessible web design. It’s about empowering all users to grasp the full meaning of your content.

    Next up, we’ll tackle the often-misunderstood world of decorative images!

  • Demystifying WCAG 1.1.1 – Simple Images, Clear Accessibility

    When we talk about web accessibility, images are often one of the first things that come to mind. And for good reason! Images can be a huge barrier for users who rely on screen readers or have cognitive disabilities if they aren’t handled correctly. Today, we’re diving into the cornerstone of image accessibility: WCAG Success Criterion 1.1.1, specifically focusing on simple images.

    What is WCAG SC 1.1.1?

    In a nutshell, WCAG 1.1.1, also known as “Non-text Content,” mandates that all non-text content (like images, audio, and video) that presents information must have a text alternative. This text alternative serves the same purpose as the non-text content.

    Simple Images: The Basics

    A simple image is an image that conveys a straightforward piece of information or is primarily decorative but still requires some description. Think of things like:

    A company logo
    A photograph of a single object (e.g., a product shot)
    An icon that represents a clear action (e.g., a “print” icon)
    A headshot of a person
    How to Make Simple Images Accessible (the alt attribute is your friend!)

    For simple images, the primary way to provide a text alternative is through the alt attribute in your HTML tag.

    Here’s how to do it effectively:

    Be Concise and Descriptive: Your alt text should accurately and briefly describe the image’s content and purpose.
    Bad Example: image (Too vague)
    Better Example: Acme Corp logo
    Avoid Redundancy: Don’t start your alt text with “image of” or “picture of.” Screen readers already announce that it’s an image.
    Bad Example: Picture of a fluffy cat.
    Better Example: Fluffy cat napping in a sunbeam.
    Consider the Context: Always think about why the image is on the page. What information does it convey in that specific context?
    If an image is a link, the alt text should describe the destination of the link.

    If the image has text within it: The alt text should include that text. This is crucial for accessibility!
    Summer Sale! 20% off all items.
    Why is this important?

    Screen Reader Users: They rely entirely on alt text to understand what an image depicts. Without it, they miss crucial information.
    Search Engine Optimization (SEO): Search engines use alt text to understand the content of your images, which can improve your site’s visibility.
    Broken Images: If an image fails to load, the alt text will be displayed in its place, still conveying the intended message.
    Making simple images accessible with good alt text is one of the easiest and most impactful things you can do to improve your website’s inclusivity. It’s a fundamental step towards creating a web that works for everyone.

    Stay tuned for our next posts where we’ll delve into the complexities of accessible complex images and the nuances of decorative images!

  • Sample 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Risus feugiat in ante metus dictum at tempor commodo. Eros in cursus turpis massa tincidunt dui. Dapibus ultrices in iaculis nunc sed augue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Morbi tempus iaculis urna id. Odio aenean sed adipiscing diam donec adipiscing. Ac auctor augue mauris augue neque gravida in. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Odio eu feugiat pretium nibh ipsum consequat nisl vel pretium. Dolor magna eget est lorem. In cursus turpis massa tincidunt. Varius morbi enim nunc faucibus a pellentesque. Viverra nam libero justo laoreet sit amet cursus sit. Diam quis enim lobortis scelerisque. Nisi scelerisque eu ultrices vitae auctor.

    Egestas diam in arcu cursus euismod quis viverra. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Commodo quis imperdiet massa tincidunt nunc pulvinar. Nisl vel pretium lectus quam id leo in vitae turpis. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Dolor morbi non arcu risus quis varius quam quisque. Platea dictumst quisque sagittis purus sit amet volutpat. Viverra justo nec ultrices dui. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. A erat nam at lectus urna duis. Tincidunt arcu non sodales neque sodales ut etiam.

    Aliquet enim tortor at auctor urna. Eget nunc scelerisque viverra mauris. Facilisi morbi tempus iaculis urna. Tempor nec feugiat nisl pretium fusce id. Et netus et malesuada fames. In dictum non consectetur a erat nam at lectus urna. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Gravida neque convallis a cras semper auctor neque. Est velit egestas dui id ornare arcu odio ut. Elementum sagittis vitae et leo duis ut diam quam. Nulla posuere sollicitudin aliquam ultrices. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Amet cursus sit amet dictum. Consequat semper viverra nam libero justo laoreet sit amet cursus. Eget magna fermentum iaculis eu non diam. Felis donec et odio pellentesque. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Eu sem integer vitae justo eget magna fermentum iaculis eu.

    Tellus orci ac auctor augue mauris augue neque gravida in. Id aliquet lectus proin nibh nisl. Enim facilisis gravida neque convallis. Elit pellentesque habitant morbi tristique senectus et netus. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Nisl vel pretium lectus quam id leo. In iaculis nunc sed augue lacus viverra vitae congue eu. Ornare suspendisse sed nisi lacus sed viverra tellus in. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Non odio euismod lacinia at quis risus sed vulputate odio. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in.

    Donec adipiscing tristique risus nec. Praesent tristique magna sit amet purus. Auctor eu augue ut lectus arcu bibendum at. Turpis egestas integer eget aliquet nibh praesent tristique magna. Lobortis mattis aliquam faucibus purus in. Nunc aliquet bibendum enim facilisis gravida neque convallis. Magnis dis parturient montes nascetur. Ac odio tempor orci dapibus. Nibh cras pulvinar mattis nunc sed. Purus in massa tempor nec feugiat nisl pretium. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Venenatis cras sed felis eget.

  • Sample 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan consequat ante aliquet volutpat. Proin a lectus sed tortor ultricies imperdiet. Proin volutpat erat elit, in vehicula dui faucibus quis. Nullam fermentum, metus eget tempus tempor, turpis metus euismod erat, sit amet commodo odio nunc non magna. Nunc facilisis leo vel tellus tincidunt volutpat. Fusce volutpat velit massa, quis rhoncus mi ullamcorper vestibulum. Morbi a lacinia enim, in ornare eros. Nulla lacinia vehicula tempor. Aliquam faucibus faucibus viverra. Vivamus massa leo, molestie eget elit non, posuere posuere diam. Donec gravida ante vel gravida viverra. Donec ante odio, mollis sed ante sit amet, iaculis malesuada velit. Duis vel velit vitae odio consectetur laoreet vel ac libero. Aliquam facilisis dolor quis nunc tristique, quis accumsan felis congue.

    Donec blandit luctus risus in porttitor. Sed eget luctus sem. Vivamus arcu magna, tincidunt eget faucibus ut, bibendum vitae magna. Pellentesque in fermentum dolor. Proin maximus, ante sed porta consequat, lacus mi cursus mi, eget consequat ipsum ipsum eget sem. Vivamus ante lectus, porta quis molestie id, pulvinar vehicula odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed arcu ante, tempus sit amet sapien id, aliquet venenatis justo. In dapibus lacinia lorem, eget dapibus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

    Suspendisse in nibh turpis. Suspendisse pellentesque elementum lorem eu dapibus. Vestibulum dapibus augue eget sapien commodo laoreet. Duis vel diam nec ex lacinia porta. Ut tincidunt eleifend tellus. Praesent sed est elementum, porttitor sapien ut, blandit erat. Proin tortor erat, consequat nec justo in, congue sagittis ante.

    Praesent varius nulla eros, a malesuada enim mollis sed. Nam auctor mi ut fermentum pulvinar. Nulla a eleifend urna. Nunc eget ultrices sapien. Vestibulum ex augue, imperdiet at nisl et, sodales euismod leo. Morbi bibendum, est ut dignissim rutrum, mi magna rutrum metus, ut varius ante ante nec libero. Fusce arcu mi, placerat non dolor quis, scelerisque finibus dolor. Vestibulum pellentesque vestibulum sagittis. Vestibulum in ante lectus. Pellentesque ante lacus, convallis sit amet nulla eu, feugiat ultrices leo. Vivamus porttitor vel risus non ultricies. Fusce lacinia, eros ac scelerisque eleifend, felis mauris gravida nisi, eget porttitor odio urna ac lorem. Donec porttitor ultrices nisl a pharetra. Morbi accumsan elit tortor. Integer sagittis tempor urna eget viverra. Donec aliquet consectetur enim at consequat.

    Fusce hendrerit gravida ex ac efficitur. Nulla lacinia nisi mi, at efficitur est malesuada non. Phasellus euismod eu arcu lacinia porta. Sed in diam odio. Phasellus diam elit, ullamcorper vel metus dignissim, dapibus accumsan justo. Donec accumsan ultricies posuere. Nam magna nibh, varius rhoncus ultrices in, mattis posuere leo. Curabitur finibus lorem nec iaculis congue. Ut aliquam nisi non scelerisque tincidunt. Phasellus congue vel erat at condimentum. Vestibulum sit amet tristique erat, in convallis odio. Nulla eget tincidunt massa. Fusce id fringilla diam. Sed ipsum ipsum, dignissim sit amet facilisis eu, fringilla vel tortor. Phasellus dolor mi, porttitor id condimentum tempus, placerat eget justo. Nulla sit amet pellentesque nulla, sed mollis ante.

  • Sample 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc accumsan consequat ante aliquet volutpat. Proin a lectus sed tortor ultricies imperdiet. Proin volutpat erat elit, in vehicula dui faucibus quis. Nullam fermentum, metus eget tempus tempor, turpis metus euismod erat, sit amet commodo odio nunc non magna. Nunc facilisis leo vel tellus tincidunt volutpat. Fusce volutpat velit massa, quis rhoncus mi ullamcorper vestibulum. Morbi a lacinia enim, in ornare eros. Nulla lacinia vehicula tempor. Aliquam faucibus faucibus viverra. Vivamus massa leo, molestie eget elit non, posuere posuere diam. Donec gravida ante vel gravida viverra. Donec ante odio, mollis sed ante sit amet, iaculis malesuada velit. Duis vel velit vitae odio consectetur laoreet vel ac libero. Aliquam facilisis dolor quis nunc tristique, quis accumsan felis congue.

    Donec blandit luctus risus in porttitor. Sed eget luctus sem. Vivamus arcu magna, tincidunt eget faucibus ut, bibendum vitae magna. Pellentesque in fermentum dolor. Proin maximus, ante sed porta consequat, lacus mi cursus mi, eget consequat ipsum ipsum eget sem. Vivamus ante lectus, porta quis molestie id, pulvinar vehicula odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed arcu ante, tempus sit amet sapien id, aliquet venenatis justo. In dapibus lacinia lorem, eget dapibus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

    Suspendisse in nibh turpis. Suspendisse pellentesque elementum lorem eu dapibus. Vestibulum dapibus augue eget sapien commodo laoreet. Duis vel diam nec ex lacinia porta. Ut tincidunt eleifend tellus. Praesent sed est elementum, porttitor sapien ut, blandit erat. Proin tortor erat, consequat nec justo in, congue sagittis ante.

    Praesent varius nulla eros, a malesuada enim mollis sed. Nam auctor mi ut fermentum pulvinar. Nulla a eleifend urna. Nunc eget ultrices sapien. Vestibulum ex augue, imperdiet at nisl et, sodales euismod leo. Morbi bibendum, est ut dignissim rutrum, mi magna rutrum metus, ut varius ante ante nec libero. Fusce arcu mi, placerat non dolor quis, scelerisque finibus dolor. Vestibulum pellentesque vestibulum sagittis. Vestibulum in ante lectus. Pellentesque ante lacus, convallis sit amet nulla eu, feugiat ultrices leo. Vivamus porttitor vel risus non ultricies. Fusce lacinia, eros ac scelerisque eleifend, felis mauris gravida nisi, eget porttitor odio urna ac lorem. Donec porttitor ultrices nisl a pharetra. Morbi accumsan elit tortor. Integer sagittis tempor urna eget viverra. Donec aliquet consectetur enim at consequat.

    Fusce hendrerit gravida ex ac efficitur. Nulla lacinia nisi mi, at efficitur est malesuada non. Phasellus euismod eu arcu lacinia porta. Sed in diam odio. Phasellus diam elit, ullamcorper vel metus dignissim, dapibus accumsan justo. Donec accumsan ultricies posuere. Nam magna nibh, varius rhoncus ultrices in, mattis posuere leo. Curabitur finibus lorem nec iaculis congue. Ut aliquam nisi non scelerisque tincidunt. Phasellus congue vel erat at condimentum. Vestibulum sit amet tristique erat, in convallis odio. Nulla eget tincidunt massa. Fusce id fringilla diam. Sed ipsum ipsum, dignissim sit amet facilisis eu, fringilla vel tortor. Phasellus dolor mi, porttitor id condimentum tempus, placerat eget justo. Nulla sit amet pellentesque nulla, sed mollis ante.

  • Hello world!

    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra ante tortor, a auctor purus suscipit vitae. Nulla malesuada lacus at erat aliquam, id blandit dolor porta. Etiam ac porttitor mauris. Nam eget suscipit urna. Curabitur tempus, nulla vel pharetra volutpat, tortor arcu rhoncus leo, eget gravida augue dolor ac purus. Maecenas eu feugiat ligula. Etiam tristique lorem eu eleifend maximus. Curabitur sit amet dui mi. Sed velit tellus, dapibus vitae suscipit quis, porttitor sed mauris. Nam eget mauris sed felis varius porta. Suspendisse tincidunt convallis velit, id scelerisque leo molestie non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    In leo turpis, pharetra vestibulum consectetur eget, fermentum at sem. Curabitur pellentesque mauris quis porttitor ullamcorper. Donec tempor vitae ante ac bibendum. Sed ut lobortis purus, sit amet convallis enim. Mauris aliquam, risus eu egestas facilisis, orci nunc sollicitudin ligula, quis dictum arcu massa a nisi. Suspendisse suscipit congue sem, vel sollicitudin purus tempor sit amet. Donec mollis neque sit amet leo dapibus porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

    Fusce a odio nibh. Suspendisse ut mi in leo dictum lacinia eget id quam. Fusce et vestibulum diam. In tempor mauris quis mauris lobortis ultrices. Maecenas porta, nisl sed sollicitudin facilisis, libero urna finibus ipsum, iaculis interdum est nisl eu eros. Mauris tincidunt finibus iaculis. Maecenas eros dui, placerat nec justo a, malesuada malesuada leo. Vivamus lectus nibh, aliquam et neque non, pharetra aliquet augue.

    Praesent tristique arcu feugiat, convallis ante a, tempor magna. Maecenas eget sodales sem. Quisque placerat consectetur venenatis. Donec vestibulum eleifend ante fermentum feugiat. Nullam ac commodo est. Proin aliquam, est ut facilisis porta, dui felis euismod risus, vel feugiat libero libero vitae enim. Praesent eget eleifend velit. Fusce eget vulputate erat. Suspendisse condimentum facilisis erat. Vestibulum sit amet leo ligula.

    Curabitur erat mauris, ullamcorper vitae pellentesque in, aliquet vitae augue. Nunc ultrices fermentum odio quis sagittis. Morbi aliquam, odio in lobortis dignissim, lorem nisi bibendum arcu, non vehicula metus tellus et erat. Nullam porta, purus vitae bibendum accumsan, justo turpis fringilla sapien, a consequat erat elit vitae mauris. Praesent vitae luctus magna. Nunc aliquet sapien mauris, eget mollis elit porta hendrerit. Praesent eget faucibus nibh. Sed id dolor tempor sapien venenatis sodales sit amet a eros. Curabitur aliquam gravida nulla, eu lobortis eros venenatis in. Vivamus varius dui nec nunc imperdiet, non molestie urna tempor. Suspendisse placerat consequat risus scelerisque venenatis. Vivamus placerat urna vel magna faucibus, id consequat sem aliquet. In sed ullamcorper ipsum.