Accessibility Ready?

Hi @mayawi

We constantly improve Smart Slider 3 from accessibility perspective, to ensure it meets the standards and passes accessibility tests.

As far as we know at this time Smart Slider 3 is accessible.

If would find any problems with the slider from Accessibility perspective, please feel free to report it and we’ll check it out.

Hi Ramona,

I’ve been asked by my client to review accessibility on our WordPress Divi website that uses SmartSlider 3. I ran an audit on one page using Total Validator and found several issues. I would need to attach a doc to show them all in a useful format, but for now, here are the errors reported:

——————————–

<div class=”n2-section-smartslider ” role=”region” aria-label=”Slider”>
E612 This tag or content is not allowed here:
Each tag is defined by the HTML specification as only being allowed to contain certain other items nested within it, and sometimes these nested items may only appear once or only in a certain order. A common problem is to use a tag where it may not be obvious that it is not allowed, and may be accepted by many browsers. Try removing the offending item or replacing it.

div#n2-ss-20 .n2-ss-slide {
E776 Unknown property: perspective
The property name is not recognised as a valid name for the CSS Level used for the validation.
perspective:1000px; }

perspective:none;
E777 transform has a value ‘perspective(1000px)’ that does not match what was expected: none | <transform-list>
The value used is invalid for this property, because the value does not follow the allowed rules for this property. A list of valid rules will be displayed for the property using the format used in the chosen standard.
transform:perspective(1000px);
}

<div class=”n2-ss-slide-background n2-ow” data-mode=”fill”>
E620 The ‘playsinline’ attribute is not allowed here:
The most common reasons for this error are the use of an old unsupported attribute, a new one which is not yet part of the specification being tested against, or the misuse of attributes for use with javascript. If the attribute is for use with AngularJS, then see the FAQ for more information.
<video class=”n2-ss-slide-background-video n2-ow intrinsic-ignore” style=”opacity:1;” data-mode=”fill” playsinline=”playsinline” webkit-playsinline=”webkit-playsinline” onloadstart=”this.n2LoadStarted=1;” data-keepplaying=”1″ preload=”none” muted=”muted” loop=”loop”>

This goes on – there are another 4 or 5 like this.

Any help with how we make this accessible – or if Total Validator is in some way ‘wrong’ would be helpful!

Hi @garybrindley

I’m not familiar with Total Validator, and without being able to see the site it checked it’s hard to tell much. But here’s what I can see about the errors it highlighted:

1) E612 This tag or content is not allowed here:
I don’t see why having a div tag would be any problem anywhere on the site. Unless it’s outside of the body tag. Can you check your page source (right click > view page source) and make sure that Smart Slider 3’s codes are inside the body tag? If they are, then I don’t see any reasons why Total Validator things the div can’t be where it is now.

If it’s outside the body tag, please check the place the slider was publsihed and make sure it’s inside the body part of your site.

2) E776 Unknown property: perspective
The perspective property is a very valid property: https://www.w3schools.com/cssref/css3_pr_perspective.asp
Also, it’s supported in all modern browsers. (See the link below the “Browser Support” heading.) So a good validator should not have problem with this.

3) E777 transform has a value ‘perspective(1000px)’ that does not match what was expected: none | <transform-list>
The perspective(1000px) is again a totally valid value for the transform property: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective
A good validator should not have problem with this.

4) E620 The ‘playsinline’ attribute is not allowed here:
If they mean the playsinline can’t be used on the video tag, they’re wrong again: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Also, we need this attribute for compatibility reasons. Which means we’re not able to remove them.

Based on these what I suspect is that Total Validator uses an outdated validator (maybe only for HTML/CSS), which makes it fill its report with “false positives”. So I’d suggest finding another tool for validation, that has no or very minimal false positive report.