Say Hello Accessibility Issues

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

Index of Accessibility Issues

  1. Insufficient Color Contrast – Button Text
  2. Missing alt Attribute for Decorative Image
  3. Unable to Bypass Blocks of Content
  4. Unlabeled Form Fields
  5. Form Field Errors Not Identified

Insufficient Color Contrast – Button Text

1.4.3 Contrast Minimum : There is insufficient color contrast between the “Submit” button text and its background in the “"Say Hello” form.

  • 2.86:1 Contrast Ratio: White (#ffffff) text on blue (#7d9bc3 ) 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

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

Missing alt Attribute for Decorative Image

1.1.1 Non-text Content : The decorative bee image by the “Say Hello” form field is missing an empty “alt” attribute.

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

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.

Markup


<img src="…/img/HelloHoneyTransparent-268x400.png">

Resolution

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


<img alt="" src="…/img/HelloHoneyTransparent-268x400.png">

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="#main-content">Skip to Main Content</a></div>
    …
</header>
…
<h1 id="main-content">Say Hello!</h1>

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 Form Fields

1.3.1 Info and Relationships : The form labels are not programmatically associated with their related inputs. While visually it appears that the form fields have associated labels, the “labels” before each form field are actually simple text.

User Groups Impacted

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

When labels are not programmatically associated with their related field, people using assistive technology, particularly screen reader and Braille display users, may not be able to identify the purpose of each field.

People with mobility disabilities who use a mouse may also be impacted. Correctly associating labels to fields will allow them the option of clicking on the label to select the form field. This is especially important for people lacking fine motor control, as smaller form elements such as radio buttons or check boxes may be difficult for them to select.

People with mobility disabilities who use speech-recognition software may also be impacted. They will typically announce the label to select the form field (e.g., “click first name”) and not programmatically associating labels with the fields will force the users to use what is called “mouse grid”, where they start by selecting a larger area of the page and drill down to the desired form field.

Markup


<form id="contactForm" …>
    <div id="contact-us">
        <div>
            <div class="label">First Name</div>
            <input  type="text" name="firstName" required>
        </div>
        <div>
            <div class="label">Last Name</div>
            <input type="text" name="lastName" required>
        </div>
        <div>
            <div class="label">E-mail</div>
            <input type="text" name="contactEmail" required>
        </div>
        <div>
            <div class="label">Your Message</div>
            <textarea name="yourMessage" required></textarea>
        </div>
        <div …>
            <button type="submit">Send Your Message</button>
        </div>
    </div>
</form>

Resolution

Code the text labels as HTML labels (<label>). Then provide a unique ID for each input and add a 𔄙for” attribute to the label element that contains the same text as the ID in the related input element. For example: 


<form id="contactForm" …>
    <div id="contact-us">
        <div>
            <label for="firstName">First Name<label>
            <input type="text" id="firstName" name="firstName" required>
        </div>
        <div>
            <label for="lastName">Last Name<label>
            <input type="text" id="lastName" name="lastName" required>
        </div>
        <div>
            <label for="contactEmail">E-mail<label>
            <input type="email" id="contactEmail" name="contactEmail" required>
        </div>
        <div>
            <label for="yourMessage">Your Message<label>
            <textarea id="yourMessage" name="yourMessage" required></textarea>
        </div>
        <div …>
            <button type="submit">Send Your Message</button>
        </div>
    </div>
</form>

Form Field Errors Not Identified

3.3.1 Error Identification , 3.3.3 Error Suggestion : While the form fields are coded as required using HTML, the error message displayed for each field when left empty is simply “Please fill out this field”. In addition, there is no visual indication that all fields are required.

User Groups Impacted

All users are impacted, but particularly:

  • People who are deaf-blind and use a Braille display
  • People with cognitive disabilities who have difficulty filling in form fields
  • 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

Not providing clear error messages may prevent people with certain disabilities from filling out forms successfully and may prevent them from understanding the nature of the input error and how to correct it.

Markup

Note that the following markup is missing programmatically associated labels, which is identified in the Unlabeled Form Fields section on this page. 


<form id="contactForm" …>
    <div id="contact-us">
        <div>
            <div class="label">First Name</div>
            <input  type="text" name="firstName" required>
        </div>
        <div>
            <div class="label">Last Name</div>
            <input type="text" name="lastName" required>
        </div>
        <div>
            <div class="label">E-mail</div>
            <input type="text" name="contactEmail" required>
        </div>
        <div>
            <div class="label">Your Message</div>
            <textarea name="yourMessage" required></textarea>
        </div>
        <div …>
            <button type="submit">Send Your Message</button>
        </div>
    </div>
</form>

Resolution

Use JavaScript to customize error messages for each form field. There are many ways that this can be done, but a simple example would be to add javascript validating each entry into the input field elements. In addition, provide a visual indication that all fields are required. For example: 


<form id="contactForm" …>
    <p>(All fields are required.)</p>
    …
    <label for="firstName">First Name</label>
    <input  type="text" id="firstName" name="firstName" required  aria-required="true">
    …
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName" required aria-required="true">
    …
    <label for="contactEmail">E-mail</label>
    <input type="email" id="contactEmail" name="contactEmail" required aria-required="true">
    …
    <label for="comments">Your Message</label>
    <textarea  id="comments" name="comments" required aria-required="true"></textarea>
    …
    <button type="submit">Send Your Message</button>
    …
</form>

The JavaScript code used to validate the form on the “After Hello” page can be found in the jbh.js file. Look for the “validateContactForm” function. This is one example of how form validation can be completed.

Note: The “aria-required” attribute informs assistive technologies about required controls so that they are appropriately announced to the users (as opposed to validating the input). Most current web browsers automatically set its value to true when the HTML5 required attribute is present. In our example, aria-required is provided redundantly to support web browsers that don’t communicate the required attribute to assistive technology.

Important Note: In addition to using client-side validation, user-submitted data should also always be verified using server-side validation. Otherwise, a browser with JavaScript disabled or a hacker trying to compromise your site can easily by-pass client-side validation.