When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Testing & Remediation

How to test:
  • In Firefox Web Developer Tools, select "Miscellaneous" and then "Linearize Page". Confirm that the page loads in 1 column and the order of content is logical. If the the page contains dynamic elements (modal dialogs, disclosure widgets, etc), trigger these and check the order again.
  • JAWS - navigate the content of the page sequentially by using the up and down arrow keys. Confirm the content of the page is read in a logical and meaningful way.
How to remediate: Implement a semantic structure hierarchy to the DOM in such a way that when viewing the page with styles and/or JS turned off meaning, content, and intent can still be gathered quickly and easily. This includes appropriate usage and hierarchy of h tags, unordered list tags, p & span tags, etc.

Questions and Answers

How do you fix a “suspicious link text” warning in the Wave Scanner?

A good rule of thumb to follow is that all links should still make sense if the text immediately surrounding it is taken away. Take the following for example. You can learn more about this by reading the article here. The only left would be 'here' which doesn't make any sense alone. If we change the sentence structure and the link text a bit we can get something completely different. You can read this article to learn more. What would be left now is 'read this article' which seems rather self-explanatory. If you click the link you will read an article.

What are the best 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?
Below are sliders that are accessible:
  • Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.