Accessibility General Discussion Notes Q1 2025

[barugonman]

Overview

Discussion space to store meeting notes, ideas, questions etc. related to the Q1 Aerie Accessibility Audit Task.

Approach

• Combine automated tools with manual testing
• Attempting to stick to on 'free'/open source tools. Compare available tools and see if we can find a small number of tools with good coverage. Skipping tools that require network access to a URL.
• Identify issues, organize, and review as a team for prioritization
• Knock of some low hanging fruit as we go

Work tracking

Coding tasks and other specific questions are here as an 'epic', with a sub-issue covering all coding tasks for each of the Aerie pages:

#1608

General Information

WAI docs:
https://www.w3.org/WAI/
https://www.w3.org/WAI/fundamentals/accessibility-principles/

a11y Project Checklist
https://www.a11yproject.com/checklist/

JPL resources:
https://accessibility.jpl.nasa.gov/resources-tools/accessibility-tools
Some additional tools listed here to look at e.g. color blindness simulation.

Top 20 tools:
https://www.audioeye.com/post/free-accessibility-testing-tools/

Audit Tools

The following represents tools we may decide to use for auditing. Expect we will want more than one, but not a lot.

WAVE
Chrome extension:
https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Accessibility Insights
Open source Chrome extension:

https://chromewebstore.google.com/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni

Includes both auto-checking plus procedures for manual checks. Like the report formats.

Accessible Web Helper

Free Chrome extension:
https://chromewebstore.google.com/detail/accessible-web-helper/gdnpkbipbholkoaggmlblpbmgemddbgb

Includia Accessibility Checker

Free Chrome extension:
https://chromewebstore.google.com/detail/includia-accessibility-ch/ialekgfeghfiggcbglciaihbpdafidnn

Axe Monitor

Popular tool but requires a license long term:
https://www.deque.com/axe/monitor/

Mac VoiceOver Tool

Mac has a built in text reader called VoiceOver:
https://www.apple.com/voiceover/info/guide/_1121.html

For a PC you should be able to download a tool like:
https://www.nvaccess.org/download/

Development Tools

shadcn-svelte

Bryan mentioned this tool in support of jumpstarting accessibility updates.
https://www.shadcn-svelte.com/

sa11y

Embedded JS plugin supporting checking as you develop:
https://sa11y.netlify.app/overview/

[barugonman]

28 Jan 2025 Discussion

• A main target of acc is health care and welfare web apps
• How close to the standard to get?

Yes:
1- vision impaired but not blind (color blind, big font needed)
2- support for alternate input devices
3- (maybe) content and language hierarchy. "more intuitive for everyone"

No:
1- 8th grade reading level
2-

Maybe:
1- support for screen readers (is a bit low hanging)
2-

• Have a branch for all the work or push as we go? (push as we go)
• Use of epics? Or just labeling? Have 'big tickets', and subtasks
• Use the accessibility label (a11y)

Try out 'eslint' plugin

• Is enabled in Aerie
• compare to sa11y

User centered design/stories to help lay out priorities

• blind person using screen reader
• only one arm works etc.
• what do we think are our valid use cases?
• what level to target? (AA is required/was required)

Things like adding textual descriptions

• largely in support of screen readers

Forms aren't well organized for tabbing

• may have two similar looking components that behave differently

Dark theming is close (may help certain people)

• look this one up (e.g. high contrast mode/low contrast mode is valuable)

First AMMOS task for a11y

• How we went about what to audit etc.
• Do a report out to management

Shape up dev process

• In the middle of transitioning from 2 week sprint to 'shape up' from basecamp (there's a book), splitting into smaller subteams and the subteams will do 6 weeks on 'pitches'. Think Dan A. goes into 'smaller' ad hoc work/feature requests. Add to standups and meetings.

[barugonman]

Iteration 2: Scheduling and Plans Pages Testing

Primarily keyboard navigation testing, with WAVE checks along the way.

Delaying (Mac) screen reader testing until I can get more familiar with the tech, which so far (and somewhat surprisingly) mostly conflicts with this nav testing.

Why must we support keyboard-only navigation?

• Temporary or permanent of use of limb(s)
• Some people have tremors which don't allow for fine muscle control

Requirements Covered

TBD

Resource:
WebAIM Keyboard Accessibility

Test 1

Scheduling Page

1. Most tab navigation worked except for line 5 of plans page
2. One issue with a popup that can only be tab navigated through not arrows

Plans Page

Note some plans page WAVE errors already documented during iteration 1.

Started with a an open plan that already has a few activities and was simulated.

URL through Top Bar

1. Set the cursor to the page URL
2. Attempt to tab forward through the tool, using enter/spacebar and up and down arrows to access popup menus etc.
3. (Issues 1) Tab forward from URL jumps over a number of components and ends up on the user selection pulldown, which does properly allow selection with enter, arrows etc. If you go back and select one of the skipped items in the top bar, and then tab, it tabs forward to 'Activities' pane.
4. (Issues 2) Tab forward from user pulldown takes you to 'Activities' pane on left, skipping pane-type pulldown for left pane
5. Selected each additional pulldown. (Issues 3) Think activities pulldown also violates arrow-down (but worth discussing since it isn't a menu). Default View doesn't allow traverse of the menu by tab or arrows.

Left Views Pane

1. Mouse selected (skipped) Activity, Resource, Event Types pulldown. (Issue 4) Requires use of tab to navigate, does not allow arrow
2. Returned to Activities pane selection. Tab forward and back through tab pane works correctly including 'enter' to select.
3. Tab to Subsystem pulldown. Enter to select, and arrow to nav seems to work but did not have anything to select so WORKTOGO.
4. Tab to Add Filter to Row button. (Issues5) Enter pops up the list, but arrows don't navigate, and tab navigates out to the activities table. Also the popup doesn't go away when we navigate out.
5. Tab forward, expecting to go to the timeline. (Issues6) Tab sends me into the activities list, have to tab forward to select, arrows not working. Add filter to row button behavior has same issue as 11.
6. Tab down through activities list, when it leaves the last item in the list focus is on first Timeline component.

Timeline Pane

1. Starting at Timeline pane, tab forward. Tab and Enter works for each of the selectable timeline control buttons. Enter to pop up Actions pane. (Issues7) Was expecting to arrow through the actions but tab may be ok (probably best do both). However when the focus is on a checkbox and I Enter, the value of of the box does not change as it should. Noting the Docs links do work correctly for Enter.
2. Tab forward bings me to the guide bar on the plot. While it does select and highlight, it was hard for me to catch that i could even see it, but also i don't seem to be able to do something useful with it - perhaps left and right arrows can be held down to change the position. (Note there's a WAVE contrast issue related to the guide button)
3. Tab off of the guide takes me to the a plot selection (not sure what i can do with that, WORKTOGO), then (Issues) skips the Activities by Type tree on the left and finds the 'Row Settings' button below. Enter pops up the row settings, but neither tab nor arrow allows selection of anything in the popop. And as earlier, tab out of the popup does not bring it down (though Escape does work)
4. Tab out of Row Settings take me to Activities by Type. (Issues) Tab works to step through the activities, but tab should be taking us to the next row, we should be using arrows for up-down and left-right to open and close.
5. Tab forward to next row. Seems like there is a hidden selection along the way. Similar (Issues) that for each row the Row Settings gets selected first.
6. Tab forward to select New Row. (Issue) Enter does not create the new row.
7. Tab forward to the bottom pane. (Issue) The focus skips the pane type pulldown.

(Note I understand the left, bottom and right panes are all essentially the same, but was looking to see if i could find differences)

Bottom Views Pane

1. Mouse select the pane type pulldown. (Issue) Pane type only allows tab for nav not arrow (noting we know this is being redesigned anyway)
2. Select the Activity Directives Table.
3. Tab forward. The toggles respond to Enter properly. (Issue) Tab forward skips the columns popup.
4. Tab forward. (Issue) Focus lands in first (empty) column, which i don't see any value to select.
5. Tab forward. Try Tab and Enter for each of the columns. (Issues) Enter does cause the auto-sort ordering to work, however there is also a filtering button on the same button but that is skipped on the next tab.
6. Mouse select filter button. Enter and arrow behaviors appear to work fine for the filter popup.
7. Tab to end of table. (Issue) Focus ends up on the header of the last column, which i don't think you can do anything with.
8. From this point on, going to assume that the two panes will have the same behavior.
9. Tab from end of table header, assuming I will tab into the table since each row is selectable. (Issue) Tab takes me to the next major pane (the right pane), and arrows do not take me down the table rows as i would expect.
10. Mouse select one Activity Directive. Tab to next pane, focus skips pane type menu as reported. Tab to upper right buttons. All three respond to enter
11. Tab forward. Tab through tree, noting tab works to select each component but (Issues) Arrows do not. Using Enter to update most fields work, arrows do work for the up and down number selectors, however the boolean checkbox does not (assume as previously noted)

Right Views Pane

Basically same behavior as Left and Bottom panes. Generally speaking all of the forms widgets all traversed properly (or perhaps 'good enough', there are spots where tab takes you through content that should be accessed via arrows, but these may not be key fixes)

Repeated tests through other panes such as Timeline Editor. Generally consistent from that point on - tabbing works cleanly through most of the panes, enter works in most places except as noted.

(Issue) One repeated focus issue, is that some times when you select and end up on a sub-pane, the focus ends up somewhere else in the app (I think this may be related to that shared pane code, i'm in the right pane when i select, but focus ends up in the bottom pane)

Table focus on column that can't do anything:

Most panes like Plan Metadata work up until a pulldown like this one (i.e. only tab not arrows)

Conclusions

Bunch o nav stuff that we should fix.

Unfortunately WAVE was also problematic while doing nav testing, since it refreshes the screen after a check (maybe that can be improved in the app)

Plans page focus suggestion, have 4 hotkeys to change focus to each of the major panes.

[barugonman]

Background

MSPA acquired funding to audit Aerie against web accessibility requirements, document issues and implement some improvements. Work began Jan 2025.

Result of recent mandates:

Overall notes on accessibility:

Auditing for and addressing accessibility issues for different disability types:

Further examples:

Also use of page regions and Aria landmarks.

Documenting Aerie issues in a spreadsheet by color:

Example portion:

WAVE tool:

Accessibility Insights:

Other Tools

Aerie Findings

Also concluded need to test against a more robust plan.

[barugonman]

May testing and thoughts

A few thoughts along the way:

Think an 'accessibility settings' control would be useful. I might include:

• Ability to re-keybind (something)
• Varying color schemes for the TS entry areas e.g. constraints, some of the characters like [ ] are failing contrast checks
• ...

Really want to fix the forced tab through date selection box