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.

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

Improve Sverdle a11y #7960

Merged
merged 2 commits into from
Dec 8, 2022
Merged

Improve Sverdle a11y #7960

merged 2 commits into from
Dec 8, 2022

Conversation

geoffrich
Copy link
Member

This PR makes some a11y improvements to the Sverdle demo.

use hidden inputs - previously, each letter guess was its own unlabeled input. There wasn't a great way to label them, and they weren't inputs you could directly interact with, so I changed them to hidden inputs instead and used <div>s for the tiles. This resolves 30 Axe errors.

respect reduced motion for confetti and jiggle animation.

add visually hidden headings. This resolves an Axe error (no h1) and also gives landmarks so assistive tech users can easily navigate between rows.

add visually hidden text for letter state - previously, whether a letter was a correct guess or not was solely conveyed visually. This adds visually hidden text to identify a letter's state to non-sighted users. The description is taken from the NYT Wordle's hidden text (present/absent/correct/empty)

remove aria-selected - this ARIA attribute is only valid on gridcell, option, row and tab roles and was not being used on elements with those roles, so I removed it.

increase color contrast on selected tile - possibly controversial. The previous color used for a "correct" letter had really poor contrast (2.3). The new color gets to 4.6, and I think it looks okay? The variable I changed is only used for Sverdle right now.

screenshot of sverdle game with new dark blue color

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

- make inputs hidden
- respect reduced motion for confetti and jiggle
- visually hidden headings
- visually hidden text for letter state
- remove aria-selected
- increase color contrast on selected tile
@changeset-bot
Copy link

changeset-bot bot commented Dec 6, 2022

🦋 Changeset detected

Latest commit: 9ca222e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
create-svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! To me the new color is actually more pleasant to the eyes, so +1 on that change from me

@Rich-Harris Rich-Harris merged commit e3200fa into master Dec 8, 2022
@Rich-Harris Rich-Harris deleted the grich/sverdle branch December 8, 2022 20:37
This was referenced Dec 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants