Home Page Accessibility Issues

The issues identified on this page are found on the home 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. Animation Cannot be Paused
  2. Focus Not Visible for Buttons
  3. Insufficient Color Contrast – Non-Text Elements
  4. Insufficient Color Contrast – Text
  5. Invalid Alternative Text for Decorative Image
  6. Layout Table Using Table Headers
  7. Link Text Using Color Alone
  8. Missing alt Attributes for Decorative Images
  9. Missing <iframe> Title
  10. Relationships of Items Undefined
  11. Simple Text Styled to Look Like Headings
  12. Unable to Bypass Blocks of Content
  13. Unlabeled Buttons
  14. Users Not Made Aware of Changes in Content

Animation Cannot be Paused

2.2.2 Pause, Stop, Hide: There is no mechanism available to pause animation.

  • Scrolling Marque: The “Sale” marque automatically scrolls and no mechanism exists to pause the movement.
  • Animated Bees in Carousel: The “Learn more about how we pamper our honey bees.” bee constantly bounces and the “Use music to help make your honey bees joyful.” bee continually moves, and no mechanism exists to pause the movement.

Content that moves or auto-updates can be a barrier to anyone who has trouble reading stationary text quickly as well as anyone who has trouble tracking moving objects. It can also cause problems for screen readers. Moving content can also be a severe distraction for some people. Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page.

User Groups Impacted

  • People with cognitive disabilities
  • People with vision disabilities who have difficulty tracking moving text.

Resolution

  • Scrolling Marque: Automatically stop the scrolling and position the text in the middle of the screen after 5 seconds.
  • Animated Bees in Carousel: While the animation could be stopped after 5 seconds, it would be best to just not have the animation for these images.

Focus Not Visible for Buttons

2.4.7 Focus Visible : In the carousel, the visual focus indicator has been removed from the buttons used to select individual slides. This, in addition to the low contrast between the buttons and their background, make seeing the buttons very difficult to impossible for people with certain disabilities.

User Groups Impacted

  • People with cognitive disabilities who use the keyboard
  • People with low vision who do not use contrast-enhancing assistive technology
  • People with mobility disabilities who use keyboard only

Markup

HTML:


<ul class="navigation">
    …
    <li><button></button></li>
    …
</ul>

CSS:


.navigation li button:focus {
    outline: 0;
}

Resolution

Remove “outline: 0;” from the CSS and style the outline to make the visual focus more obvious for people using both the keyboard and mouse. For example: 


.navigation li button:hover, .navigation li button:focus {
    outline: 3px #444 solid;
    outline-offset: 0.25rem;
}

Insufficient Color Contrast – Non-Text Elements

1.4.11 Non-text Contrast : There is insufficient contrast between non-text actionable elements and their background.

  • 1.83:1 Contrast Ratio: Active Carousel Button – Pink (#fea7bd ) button on white background (#ffffff)
  • 1.2:1 Contrast Ratio: Inactive Carousel Buttons – Light Gray (#eaeaea ) text on white background (#ffffff)

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 seeing actionable non-text controls that do no contrast well with the background. Ensuring adequate contrast between the control and its background will help make the control easier to see for many people with visual disabilities. Adequate contrast for non-text elements is 3 to 1 (3:1).

Resolution

  • 3.2:1 Contrast Ratio: Active Carousel Button – Darkening the button to #cd768c ( ) will allow it to meet the minimum required contrast ratio with the white (#ffffff) background.
    Note that the active carousel button was darkened to #da003a ( ) in the accessible website.
  • 3.36:1 Contrast Ratio: Inactive Carousel Buttons – Darkening the buttons to #8c8c8c ( ) will allow it to meet the minimum required contrast ratio with the white (#ffffff) text/background.

Insufficient Color Contrast – Text

1.4.3 Contrast (Minimum) : There is insufficient color contrast between several instances of text and its background.

  • 2.77:1 Contrast Ratio: “20%OFF-RAW-HONEY” – Red (#fe507b ) text on yellow background (#fff296 )
  • 2.5:1 Contrast Ratio: “Add to Cart” Buttons – Gray (#969696 ) text on white background (#ffffff)

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, Knowbility recommends 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.55:1 Contrast Ratio: “20%OFF-RAW-HONEY” – Darkening the red text to #da003a ( ) will allow it to meet the minimum required contrast ratio with the yellow background (#fff296).
    Note that the yellow background was lightened to #ffffdc ( ) in the accessible website.
  • 4.6:1 Contrast Ratio: “Add to Cart” Buttons – Darkening the gray text to #757575 ( ) will allow it to meet the minimum required contrast ratio with the white (#ffffff) text/background.
    Note that the gray text is darkened to #232424 ( ) in the accessible website to address contrast issues with link text and surrounding text.

Invalid Alternative Text for Decorative Image

1.1.1 Non-text Content : The decorative bee image located in the “Say Hello” section has alternative text that repeats actual text located in the section. Providing alternative text for decorative images is listed as a specific failure of 1.1.1 Non-text Content , as doing so prevents screen readers from ignoring the images, forcing them to repeat the text found in both the alt attribute and the actual text.

User Groups Impacted

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

Markup


    <img alt="Say hello. Joyful Bees Honey would love to hear from you." src="…/img/HelloHoney-167x250.png">

Resolution

Remove the text from the alt attribute.


    <img alt="" src="…/img/HelloHoney-167x250.png">

Layout Table Using Table Headers

1.3.1 Info and Relationships : The “Shop Joyful Bees Honey” table is being used for layout purposes, but includes 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


<table id="layoutTable"…>
    <tr…>
        <td…>
            <em class="fa-regular fa-cart-shopping"></em>
            <span id="cart">0</span> <span>Items</span>
        </td>
    </tr>
    <tr>
        <td…>
            …
            <table…>
                <tr>
                    <td><img alt="" src="…/img/HoneyBear-130x200.png"</td>
                    <th…>
                        <div… id="item1">12 oz Honey Bear</div>
                        <p>Price: $9.00</p>
                    </th>
                </tr>
                <tr>
                    <td…><p>Our 12 oz honey bear contains organic honey and is the perfect size to keep on the table for sweetening your tea.</p></td>
                </tr>
                <tr…>
                    <td…><button id="btn1" onclick="buyStuff()">Add to Cart</button></td>
                </tr>
            </table>
            …
        </td>
        …

Resolution

Change the header cells (<th>) in the table to data cells (<td>).

Note that it is best not to use HTML tables for layout purposes, but it can still be done as long as the WAI-ARIA role of presentation is used and care is taken to make sure that the layout tables are responsive. Using role="presentation" will allow screen readers to ignore the tables and announce the content as expected. 


<table id="layoutTable" role="presentation"…>
    <tr…>
        <td…>
            <em class="fa-regular fa-cart-shopping"></em>
            <span id="cart">0</span> <span>Items</span>
        </td>
    </tr>
    <tr>
        <td…>
            …
            <table… role="presentation">
                <tr>
                    <td><img alt="" src="…/img/HoneyBear-130x200.png"</td>
                    <td…>
                        <div… id="item1">12 oz Honey Bear</div>
                        <p>Price: $9.00</p>
                    </td>
                </tr>
                <tr>
                    <td…><p>Our 12 oz honey bear contains organic honey and is the perfect size to keep on the table for sweetening your tea.</p></td>
                </tr>
                <tr…>
                    <td…><button id="btn1" onclick="buyStuff()">Add to Cart</button></td>
                </tr>
            </table>
            …
        </td>
        …

Link Text Using Color Alone

1.4.1 Use of Color : The links within the main content of the page are not visually evident for sighted people with certain vision disabilities. While the link text does meet the minimum 3 to 1 (3:1) contrast ratio with surrounding text (actual ratio is 3.16:1), there is no visual cue on focus.

User Groups Impacted

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

Markup

CSS:


a {
    color: var(--color-red);
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
    outline: 0;
}

Resolution

At a minimum, a visual cue on hover/focus should be added in the CSS for both mouse and keyboard users. Ideally, a visual indicator in addition to color would be included even when the links do not have focus, such as underlining or bolding the link text. You can change the style of the link and link focus indicator in the CSS if you prefer a different link and focus style than the default browser styles. For example: 


a {
    color: var(--color-red);
    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;
}

Missing alt Attributes for Decorative Images

1.1.1 Non-text Content : The decorative images located in the carousel are missing empty alt attributes. Omitting the alt attribute will force screen readers to announce the decorative images by their file name, which may not be understandable.

User Groups Impacted

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

Markup


    <img src="…/img/SymbolsOfNapoleanEmpire.jpg">

Resolution

Add an empty alt attribute to each decorative image element.


    <img alt="" src="…/img/SymbolsOfNapoleanEmpire.jpg">

Missing <iframe> Title

4.1.2 Name, Role, Value : The YouTube video in the carousel is embeded in an <iframe>, which is missing a title. Without a valid title, the screen reader will announce something like, “frame, YouTube video player unlabeled 0 button…”.

User Groups Impacted

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

Markup


<iframe src="https://www.youtube.com/embed/sAKkjD3nEv0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Resolution

Add a "title" attribute to the <iframe> that includes relevant text identifying the YouTube video.


<iframe src="https://www.youtube.com/embed/sAKkjD3nEv0" title="YouTube – Honey Bees Make Honey…and Bread?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Relationships of Items Undefined

1.3.1 Info and Relationships : In the “Shop Joyful Bees Honey” section, the relationship of the “Add to Cart” buttons and their related items is not defined, preventing screen reader users from understanding what will happen when each button is activated.

User Groups Impacted

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

Markup


<tr>
    <td><img alt="" src="…/img/HoneyBear-130x200.png"></td>
    <th style="border:0;">
        <div…id="item1">12 oz Honey Bear</div>
        <p>Price: $9.00</p>
    </th>
</tr>
<tr>
    <td…><p>Our 12 oz honey bear contains organic honey and is the perfect size to keep on the table for sweetening your tea.</p></td>
</tr>
<tr class="select-item">
    <td…><button id="btn1"…>Add to Cart</button></td>
</tr>

Resolution

Note that the “after” example was not coded as a table like the “before” example.

Add aria-describedby to each button to programatically group them with their related content.


<div>
    <img alt="" src="…/img/HoneyBear-130x200.png">
    <h3 id="item1">12 oz Honey Bear</h3>
    <p>Price: $9.00</p>
    <p…>Our 12 oz honey bear contains organic honey and is the perfect size to keep on the table for sweetening your tea.</p>
    <button … id="btn1" aria-describedby="item1"…><em class="fa-regular fa-cart-shopping"></em> Add to Cart</button>
</div>

Simple Text Styled to Look Like Headings

1.3.1 Info and Relationships : Throughout the home page, text is styled to look like headings. People with disabilities, such as screen reader users, often use headings to navigate web pages. Styling simple text to look like headings prevents these users from using headings for navigation and also for identifying how sections are grouped.

User Groups Impacted

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

Markup

Example:


<div class="heading2">Shop Joyful Bees Honey</div>

Resolution

Instead of styling the text to look like headings, use the correct level heading elements and style them they way you want them to look.

Unable to Bypass Blocks of Content

2.4.1 Bypass Blocks : No option is provided to allow users to easily skip blocks of content, such as navigation links and heading graphics, that are repeated throughout the website.

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
  • People with low vision who use screen magnification and do not use a screen reader
  • People with mobility disabilities who use keyboard only

Resolution

There are several different ways to meet 2.4.1 Bypass Blocks including:

  • Creating links to skip blocks of repeated material using one of the following techniques:
    • Adding a link at the top of each page that goes directly to the main content area.
    • Adding a link at the beginning of a block of repeated content to go to the end of the block.
    • Adding links at the top of the page to each area of the content.
  • Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:
    • Using ARIA landmarks to identify regions of a page.
    • Providing heading elements at the beginning of each section of content.
    • Using frame elements to group blocks of repeated material AND using the title attribute of the <iframe> element.
    • Using an expandable and collapsible menu to bypass block of content.

The other webpages in the inaccessible website meet 2.4.1 Bypass Blocks because headings are used to group blocks of content. While this is very helpful for screen reader users, it will not help people with mobility issues who use keyboard only or people with low vision who use screen magnification. One of the best ways to address this issue for these users is to add a link at the top of each page that goes directly to the main content area, which is what is used on the accessible website.

HTML:


<header>
    <div id="skip-link"><a href="#sale-code">Skip to Main Content</a></div>
    …
</header>
<section id="sale-code">
    …
        Don't miss our Raw Honey sale! Get 20% off with the code 20%OFF-RAW-HONEY
    …
</section>

CSS – Note that developers often hide skip links from sighted users, thinking that the links only benefit screen reader users. While skip links can help screen reader users, they have many other ways to easily navigate webpages. Skip links are most beneficial to sighted users and should always be visible. Some developers style skip links so that they are not visible until they receive keyboard focus. This will benefit keyboard only users but does not benefit people with low vision who use screen magnification and mostly use the mouse. The following CSS styles the "Skip to Main Content" link to be less obvious until it receives focus: 


#skip-link {
    position: absolute;
    top: 2px;
    left: 2px;
}

#skip-link a {
    text-decoration: none;
    padding: 0.15rem 0.25rem;
    color: var(--color-blue);
}

#skip-link a:hover, #skip-link a:focus {
    color: #ffffff;
    background: var(--color-red);
    outline: 0;
    border: 2px dotted #ffffff;
}

Unlabeled Buttons

4.1.2 Name, Role, Value : In the carousel, the “previous”/“next” buttons and the buttons used to select individual slides are not labeled.

User Groups Impacted

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

Markup

“Previous”/“Next” Buttons:


<!-- "Previous" Button -->
<button class="previous">
    <span class="fas fa-chevron-left" aria-hidden="true"></span>
</button>

<!-- "Next" Button -->
<button class="next">
    <span class="fas fa-chevron-right" aria-hidden="true"></span>
</button>

Buttons for Individual Slides:


<ul class="navigation">
    <li><button aria-current="true"></button></li>
    <li><button></button></li>
    <li><button></button></li>
    <li><button></button></li>
    <li><button></button></li>
    <li><button></button></li>
    <li><button></button></li>
    <li><button></button></li>
</ul>

Resolution

Adding visually hidden text after the Font Awesome code will resolve this issue. Note that we recommend adding aria-hidden="true" to the Font Awesome element as depending on how the element is used, some screen readers may announce the icon if aria-hidden="true" is omitted.

HTML:


<!-- "Previous" Button -->
<button class="previous">
    <span class="fas fa-chevron-left" aria-hidden="true"></span>
    <span class="hint">Previous slide</span>
</button>

<!-- Button for Individual Slide -->
<ul class="navigation">
    …
    <li><button><span class="hint">Go to slide 2</span></button></li>
    …
</ul>

CSS:


/* Technique from WebAIM, https://webaim.org/techniques/css/invisiblecontent/ */
.hint {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

Users Not Made Aware of Changes in Content

4.1.3 Status Messages : In the “Shop Joyful Bees Honey” section, the number of items in the shopping cart is not available to screen reader users unless the user navigates back to the cart icon and text just before the items for sale.

User Groups Impacted

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

Markup


<td class="cart"…>
    <em class="fa-regular fa-cart-shopping"></em> <span id="cart">0</span> <span>Items</span>
</td>

Resolution

Use WAI-ARIA role="status" to allow screen readers to announce the number of items in the cart each time an item is added. 


<div class="cart">
    <p role="status">
        <em class="fa-regular fa-cart-shopping"></em>
        <span id="cart">0</span> <span id="cart-info">Items…</span>
    </p>
</div>