Re: CSS property for visually hiding an element

`visibility: hidden` still affects layout, whereas the method commonly used
that Oliver posted completely "visibly" hides the element/text from sighted
users. It's closer to making it *invisible to sighted users* than it is to
making it *hidden.*

The method Oliver mentioned is one of the first things I add to any project
I get my hands on, but it is long winded. "visibility: invisible" or
visibly-hidden might get wider acceptance from authors by being a single
line.

The only thing I'm wondering is for use cases where something's visibly
hidden and an aria state changes when the content becomes visible, such as
some sites showing "Skip to content" when the user gives it focus. Would
this method potentially make authors believe they didn't need to facilitate
a state change?

On Mon, Apr 3, 2017 at 3:56 PM, Philip Taylor <p.taylor@rhul.ac.uk> wrote:

> Oliver Joseph Ash wrote:
>
>> It is quite common for web developers to require an element to be hidden
>> but only visually—that is, still accessible to screen readers and keyboard
>> users, but not visible on the screen.
>>
>> If you search for "visually hidden element CSS", you will find lots of
>> hacks to solve this problem. Most famously, perhaps, is the
>> "visuallyhidden" class that comes with the HTML5 boilerplate project:
>> https://github.com/h5bp/html5-boilerplate/blob/9d6176a26ca4b
>> 70ab64a51d7abb9d3ebaa197855/dist/css/main.css#L135
>>
>> Could we add something to CSS to support this requirement, so authors
>> don't have to resort to these crazy hacks?
>>
>> I fear many authors currently resort to using `display: none` instead,
>> which hides an element both visually and semantically. This is not good for
>> accessibility.
>>
> I am almost certainly missing something obvious, but what is the reason
> that "visibility: hidden" does not suffice ?
> Philip Taylor
>
>


-- 
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015

On Mon, Apr 3, 2017 at 3:56 PM, Philip Taylor <p.taylor@rhul.ac.uk> wrote:

> Oliver Joseph Ash wrote:
>
>> It is quite common for web developers to require an element to be hidden
>> but only visually—that is, still accessible to screen readers and keyboard
>> users, but not visible on the screen.
>>
>> If you search for "visually hidden element CSS", you will find lots of
>> hacks to solve this problem. Most famously, perhaps, is the
>> "visuallyhidden" class that comes with the HTML5 boilerplate project:
>> https://github.com/h5bp/html5-boilerplate/blob/9d6176a26ca4b
>> 70ab64a51d7abb9d3ebaa197855/dist/css/main.css#L135
>>
>> Could we add something to CSS to support this requirement, so authors
>> don't have to resort to these crazy hacks?
>>
>> I fear many authors currently resort to using `display: none` instead,
>> which hides an element both visually and semantically. This is not good for
>> accessibility.
>>
> I am almost certainly missing something obvious, but what is the reason
> that "visibility: hidden" does not suffice ?
> Philip Taylor
>
>


-- 
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015