Current

Expected

How to fix:

Comment the line for the outline property.

[contentEditable=true]:focus,[href]:focus,[tabindex]:focus,button:not([disabled]):focus,iframe:focus,input:not([disabled]):focus,select:not([disabled]):focus,textarea:not([disabled]):focus {
    /* outline:.1rem solid rgba(176,217,222,.4941176471); */
    outline-offset: 0
}

.upload-description {
    font-size: 14px;
    color: #757575;
    line-height: 21px
}

<p class="upload-description">Please limit file size to to <strong>&lt;25MB</strong>. If your attachment is larger, make a note in the field above and we’ll reach out to you for a zip file</p>

Recommended fix

Change the .upload-description color property from #757575 to #555555

Search field is not submitting on Enter keystroke.

Skip to main is not displaying on keyboard-only navigation.

On most pages, keyboard and screen reader users must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities.

The idea is to provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content area.

USWDS example

Issue

<svg> elements with an img role must have an alternative text (svg-img-alt)

Target application

Home | Civil Rights Data Collection

Element path

svg[data-fa-pseudo-element="::after"]

Snippet

<svg data-fa-pseudo-element="::after" data-prefix="fas" data-icon="arrow-up-right-from-square" class="svg-inline--fa fa-arrow-up-right-from-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">

Environment

Chrome version 123.0.0.0
This accessibility issue was found using Accessibility Insights for Web 2.41.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Issue

Form elements must have labels (label)

Target application

Home | Civil Rights Data Collection

Element path

#extended-search-field-small

Snippet

<input class="usa-input border-0" id="extended-search-field-small" type="search" name="combine">

Environment

Chrome version 123.0.0.0
This accessibility issue was found using Accessibility Insights for Web 2.41.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Remove empty heading under Partner Support Center heading:

<h4 class="font-sans-lg is-semibold margin-0">
      
    </h4>

Links on hover don't have enough color contrast on dark background

SC 1.4.3: Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text - Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental - Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes - Text that is part of a logo or brand name has no contrast requirement.

NOTE: Even though this is part of the logo, it is still perceived as a text link by the low-vision user.

How to fix:

Change color links to #008bef for text that are on dark background

.usa-navbar a:hover {
    color: #008bef;
}

Before:

After:

add attribute alt="external link"

<svg data-fa-pseudo-element="::after" data-prefix="fas" data-icon="arrow-up-right-from-square" class="svg-inline--fa fa-arrow-up-right-from-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"></path></svg>

SC 2.4.11

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2px thick perimeter of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

How to fix

Comment the following CSS line:
/* outline: .1rem solid rgba(176, 217, 222, .4941176471);

The result should be as the image below:

The main landmark must contain all of the page's primary content.

How to fix:
Move sections into main tag

Navigation for screen-reader and keyboard only users often depends on focus order. Since disabled fields are removed from the focus order, they can't be navigated to using keyboard shortcuts, which are a primary mode of navigation for many AT users.

Here is how to make text inputs read-only, ensuring users can't change the content but still allowing the inputs to be recognized by assistive technologies.

• Add readonly attribute in the form element – The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.
• Add (Read only) to the label – Inform the user about the "read-only" state applied.
• Add aria-readonly="true" – Inform the assistive technology about the "read-only" state applied.
• Add a different background – Add a utility style class="usa-input bg-base-lightest" to make the read-only input different from the editable state.

Code fix example for City field

<label for="edit-city" class="usa-label control-label">City (Read only)</label>
<input 
    autocomplete="" 
    data-drupal-selector="edit-city" 
    type="text" 
    id="edit-city" 
    name="city" 
    value="" 
    size="60" 
    maxlength="30" 
    placeholder="City" 
    class="form-text usa-input bg-base-lightest" 
    aria-readonly="true"
    readonly >

The function of a heading is to label a section of content. Headings should not be used as a convenient way to style other text.

Assistive technologies use markup tags to help users navigate pages and find content more quickly. Screen readers recognize coded headings, and can announce the heading along with its level, or provide another audible cue like a beep. Other assistive technologies can change the visual display of a page, using properly coded headings to display an outline or alternate view.

For more information about how to make headings accessible, see Techniques for WCAG 2.0 - H42: Using h1 - h6 to identify headings.

The following are my recommendations for assigning proper heading structure to the templates:

Home

Resources (Recommended layout)

Resources (Current)

Details

Contacts

2.5.3 Label in Name

Reference:
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html

There's no need to use aria-label and title in the links. Ideally, you should wrap the entire logo (emblem + text) with the a single link, instead of three links taking to the same place.

Here's my recommendation, if you can implement it in Drupal:

<div class="usa-logo__text has-flex">
  <a class="is-clickable margin-right-05" href="/">  
    <div class="ed-seal-container margin-right-05">
      <img src="/themes/custom/civil_rights/ed-seal.svg" width="57" class="logo-img margin-right-05" alt="U.S. Department of Education Seal">
    </div>
    <div class="has-flex flex-column flex-justify-center">
      <div class="is-clickable font-sans-3xs text-base-lightest text-uppercase is-hidden-touch text-normal">
        Civil Rights Data Collection
      </div>
      <div class="margin-bottom-1 font-sans-lg is-hidden-touch text-base-lightest text-bold">
        Data Submission Resource Center
      </div>
    </div>
  </a>     
</div>