Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Desktop: Accessibility: Improve sync wizard accessibility #11649

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

Desktop: Accessibility: Improve sync wizard accessibility #11649

wants to merge 6 commits into from
+49 −12

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Jan 14, 2025 •
edited
Loading

Summary

This pull request improves the accessibility of the sync wizard dialog.

Resolved issues:

  • Headings were not marked as headings (WCAG 2.2 SC 1.3.1)
    • Structural markup: Resolved by replacing divs with h1s/h2s.
  • Lists were not marked as lists (WCAG 2.2 SC 1.3.1)
    • Structural markup: Resolved by replacing divs with uls/lis.
  • Unlabelled images (WCAG 2.2 SC 1.1.1).
    • The cloud provider and checkbox icons were unlabelled.
  • Difficult to determine the purpose of some buttons/links (WCAG 2.2 SC 2.4.4, SC 3.3.2)
    • There were multiple "select" buttons with the same label. When navigating with tab and the screen reader enabled, it previously difficult to determine which "select" button corresponeded to which sync provider. This has been addressed with ARIA7 (aria-labelledby) and ARIA1 (aria-describedby).

Testing plan

  1. Enable a screen reader (tested with Orca on Fedora 41).
  2. Open the sync wizard.
  3. Verify that orca starts reading the content of the dialog.
  4. Press h until orca reads "Wrapping to top."
    • Orca should read "Joplin can synchronise your notes...", "Joplin Cloud heading 2", " Dropbox heading 2", and "OneDrive heading 2".
  5. Press tab.
  6. Verify that Orca reads "Select button" then "Joplin Cloud".
  7. Press tab.
  8. Verify that Orca reads "Select button" then "Dropbox".
  9. Press tab.
  10. Verify that Orca reads "Select button" then "OneDrive".
  11. Press tab.
  12. Verify that Orca reads "Self-hosting? Joplin also supports various self-hosting options such as Nextcloud, WebDAV, AWS S3 and Joplin Server. Click here to select one, link".
  13. Press enter.
  14. Verify that this closes the sync wizard and opens settings.

@personalizedrefrigerator personalizedrefrigerator added desktop All desktop platforms accessibility Related to accessibility labels Jan 14, 2025
@personalizedrefrigerator personalizedrefrigerator mentioned this pull request Jan 14, 2025
Open
@personalizedrefrigerator
Prefer a more concise description for select buttons
3b30ec5 
According to
https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html,
> Too much information or instruction can be just as harmful as too little. The goal is to make certain that enough information is provided for the user to accomplish the task without undue confusion or navigation.

Describing the buttons with just "Joplin Cloud" or "Dropbox" should be
less confusing than also including the description of the sync target.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
accessibility Related to accessibility desktop All desktop platforms
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@personalizedrefrigerator