This page explores the accessibility and impacts of a number of techniques used to hide and minimize content in digital publications.
It is generally advised to avoid including hidden content that is only intended for users of
assistive technologies, however, except where the content is not central to understanding the
publication. Standard hyperlinks to text alternatives and declarative approaches to minimizing
content (e.g., the
details element) are more broadly usable than
hidden content, as not everyone who can benefit from this content uses an assistive technology.
When content has to be selectively made to appear, ensure that progressive enhancement techniques are followed.
element does not strictly meet the requirement of hiding content. What it does provide
is the ability to collapse content down to just the label specified in the
summary tag. One advantage of the element is that it does not require
scripting support, which is often lacking in EPUB reading systems, to expand and collapse
It is not required that the content begin in a collapsed state. By adding the
open attribute, the content will initially be expanded (the attribute is also
a boolean, like the
hidden attribute, so its value is
either an empty string or the value
A current limitation, however, is that reading systems do not always repaginate well when the element is expanded or collapsed. Expanding may force content below the element off the bottom of the current page, making it unavailable to sighted readers. The attribute is also not well supported in older browsers, including not at all in Internet Explorer versions, so requires a polyfill to work.
details element is commonly paired with the
aria-details attribute to associate descriptions with
Although CSS provides a number of approaches to hiding content visually, the primary problems with using it are that:
- CSS is not always supported and can often be disabled by users.
- Support for new properties often takes a long time to develop and many never get supported in older user agents.
- EPUB reading systems often supply their own styling, so author styles may be ignored or overridden.
As a result, there is no guarantee that styled content will be hidden from any users depending on the user agent they are using. HTML techniques are generally more reliable.
property is a widespread method used to visually hide content, as its origins go back
much further than the
hidden attribute and it is more
direct and easily manipulable than setting the height and width
of elements. Setting the
none causes the element
it is carried on to be removed from visual display and the accessibility tree, so assistive
technologies will not read the content.
Like with the
hidden attribute, content that is hidden
display property can be accessed by ARIA
attributes that accept hidden content. The same flaw that this approach hides
useful information from users who do not use assistive technologies also applies,
Clipping is a technique that reduces content to a single pixel so that visual users are not aware that that the additional content is present.
The advantage of clipping content instead of hiding it completely is that assistive technologies will read the clipped content, whereas they ignore content set or styled to be hidden.
property is the primary property used to achieve this effect, but a number of others
are also required (some as fallbacks), as depicted in the following example.
property is now deprecated. It is included as a fallback for
While this technique works well in web browsers, support in EPUB reading systems is
inconsistent. Support for the new
clip-path property is not widespread, and
neither is support for older
clip property as it requires absolute
Setting an element's
0 is similar to the clipping technique,
except that assistive technologies typically will not read the content of elements without
any size dimensions.
Even though setting an element's dimensions to zero does not remove the content from accessibility tree, assistive technologies are often optimized to ignore content styled this way (it is why the clipping technique only reduces the size to one pixel, for example). This behavior is not universal, however, so the content may be read in some cases.
opacity property of
an element to
0 makes it completely transparent to users, but assistive
technologies will still read the text.
The primary issues with the use of
opacity are support in EPUB reading systems
and that it leaves space where the opaque text is.
It is also possible to change the opacity of just the text of an element by setting the
alpha channel to be transparent (e.g., using the
#RRGGBBAA value syntax). Support for alpha channel values is also not
widespread in EPUB, however.
property provides two options for hiding content: one is to scale the element to zero,
and the other is to translate it off screen. In both cases, assistive technologies will
still read the text.
scale transform essentially shrinks the referenced element down until
it occupies no space. It is similar in effect to setting the
height and width to zero, except that the full space the element would occupy does
not disappear when scaling.
translate transform is similar in effect to absolute
positioning content off screen, except that the full space the element would occupy does
not disappear. The value is the
y coordinates of the
Similar to the
opacity, the primary issues with using
that such animations are not well supported in EPUB reading systems and they leave space
where the transformed text originated.
property is not commonly used to hide content in digital publications, as unlike
display property it leaves a space in the rendered
content where the element would appear. The content is not read by assistive technologies,
despite the visible space.
The property is more commonly used on the Web to avoid the other content on the page shifting around when an element is hidden or made visible (e.g., to prevent a page footer from being pulled up from the bottom of the page).
Similar to the
display property, content hidden this way is hidden to assistive
technologies unless it is referenced from an ARIA attribute that allows
Absolute positioning content off-screen using the
property is another common Web practice to hide it visually while leaving it for
assistive technologies to announce. As it is only the visual position of the content
that changes, assistive technologies will still read the text.
Using absolute positioning to place content off-screen is very unreliable in EPUB reading systems, however. Absolute positioning of content is often disabled outside of fixed layout publications, as it complicates the rendering and paginating of reflowable content. As a result, the content may appear fixed in an unexpected position on the page, potentially obscuring the other content for visual readers.
property is sometimes used to push content out of the visible area of the screen by
giving it a large negative number. Using a large number allows the text to be rendered on a
single line and not reach the visible area of the screen. The content is still read by
assistive technologies, even though it is not visually present.
Even among CSS techniques, negative indents tends to be particularly unreliable. It has been noted that it can cause a large scrollbar to appear in browsers, for example, to allow users to reach the content (although this can be mitigated by setting the directionality). The more common issue with EPUB reading systems is that they ignore negative indents and other attempts to manipulate content outside the viewing area.
It also normally requires other tandem properties, like shrunken font sizes or changes to the element height, to collapse the white space that results from simply moving the first line back. These may not be well-supported in EPUB reading systems, either.
A similar technique employing an indent of
100% to push the code off-screen
in the other direction has also been suggested for browsers, but this will also fail in
reading systems that prevent content from being positioned off-screen.
color with background
Although it is possible to hide content by making the foreground color match the background, it is arguably the worst option available for EPUB content.
The problems with hiding content this way in EPUB include:
- Reading systems often apply their own foreground and background colors so that all publications have the same look and feel. As a result, there is no guarantee the text will actually be hidden.
- Similarly, reading systems often provide users the option to change their color preference for foreground and background text.
- Reading systems often offer multiple reading modes (e.g., night reading) that reset the foreground and background colors, which will reveal the text even if it is hidden by default.
A more common problem across any user agent is that this method of hiding only obscures the text. Like with changing the visibility, the area the text occupies is still visible.
Assistive technologies will read text hidden this way, though, as changing the color does not actually remove it.
Although ARIA does not influence the display of content, it contains a number of attributes that can be used both to hide content from, and make hidden content accessible to, assistive technologies.
aria-describedby attribute is commonly used to associate hidden
descriptions with an element, although it is not required that the referenced element be
hidden. The value of the attribute is the ID of the element that contains the
aria-describedby attribute may reference more than one element if the
description is broken up across elements.
The problem with using
aria-describedby to reference any content, hidden or not,
is that it reduces that content to a simple text string (i.e., there is no way to
effectively move through the description). Users of assistive technologies consequently have
to listen to that entire string of text before they can move on, which can be a frustrating
The use of
aria-describedby with hidden content also limits access to the
description to users of assistive technologies when there will be many users who could
benefit from access.
aria-details attribute is similar to the
aria-describedby attribute in that both identify additional information
about the content of an element, but there are a couple of key differences:
- It is not intended to reference hidden content.
- It does not reduce the referenced content to a simple text string — users are able to navigate the structure of the referenced content.
The value of the
aria-details attribute is the ID of the element that contains
the description. The attribute can reference only a single element.
The attribute is commonly used to reference the collapsible
details element. This use makes it one of the best options for
providing descriptions in as minimally obtrusive a manner as possible for all users.
The use of "details" in the element and attribute names is somewhat coincidental. The
aria-details element can refer to any element containing additional
aria-labelledby attribute both allow an
accessible name to be provided for an element.
aria-label allows a hidden name to be specified.
The attribute is useful in digital publishing where only whitespace has been used to indicate
new sections (e.g., headingless front matter sections, groups of index or bibliography
entries). It is important that these sections be given a name, as without an explicit
section will not be navigable by assistive technology.
aria-labelledby attribute serves an identical purpose, but it allows the
name to be included in another element (which can be hidden). The value of the
aria-labelledby attribute is the ID of the element that contains the name.
aria-labelledby attribute may reference more than one element if the label
is split across multiple elements.
It is not strictly necessary to use the
aria-labelledby attribute when a section
of content has an explicit heading.
Assistive technologies will associate the first heading element with the section. It can help with older browsers and assistive technologies to explicitly associate headings, however.
A common misconception is that adding the
presentation role to an element is a
way to hide content from assistive technologies. It is not!
This misconception arises in part because this role is often applied to images that users do not need to encounter.
In fact, it is the empty
alt attribute that signals to assistive technologies
that there is no content and the image can be safely ignored.
role="presentation" on any element only removes its semantics. The
content of the element is untouched.
The ARIA working group is moving to replace the
presentation role with
none to better reflect that it is the semantics of the element that are
ignored, not the content.
developers to manipulate a document to hide content using all of the techniques mentioned on this
page. Developers can dynamically add and remove the
hidden attribute, for example, or
assign CSS classes to elements. And ARIA, of course, is designed to be modified by script.
Similarly, if the answers to questions in a textbook are only revealed using script, they will not be accessible to any users.
- MDN — <details>: The Details disclosure element
- MDN — hidden
- HTML — The
- HTML — The
- WCAG 2.1 — Using CSS to hide a portion of the link text
- CSS — Clipping Shape: the clip-path property
- CSS — Content height: the 'height' property
- CSS — Content width: the 'width' property
- CSS — The 'display' property
- CSS — Visibility: the 'visibility' property
- CSS — Indentation: the 'text-indent' property
- CSS — Choosing a positioning scheme: 'position' property
- CSS — Transparency: the 'opacity' property
- CSS — The 'transform' Property
- CSS — Foreground color: the 'color' property
- ARIA — aria-hidden (state)
- ARIA — aria-describedby (property)
- ARIA — aria-details (property)
- ARIA — aria-label (property)
- ARIA — aria-labelledby (property)
- ARIA — presentation (role)