[a11y Support & CAIA Content Support] <CPAP> Assess how to present list of several contact or apply options

[laurwill]

CAIA Assignees

• CAIA Team Member 1 - content
• CAIA Team Member 2 - a11y @coforma-jamie

Issue Description

On pages where we list several options for contacting VA or applying for a benefit, we sometimes use "Option 1" before each option. Other times we use headers without option numbers like "By phone."

We need to confirm which style is better for accessibility, document this guidance, and audit our pages to make this consistent.

---

Tasks

• [x] Determine preferred style for accessibility
• [x] Document this guidance
• [ ] Audit and update affected pages
• [ ] Copyedit and publish pages

Acceptance Criteria

• [ ] Style is consistent across our pages and guidance is documented

[laurwill]

Update: Danielle had a conversation with Brian re: accessibility and adding "Option 1, etc." on subheaders. He said it depends.

In cases where there are not a ton of options, the options are pretty clear, and there's not a ton of content under each subhead, we do not need the "Option 1, etc." (So "apply in any of these ways..." doesn't need it.)

In places with more complex headers or larger volumes of content, we do need "option 1."

Our next step will be to send Brian a few examples to make sure we understand the different cases and when to add "Option X" to these headers.

[sara-amanda]

@laurwill is this one @coforma-jamie can assist with?

[coforma-jamie]

Hi @laurwill, I should be able to help with this. If you have any examples, link them here and I can take a look.

[laurwill]

Thanks @coforma-jamie ! It will be great to get a consistent style documented for this :)

Here's an example of the "Option #" style:

• Order hearing aid batteries page

And here's an example of the style with no "Option #":

• How to file a disability claim

[coforma-jamie]

Hi @laurwill! Here's what I recommend:

• If the heading containing the subheadings tells you how many options there are, you don't need "Option X." How to file a disability claim is an example of this. It mentions that there are 3 options in the parent heading, so a user knows how many options to expect.
• If the heading containing the subheadings does NOT tell you how many options there are, use "Option X." Order hearing aid batteries page is an example. The parent heading doesn't indicate how many options there'll be, so having "Option 1" is a good indicator that there are multiple options, I should review all of them before making my decision.

I hope that makes some sense :)

Unrelated - How to file a disability claim has a content-related accessibility issue: there's no "Online" heading to go along with "By mail" etc., so someone navigating by heading wouldn't see that there's an "online" option to navigate to. I think this should be restructured:

• <h2> How do I file my claim?
  • <h3> Option 1: Online
  • <h3> Option 2: By mail
  • <h3> Option 3: In person
  • <h3> Option 4: With the help of a trained professional

[laurwill]

Thanks @coforma-jamie ! That makes lots of sense to me. And thanks for flagging that header issue on the disability page.

@strelichl , could you open a content ticket in the backlog to audit and adjust headers on pages that present multiple options for applying/filing/submitting? I think we have several pages with the same a11y defect Jamie noted here on the How to file a disability claim page — could you call that out as a specific item to look for and correct?

And @megzehn could you add this to the running list of style guide updates? We could update the "Section titles" page to note this.

Thanks all!

[megzehn]

Hi @coforma-jamie, I have a follow-up question on this.

If there are only 3 or fewer options would you still recommend this approach? Or is there some kind of cutoff number? I removed the "Options" on this CPAP page, because 3 didn't feel like a large number. But I'm curious to get your thoughts. Would we add Option 1 and Option 2 if there are only 2 options?

[coforma-jamie]

Hi @megzehn! Chatted with the other a11y folks, we all agree that if there's more than 1 option, the option language should be there. "Option 1: Mail," "Option 2: Phone" or similar.

This is because the idea is to make the assistive tech user aware that there's more than one option, and since the majority of those users navigate by heading (at least when using screen readers), we want to expose that in the heading. Even if there's only 2 options. :) (And if there's only 1 option, no need to label it!)

[megzehn]

Thanks, @coforma-jamie!

One more question, and then I'll leave you alone!

Since we have "You can order CPAP supplies online, by phone, or by mail." as the first line in the body text, do we still need the Option 1, Option 2, etc?

We're trying to figure out our pattern on this other page--where there are options within options--and want to find a clean solution. Is it still clear to screen readers if we list out the options in the body text? Or does it need to be header text?

CCing @bethpotts since this came up in our sync!

[coforma-jamie]

That's a really good question! I recommend putting it in the headings, even if it's in the body text too.

To explain: It's not that a screen reader doesn't read the body text; the issue is that on a lengthy web page, 68% of users navigate the page by heading. According to the 2021 WebAIM survey, only 8% of users read through the entire page (which is how they'd access that body text) to find content.

In short: if someone is actively trying to find something specific, like ways to apply for a service, they're more likely to use headings than any other method. It definitely can't hurt to have it in the body text like this - if someone IS reading the whole page, it'll prep them for what's coming later - but the headings are key :)

[megzehn]

Thank you, @coforma-jamie! This is helpful background info!

[megzehn]

Update: We had more conversation about this on Slack and decided to stick to the Option 1: Option 2: approach versus adding the number of options in a header. Thanks again @coforma-jamie and everyone for weighing in!

@coforma-jamie we do have one more related question for you (sorry they keep coming...). From an a11y perspective, is there any preference to include or remove verbs before the "Option"? Is it repetitive or helpful?

For example: Option 1: Online vs Option 1: Order online under a header How do I order CPAP supplies?

[coforma-jamie]

Speaking from the gut here, but since you already say "order" in the heading, and these are subheadings, I think it'd be clear that "online" is referring to "a way to order CPAP supplies," without repeating the word "order."

I don't think it would hurt to repeat. But you don't need to.

(In contrast, if these were all at the same heading level, you would need to, since there wouldn't be a point of reference!)

[megzehn]

That makes sense! Thanks again for the quick response, @coforma-jamie!

[sara-amanda]

@coforma-terry @strelichl this may be related to ticket #62924

[sara-amanda]

@coforma-jamie adding you as an assignee, based on work noted in ticket. Thank you!

cc: @coforma-terry @strelichl

[megzehn]

Update: We settled on a pattern, yay! Thanks everyone. The next step is figuring out where to best document this type of guidance for the future. I'll add this to our list of agenda items for style guide huddles.

[megzehn]

To summarize, here's where we landed:

In sections where we're listing multiple options for people to get to the same outcome, add "Option X" to the header. For example, if we're describing ways someone can apply for a benefit, we might have this structure:

[H2] How to apply for [benefit]

[H3] Option 1: Online [H3] Option 2: By mail [H3] Option 3: In person

@laurwill, I added this change to a draft pull request and I'd love your review when you have a minute. I'll bring it to Danielle and Beth during our next syncs.

[megzehn]

Update: This documentation is live.

Next step is auditing and updating the relevant pages. This will be a good task for Sara when she's in Drupal and Github. We can hold on this until then.

[megzehn]

Hi @saratorres2! When you get a chance, could you start documenting places where we need to include this new "Option X" pattern? We can start with our "How to apply" pages.

Thanks so much for your help!

[saratorres2]

@megzehn The following pages will need to be reviewed & changed:

1. https://www.va.gov/health-care/how-to-apply/
2. https://www.va.gov/disability/how-to-file-claim/
3. https://www.va.gov/education/how-to-apply/
4. https://www.va.gov/careers-employment/vocational-rehabilitation/how-to-apply/
5. https://www.va.gov/pension/how-to-apply/
6. https://www.va.gov/housing-assistance/home-loans/how-to-request-coe/
7. https://www.va.gov/records/get-military-service-records/

I'm capturing my notes on the current state of these pages in a doc for now.

[megzehn]

I updated the (How to file a claim) page. We're going to leave the first one alone (How to apply) since it has a react widget in it.

@saratorres2 do you want to work on the remaining ones as you have time (numbers 3-7 in your comment above)?

After you update them, just leave in drafts for now. l can review and run through the pre-publish checklist before publishing. And if you come across any other pages in this list with a react widget, just make a note and we'll come back to that page later.

Thank you!!

[megzehn]

Update: A few more have either already been updated or also have react widgets, so I'm going to move over to a checklist for easier tracking.

• [X] https://www.va.gov/health-care/how-to-apply/ (leaving as is for now, because it has a react widget)
• [X] https://www.va.gov/disability/how-to-file-claim/
• [X] https://www.va.gov/education/how-to-apply/ (leaving as is for now, because it has a react widget)
• [x] https://www.va.gov/careers-employment/vocational-rehabilitation/how-to-apply/ (adjusted in drafts, just needs final review)
• [X] https://www.va.gov/pension/how-to-apply/
• [x] https://www.va.gov/housing-assistance/home-loans/how-to-request-coe/ (adjusted in drafts, just needs final review)
• [X] https://www.va.gov/records/get-military-service-records/

@saratorres2 these 2 remaining ones are ready for final review and publish!

[saratorres2]

@megzehn I've copy edited and published changes for: How to apply for Veteran Readiness and Employment How to request a VA home loan Certificate of Eligibility (COE) LMK if any other pages on the initial list need review!

[megzehn]

Great, thanks @saratorres2! Moving to validate. I'll close after we add it to the capacity tracker.