508-defect-3 [KEYBOARD]: VAOS - Content not accessible with keyboard when navigating forward, only backward

[noahgelman]

508-defect-3

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Noah Gelman

User Story or Problem Statement

"Not seeing the type of care you need?" heading and related content box is not reachable when navigating forward by keyboard, only when navigating backwards.

https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/new-appointment and https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/new-appointment/clinics

Details

Acceptance Criteria

• [ ] Add tabindex="0" the first div containing content following the radio group.

Environment

Steps to Recreate

Proposed Solution (if known)

WCAG or Vendor Guidance (optional)

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html

Screenshots or Trace Logs

[jbalboni]

Hi @noahgelman, can you help me understand this issue better? My understanding is that headings should not be in the tab order unless we need to set focus to them, they can be scanned by specifically navigating by headings in different readers.

Additionally, this alert box is defined by the AlertBox component in the design system, and if we need to add a tabindex of 0 to headings in these alerts, I believe the design system team would need to evaluate how to allow this.

[noahgelman]

@jbalboni You are correct. the tabindex should be on the div containing the first text node after the radio group, not necessarily on the text node itself

[jbalboni]

@noahgelman That's still putting a non-interactive element in the tab order, which I believe is something we are generally not supposed to do?

Is the rule/pattern here that content immediately after a form (or presumably in between form elements, if it's not associated with a form element in some other way) should be in the tab order?

[laurenernest]

@noahgelman could you provide clarification based on the questions above?

[noahgelman]

@jbalboni You are correct. It is putting a non-interactive element in tab order. But without it, it would be impossible for a blind user to navigate the content after the radio group. Blind users use the arrow keys to read sections of content with a screen reader. Users also use arrow keys to navigate a radio group. They need to be able to tab out of the radio group, but not be sent further down the page without skipping content so in this case it is justfied.