2024_11: DEV & TEST dynamic decision dashboard wireframe & alt text for 508 compliance

[ljmoody]

AC:

• [x] missing items are highlighted in yellow, identified by Tejas' team 6/28/2024: (DEV has already implemented the complete tab order on the sim page of the model)
• [x] missing items are added to the 508 wireframe
• [ ] DEV incorporates alt text/audio description/descriptive narration for missing items
• [ ] tab order is tested and matches the tag # and correct description
• [ ] all DDD elements are identified, tagged, have alt text/audio description/descriptive narration and corresponding visual
• [ ] all feedback to DEV is addressed and/or incorporated

[ljmoody]

@tejaspesquare, I added new YELLOW tags to your screenshot to identify and order the missing elements. Please note:

• I added number 29, an additional "i" icon not previously tagged.
• An additional screenshot of Team Flow (not in your screenshot, but likely needs additional alt text)

YELLOW Tag #	Alt Text / Audio Description / Descriptive Narration
1	Experiment window caret. Click to contract and expand the window.
2	Team Data window caret. Click to contract and expand the window.
3	"i" icon. Click for a pop-up with more information about the labeled feature.
4	"i" icon. Click for a pop-up with more information about the labeled feature.
5	"i" icon. Click for a pop-up with more information about the labeled feature.
6	"i" icon. Click for a pop-up with more information about the labeled feature.
7	Care Coordination services button. Click to see stock values for Care Coordination.
8	Medication Management services button. Click to see stock values for Medication Management.
9	Psychotherapy services button. Click to see stock values for Psychotherapy.
10	Evidence-based Psychotherapy services button. Click to see stock values for Evidence-based Psychotherapy.
11	Adjunctive services button. Click to see stock values for Adjunctive.
12	Group Therapy services button. Click to see stock values for Group Therapy.
13	"i" icon. Click for a pop-up with more information about the labeled feature.
14	"i" icon. Click for a pop-up with more information about the labeled feature.
15	"i" icon. Click for a pop-up with more information about the labeled feature.
16	"i" icon. Click for a pop-up with more information about the labeled feature.
17	Depression meds needed radio button. Click to see stock values for Depression.
18	Opioid Use Disorder meds needed radio button. Click to see stock values for Opioid Use Disorder.
19	Other meds needed radio button. Click to see stock values for Other.
20	"i" icon. Click for a pop-up with more information about the labeled feature.
21	"i" icon. Click for a pop-up with more information about the labeled feature.
22	"i" icon. Click for a pop-up with more information about the labeled feature.
23	"i" icon. Click for a pop-up with more information about the labeled feature.
24	"i" icon. Click for a pop-up with more information about the labeled feature.
25	"i" icon. Click for a pop-up with more information about the labeled feature.
26	"i" icon. Click for a pop-up with more information about the labeled feature.
27	"i" icon. Click for a pop-up with more information about the labeled feature.
28	"i" icon. Click for a pop-up with more information about the labeled feature.
29	"i" icon. Click for a pop-up with more information about the labeled feature.
30	Specialty Mental Health setting radio button. Click to see stock values for Specialty Mental Health.
31	Primary Care/Primary Care Mental Health Integration setting radio button. Click to see stock values for Primary Care/Primary Care Mental Health.
32	"i" icon. Click for a pop-up with more information about the labeled feature.
33	"i" icon. Click for a pop-up with more information about the labeled feature.
34	"i" icon. Click for a pop-up with more information about the labeled feature.
35	"i" icon. Click for a pop-up with more information about the labeled feature.
36	"i" icon. Click for a pop-up with more information about the labeled feature.
37	"i" icon. Click for a pop-up with more information about the labeled feature.
38	"i" icon. Click for a pop-up with more information about the labeled feature.
39	"i" icon. Click for a pop-up with more information about the labeled feature.

In addition, the following RED tag numbers & alt text couplings need to be updated:

Tag	Alt Text
43	Intake services radio button. Click to see stock values for Intake.
53	Alcohol Use Disorder meds needed radio button. Click to see stock values for Alcohol Use Disorder.
69	General Mental Health setting radio button. Click to see stock values for General Mental Health.

fyi @jamesmrollins @lijenn

[ljmoody]

@tejaspesquare, is there an update for this issue card? Looking for a time when I can test for the additional yellow tags identified above.

[tejaspesquare]

Hello @ljmoody,

The task has yet to begin as the Designer was involved in designing Team Care & Team Flow tasks. As previously stated, he has been preoccupied with some tasks at the organizational level for a few days. Upon his return, we will promptly notify him of outstanding requirements.

[tejaspesquare]

hello @ljmoody, @lijenn, @matomasz

This development can commence only after all requirements have been finalized and all related development tasks have been completed. Could you please confirm whether we anticipate any changes specifically to the UI elements that would impact the order of elements following the development phase?

Thank You!

[matthewtomo]

wk3 2024_08 Dev Standup @matthewtomo @tejaspesquare

• [x] @ljmoody are we expecting any feature changes with the number of items on the home page? (besides the change that already removed the Add button - Red tag 28)

[matthewtomo]

week 3 2024_08 Praxis Meeting @matthewtomo @jamesmrollins @ljmoody

• @tejaspesquare We do not expect any upcoming changes to this page. You have the go ahead for finalizing ordering and alt text.

[matthewtomo]

Discussed Friday Dev Standup wk_2 2024_9 @matthewtomo @tejaspesquare

• Current alt text for first link differs from what is available in the wireframe and what is available in the legacy wireframe
  • @ljmoody see email with subject: "508 Compliance Confirmation" from @tejaspesquare
• Which version should Dev team be using for the alt text?
• Additionally, do we have wireframes for the simulation pages?

[matthewtomo]

Discussed Dev Standup wk_3 2024_9 @matthewtomo @tejaspesquare

• @ljmoody, Dev team has a few questions about this card (see also email with subject: "508 Compliance Confirmation")
  • [x] The current alt text for first link differs between what is available in the wireframe and what is available in the legacy wireframe. Which should they be using?
  • Current wireframe:
  • Legacy wireframe:
• I would think current wireframe, but want to verify with you.

[ljmoody]

@matthewtomo and @tejaspesquare, after reviewing the legacy wireframe and the one I created, a hybrid of these two documents may offer the best solution.

1. MTL logo at top left of screen: Yes, please include alt text for this.
   • Revise alt text to say "MTL logo. Click this logo on any page to return to the team Home page."
   • That said, this raises what may become a new issue card/assigned task, because clicking this icon does not elicit the same behavior -- neither between pages under one type of login, nor between types of logins:

Page in Sim where MTL logo is clicked	Administrator login reaction	Field User login reaction
Admin Dashboard	no change (but reloads page)	n/a
Community	no change	n/a
Play (main Sim UI Play page)	team Home page	team Home page
Team (chat)	Admin Dash	team Home page
More Info	no change	team Home page
Tutor	no change	team Home page
Tips	no change	n/a
MTL Demo	logo change to demo, no change (stays in demo)	n/a
Team PSD	logo changes, no change, stays in VA Team PSD	n/a
Report Bug	--	--
News	--	--

• Suggest making the clickable mtl logo navigate to the team Home page - from any page + with any user type login. Can you think of a reason not to? It's possible I could be overlooking something.
  • Rationale: 1) same UX, no matter the type of login and 2) Admins have "Admin Dashboard" icon at top navigation bar from any page.
  • update 9/25: The mtl.how 3.7 Sim UI Cheatsheet also references this logo and behavior. Will be updating the cheatsheet in the next week and need to know if this should stay as-is or be revised. Tracking via #3267.

2. Otherwise, recommend using the wireframes I developed for the Dynamic Decision Dashboard:

   • wireframe_DDD_508_narration
   • Additional 508 callouts in this comment

3. Re: the Sim UI Play page, this is also considered a product of the government. So yes, we need 508 compliance--and alt text.

   • Suggest using James' 508 legacy wireframe .pdf as an initial wireframe for this task.
   • If there are missing elements discovered while developing the alt text for the Sim UI Play page, please let me know and I will track those down.

4. From Tejas' 9/13/24 email:

   • The highlighted alt text descriptions can be found in the "Secondary Pop-ups" section of the wireframe_DDD_508_narration file (linked above in point 2).
   • I checked the wireframe and although it doesn't specifically cover Team Care module's Episodes of Care (highlighted above), please use the alt text for Episodes of Care from any other module (it's all the same) and that will do.

[tejaspesquare]

Hello @ljmoody , @matomasz,

Below is a summary following our discussion with the dev and design teams. Required you attention on ii, iii & iv.

i. We will utilize the updated alt text for the MTL logo. ii. The top navigation links (Home, Play, More Info, etc.) will be required additional work if we are to adhere to the most recent wireframe, as this task need to replicate across pages (Dashboard/Play based on Login).
iii. Regarding the Home icon and others, we propose that instead of referring to it as an 'icon,' we should designate it as a 'Button.' iv. From above Point no 4: Feedback Loops - if there is a specific sequence we need to follow within the loop, please share your guidelines. Likewise, Decision Meter & Episodes of Care too required some inputs to maintain order. v. SIM UI Play Page- We shall refer to legacy wireframe '508_instructions_Legacy.pdf'.

[matthewtomo]

Discussed support_workflow wk_3 2024_09 @matthewtomo @ljmoody

• @tejaspesquare, we have a few questions and recommendations based on your last comment.
• For point ii, what would be the additional work required for following the most recent wireframe? It does not look like there is currently alt text implemented for the navbar in the DEV environment for either the sim_ui or the team-psd website. Is there some other consideration being made besides differences in alt text between the two wireframes?
• For point iii, in order to maintain consistency with the manual, we would prefer to continue referring to the clickable elements of the navbar as icons.

• For point iv, @ljmoody and I are not currently aware of any wireframes covering alt text or tab order for the CLDs, Flow Diagrams, Decision Meters, or episodes of care. Before making any major alterations to the current scope, would like to loop in @jamesmrollins to see if there are already designed wireframes for this purpose, or if it will be a task for the upcoming roadmap.

  update: Created card #3262 to track wireframe development for 508 compliance on features mentioned above (feedback loops, decision meters, episodes of care, flow).

[matthewtomo]

Discussed Friday Dev Standup wk_3 2024_09 @matthewtomo @tejaspesquare

• We noted that the scope of further wireframes may be better handled at the upcoming Roadmap Planning Session.
• Development has been started based on the above discussion for existing wireframes (From @ljmoody and @jamesmrollins )

[matthewtomo]

Discussed Monday Dev Standup wk_4 2024_09 @matthewtomo @tejaspesquare

• Development is still ongoing.
• When an estimate for the remaining task time is available, @tejaspesquare will be able to provide that estimate here.

[matthewtomo]

Discussed Friday Dev Standup wk_4 2024_09 @matthewtomo @tejaspesquare

• Designer work is almost finished
• Once finished, Designer will need to collaborate with Dev to implement final changes
• Development is expected to be complete in two weeks.
  • Note, development has expanded to include more pages than the DDD based on @ljmoody's above comment

• Re: the Sim UI Play page, this is also considered a product of the government. So yes, we need 508 compliance--and alt text.

  • Suggest using James' 508 legacy wireframe .pdf as an initial wireframe for this task.
  • If there are missing elements discovered while developing the alt text for the Sim UI Play page, please let me know and I will track those down.

~ https://github.com/lzim/teampsd/issues/3198#issuecomment-2357169548

[matthewtomo]

Discussed Friday Dev Standup wk_1 2024_10 @matthewtomo @tejaspesquare

• Design is almost finished for DDD, development is in progress
  • E.g. The Learning Mode Popup still needs to be developed further to support tab ordering
• Final 508 compliance for DDD and simulation/play pages is expected to be finished by the 3rd week of October

fyi: @ljmoody

[ljmoody]

@matthewtomo, is it possible for the mtl logo link to be in place for by wk4 October?

• Need to know for inclusion in the Sim UI Cheatsheet (example given below-highlighted portion) & MTL Manual. Update 10/7/24: updating the cheatsheet to read "MTL Logo - Click to return to Home page (field user login only)."
• Field user experience looks good to go, but Admin login has a different UX.
• It's related to this comment above.

[lzim]

@ljmoody

What logo do you need? It's not here? https://github.com/lzim/teampsd/tree/master/resources/logos

I made all the original .svg .ai .psd and .png MTL and Team PSD logos and icons so they would scale and follow the VHA Style requirements.

Let me know if you're missing one and please be sure that the logos and icons are signed off on by me. Thx!

[ljmoody]

@lzim, I understand why you think I needed a logo; that isn't what I meant. I'm speaking to the behavior of the logo (when users click on it) and some dev work associated or new explanation needed for that logo on the Sim UI Cheatsheet.

What logo do you need? It's not here? https://github.com/lzim/teampsd/tree/master/resources/logos

I made all the original .svg .ai .psd and .png MTL and Team PSD logos and icons so they would scale and follow the VHA Style requirements.

Let me know if you're missing one and please be sure that the logos and icons are signed off on by me. Thx!

[tejaspesquare]

Hello @ljmoody, @matthewtomo , I would like to clarify couple of things from James' 508 legacy wireframe. (Simulation page (Run))

1. MTL logo - This is not in scope for 508 compliance on Run. should we bypass the tab order for this element?

2. As soon you arrived on Run page focus goes to Text window. If you user wants to operate with Tab order on entire page, then current setup is not allowed user to come out from this popup. If we intend to change then please advise where should focus go.

3. Current Appearance Old - Wireframe Alt text does not guide user to click on all checkbox to access the complete flow of a model. We shall improve text message here. If it is agreeable to all, then kindly share revised details.

Thank You!

[matthewtomo]

Discussed Dev ad_hoc @matthewtomo @tejaspesquare

In general, the tab ordering for all elements on the page should be a top to bottom, and left to right (like reading a page in English)

1. I suggest not including MTL logo in tab ordering, because the logo does not have the same behavior on all pages, and I do not think that it would make sense for the logo to have the same behavior on all pages if the desired behavior on some pages is to navigate to the home page.

2. Focus should start on the team name in the header.

Additionally, Propose the inclusion of the following alt text for the two labeled elements:

• Element 1: "Outputs and Text Header - Open Test Popup (This will return you to the main area of this page)"
• Element 2: "Test Popup Header - Close Test Popup (This will return you to the main area of this page)"
  3. Keep consistent with James' alt text, but edit where the order of elements has changed, and where elements have been renamed.

@ljmoody

[matthewtomo]

Discussed Friday Dev Standup wk2 2024_10 @matthewtomo @tejaspesquare

• To Be Completed
  • Learning mode pop-up
  • Team data section on Home (DDD) Page (handling scrolling)
  • Play page ordering still needs to be verified (but development is believed to be completed)
• Prioritize this high, but beneath ANDONs and Flow Diagram Labels

[tejaspesquare]

Hello @ljmoody , @matthewtomo,

It is important to note that linking the upload feature (Team Data) with 508 compliance is not feasible, as the control extends beyond the application.

[matthewtomo]

Discussed Dev Standup wk3 2024_10 @matthewtomo @tejaspesquare

• Upload button should have an alt text like "Click to confirm the upload and a File Explorer window will open."
• From there the user's machine's accessibility software should handle anything external to our application.

[matthewtomo]

Discussed Dev Standup wk3 2024_10 @matthewtomo @tejaspesquare

• For the learning mode popup, don't require users to make a selection, use the same simple tabbing order protocol as the rest of the page.
• If the user wants to change the default, then they can, but we shouldn't force them to make a selection.
• In general, we only need two things:
  • tab order from top -> bottom, left -> right
  • Alt text for elements on page
• for CC New Patient start rate button, alt text should be something like: "New Patient Start Rate radio button for Care Coordination. Click or press the space or enter keys to prioritize NPSR data for Care Coordination."

[matthewtomo]

Discussed Friday Dev Standup wk3 2024_10 @matthewtomo @tejaspesquare

For 508 compliance

• [ ] On DDD dashboard, Team Data section can not be navigated yet via tabbing
• Currently 508 work is focused on the play pages
  • [ ] Dropdown buttons can not currently be interacted with via space or enter. (This would be necessary for navigating the page via tabbing)
  • [ ] For any behavior regarding popups:
  • [ ] When a popup is opened, focus should be moved to the top element in that popup.
  • [ ] When a popup is closed, focus should be moved to the element/button that opens the popup
  • [x] Alt text for this popup is not available in legacy wireframe:
• @matthewtomo has reached out to James to discuss 508 compliance

fyi: @ljmoody

[matthewtomo]

Discussed Ad Hoc Meeting @matthewtomo @jamesmrollins

• Alt Text for the "Outputs and Text" Popup are attached here.
• It looks like they might already be implemented correctly.

fyi: @tejaspesquare Expanded_Outputs_Tile_508_instructions.pdf

[matthewtomo]

Discussed Dev Standup wk4 2024_10 @matthewtomo @tejaspesquare

Focus for 508 compliance

• [ ] On DDD dashboard, Team Data section can not be navigated yet via tabbing
• Currently 508 work is focused on the play pages
  • [x] Dropdown buttons can not currently be interacted with via space or enter. (This would be necessary for navigating the page via tabbing)
  • [ ] For any behavior regarding popups:
  • [ ] When a popup is opened, focus should be moved to the top element in that popup.
  • [ ] When a popup is closed, focus should be moved to the element/button that opens the popup

[matthewtomo]

Discussed Monday Dev Standup wk1 2024_11 @matthewtomo @tejaspesquare

• Team Data section of DDD is encountering some scrolling errors when using a screen reader.

  • This is the last 508 compliance development required for the DDD

• Development is still in progress for the following items on play page:

  • Connecting the popups to main page via tab navigation
  • tab ordering for the expanded Outputs and Text Popup

[lzim]

Great work!