Remove content from tables on VA Survivors Pension benefit rates page

[RLHecht]

Context from epic that previously housed this work:

This epic is for the work to ensure VA.gov is using tables properly on our pages so that the information is accessible to all users. There are many instances when a list should be used instead of a table. And when we do use tables, we need to ensure we have proper headings, which are needed for screen readers.

Josh Kim's notes from a 9/30/21 meeting where we discussed the different use cases for tables vs. lists:

We recommend providing guidance to editors to consider thinking from a mobile first layout before a desktop layout. Non-matrix tables with only one header type (either column or row) should be written as lists with headings. For example, the tables on survivor dlc rates should be lists. See the first screenshot for an example of headings. I used headingsmap to display the order. Matrix tables with both column and row headers should be written as tables. For example, the special monthly compensation rates tables should remain as tables as it's easier for screen reader users to parse through. They will first identify the row relevant to them, and then navigate right to determine the values. Additional notes:

Zebra stripes help users visually group rows that change into blocks as users rotate screens or otherwise change context. This may be helpful particularly to folks who use screen magnification tools. Headings on the special monthly compensation rates page should be given an accessibility review. Accordions may need to be listed as headings for them to be discoverable to screen reader users. They are also caption elements that look like headings, but aren't.

Issue Description

As part of our ongoing effort to remove unneeded tables from VA.gov for accessibility reasons, we need to rework the content on the VA Survivors Pension benefit rates page.

Once we take the content out of the current rates page, we should apply the same changes to the past rates pages in Drupal.

Tasks

• [ ] Rework content to remove from table
• [ ] Review (Laura)

Acceptance Criteria

• [ ] Content is ready for OCTO-DE review

[katherine-fung]

Just nothing that I'm doing some work on the "2022 VA pension rates for Veterans" page and have some questions that will be relevant here too.

Other ticket: https://app.zenhub.com/workspaces/vft-59c95ae5fda7577a9b3184f8/issues/department-of-veterans-affairs/va.gov-team/48370

[RLHecht]

Moving to backlog and will pull into future sprint.

[sara-amanda]

Future a11y Work

Please let us know, @strelichl if you need a recheck, otherwise, noting on here that the a11y review on this ticket was completed, per the original ticket's comments and recommendations have been made. ✅ It seems like this ticket's next stop is for the content team?

Background

As part of our ongoing effort to remove unneeded tables from VA.gov for accessibility reasons, we need to rework the content on the VA Survivors Pension benefit rates page.

Once we take the content out of the current rates page, we should apply the same changes to the past rates pages in Drupal.

Lists vs. Tables

There are many instances when a list should be used instead of a table. And when we do use tables, we need to ensure we have proper headings, which are needed for screen readers.

Josh Kim's notes from a 9/30/21 meeting where we discussed the different use cases for tables vs. lists

Original Feedback

@mutiaadhocteam - these are the original recommendations, if you would like to do a pass at this page. The ticket was opened back in October of 2022, so things may have changed since then. This ticket is in the icebox, so it is not a rush.

We recommend providing guidance to editors to consider thinking from a mobile first layout before a desktop layout.

• Non-matrix tables with only one header type (either column or row) should be written as lists with headings.
  • For example, the tables on survivor dlc rates should be lists. See the first screenshot for an example of headings. I used headingsmap to display the order.
• Matrix tables with both column and row headers should be written as tables.
  • For example, the special monthly compensation rates tables should remain as tables as it's easier for screen reader users to parse through. They will first identify the row relevant to them, and then navigate right to determine the values.

    Additional notes

• Zebra stripes help users visually group rows that change into blocks as users rotate screens or otherwise change context. This may be helpful particularly to folks who use screen magnification tools.
• Headings on the special monthly compensation rates page should be given an accessibility review. Accordions may need to be listed as headings for them to be discoverable to screen reader users. They are also caption elements that look like headings, but aren't.