Prev/Next buttons need discernible text

The previous and next buttons in Spectacle are real buttons, so great job there! That means keyboard users can operate them. But for screen reader users, the fact that those buttons consist only of an SVG graphic with no title or label means they aren’t accessible. I always post my slides online for everyone after I do a talk, so this would prevent me from sharing Spectacle slides.

If I get time to do a PR I will, but I’m under a huge deadline to finish my talks! So I figured I’d at least log the issues here as I find them.

To fix the button text, the simplest thing to start would be to add “Previous slide” and “Next slide” to the elements. There are a few ways to accomplish that, but here are my recommendations:

• Use aria-label on the buttons with the text “Previous slide” and “Next slide”
• Add role="presentation" onto the SVG inside, so it is indicated as visual presentation only.
• Add focusable="false" onto the SVG inside to make IE11 happy.

<button aria-label="Previous Slide" type="button" data-radium="true" style="position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 9999; background: none; border: none; outline: 0px;">
    <svg role="presentation" focusable="false" width="32px" height="32px" viewBox="0 0 512 828.586" data-radium="true" style="fill: white;">
        <path d="M512,97.707L414.293,0L0,414.293l414.293,414.293L512,730.88L195.414,414.293L512,97.707z"></path>
    </svg>
</button>

[kenwheeler]

@marcysutton just pushed out v4.0.3, both issues should be all set!

[kenwheeler]

Once I push this out, I super recommend running create-react-app presentation-name --scripts-version spectacle-scripts, and then pasting into there. You’ll get a service worker which helps present in bad network conditions if you have to from the web.