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

Screen Reader issue #323

Open
sergeicodes opened this issue May 29, 2018 · 4 comments
Open

Screen Reader issue #323

sergeicodes opened this issue May 29, 2018 · 4 comments
Labels
a11y

Comments

@sergeicodes
Copy link
Member

Screen Reader issue

When actively navigating through slide elements, screen reader reads the content from both the current slide and hidden <section role="region">.

Steps to reproduce

  1. Create 2 slides as follows
<section class="slide">
  <h2>Slide one</h2>
</section>

<section class="slide">
  <h2>Slide two</h2>
</section>
  1. Open 1st slide in full screen
  2. Go to 2nd slide
  3. Start a screen reader (VoiceOver on this example)
  4. Open Rotor panel
  5. See the Heading list

Expected

<h2> element to appear once.

Actual

<h2> element appears twice - 1st from the actual slide, 2nd from <section role="region"> (see screenshot).

shower-screen-reader-bug
@pepelsbey
Copy link
Contributor

Thank you! Any idea for a possible fix?

@sergeicodes
Copy link
Member Author

I would get rid of a hidden a11y element and use a real slide for updating screen reader. Will try and see how it works.

@pepelsbey
Copy link
Contributor

pepelsbey commented May 30, 2018 •
edited
Loading

Well, there’s a problem with that approach: currently Shower doesn’t focus slides while navigating them, it just switches class names. In this case live region is the only option. But we can change Shower’s core behaviour to actually make slides focusable (tabindex="0", etc.) In this case every slide will be announced as a section labeled with <h2>. But it requiers some coding and testing.

Would you like to become a maintainer of a11y side of the Shower project? I’ll be glad to add you to organization and feature you everywhere. It don’t think it will take too much time, apart from implementing this feature.

@sergeicodes
Copy link
Member Author

Yeah, tabindex is the easiest way. Maybe not the best, but should work.

Sure, you can add me as a maintainer and I will check it when I have some more time.

@sergeicodes sergeicodes mentioned this issue Jun 26, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pepelsbey @shvaikalesh @sergeicodes