hi_governor_davidP01.jpg

VA.gov Identity | Unified Terms of Use

Observer meta-research | Terms of use screen reader | Taxonomy card sort | Experience research | Eye tracking research

VA.gov Identity | Unified terms of use, screen reader prototype

Objective: Create a single, unified, terms of use page across all VA digital services. I specifically including screen reader participants from the start

My Role: I led this research as the lead UX researcher on a multidiscipline VA.gov identity team. I had two other researcher on me team that assisted on reviewing my research planning work, moderating sessions, note-taking during sessions, and analyzing data. Engineers on my team focused on the technical aspects of implementing, while our VA product owner focused on the internal political elements. Finally, I also utilized the expertise of accessibility experts at VA when planning and holding sessions with screen reader users.


Time for an update

The Office of General Council had been discussing updating the terms of use on VA’s digital properties. VA has several digital properties including VA.gov, MHV, MVH, mobile app that each had their own terms of use check, meaning if you frequent more than one of these, you’d have to agree to the same terms of use multiple times. My team, including our VA product owner, was eager to make this experience better. We successfully pushed all stakeholders to get on board with a unified terms of use. Now we needed to make it successful.

Accessibility research first

Terms of use is a potentially blocking page - each veteran must get past it before using their VA benefits. I decided this was important enough to not block anyone that we needed to start accessibility research with our earliest iteration prototype, well before our front end would have a coded page.

I asked the accessibility team at VA to review my research. They especially helped me on the screen reader versions of the conversation guide and prototype. Since Figma offers some screen reader functionality, and since I was the first VA researcher using this functionality, I agreed to present what I learned about it.

terms of use prototype showing screen reader text

Figma + screen readers

I found several trade-offs. For example, one way to have a screen reader read off text as a header in a Figma prototype is to include “heading level [#]” as text content before the text of the header. However, this makes “heading level [#]” visible in the prototype, and not everyone who uses a screen reader is fully blind or even partially blind.

Another way to have screen readers read off text as a header in Figma is to use an image file with the title of heading. This makes it look fairly seamless at the standard zoom level, but the trade-off is that the screen reader will first announce it as a heading and then as an image, as seen in the screen shot of the screen reader transcript, to the left.

Practice makes perfect?

I practiced going through our team’s design with a screen reader to make sure everything worked as the best as possible. Then I asked someone from the VA accessibility team to be a practice screen reader participant. Practicing both the conversation guide and the prototype beforehand, allowed me to iterate further on both before working with real participants.

It wasn’t perfect, but we found that screen reader participants we talked with were understanding with the limitations of the prototype. And we found some valuable insights to help our team iterate the design.