Our Story Accessibility Issues

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

Note that in some of the markup examples, non-relevant code has been removed and replaced with “…” for ease of reading.

Index of Accessibility Issues

  1. Decorative Image Missing alt Attribute
  2. Invalid Heading Structure
  3. Link Not Accessible Via Keyboard
  4. Link Opens in New Window/Tab Without Warning
  5. Link Text – Insufficient Color Contrast
  6. Link Text – Use of Color Alone
  7. List Items Not Nested in List

Decorative Image Missing alt Attribute

1.1.1 Non-text Content : The decorative “Founder” image is missing an empty “alt” attribute.

When an image is used for decoration, spacing or other purpose that is not part of the meaningful content in the page then the image has no meaning and should be ignored by assistive technologies. Omitting an empty alt attribute (alt="") from the <img> element will cause screen readers to announce (and Braille displays to display) the image file path, which may not make sense to the user.

User Groups Impacted

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

Markup


<img src="…/img/founder2.png">

Resolution

Add an empty alt attribute to the <img> element:


<img alt="" src="…/img/founder2.png">

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 separate sections to be programmatically grouped together incorrectly.

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">Our Story</h1>
<p>Founded in 2021...<p>
…
<h2 style="text-align:left;">Founder</h2>
…
<p>I'm J.R., the founder of Joyful Bees Honey.…<p>
…
<h1 style="font-size:50px;">What I Love Best About Keeping Bees</h1>
<p>Bees have so many lessons to teach us.</p>
…
<h1 style="font-size:70px;">Bee Supportive</h1>
<p>There are a few simple things everyone can do to support our pollinators.</p>
…
<h2>See Why We're the Best</h2>
<p>We mean it when we say we pamper our bees.…<p>
…
<h4 style="font-weight:normal;font-size:70px;">Follow Joyful Bees Honey</h4>
…

Resolution

While it is not a WCAG requirement, only one level-one heading (<h1>) should be used per webpage. Since the webpage tells the story of Joyful Bees Honey, “Our Story” should be coded as an <h1>. “Founder” would then be a level-two heading (<h2>) with “What I Love Best About Keeping Bees” being coded as its subheading (<h3>). The remaining headings would all be level-two headings. 


<h1>Our Story</h1>
<p>Founded in 2021...<p>
…
<h2 …">Founder</h2>
…
<p>I'm J.R., the founder of Joyful Bees Honey…<p>
…
<h3>What I Love Best About Keeping Bees</h3>
<p>Bees have so many lessons to teach us.</p>
…
<h2>Bee Supportive</h2>
<p>There are a few simple things everyone can do to support our pollinators.</p>
…
<h2>See Why We're the Best</h2>
<p>We mean it when we say we pamper our bees.…<p>
…
<h2>Follow Joyful Bees Honey</h2>
…

Link Not Accessible Via Keyboard

2.1.1 Keyboard : In the “See Why We’re the Best” section, the “queen bee’s favorite artist is Bob Marley” link is actually a <span> element coded to mimic a link, preventing many people with disabilities from accessing the link.

User Groups Impacted

  • People with low vision or who are blind and use a screen reader
  • People with mobility issues who use keyboard only
  • People with mobility issues who use speech-recognition software

Markup


<li>…Did you know that bees love Reggae? Our <span class="pseudo-link" onclick="javascript:window.location='…';">queen bee’s favorite artist is Yeza</span>.</li>

Resolution

Change the pseudo-link to an HTML hyperlink (<a>):


<li>…Did you know that bees love Reggae? Our <a href="…">queen bee’s favorite artist is Yeza</a>.</li>

Link Opens in New Window/Tab Without Warning

3.2.1 On Focus , 3.2.2 On Input : The “queen bee’s favorite artist is Bob Marley” link opens in a new tab when selected, but the user is given no warning that this will happen.

While not a WCAG 2.1 Level AA failure, opening links in new windows or tabs can cause confusion for people with visual disabilities, especially people with low vision or who are blind who use screen readers, as they may not realize that a new tab has opened.

User Groups Impacted

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

Markup

Note that the following markup is also not accessible to keyboard-only users (see Link Not Accessible Via Keyboard). 


<a href="#" onclick="window.open('https://www.prairienursery.com/', '_blank');">
<b>Grow plants specifically for the bees</b>
</a>

Resolution

There are several ways to resolve this issue. The accessible webpage uses a Font Awesome icon to provide a visual indicator for sighted users and visually hidden text for screen reader users. 


<a href="https://www.youtube.com/watch?…">queen bee’s favorite artist is Yeza<i class="fa-solid fa-arrow-up-right-from-square new-tab"> <span class="hint">Opens in new window.</span></i></a>


<a href="https://www.prairienursery.com/">
<i class="fa-solid fa-arrow-up-right-from-square new-tab"></i>
<span class="hint">Opens in new window.</span>
</a>

Link Text – Insufficient Color Contrast

1.4.3 Contrast Minimum : There is insufficient color contrast between two instances of link text and the background as well as link text and surrounding text.

  • 2.77:1 Contrast Ratio:  “Grow plants specifically for the bees” red (#fe507b ) bolded link text on yellow (#fff296 ) background
  • 0.94:1 Contrast Ratio:  Red (#fe507b ) link text with gray (#969696 ) surrounding text

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 link text 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.

Link text that does not contrast well with surrounding text can also be an issue for people with certain disabilities. Ensuring adequate contrast between the link text and surrounding will help make identifying links easier for many people with visual disabilities.

Adequate contrast between link text and its background and link text with surrounding text is:

  • Link Text & Background:
    • 4.5 to 1 (4.5:1): The font size of the link 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 link 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)
  • Link Text & Surrounding Text:
    • 3 to 1 (3:1): Contrast must be at least 3:1 for link text and surrounding text regardless of font size and/or bolding.

Note that even though a 3:1 contrast ratio for larger text and for link text and surrounding text does meet 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

While addressing contrast issues between link text and its background is fairly simple, addressing contrast issues between link text and surrounding text can be tricky, especially if branding limits link text color choices. While darkening the red link text to #da003a ( ) will allow it to meet the minimum required contrast ratio with the yellow (#fff296 ) background (4.55:1), The contrast between the link text and gray (#969696 ) surrounding text is now 1.6:1, well below the minimum 3:1 contrast ratio. The surrounding text will have to be darkened to at least #232424 ( ) to meet the 3:1 minimum contrast ratio.

Link Text – Use of Color Alone

1.4.1 Use of Color : Color is used as the only visual means of conveying links on the page.

  • “Grow plants specifically for the bees” Link
  • “queen bee’s favorite artist is Yeza” Link

User Groups Impacted

  • People with cognitive disabilities who use a mouse
  • People with low vision who do not use a screen reader
  • People with mobility disabilities who use a mouse

Markup

CSS:


a {
    …
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
    …
}

Resolution

Remove “text-decoration: none;” from the CSS in the beforeGeneral.css file. Note that we recommend underlining links as people generally expect to see links underlined. However, if you prefer different styling for links you can always modify the CSS to achieve this. For example: 


a {
    …
    text-decoration: none;
    border-bottom: 2px var(--color-red) dotted;
}
a:hover, a:focus {
    text-decoration: none;
    outline: dotted 3px var(--color-red);
    outline-offset: 0.188rem;
}

List Items Not Nested in List

1.3.1 Info and Relationships : The list items in the “See Why We’re the Best” section are not nested correctly within a list (e.g., <ol>, <ul>)

User Groups Impacted

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

Screen readers understand that properly coded list items are related as a group. Not nesting the list items within a list may prevent these users from understanding how the list items are related.

Markup


<div>
    <h2>See Why We’re the Best</h2>
    <p>We mean it when we say we pamper our bees. We give them so much love and attention, including:</p>

    <li>Providing them the sweetest and rarest of pollens imported weekly from Shangi-La.</li>
    <li>Housing them in luxurious honeycomb mansions fit for a queen.</li>
    <li>Playing their favorite music daily. Did you know that bees love Reggae? …</li>
</div>

Resolution

Nest the list items in an undordered list:


<div>
    <h2>See Why We’re the Best</h2>
    <p>We mean it when we say we pamper our bees. We give them so much love and attention, including:</p>

    <ul>
        <li>Providing them the sweetest and rarest of pollens imported weekly from Shangi-La.</li>
        <li>Housing them in luxurious honeycomb mansions fit for a queen.</li>
        <li>Playing their favorite music daily. Did you know that bees love Reggae? …</li>
    </ul>
</div>