Re: Hidden content Re: IOS Accessibility Properties Questions

On Tue, 28 Jul 2015, Chaals McCathie Nevile wrote:
> On Tue, 28 Jul 2015 06:56:55 -0400, Jim <jhomme1028@gmail.com> wrote:
>> Is it a common practice to put content off screen if you want to hide it 
>> from the visual aspect of the page, if you want to use a hand and have it 
>> acted like it would normally act in native iOS?
>
> It is not uncommon. But it is normally bad practice.
>
> For example, if people who are e.g. navigating with the keyboard or voice 
> commands get to something but cannot actually see what it is, you would IMHO 
> fail several WCAG checkpoints, and more to the point fail many actual people.

The one time it is appropriate to put content off screen is if there is a small piece of non-actionable text which is obvious to sighted people from context. For example, if it is obvious from visual layout that this particular list is site navigation, you could put the list header "Site navigation" offscreen. Keyboard users would not be affected, because the piece of text would not be in the tab order.

This is not the best example: the best thing for a site navigation list would actually be to use the HTML 5 element "<nav>", or the ARIA landmark "role='nav'". In fact, this is a good example of a general principle about offscreen text: if you find yourself doing it, dollars to donuts there is probably something else that you are doing wrong. This isn't necessarily true -- probably most accessibility folks have found themselves having to hide some text offscreen with some regularity. But almost all occasions where you want to hide something offscreen for screen readers only, there's a mistake happening somewhere.

And for the reasons Chaals gives, under no circumstances should something *actionable* ever be hidden offscreen. Keyboard and voice users can't find it, for one. And for another, anybody tabbing through the page with the keyboard (and remember, some people do use keyboards on iOS) will find themselves focusing on  actionabout elements they can't see and don't know anything about. This is a very common mistake with JavaScript drop-down menus; people leave them offscreen but not  visibility: hidden, and keyboard users find themselves navigating through an endless chain of invisible links.

And for a key usability point, remember that, though designers these days absolutely adore minimalistic designs, if you think words need to be available for screen reader users, there are pretty good odds they also need to be available for everyone else! At one of its most fundamental levels, a websites job is to generate clicks, whether it's to sell a product or disseminate information. If user experience testing shows that visible text on the page generates more clicks, then favoring minimalistic design without words is actually opposed to the website's raison d'être.

Icons need text labels: <http://www.nngroup.com/articles/icon-usability/> according to the evidence-based user experience testers at Nielsen Norman.

Deborah Kaplan