The Buzz Accessibility Issues

The issues identified on this page are found on The Buzz page of the Joyful Bees Honey inaccessible website. Information about and ways to address each defect are included here.

Index of Accessibility Issues

  1. Data Table Missing Table Headers
  2. Insufficient Color Contrast – Table Rows
  3. Invalid Heading Structure
  4. Invalid Use of Structural Markup – Fieldset & Legend

Data Table Missing Table Headers

1.3.1 Info and Relationships : The “Top Honey Producing States in 2022” data table is missing table headers (<th>).

Assistive technologies use the structure of an HTML table to present data to the user in a logical manner. The <th> element is used to mark column and row headers of the table, and is announced by screen readers as the user navigates the table.

User Groups Impacted

  • People with low vision or who are blind and use a screen reader

Markup

After looking at the code for the inaccessible table, we can see that the developer styled the items in the first row to look like column headers and the items in the first column to look like row headers. While visually these items look like headers, programmatically they are simple text.

Note that including blank table cells, especially in what should be the header row, is not recommended. Since the first column includes states, the first table cell should be the header for this column. 


<table …>
    <tr>
        <td style="border:0;background:#fff;"></td>
        <td class="col-heading">Total Colonies</td>
        …
    </tr>
    <tr>
        <td class="row-heading">Alabama</td>
        <td>…</td>
        …
    </tr>
    <tr>
        <td class="row-heading">Arizona</td>
        <td>…</td>
        …
    </tr>
    …
<table>

Resolution

One way to resolve this issue is to make the cells in the first row header cells (<th>) and then include scope="col" in each of these <th> element. Assistive technologies identify header cells with scope="col" as column headers. In addition, since the first column contains states, the column header should contain the text “State”.

The header cells in the first column would be coded in a similar way, except that scope="row" would be used instead of scope="col". Assistive technologies identify header cells with scope="row" as row headers.

Note: The <thead> and <tbody> table elements are optional, but can be helpful with organizing header and data cells correctly. 


<table …>
    <thead …>
        <tr …>
            <th scope="col">State</th>
            <th scope="col">Total Colonies</th>
            …
        </tr>
    </thead>
    <tbody …>
        <tr …>
            <th scope="row">Alabama</td>
            <td …>…</td>
            …
        </tr>
        <tr …>
            <th scope="row">Arizona</td>
            <td …>…</td>
            …
        </tr>
            …
    </tbody>
</table>

Insufficient Color Contrast – Table Rows

1.4.3 Contrast (Minimum) : There is insufficient contrast between the text and it’s background in the shaded table rows.

  • 2.59:1 Contrast Ratio: Table Header Row – Gray (#969696 ) text on yellow background (#fff296 )
  • 2.6:1 Contrast Ratio: Even Numbered Table Rows – Gray (#969696 ) text on light gray (#f0f0f0 ) background

User Groups Impacted

  • People with color blindness
  • People with low vision who do not use contrast-enhancing assistive technology

People with color blindness and people with low vision often have difficulty reading test that does not contrast well with its background. Ensuring adequate contrast between the text and its background will help make the text easier to read for many people with visual disabilities. Adequate contrast for text is:

  • 4.5 to 1 (4.5:1): The font size of the text is less than 18pt/24px/1.5em/150% (normal text) or less than 14pt/18.5px/1.2em/120% (normal or bolded text)
  • 3 to 1 (3:1): The font size of the text is greater than or equal to 18pt/24px/1.5em/150% (normal text) or greater than or equal to 14pt/18.5px/1.2em/120% (bolded text)

Note that while a 3:1 contrast ratio for larger text meets WCAG 2.1 Level AA, we recommend meeting the 4.5:1 contrast ratio for all text. Doing this helps make the text more readable to a much larger group of people with vision disabilities.

Resolution

  • 4.51:1 Contrast Ratio: Table Header Row – Darkening the gray text to #6e6d6e ( ) will allow it to meet the minimum required contrast ratio with the yellow background (#fff296).
    Note that the gray text was darkened to #232424 ( ) and the yellow background was lightened to #ffffdc ( ) in the accessible website.
  • 4.52:1 Contrast Ratio: Even Numbered Table Rows – Darkening the gray text to #6e6d6e ( ) will allow it to meet the minimum required contrast ratio with the lighter gray background (#f0f0f0).

Invalid Heading Structure

1.3.1 Info and Relationships : The heading structure for the page does not make sense for screen reader users. Heading levels are used in such a way to cause related sections to be programmatically grouped as unrelated.

User Groups Impacted

  • People who are deaf-blind and use a Braille display
  • People with low vision or who are blind and use a screen reader

Markup


<h1 class="first">The Buzz</h1>
<p …>Fun Facts & Interesting Information on Honey Bees…</p>
<h1 class="heading2">Honey Bee Facts</h1>
…
<h1 class="heading3">Is "Honey Bee" One Word or Two?</h1>
<p>Many people notice that dictionaries list "honeybee" as one word…</p>
<h1 class="heading2">Anatomy of a Honey Bee</h1>
…
<h1 class="heading2"…>Top Honey Producing States in 2022</h1>
<p>The information in the following table…</p>
…
<h1 class="heading2">Follow Joyful Bees Honey</h1>
…

Resolution

While it is not a WCAG requirement, only one level-one heading (<h1>) should be used per webpage. On this webpage, “The Buzz” should be coded as an <h1>. “Honey Bee Facts” would then be a level-two heading (<h2>) with “Is ‘Honey Bee’ One Word or Two?” being coded as its subheading (<h3>). The remaining headings would all be level-two headings.

Note that the text, “Did You Know?”, visually appears to be a level-three heading, but is not coded as a heading. This issue is addressed in the Invalid Use of Structural Markup section. 


<h1>The Buzz</h1>
<p>Founded in 2021...<p>
…
<h2>Honey Bee Facts</h2>
…
<h3>Is “Honey Bee” One Word or Two?</h3>
<p>Many people notice that dictionaries list “honeybee” as one word…</p>
<h2>Anatomy of a Honey Bee</h2>
…
<h2>Top Honey Producing States in 2022</h2>
<p>The information in the following table…</p>
…
<h2>Follow Joyful Bees Honey</h2>
…

Invalid Use of Structural Markup – Fieldset & Legend

1.3.1 Info and Relationships : The <fieldset> element is being used to provide a border around the “Did You Know?” section, and the <legend> element is being used to mimic a level-three heading.

The fieldset’s purpose is to group related form inputs, controls, etc. together, while the legend represents a caption for the content of its parent fieldset. Using structural markup in a way that does not represent relationships in the content will likely cause confusion for assistive technology users.

User Groups Impacted

  • People who are deaf-blind and use a Braille display
  • People with low vision or who are blind and use a screen reader

Markup


<fieldset …>
    <legend class="heading3">Did You Know?</legend>
    …
</fieldset>

Resolution

The easiest way to fix this issue would be to add role="presentation to the <fieldset> element and role="heading" plus aria-level="3" to the <legend> element. This will force assistive technologies to ignore the fieldset while also identifying the <legend> element as a level-three heading (<h3>) 


<fieldset role="presentation"…>
    <legend role="heading" aria-level="3">Did You Know?</legend>
    …
</fieldset>