How Does CSS Opacity Affect Accessibility

Will the CSS property opacity only hide content from screen readers if exactly 0?

In general, CSS does not affect screen readers. The only exceptions are:

• display:none
• visibility:hidden
• :before and :after pseudo elements
• (edit) height:0 or width:0 (some screen reader / browser combinations ignore elements with a 0 size, but not all of them)

The first two will hide the elements from the screen reader. The last one can potentially add text to the "accessible name". See step 2.F.ii in "Accessible Name and Description Computation 1.1".

Opacity is ignored by screen readers. It's only changing the appearance of the element and does not remove it from the DOM. You can set it to 0 and a screen reader will still read the element.

Most Screen Readers will skip content with opacity: 0

I'm not sure where you got that from. I have never seen an element with opacity:0 skipped by a screen reader.

Does opacity:0 have exactly the same effect as visibility:hidden

Here is a compilation of verified information from the various answers.

Each of these CSS properties is unique. In addition to rendering an element not visible, they have the following additional effect(s):

1. Collapses the space that the element would normally occupy
2. Responds to events (e.g., click, keypress)
3. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Does CSS -webkit-tap-highlight-color: transparent; have accessibility implications?

There are no accessibility requirements in WCAG that require the use of -webkit-tap-highlight-color.

If you don't have cursor:pointer set, then you can remove -webkit-tap-highlight-color and it won't affect anything.

-webkit-tap-highlight-color is commonly used to override the default styles of webkit browsers (Chrome, Safari, Edge) when an element that has cursor:pointer is tapped from a mobile device.

The default behavior is that any element (or containing element) that has cursor:pointer explicitly set and is clicked will flash blue momentarily. You can bypass the entire issue by ensuring that cursor:pointer is not set.

setting text color to transparent for hiding accessibility content?

You could use transparent foreground color - this might have the side effect of drawing a big boundary around the text when a screen reader like VoiceOver is turned on - this can be a problem for a user using a screen reader with a screen magnifier. The top-left positioning technique works but suffers from focus loss problems on some platforms.

The best way to do it for simple text is to use the following CSS class:

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

visibility:hidden vs display:none vs opacity:0

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

---

Related Topics