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!

Equal Height Columns with jQuery

Equal Height Columns with jQueryThere are a ton of great solutions out there for creating equal heights columns – so many that it can get a bit daunting to choose one. Here’s a simple jQuery snippet we’ve started using when CSS alone won’t suffice. Thanks to Rob Glazebrook for the building blocks, to which we added some special functionality including binding the equal height-ing to orientation change (for mobile) and window resize, as well as the option to specify a breakpoint above which the functionality should work.

Mm Plugin: jQuery Responsive Select Menu

jQuery Responsive Select Menu

Automatically turn your standard WordPress navigation menus into responsive select / drop-down menus when the screen is below a certain width.

Download Now » See Demo » GitHub Repo »

jQuery Responsive Select Navigation Menu

The responsive select menu in action.

jQuery Responsive Select Navigation Menu

Settings for the responsive select menu.

jQuery Responsive Select Menu gives you a simple way to make your navigation menus responsive for mobile devices like phones and tablets (iPhone, Android, Kindle, etc). The plugin lets you specify a width at which to turn your normal menus into responsive, drop-down select menus – a proven method for solid, responsive navigation.

You also get specify some other handy settings including:

  • CSS class/ID selectors to specify exactly which menus to affect
  • The width at which to switch from normal to responsive navigation menus
  • The character/spacer to add to sub-items in your drop-down select menu
  • A “dummy” first term to add to the top of your drop-down navigation (e.g. ⇒ Navigation)
  • Whether to show the current page, or the top-level “dummy” item, as the default

Languages/Translations

How to Make a Custom jQuery WordPress Plugin

We love jQuery. A lot. And we use it a lot too. In fact, on pretty much every site we build, we utilize a common set of basic jQuery snippets that do some handy things (opening external links in a new window, adding helpful classes to list elements, labeling links based on there “href” attributes, etc). Sounds like the job for a simple plugin, right? No need to copy and paste all your snippets on each new project – you can create your own custom jQuery plugin in 4 easy steps:

1. Set Up Your Plugin

First thing you’ll want to do is create a new directory for your plugin. Name it something intuitive, like my-custom-jquery (typically all lowercase with hyphens).

In this new directory, create 2 new files:

  1. my-custom-jquery.php
    The file name should essentially match your plugin name.
  2. my-custom-jquery.js
    Similar naming scheme. We’ve chosen to name our file mightyminnow-custom-jquery.js in the code below.

Now you’re ready for the actual coding.

2. PHP (my-custom-jquery.php)

This is the guts of your plugin – your main PHP file.

This code does a few things:

  1. The first commented bit is a standard WordPress plugin information header. It contains important info about the plugin, such as author, URI’s, and a brief description.
  2. Further down, we have a basic function that does two things. First, it enqueues jQuery (notice the function wp_enqueue_script which is the safe and proper way to include jQuery in WordPress). Second, we enqueue our custom jQuery.
  3. Lastly, we add an action to run the whole shebang. We use the wp_enqueue_scripts hook, which is a good place to include all scripts.

3. jQuery (my-custom-jquery.js)

Now we just have to add our actual jQuery to the .js file we’ve made. Here is the code we’re using – feel free to add your own snippets as well.

As you can see, this jQuery does a number of things including:

  • Opens external links in a new window
  • Adds special classes to image, email, and pdf links (we often use these classes to add small background-image icons)
  • Add special classes to first, last, and parent list elements

This is where you can get creative and add whatever jQuery snippets you like to use on a regular basis. If you have any suggestions, definitely post them in the comments below!

4. Install Your Plugin

At this point, you’re ready to install your plugin. You’ve got two options. The first is just to upload your plugin folder directly to /wp-content/plugins. The second is to create a .zip of your plugin folder and use WordPress’ built-in plugin installer to upload it. Once it’s up and running, make sure to thoroughly test any jQuery snippets you’ve added, and definitely let us know what sorts of cool stuff you come up with.

Questions? Comments? Let us know below!

Add Expanding “Read More” Links to Your WordPress Blog

Here’s a handy jQuery/CSS snippet that adds special “read more” links to expand and hide your WordPress blog posts, accordion style. This is pretty useful if your blog page is spitting out a bunch of long posts, and you’d like to consolidate some space. The code is set to work with default WordPress classes and ID’s, however it can be easily modified to work on any HTML. Enjoy!

Check out this Pen!

 

Styling <select> Form Elements

A handy CSS/jQuery snippet to style <select> elements.

Check out this Pen!

:hover Effects for Mobile

We recently completed a project in which we needed to popup a tooltip-like box when hovering over an element. The :hover CSS pseudo-class works fine in desktop, but not so well on mobile. What ends up happening on mobile is that tapping the target element does indeed pop up the tooltip, but tapping elsewhere on the screen fails to close it. Clicking another link or hoverable element does the job, but we needed to emulate proper lightbox/tooltip behavior, in which clicking anywhere else will trigger it closing.

What we ended up with is the following jQuery/CSS combo that seems to do the trick nicely.

Check out this Pen!