Common Accessibility Fixes

• Images bad or missing alt text
  • Alt text is super important! It helps visually impaired folks "see" your images, and it gives search engines a clue about what your pictures are all about, which can help your website show up higher in search results.
  • Be a good describer:
    • Tell it like it is, clearly and concisely.
    • Get specific! Instead of "a dog," try "a fluffy golden retriever puppy chasing a ball."
    • Think about why the image is there. What's its purpose?
    • Skip the "Image of" stuff. Screen readers already know it's an image.
    • Keep it short and sweet, ideally under 125 characters.
  • Boost your SEO:
    • Naturally, sprinkle in relevant keywords if they fit.
    • Don't keyword stuff! That's a no-no.
    • Each image needs its unique alt text.
  • Different images, different alt text:
    • Informative images: Briefly describe what they show.
    • Functional images (like buttons): Say what they do.
    • Decorative images: Use alt="" so screen readers skip them.
    • Complex images (charts, graphs): Provide a summary, and if necessary, include additional details nearby or link to a more detailed description.
  • Special situations:
    • Images with text: Write out the exact text.
    • Product images: Include the product name and ID.
    • Linked images: Describe where the link goes.
    • Social media icons: Say "Visit our Facebook page" or similar.

  Good alt text makes your website better for everyone and helps people find your stuff!

  Creating effective alt text for images: a comprehensive guide

  Alt text (alternative text) is a crucial element for web accessibility, SEO, and overall user experience. It provides a textual description of images, allowing screen readers and other assistive technologies to convey the image's content to users with visual impairments. Additionally, search engines use alt text to understand image content, which can improve your website's ranking in image search results. 
  Here's how to create good alt text for your images:

  1. Prioritize accessibility and user experience
     • Describe the image accurately and concisely. Focus on conveying the essential information and purpose of the image, as if you were describing it to someone who couldn't see it.
     • Be specific and detailed. Instead of generic descriptions, highlight key elements, subjects, and actions within the image that are relevant to its context.
     • Consider the image's purpose and its relationship to the surrounding content. The same image might need different alt text depending on how it's used.
     • Avoid starting with "Image of," "Picture of," or "Graphic of." Screen readers already announce the presence of an image, making these phrases redundant and potentially frustrating for users.
     • Keep it short, preferably under 125 characters. While there's no strict character limit, many screen readers and accessibility guidelines suggest this length to avoid interrupting the user's flow and optimize readability.
  2. Leverage alt text for SEO
     • Naturally incorporate relevant keywords. If the image's content directly relates to your target keywords, include them naturally within the alt text to help improve your website's search engine ranking.
     • Don't keyword stuff. Overloading alt text with keywords can be detrimental to user experience and may lead to penalties from search engines.
     • Use unique alt text for each image. Avoid repeating the same alt text across multiple images on the same page, as this diminishes the effectiveness of your SEO efforts.
  3. Understand different image types
     • Informative images: Provide a brief description highlighting the essential information conveyed by the image.
     • Functional images: Describe the function or destination of the image (e.g., a link or button).
     • Decorative images: If an image is purely for aesthetic purposes and provides no essential information, use an empty alt attribute (alt="") so screen readers can skip it.
     • Complex images (charts, graphs, diagrams): Provide a concise overview of the main message or trends in the alt text, and if necessary, offer a more detailed description in the surrounding text or via a link to a separate page or data table.
  4. Best practices for specific situations
     • Images containing text: Include the exact text from the image in the alt text word for word.
     • Product images: Include the full product name and ID in the alt text to enhance discoverability. You can also include details like the color or angle if relevant.
     • Linked images: Describe the link's destination or purpose instead of simply describing the image.
     • Social media icons linking to your accounts: Alt text should indicate that the icon links to the respective platform (e.g., "Visit our Facebook page").

  By following these guidelines, you can create effective alt text that enhances the accessibility, usability, and SEO of your website's images, ensuring that your content is accessible and valuable to a broader audience.

• Unstructured headings

  To follow proper semantic heading usage for WCAG, you need to use headings to structure your content logically and hierarchically. This means using <h1> for the main title of the page, followed by <h2> for major sections, <h3> for subsections, and so on. Do not skip heading levels (e.g., jumping from <h2> to <h4>). Headings should describe the content that follows them and be used solely for structure, not for styling.

  ---

  WCAG and Semantic Headings

  The Web Content Accessibility Guidelines (WCAG) require that headings are used to provide a clear and logical outline of a webpage's content. This helps users of assistive technologies, such as screen readers, to navigate the page, understand its organization, and quickly jump to specific sections. Screen readers can announce the heading level and text, giving users an efficient way to scan the page's structure.

  ---

  Best Practices for Heading Usage

  • Logical Hierarchy: Use headings in a strict, descending order (<h1> through <h6>). Think of it like a table of contents for a book. The <h1> is the book title, <h2>s are chapter titles, and <h3>s are subheadings within those chapters.
  • Purpose: Use headings only for their intended purpose: to create a content hierarchy. Avoid using them just to make text bold or larger. If you need to style text, use CSS.
  • Unique <h1>: Every page should have one, and only one, <h1>. This heading should accurately describe the primary topic of the page.
  • Descriptive Text: The text within each heading should be concise and clearly describe the content of the section that follows it.
  • Do Not Skip Levels: This is a crucial point for WCAG compliance. Never skip a heading level. For example, don't follow an <h2> directly with an <h4>. If you need a subsection, the next heading should be an <h3>. Skipping levels can confuse screen reader users by implying that a section is missing.

   

  ---

  Example of Proper Usage

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Proper Semantic Heading Usage</title>
  </head>
  <body>
  	<h1>The Importance of Accessibility</h1>
  	<p>This is an introductory paragraph about why web accessibility is so important for all users, including those with disabilities.</p>
      <h2>What is WCAG?</h2>
     	<p>A section explaining the purpose and standards of the Web Content Accessibility Guidelines.</p>
   
      <h3>Key Principles of WCAG</h3>
      <p>A brief overview of the four core principles of WCAG: Perceivable, Operable, Understandable, and Robust.</p>
      <h2>Semantic HTML Explained</h2>
      <p>A section that goes into detail about the meaning and benefits of using semantic HTML elements.</p>
      <h3>How to Use Semantic Tags</h3>
      <p>Examples and best practices for using elements like `header`, `nav`, `main`, and `footer`.</p>
  </body>
  </html>

  In the example above, the headings follow a correct, descending hierarchy, providing a clear and accessible structure for the page content.

• Broken Links

  Broken links provide a bad user experience, are bad for Search Engine Optimization (SEO), and can create a barrier for users with disabilities. 

  If your site is being scanned in Siteimprove, it will find broken links. It will display the page the broken link is on as well as the link that is broken. 

• Text is clipped when resized

  When text gets clipped when resized, it's a failure of WCAG 1.4.4 Resize Text, meaning content becomes hidden, truncated, or overlapping when zoomed up to 200%, violating accessibility standards for low vision users. Common causes include fixed-width containers, overflow: hidden, absolute positioning, viewport units (VW/VH), or issues with text-based form controls. Solutions involve using relative units (like em, rem, %), fluid layouts, and ensuring content reflows without breaking. 

  Common Causes of Clipping (WCAG Failure F69)

  • Fixed Dimensions: Setting container widths/heights in fixed pixels (e.g., width: 300px;).
  • Overflow Properties: Using overflow: hidden; on containers.
  • Absolute Positioning: Placing elements with position: absolute;.
  • Viewport Units: Using vw, vh, vmin, vmax for font sizes, which can interfere with browser zoom.
  • Form Controls (F80): Text labels on forms growing larger than the controls themselves. 

  How to Fix It (Sufficient Techniques)

  • Use Relative Units: Design with flexible units like rem, em, or % for font sizes, widths, and heights, allowing content to scale.
  • Fluid Layouts: Create responsive designs that reflow content rather than breaking.
  • Test at 200%: Manually zoom your browser to 200% and check for hidden content, overlapping text, or loss of functionality.
  • Content Reflow: Ensure text wraps and content shifts to fit larger sizes without requiring horizontal scrolling.
  • Handle Truncation: If text must be truncated (e.g., long subjects in an email list), provide a way to see the full text, like a "read more" link or on focus. 

  Key Requirement

  • Text must be resizable up to 200% using only browser's built-in zoom or text-size controls, without losing content or functionality. 
• No data cells assigned to table header

  Accessibility rule: Table cell missing context, explained

  Modified on: Tue, 25 Feb, 2025 at 2:29 PM

  • Who is impacted by this barrier?
  • How does the check work?

  Common Mistakes, Explanations, and Fixes:

  • Putting header cells in <td> tags instead of <th>.
  • Using scope="row" where scope="col" should be used.
  • Leaving a header cell empty.

  A table is a grid of labeled columns and rows used to arrange information. Sighted users can make a visual association between table header and data cells of a table. This context gives meaning to the data contained in the table. When navigating through a table with a screen reader, it’s important that the same association is created programmatically. This means that each data point in the table needs to be associated to the right row or column header giving context to the data.

  Who is impacted by this barrier?

  The issue relates to the use of screen readers in particular. When a screen reader user navigates a table, it should be clear what context every data cell relates to.

  How does the check work?

  The rule checks that each data cell <td> in a table is assigned to at least one column or row header cell <th>. When this is done, a screen reader can announce each data cell in context.

  You can read more about this rule in the technical documentation here.

  Note: It is best practice to limit table use to simple data sets. Complex tables are difficult to understand and there may be other, more accessible ways to present the content.

  Common Mistakes

  Mistake

  Putting header cells in <td> tags instead of <th>.

  Explanation 

  Consider a table like this: 

  <table>
      <tr><th></th><th>Mon-Fri</th><th>Sat-Sun</th></tr>
      <tr><td><strong>Summer Hours</strong></td><td>8:00 - 17:00</td><td>10:00 - 14:00</td></tr>
      <tr><td><strong>Winter Hours</strong></td><td>9:00 - 15:00</td><td>12:00 - 14:00</td></tr>
  </table>

  HTML

  	Mon-Fri	Sat-Sun
  Summer Hours	8:00 - 17:00	10:00 - 14:00
  Winter Hours	9:00 - 15:00	12:00 - 14:00

  Visually, this table has four headers. “Mon-Fri” and “Sat-Sun” are column headers, and “Summer Hours” and “Winter Hours” are row headers. Visually, it’s clear which cells are the headers, but there is a problem in the HTML with the row headers “Summer Hours” and “Winter Hours.” Because they use <td> (table data) tags instead of <th> (table header), web browsers and assistive technologies have no way of knowing that they’re row headers. Instead, they are seen as regular data cells. This accessibility rule checks that all regular data cells have headers, and of course these ones don’t because they are headers. So, they fail the rule.

  Fix

  Mark the row headers as such by using <td> for them instead of <th>. In the example above, the fixed HTML would look like this: 

  <table>
      <tr><th></th><th>Mon-Fri</th><th>Sat-Sun</th></tr>
      <tr><th>Summer Hours</th><td>8:00 - 17:00</td><td>10:00 - 14:00</td></tr>
      <tr><th>Winter Hours</th><td>9:00 - 15:00</td><td>12:00 - 14:00</td></tr>
  </table>

  HTML

  Mistake

  Using scope="row" where scope="col" should be used.

  Explanation

  The attribute scope="row" marks a cell as a “row header” cell. A “row header” cell describes the rest of the row: that is, all the data cells directly to the right of the row header cell.

  scope="col" marks a cell as a “column header” cell. A “column header” cell describes the rest of the column: that is, all the data cells directly below the column header cell.

  Consider this table: 

  <table>
      <tr> <th scope="row">Mon-Fri</th> <th scope="row">Sat-Sun</th> </tr>
      <tr> <td>8:00 - 17:00</td>        <td>10:00 - 14:00</td>       </tr>
      <tr> <td>9:00 - 15:00</td>        <td>12:00 - 14:00</td>       </tr>
  </table>

  HTML

  Mon-Fri	Sat-Sun
  8:00 - 17:00	10:00 - 14:00
  9:00 - 15:00	12:00 - 14:00

  Visually, this table has two column headers: “Mon-Fri” and “Sat-Sun.” It has no row headers. However, in the HTML, the column headers have scope="row" on them. That is incorrect and will cause the "Table cell missing context" error to be flagged.

  Fix

  Option 1: Replace scope="row" with scope="col".

  Option 2: Remove scope="row" (and replace it with nothing). This will work because in a simple table like this, browsers and assistive technologies will use the rules of HTML to figure out the scope automatically. 

  Mistake

  Leaving a header cell empty.

  Explanation 

  Consider this table:

  <table>
    <tr>
      <th>Filename</th>
      <th></th>
      <th>Date</th>
    </tr>
    <tr>
      <td>Request for Proposal, Final</td>
      <td>pdf</td>
      <td>2023-11-17</td>
    </tr>
    <tr>
      <td>Meeting Minutes</td>
      <td>docx</td>
      <td>2023-12-10</td>
    </tr>
    <tr>
      <td>Consulting Rates</td>
      <td>pdf</td>
      <td>2023-05-20</td>
    </tr>
    <tr>
      <td>On-call rotation</td>
      <td>docx</td>
      <td>2023-11-20</td>
    </tr>
  </table>

  HTML

  Filename		Date
  Request for Proposal, Final	pdf	2023-11-17
  Meeting Minutes	docx	2023-12-10
  Consulting Rates	pdf	2023-05-20
  On-call rotation	docx	2023-11-20

  The "Table cell missing context" error will be flagged on the four cells in the “pdf” / “docx” column. This happens because the column header cell above them is empty.

  Fix

  Option 1 Fix:

  Add some visible text to the column header cell. For example: “File Format.”

  <table>
    <tr>
      <th>Filename</th>
      <th>File Format</th> <!-- *NEW* -->
      <th>Date</th>
    </tr>
    <tr>
      <td>Request for Proposal, Final</td>
      <td>pdf</td>
      <td>2023-11-17</td>
    </tr>
    <tr>
      <td>Meeting Minutes</td>
      <td>docx</td>
      <td>2023-12-10</td>
    </tr>
    <tr>
      <td>Consulting Rates</td>
      <td>pdf</td>
      <td>2023-05-20</td>
    </tr>
    <tr>
      <td>On-call rotation</td>
      <td>docx</td>
      <td>2023-11-20</td>
    </tr>
  </table>

  HTML

  Filename	File Format	Date
  Request for Proposal, Final	pdf	2023-11-17
  Meeting Minutes	docx	2023-12-10
  Consulting Rates	pdf	2023-05-20
  On-call rotation	docx	2023-11-20

  Option 2 Fix:

  Add some visually hidden text to the column header cell.

  “Visually hidden” means that the header cell will appear empty to sighted users, but there is some text – “File Format” – in that cell that is perceivable to assistive technologies.

  First, you need to add text like “File Format” to the cell, just as “Fix Option 1” did. Then you need to make that text visually hidden by adding the right CSS class to it. Most libraries and frameworks include a "visually-hidden" CSS class. Common names for this class are "visually-hidden" or "sr-only" (“SR” stands for “screen reader”). If you don’t have a CSS class like this already, you can use the one below. (Source: TPGI blog, “The anatomy of visually-hidden”).

  .visually-hidden:not(:focus):not(:active) {
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
  }

  CSS

  Then use the "visually-hidden" class on the “File Format” column header: 

  <table>
    <tr>
      <th>Filename</th>
      <th class="visually-hidden">File Format</th> <!-- *NEW* -->
      <th>Date</th>
    </tr>
    <tr>
      <td>Request for Proposal, Final</td>
      <td>pdf</td>
      <td>2023-11-17</td>
    </tr>
    <tr>
      <td>Meeting Minutes</td>
      <td>docx</td>
      <td>2023-12-10</td>
    </tr>
    <tr>
      <td>Consulting Rates</td>
      <td>pdf</td>
      <td>2023-05-20</td>
    </tr>
    <tr>
      <td>On-call rotation</td>
      <td>docx</td>
      <td>2023-11-20</td>
    </tr>
  </table>

  HTML

  Filename	File Format	Date
  Request for Proposal, Final	pdf	2023-11-17
  Meeting Minutes	docx	2023-12-10
  Consulting Rates	pdf	2023-05-20
  On-call rotation	docx	2023-11-20

  Visually, this table looks the same as it did before we fixed the error. But now it contains a visually hidden column header named “File Format.” This header will be exposed to assistive technologies properly, and the “Table cell missing context” rule will pass.

  sourced from https://help.siteimprove.com/support/solutions/articles/80001058790-accessibility-rule-table-cell-missing-context-explained

  Send feedback

  Sorry we couldn't be helpful. Help us improve this article with your feedback.

   
• Misspellings

  Correct spelling affects your accessibility.

  Always proofread and spell check your web content before publishing. 

• Empty headings

  <h1>, <h2>, <h3>, <h4>, <h5> content cannot be empty.

  If you must have an empty content use <p>&nbsp;</p>

• Color contrast

  For a list of approved UCR brand colors and contrast reference visit https://brand.ucr.edu/ucr-colors

  https://webaim.org/resources/contrastchecker/

  https://accessibleweb.com/color-contrast-checker/