Improve keyboard and screen reader accessibility #2726

dcalhoun · 2021-03-08T22:31:22Z

Fix

Related to #1935 (comment), this addresses several issue that inhibited keyboard
and screen reader users from navigation the application easily.

Summary of changes:

Add ARIA roles for virtualized list
Improve accessibility of notes list
Reduce noise in screen reader audio
Increase accuracy of search field descriptions
Adjust search button styles to improve tap area
Increase accuracy of tag list accessibility labels
Allow scaling to improve accessibility
Improve ARIA descriptions for application layout
Add ARIA label for all icon buttons
Set language for HTML document

Issue Count Before	Issue Count After

The remaining issues identified by the axe DevTools fall into three categories:

Issues that require design input (e.g. text color legibility).
Issues with the third-party Monaco editor (e.g. lack of ARIA attributes).
Issues that are not applicable to the Simplenote web application (e.g. lack of level-one heading).

Test

Launch Simplenote web or desktop app.
Enable macOS VoiceOver or screen reader.
Navigate the application.

Expected Outcome: No major issues block navigating the application.

Release

Improved accessibility of the application for keyboard and screen reader users.

Elements within `grid` and `rowgroup` require specific roles to be valid for the ARIA spec.

- Announce notes list title when focused on list. - Reduce notes list to one column for easier focus navigation. - Change actionable elements to buttons to improve accessibility. - Improve accuracy of note list labels.

This span appears to be unnecessary and was creating an unnecessary "group" when stepping through UI elements with macOS VoiceOver.

Center the icon within the tap area so that the button is easier to tap with a larger tap area.

Hide internal text input. Describe available action on tag list.

Improve keyboard and screen reader navigation by describing various pieces of the top-level layout and hide internal developer tooling.

Ensure screen reader can accurately describe icon buttons that do not contain text strings.

dcalhoun · 2021-03-08T22:49:55Z

lib/search-field/index.tsx

-    const placeholder = openedTag ?? 'Search notes and tags';

-    const screenReaderLabel =
-      'Search ' + (openedTag ? 'notes with tag ' : '') + placeholder;
+    const description =
+      'Search ' +
+      (openedTag ? 'notes with tag ' + openedTag : 'notes and tags');


I wanted to draw attention to this change. Previously the placeholder value and the ARIA label were different strings. From reviewing the history of the UI, this at one point made sense because it appears the search field was utilized as the "title" of the list of notes, but also served a search input.

However, several changes were made to this portion of the app — the UI was moved around, the structure of the state, etc. These various changes led to a screen reader description that read "Search Search notes and tags Search notes and tags, search text field." 😂 Needless to say, this description is a bit...confusing.

So, these changes are an attempt to fix this label, but it also involves changing the visual placeholder for the search input. I would appreciate if others would please look carefully at this piece to ensure the current state matches the desired experience.

The SVG icon was cut off on the bottom due to its vertical alignment.

lib/app-layout/index.tsx

lib/components/dev-badge/index.tsx

lib/note-list/index.tsx

dmsnell · 2021-03-09T01:31:58Z

lib/note-list/index.tsx

@@ -320,6 +339,7 @@ export class NoteList extends Component<Props> {
                    rowHeight={heightCache.rowHeight}
                    rowRenderer={renderNoteRow}
                    scrollToIndex={selectedIndex}
+                    tabIndex={null}


what's the difference between tabIndex={-1} and tabIndex={null}?

The difference being that tabIndex={null} unsets a tabIndex="0" set by default from react-virtualized and tabIndex={-1} disables the element from being focused by keyboard tabbing while still allowing programmatic focus.

Given that the contents of our virtualized list are focusable (buttons to pin or edit a note), IMO it doesn't make sense for the entire list to be a focusable element. We also, to my knowledge, have no need to programmatically focus the list, so null makes more sense than -1.

interesting. thanks! so the list is no longer focusable: does that have any implications for scrolling the list with the keyboard?

Good question. I had not explicitly tested scrolling the list with the keyboard until just now. It would appear the scrolling the list is still possible and matches the experience as when tabindex="0" is set. 👍🏻

Address issues introduced from changing elements from div to button for better accessibility.

Avoid unnecessary class method.

Accurately describe that search is scoped to the selected tag. Hide overflow ellipsis.

Replace static "Notes With Selected Tag" title with the tag name itself to provide better context.

sandymcfadden

This looks good and works well. Seem much better than what we had previously. Thanks for taking the time to do this.
The only confusing part I had while testing with voiceover was when clicking the button to open the left navigation. Trying to get to the items in it once I clicked the button wasn't straight forward, but I think we can look at that in some future enhancements.

dcalhoun · 2021-03-16T15:51:14Z

The only confusing part I had while testing with voiceover was when clicking the button to open the left navigation. Trying to get to the items in it once I clicked the button wasn't straight forward, but I think we can look at that in some future enhancements.

@sandymcfadden thanks for taking time to review. #2707 should address all issues with navigating the left navigation with a keyboard or screen reader. So, until both PRs are merged, one has to test those areas independently, unfortunately. Please let me know if I am misunderstanding or there are specific issues you encountered.

sandymcfadden · 2021-03-16T16:40:29Z

Yes @dcalhoun yeah, of course, you're right. I even looked at and tested the other one. I think I got confused with the two, sorry for that confusion.

codebykat

With the caveat that I don't have a lot of domain knowledge here, so in general I trust your expertise. This all looks great!

dcalhoun added 9 commits March 8, 2021 09:44

Add ARIA roles for virtualized list

c219a08

Elements within `grid` and `rowgroup` require specific roles to be valid for the ARIA spec.

Improve accessibility of notes list

06e8ed6

- Announce notes list title when focused on list. - Reduce notes list to one column for easier focus navigation. - Change actionable elements to buttons to improve accessibility. - Improve accuracy of note list labels.

Reduce noise in screen reader audio

bb67c3e

This span appears to be unnecessary and was creating an unnecessary "group" when stepping through UI elements with macOS VoiceOver.

Increase accuracy of search field descriptions

4c06696

Adjust search button styles to improve tap area

565ac58

Center the icon within the tap area so that the button is easier to tap with a larger tap area.

Increase accuracy of tag list accessibility labels

a75033e

Hide internal text input. Describe available action on tag list.

Allow scaling to improve accessibility

51894d5

Improve ARIA descriptions for application layout

18c6c3e

Improve keyboard and screen reader navigation by describing various pieces of the top-level layout and hide internal developer tooling.

Add ARIA label for all icon buttons

6cddfb7

Ensure screen reader can accurately describe icon buttons that do not contain text strings.

dcalhoun changed the title ~~Improve accessibility~~ Improve keyboard and screen reader accessibility Mar 8, 2021

Set language for HTML document

bd5d02b

dcalhoun commented Mar 8, 2021

View reviewed changes

dcalhoun marked this pull request as ready for review March 8, 2021 22:55

dcalhoun added 2 commits March 8, 2021 17:01

Fix cut off icon in macOS Safari

2032f63

The SVG icon was cut off on the bottom due to its vertical alignment.

Add additional clarity to dev note

390f1d3

dcalhoun requested a review from a team March 8, 2021 23:04

dmsnell reviewed Mar 9, 2021

View reviewed changes

lib/app-layout/index.tsx Show resolved Hide resolved

dmsnell reviewed Mar 9, 2021

View reviewed changes

lib/components/dev-badge/index.tsx Outdated Show resolved Hide resolved

dmsnell reviewed Mar 9, 2021

View reviewed changes

lib/note-list/index.tsx Outdated Show resolved Hide resolved

dmsnell reviewed Mar 9, 2021

View reviewed changes

dcalhoun added 3 commits March 9, 2021 08:24

Refactor for code style preference

c324e9f

Repair note list styles

0797ce0

Address issues introduced from changing elements from div to button for better accessibility.

[wip] Refactor sidebar title computation

42d4ac5

Avoid unnecessary class method.

SylvesterWilmott added the [status] needs design review label Mar 10, 2021

Adjust search placeholder

2a00644

Accurately describe that search is scoped to the selected tag. Hide overflow ellipsis.

dcalhoun requested a review from dmsnell March 11, 2021 16:44

Display selected tag in menu bar

c8b9f2f

Replace static "Notes With Selected Tag" title with the tag name itself to provide better context.

SylvesterWilmott removed the [status] needs design review label Mar 12, 2021

sandymcfadden approved these changes Mar 16, 2021

View reviewed changes

codebykat added this to the 2.9.0 milestone Mar 16, 2021

codebykat approved these changes Mar 16, 2021

View reviewed changes

dcalhoun merged commit 42d2110 into develop Mar 17, 2021

dcalhoun deleted the update/improve-accessibility branch March 17, 2021 12:50

fluiddot mentioned this pull request Mar 31, 2021

Add note's tags to history screen #2817

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve keyboard and screen reader accessibility #2726

Improve keyboard and screen reader accessibility #2726

dcalhoun commented Mar 8, 2021 •

edited

Loading

dcalhoun Mar 8, 2021 •

edited

Loading

dmsnell Mar 9, 2021

dcalhoun Mar 9, 2021

dmsnell Mar 9, 2021

dcalhoun Mar 9, 2021

sandymcfadden left a comment

dcalhoun commented Mar 16, 2021

sandymcfadden commented Mar 16, 2021

codebykat left a comment

Improve keyboard and screen reader accessibility #2726

Improve keyboard and screen reader accessibility #2726

Conversation

dcalhoun commented Mar 8, 2021 • edited Loading

Fix

Test

Release

dcalhoun Mar 8, 2021 • edited Loading

Choose a reason for hiding this comment

dmsnell Mar 9, 2021

Choose a reason for hiding this comment

dcalhoun Mar 9, 2021

Choose a reason for hiding this comment

dmsnell Mar 9, 2021

Choose a reason for hiding this comment

dcalhoun Mar 9, 2021

Choose a reason for hiding this comment

sandymcfadden left a comment

Choose a reason for hiding this comment

dcalhoun commented Mar 16, 2021

sandymcfadden commented Mar 16, 2021

codebykat left a comment

Choose a reason for hiding this comment

dcalhoun commented Mar 8, 2021 •

edited

Loading

dcalhoun Mar 8, 2021 •

edited

Loading