How to Build an Accessible Web Slideshow (Slider)

There are several factors that contribute to making a slideshow accessible and inline with modern standards. First, the user needs to have the ability to keyboard navigate within the slideshow. This includes keyboard controls like previous slide and next slide. If there is text within the slide, keyboard navigation should allow users to tab into this text as well.

Secondly, a screen reader should be able to identify whether a user has tabbed into a slideshow, and identify which slide in the series is being displayed. Additionally, if there is text within a slide, a screen reader should be able to read this as well.

Though slider keyboard navigation could be developed entirely from scratch, one slider plugin in particular offers a robust javascript API that allows for custom functionality. That plugin is called Slider Revolution. Because keyboard navigation is so important to accessibility, Slider Revolution’s built in functions are very useful.

In the code below, navigation functionality for the previous and next slides are added.

In this case, Slider Revolution’s functions for next slide and previous slide can be bound to the left and right arrow icons on the slideshow. These slider controls can be used with a traditional mouse as well as keyboard navigation.

Speaking of keyboard navigation, the user will need to tab, or focus, into these new custom slider components. To accomplish this, the “tab-index” html attribute can be utilized. Tab index, as one might expect, allows the user to tab into an element on the page. A tab index of 0 uses the natural page flow to set the tab order. This makes the most sense for this particular use case.

This code example shows how to add both aria-labels and the tab index attributes to a slider.

Now that the slideshow is full navigable via mouse or keyboard, some screen reader enhancements can be made as well. Modern screen readers can identify where a user is on the page using aria labels. An aria label is an html 5 attribute that acts as a landmark that tells the screen reader to identify an element that’s getting focus. Aria labels can be added to the slideshow’s main container, the containers for each slide in the series, as well as text inside each slide. In the code above, an aria label is added to the main slideshow container using the .attr() method. With these aria labels attached, screen reader users will hear an audio cue confirming which element of the slide show is getting focus.

Combining all of these components adds up to a slideshow that’s more accessible than most!

Working with JSON

This week I wanted to talk a bit about JSON and how powerful it can be for developers. JSON played a big role in the creation of my very first plugin. Short for Javascript Object Notation, JSON has flexibility and a relative easy-to-learn format that can really help make working with complicated data structures easier for developers.

Typically you’ll see JSON used as the data format for sending back end data to a script on the front end and for responses from external APIs. In the case of my plugin, I wanted to display my “badges” that I earned from an online learning site. These badges, as well as pretty much every other piece of data tied to my account, are available in JSON format on this online learning site via their API. I can see data from every single course I have completed since I began using the site almost 2 years ago. I easily found the names of the courses, the dates I completed them, as well as the urls of both the courses themselves and the badge images tied to each course.

First I wrote a function to pull the JSON I needed from the site’s API:

This function simply returns the data from the API in JSON format. Notice how the $wp_username variable gets passed in so that any user’s info can be returned, if it exists. I’m also running the JSON through PHP’s json_decode() function before returning it, which will turn it into a standard PHP object that I can access just like any other object in PHP. This will come in handy throughout the process.

Here is a small sample piece of the raw JSON returned by the function:

First, notice how “badges” is a nested array. All of the data related to badges is in this array. I can easily filter through the data and get only the pieces I want by interacting with the PHP object returned by my function above:

Here I’m using count( $wp_profile->badges ) to get the number of total badges attached to my account. I want to display my most recent badges first and they are returned oldest first from the API, so I count the total number of badges and then use a for loop that decrements on each interation to build my output starting with the most recent badge. This loop could continue all the way down until my very first badge, or I can stop after a specific number.

From here, we can begin isolating the individual pieces of data that we want to display. Notice that every piece of data we need must start at the highest level of the JSON tree, stored in the $wp_profile variable. We then use the “->” symbol to move one level down into “badges”. We continue to use this symbol down through the levels of arrays, getting more specific until we get what we need. The curly brackets hold the specific names of the data we are looking for , including “badges”, “name”, “courses”, “title”, “url”, and “icon_url”. See the text block above to look at this code in action. Now that we have our data, all we need to do is wrap it in html markup. Now we are free to style and arrange this data as needed.

Obviously there is still plenty of work left to do to get a fully functioning plugin. However, the flexibility and simplicity of using JSON moves things along tremendously. This was a simple example showing the potential power of JSON, and the possibilities are endless! Hopefully you found this piece informative, and that it inspires you to jump into JSON for your own development. Good luck!