loryjs / loryjs/lory

Improve accessibility

Open
#758 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
2.3k
Forks
232
PR merge metrics
No merged PRs in 30d

Description

Hi, I'm not a11y expert but I try to think about it as much as possible so I figured I could add a sprinkle of it to lory.

My first concern is the case of `infinite` that creates duplicates slides. These should definitely have an `aria-hidden="true"` attribute so that they are correctly ignored by the screen readers and so on.
This seems fairly easy to add in `setupInifinte()`.

Checking out bxSlider or slick, I actually noticed they set `aria-hidden="true"` to all slides that are off-screen, so I guess this would be the more widely-accepted pattern?
I figure this would mean setting `aria-hidden="false"` to the active slide (+`slidesToScroll`) in `slide()` and set the others to `true`.

If you guys are okay with this I should be able to create a PR.

#### Bonus: Improve keyboard navigation

Right now, tabbing to an element into a slide out of the frame makes the browser scroll to it, which screws up lory's calculations. Ideally, preventing tabbing into an element with `aria-hidden="true"` could be enough to solve this issue (I'm still experimenting around this).

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading setupInifinte() and slide(), which the issue identifies as the relevant entry points. Check how duplicated and off-screen slides are represented, then define the aria-hidden state for inactive and active slides. Done means screen readers ignore duplicated or off-screen slides without disrupting slider calculations; keyboard navigation is an optional follow-up.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.