Author: Detlev Fischer, Manager BIK Test Development
The article suggests replacing the default content-hiding function that uses
display:none by one that positions hidden content off-screen, which means that hidden content would be fully accessible to screen reader users.
The consequent discussion has shown that opinion was divided as to value of the approach suggested. A contrary position strongly argued for by Jim Thatcher suggested that content hidden for sighted users to become available only through interaction on the page should equally be hidden for screen reader users.
While Aaron Gustafson has diligently responded to earlier comments, the discussion somehow broke off after Jim Thatcher's strong statement ("This is the wrong approach"), leaving the issue dangling in the air.
This is why I am are interested to pick up the discussion once more. I would particularly welcome comments by screen reader users as to their own preferences. Having empirical evidence across different use cases and skill levels would hlep making an informed decision. Before adding my own take on the subject, it might make sense to sum up what appear to be the respective advantages of the different positions regarding hidden content.
Usually, sighted users will easily recognise new content. Screen reader users however need an explicit confirmation that interacting had an effect. How hidden content is best exposed to screen reader users depends on the chosen implementation and is not discussed here in any detail. Very often, for example in tabpanel implementations, screen reader users will not become aware of, or have difficulty accessing previously hidden content. Due to uneven support of WAI-ARIA across browsers and assistive technology, the most accessible implementations currently do not rely on WAI-ARIA. A good example is Dirk Ginader's jQuery Accessible Tabs. An excellent overview of the problems of WAI-ARIA implementation approaches of tabpanels is provided in Jason Kiss' article Accessible ARIA Tabs.
The summary above shows that there are advantages in both positions. I suggest the best approach can only be established in the context of the page in question. What makes sense depends on the type of content and context of use. If, for example, a hidden tab panel section contains a form that a blind user is explicitly trying to access using a screen reader shortcut, the offscreen method would be advantageous. Also, if answers in a FAQ rendered as accordion widget contain many of the keywords that users are likely to search for, hiding them with
display:none reduces the chances that a relevant question-answer pair is detected through searching.
If, on the other hand, content is such that a visible headline linking to hidden content provides enough information for screen reader users to determine whether what is hidden underneath is worth a read (as in most news articles), hiding content and offering an (accessible) way to drill down when needed seems the better option.
If you have any thoughts on this or would like to comment, please use the comments section below. Follow @wcagtest on Twitter if you want to stay tuned to English articles or news from BIK Test Development.