Learning to build a better slider

May 8, 2021
by Jeremy Caudle
code

Today I started working my way through the slider portion of Heydon Pickering’s book, Inclusive Components. It’s been a good read so far and I’m working through all of it by building a modified version of his example code as I go. I’ve had to double check things quite a bit because of his CSS selector usage (it’s good, I’m just not used to the combinations he uses). I’ll work on it more tomorrow, and by the time I’m done with this I’ll feel much better about the accessibility of the sliders/carousels I build in the future.

scroll or use your arrow keys to see more kittens

scroll for more cute kittens

use your left and right arrow keys to see more kittens

swipe to see more kittens

View the code:

HTML and JS

<div class="code-block">
            <div role="region" aria-label="gallery" tabindex="0" aria-describedby="instructions">
                <ul>
                    <li><img src="http://placekitten.com/200/300" alt="placeholder image of a cute kitten"></li>
                    <li><img src="http://placekitten.com/200/301" alt="placeholder image of cute kitten"></li>
                    <li><img src="http://placekitten.com/200/302" alt="placeholder image of an adorable kitten"></li>
                    <li><img src="http://placekitten.com/200/303" alt="placeholder image of a cat"></li>
                    <li><img src="http://placekitten.com/200/304" alt="placeholder image of a cute kitteh"></li>
                    <li><img src="http://placekitten.com/200/300" alt="placeholder image of a cute kitten"></li>
                    <li><img src="http://placekitten.com/200/301" alt="placeholder image of cute kitten"></li>
                    <li><img src="http://placekitten.com/200/302" alt="placeholder image of an adorable kitten"></li>
                    <li><img src="http://placekitten.com/200/303" alt="placeholder image of a cat"></li>
                    <li><img src="http://placekitten.com/200/304" alt="placeholder image of a cute kitteh"></li>
                </ul>
                <!-- list of gallery pictures -->
            </div>
            <div class="instructions">
                <p id="hover-and-focus">scroll or use your arrow keys to see more kittens</p>
                <p id="hover">scroll for more cute kittens</p>
                <p id="focus">use your left and right arrow keys to see more kittens</p>
                <p id="touch">swipe to see more kittens</p>                     
            </div>

        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------



            // ---------
            // Functions
            // ---------
        


            // ---------        
            // Events
            // ---------
         
            // Listen for a touch and add a touch class to the body element. Script and overall concepts by Heydon Pickering, https://inclusive-components.design/a-content-slider/. Gosh he's good at this stuff.

            window.addEventListener('touchstart', function 
            touched() {
                document.body.classList.add('touch');
                window.removeEventListener('touchstart', touched, false)
            }, false)

        </script>

CSS

.code-block {
                max-width: 60em;
                margin: 1rem auto;
            }

            [aria-label="gallery"] {
                border: 2px solid;
                padding: 1rem;
                overflow-x: scroll;
            }

            [aria-label="gallery"]:focus {
                outline: 4px solid dodgerblue;
                outline-offset: -6px;
            }

            [aria-label="gallery"] ul {
                white-space: nowrap;
            }

            [aria-label="gallery"] li {
                display: inline-block;
                margin-right: 1rem;
            }

            [aria-label="gallery"] img {
                max-height: 60vh;
            }

            .instructions p {
                background-color: #030303;
                color: #fff;
                text-align: center;
                padding: 1rem;
            }

            #focus, #hover, #hover-and-focus, #touch {
                display: none;
            }

            [aria-label="gallery"]:focus + .instructions #focus,
            [aria-label="gallery"]:hover + .instructions #hover {
                display: block;
            }

            [aria-label="gallery"]:hover + .instructions #hover + #focus {
                display: none;
            }

            [aria-label="gallery"]:hover:focus + .instructions #hover-and-focus {
                display: block;
            }

            [aria-label="gallery"]:hover:focus + .instructions #hover-and-focus ~ * {
                display: none;
            }

            .touch .instructions p {
                display: none !important;
            }

            .touch .instructions #touch {
                display: block !important;
            }

Learning to build a better slider

View the code:

Tags