I see a lot of WordPress websites (and websites in generally really) using sliders for images and information. I can see how it would be really easy to make an accessible slider. Are there any 'out of the box' accessible WordPress sliders?
Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone. Any carousel or slider can contain non-accessible content, so keep these things in mind when building content:
- Do the headers flow from h1 down without skipping a level?
- Do embedded images have adequate alt tags?
- Do the links open have descriptive titles or link text?
- Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider
Applicable Success Criteria
- 1.1.1 Non-text Content Level A
- 1.3.2 Meaningful Sequence Level A
- 1.3.3 Sensory Characteristics Level A
- 1.4.1 Use of Color Level A
- 1.4.3 Contrast (Minimum) Level AA
- 1.4.4 Resize Text Level AA
- 1.4.5 Images of Text Level AA
- 1.4.6 Contrast (Enhanced) Level AAA
- 2.1.1 Keyboard Level A
- 2.2.1 Timing Adjustable Level A
- 2.2.2 Pause, Stop, Hide Level A
- 2.4.3 Focus Order Level A
- 3.2.1 On Focus Level A
- 3.2.3 Consistent Navigation Level AA
- 3.2.4 Consistent Identification Level AA
- 4.1.1 Parsing Level A
- Guideline 1.1 – Text Alternatives
- Guideline 1.4 - Distinguishable
- Guideline 4.1 - Compatible
- Principle 1 – Perceivable
- Principle 4 - Robust