All images placed on a page (slideshows too!) must include alt text which describes the content or purpose of the image.
Consider the experience of visually-impaired people who are navigating the page using software that vocalizes the content to them.
- If the image is used as a header, provide alt text that repeats the site or page section name. Alt text (which is required) is not to be confused with other image attributes such as title, caption, or description, which are all optional.
- If the image is a photograph, describe the subject of the photograph in alt text.
- If the image contains text, the alt text should include that text.
- If the image links to a web page, state the topic of that page in the alt text.
- If the image contains a great deal of data, ensure that the information is also available in text.
H30: Providing link text that describes the purpose of a link for anchor elements
H37: Using alt attributes on img elements
F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives
Prepping the Images
Slideshows are best viewed when all of the images in the slideshow are the same width and height, and have a fairly low file size without damaging image quality. Make a note of what the common width and height are that you used (my favorite size for slideshows is 720px wide by 405px high). I always run images through Photoshop to crop and optimize them before uploading them for a slideshow. You may have a similar image processing software available to you.
Creating the Slideshow
To create slideshow of images, we use a plugin called Meta Slider. It can be found in the black sidebar once you log in to the WordPress Dashboard.
To create a new slideshow from your sized and optimized images, click on the tab with a + on it.
It will become a tab that says New Slider. Select that text and give the slideshow a descriptive name. Then press Enter, which saves your new slider.
Click the Add Slide button.
You will see the Upload Files window. Click Select files, and upload your files.
Be sure to create Alt Text for each image uploaded, like you would anywhere else. This text is primarily for the visually impaired users. Create Caption text if you want a caption to appear on your slideshow.
Use the Shift and/or Ctrl (Cmd on Mac) key to click on more than one image, to select the images for this slideshow. Then click Add to slider.
It may take a moment, but eventually your images will be added to your new slider, along with their captions and links to the single, full-size images.
You can change the captions, and edit or delete the links. You can also delete a slide by hovering on the thumbnail and clicking on the red trashcan icon that appears.
Over on the right, you’ll need to review the slideshow settings. First, enter the height and width you set all your images to when preparing them.
I usually select Flex Slider as the type of slider at top, Fade for Effect, Arrows checked, and Dots for Navigation. There are additional settings below if you click on Advanced Settings.
When you are done with your settings, click Save,
Placing the Slideshow on the Page
In Meta Slider, code will appear on the far right under the settings. Select and copy this code.
Open or create the page you want to display this slideshow on.
Place your cursor in the text editing box where it should go, and paste your code.
Save your page and view it in the browser. Watch it and interact with it to make sure it’s working the way you want it to.
To make changes, go back to Meta Slider and edit your new slider. It may need changes for individual images, or it may need changes to the settings.
Once you save your slider, it will continue to appear on your page, but with your updated changes. You will not need to go back and edit your page.
Deleting a Slideshow
To delete a slideshow from a page, simply remove the metaslider id=”XX” code.
To delete a slideshow from Meta Slider, scroll all the way down and click the Delete Slider button at the bottom of the right sidebar.
When creating a Meta Slider for the header, please use the following settings.
- Flex Slider format
- Width: 1440px
- Height: 400px
- Effect: Fade
- Theme: Default
- Arrows: Unchecked
- Navigation: Hidden
Check the following:
- Auto Play
- Smart Crop
- Hover Pause
Slide Delay: 6000ms
Animation Speed: 600ms
All other settings can be left to default.