search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
283 stars 204 forks source link

508-defect-2 [SCREENREADER, SEMANTIC MARKUP]: Document SHOULD not have more than one contentinfo landmark #8558

Closed jenstrickland closed 4 years ago

jenstrickland commented 4 years ago

508-defect-2

Feedback framework

Description

This is related to, and will address issue #8556. The markup for the Need Help? section uses a <footer> element which is a contentinfo landmark. A page should not contain more than one instance of the contentinfo landmark.

Details

The ARIA specification states that the landmarks role="banner", role="main", and role="contentinfo" are meant to be used only once per page. Other ARIA landmarks can be used multiple times. Interestingly, the HMTL5 specification allows multiple instances of the equivalent landmarks: header, main, and footer. The official restriction is only on ARIA landmarks. Even so, it is appropriate in most web designs to have only one each of these landmarks, whether they are specified using ARIA or HTML5.

Why it Matters

One of the main purposes of landmarks is to allow blind users to quickly find and navigate to the appropriate landmark, so you should keep the total number of landmarks relatively low. If you don't, screen reader users will have to sort through too much extra information to find what they're looking for.

JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web page using ARIA landmarks. Landmarks provide a more elegant solution to the problem of providing a way for users to skip to the main content of the web page. There is no visible alteration to the web design, making it unobtrusive and invisible. Of course, the fact that this technique is invisible is fine for blind screen reader users, but not so fine for sighted keyboard users or screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA landmarks cannot yet replace the old-fashioned "skip navigation" links. Browsers still do not have a built-in way to notify users that HTML 5 regions or ARIA landmarks are present. Screen reader users are the only ones who can take advantage of them. There is a Firefox ARIA landmark extension opens in a new window available, which adds the ability to navigate by landmarks in Firefox, but this is not a native feature of the browser.

Point of Contact

VFS Point of Contact: Jennifer

Acceptance Criteria

As a screen reader user, I want to navigate the content by landmarks so I may skip to areas of interest to me.

Environment

Steps to Recreate

  1. Enter https://staging.va.gov/caregivers in browser
  2. By screen reader
    1. Start screenreading device listed in Environment
    2. Navigate the page by landmarks
    3. Verify that there are two contentinfo landmarks
  3. By devtools
    1. Start developer tools
    2. Run an axe or axe-coconut browser scan
    3. Verify an issue "Document must not have more than one contentinfo landmark"

Possible Fixes

Current code

  <footer class="need-help-footer row vads-u-padding-x--1p5">
    <div style="max-width: 600px;">
      <h4>Need Help?</h4>
      <hr>
      <p>You can call the VA Caregiver Support Line at <a href="tel:18552603274">855-260-3274</a>. We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.</p>
      <p>You can also call our main VA information line at <a href="tel:18772228387">877-222-8387</a>, or contact your local Caregiver Support Coordinator.</p>
      <span><a target="_blank" rel="noopener noreferrer" href="https://www.caregiver.va.gov/support/New_CSC_Page.asp">Use our online Caregiver Support Coordinator search tool</a></span>
      <p>If this form isn't working right for you, please call us at at <a href="tel:18555747286">1-855-574-7286</a> <span>If you have hearing loss, call TTY: 711</span></p>
    </div>
  </footer>

The component that should be used here is:

  <div class="usa-width-two-thirds medium-8 columns">
    <div class="help-footer-box">
      <h2 class="help-heading">Need help?</h2>
      <div>
        <div>
          <p class="help-talk">
            For help filling out this form, or if the form isn’t working right, please <span>call VA Benefits and Services at <a href="tel:18008271000">800-827-1000</a>.<br> If you have hearing loss, call TTY: 711.</span>
          </p>
        </div>
      </div>
    </div>
  </div>

WCAG or Vendor Guidance (optional)

jonathanjnelson commented 4 years ago

Addressed in ticket

jenstrickland commented 4 years ago

The Need Help? component styling and code is inconsistent with the component used elsewhere. Please see the fix noted above in Possible Fixes.

This is the code that I see in the work today:

<h2>Need help?</h2>
<hr>
<p>You can call the VA Caregiver Support Line at<a href="tel:18552603274">855-260-3274</a>. We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.</p>
<p>You can also call our main VA information line at<a href="tel:18772228387">877-222-8387</a>, or contact your local Caregiver Support Coordinator.</p><a href="https://www.caregiver.va.gov/support/New_CSC_Page.asp">Use our online Caregiver Support Coordinator search tool</a>
<p>If this form isn't working right for you, please call us at at<a href="tel:18555747286">855-574-7286</a>. If you have hearing loss, call TTY: 711.</p>
LinnJS commented 4 years ago

@jenstrickland This one is ready for validation whenever you get a moment. Removed the custom footer we had with the VSP FormFooter component. Removed the landmark and make styling more consistent.

jenstrickland commented 4 years ago

Validated! 🎉