Global Accessibility Issues

The issues identified on this page are found on all webpages within 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. Dialog Not a True Modal
  2. Focus Not Visible for Keyboard-Only Users
  3. Font Selection Issues
  4. Horizontal Overflow Not Available At 400%
  5. Insufficient Color Contrast – Text
  6. Missing alt Attribute for Decorative Image
  7. Missing Alternative Text for Image Buttons & Links
  8. Missing DOCTYPE
  9. Missing Document Title
  10. Missing lang Attribute

Dialog Not a True Modal

4.1.2 Name, Role, Value : The “Sign In” dialog is not a true modal. The dialog is announced as a modal by screen readers, but when the dialog is opened, the user is able to navigate from the dialog to the browser tabs, URL and browser toolbars. Note that the user cannot navigate to items within the webpage.

Allowing the user to navigate outside of the dialog may cause confusion, particualrly for screen reader users who may think that the browser tabs, URL and browser toolbars are part of the dialog.

User Groups Impacted

  • People with cognitive disabilities who use a keyboard
  • People with mobility disabilities who use a keyboard
  • People with low vision or who are blind and use a screen reader

Resolution

Use the “Sign In” dialog JavaScript, dialog.js, used in the accessible version of the website.

Focus Not Visible for Keyboard-Only Users

2.4.7 Focus Visible : The focus indicator has been removed from all focusable items within the website.

Many people with disabilities use a keyboard only to navigate webpages. Removing the focus indicator from focusable elements will prevent keyboard users from being able to identify where they are within each webpage. They will also have a difficult time finding any links and other focusable elements within each webpage.

User Groups Impacted

  • People with cognitive disabilities who use a keyboard only
  • People with mobility disabilities who use a keyboard only
  • People with low vision who do not use a screen reader and use a keyboard

Markup

CSS:


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

Resolution

Remove "outline: 0;" from the CSS in the beforeGeneral.css file. We recommend providing the same styling for both mouse and keyboard focus, as this will cause less confusion for sighted people with disabilities who use both the mouse and the keyboard to navigate webpages. You can change the style of the focus indicator in the CSS if you prefer a different focus style than the default browser style. For example:


a:hover, a:focus {
    text-decoration: none;
    outline: dotted 3px var(--color-blue);
    outline-offset: 0.188rem;
}

Font Selection Issues

Google fonts with lots of flourishes are used that may be difficult to read, especially for people with low vision and those with certain cognitive disabilities.

  • Allison Sample Text – Headings use “Allison*#8221; font, which contains exagerated flourishes.
  • Square Peg Sample Text – Body text is using “Square Peg*#8221; font. While “Square Peg” font does not contain flourishes, the font is thin and the letters tend to run together.

While using fonts with lots of flourishes or fonts that are thin and tend to run together is not a WCAG violation, using these types of fonts may actually prevent certain people with disabilities – specifically people with cognitive disabilities and people with low vision – from being able to read and understand the text.

User Groups Impacted

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

Resolution

Select font families that either do not have flourishes or have minor flourishes. In addition, avoiding fonts that are cursive is the safest, as cursive fonts can be especially problematic for many people with limited vision and cognitive disabilities. Another thing to keep in mind is that many younger people were never taught how to read and write in cursive.

Horizontal Overflow Not Available At 400%

1.4.10 Reflow : When text is magnified to 400%, content is cut off in both the header and the footer.

When viewing the website in a 1280px (320 CSS pixels) width by 1024px (256 CSS pixels) height viewport at 400% zoom, the header and footer links are truncated and the user cannot scroll to the first or last link in each section. People with low vision who must enlarge content by 400% or greater may not be able to access these links – they may not even know that the links exist.

User Groups Impacted

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

Markup


body {
    …
    overflow-x: hidden;
}

Resolution

Remove "overflow-x: hidden;" from the body element in the beforeGeneral.css file.

Insufficient Color Contrast – Text

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

  • 2.44:1 to 2.86:1 Contrast Ratio: Blue (#7d9bc3 ) text on honeycomb background (#fdef94 to #ffffff)
  • 2.5:1 Contrast Ratio: Blue (#7d9bc3 ) text/background with yellow (#fff296 ) text/background
  • 2.59:1 Contrast Ratio: Gray (#969696 ) text on yellow (#fff296 ) background
  • 2.86:1 Contrast Ratio: Blue (#7d9bc3 ) text/background with white (#ffffff) text/background
  • 2.96:1 Contrast Ratio: Gray (#969696 ) text on white (#ffffff) 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.5:1 Contrast Ratio: Darkening the blue text to #4d6e97 ( ) will allow it to meet the minimum required contrast ratio with the darkest color in the honeycomb background ( #fdef94 ).

  • 4.61:1 Contrast Ratio: Darkening the blue text/background to #4d6e97 will also allow it to meet the minimum required contrast ratio with the yellow (#fff296) text/background.

    Note that the yellow background was lightened to #ffffdc ( ) in the accessible website.

  • 5.26:1 Contrast Ratio: Darkening the blue text/background to #4d6e97 will also allow it to meet the minimum required contrast ratio with the white (#ffffff) text/background.

  • 4.51:1 Contrast Ratio: Darkening the gray text to #757575 ( ) will allow it to meet the minimum required contrast ratio with the lightened yellow (#ffffdc) background.

    Note that the gray text is darkened to #232424 ( ) in the accessible website to address contrast issues with link text and surrounding text.

  • 4.6:1 Contrast Ratio: Darkening the gray text to #757575 will also allow it to meet the minimum required contrast ratio with the white (#ffffff) text/background.

Missing alt Attribute for Decorative Image

1.1.1 Non-text Content : The decorative bee image in the footer 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/JoyfulBeeHoneyIconTransparent-100x85.png">

Resolution

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


<img alt="" src="…/img/JoyfulBeeHoneyIconTransparent-100x85.png">

Missing Alternative Text for Image Buttons & Links

1.1.1 Non-text Content : “Font Awesome” icons are used as the images for the “Sign In” button and social media links, but are missing alternative text:

  • Sign In button
  • Facebook link
  • Twitter link
  • LinkedIn link

User Groups Impacted

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

Markup


<!-- "Sign In" Button -->
<button type="button" …>
    <i class="fa-solid fa-user-shield"></i>
<button>

<!-- Social Media Links -->
<ul class="social-links">
    <li>
        <a href="https://www.facebook.com/…">
            <i class="fa-brands fa-square-facebook"></i>
        </a>
    </li>
    <li>
        <a href="https://twitter.com/…">
            <i class="fa-brands fa-square-twitter"></i>
        </a>
    </li>
    <li>
        <a href="https://www.linkedin.com/company/…">
            <i class="fa-brands fa-linkedin"></i>
        </a>
    </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:


<-- "Sign In" Button -->
<button type="button" …>
    <em class="fa-solid fa-user-shield" aria-hidden="true"></em>
    <span class="hint">Sign In</span>
<button>

<-- Social Media Links -->
<ul class="social-links">
    <li>
        <a href="https://www.facebook.com/…">
            <i class="fa-brands fa-square-facebook" aria-hidden="true"></i>
            <span class="hint">Visit us on Facebook</span>
        </a>
    </li>
    <li>
        <a href="https://twitter.com/…">
            <i class="fa-brands fa-square-twitter" aria-hidden="true"></i>
            <span class="hint">Visit us on Twitter</span>
        </a>
    </li>
    <li<
        <a href="https://www.linkedin.com/company/…/">
            <i class="fa-brands fa-linkedin" aria-hidden="true"></i>
            <span class="hint">Visit us on LinkedIn</span>
        </a>
    </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;
}

Missing DOCTYPE

4.1.1 Parsing : The HTML is missing a valid DOCTYPE.

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications. Omitting a DOCTYPE may cause issues for people using assistive technology.

User Groups Impacted

All people using assistive technology may be impacted, but specifically:

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

Markup


<html>

Resolution

Add <!DOCTYPE html> to the first line in your HTML.


<!DOCTYPE html>
<html>

Missing Document Title

2.4.2 Page Titled : The HTML for each webpage is missing a document title.

User Groups Impacted

Including a document title benefits all people as it allows them quickly and easily identify whether the information contained in the webpage is relevant to their needs. It also make navigating browser tabs easier as the document title for each webpage is displayed in the webpage tab. People with disabilities that may be impacted the most are:

  • People with certain cognitive, language and learning disabilities who use text-to-speech software
  • People with mobility disabilities who use speech-recognition software
  • People with low vision or who are blind and use a screen reader

Markup


<head>
    …
    <meta charset="utf-8">
    …
</head>

Resolution

Add a document title to the <head> of the HTML:


<head>
    …
    <meta charset="utf-8">
    …
    <title>Joyful Bees Honey</title>
</head>

Missing lang Attribute

3.1.1 Language of Page : The html is missing a &8220;lang” attribute, preventing the default human language of each webpage from being programmatically determined.

Omitting the lang attribute from the <html> element may prevent assistive technologies and user agents from rendering text accurately. Using a valid lang attribute can help screen readers load the correct pronunciation rules and help browsers display characters and scripts correctly. Media players can also show captions correctly when accurate lang attributes are used.

User Groups Impacted

  • People with low vision or who are blind and use a screen reader
  • People who find it difficult to read written material with fluency and accuracy
  • People with certain cognitive, language and learning disabilities who use text-to-speech software

Markup


<html>

Resolution

Include the correct lang attribute in the html tag. For example:


<html lang="en">