EPUB 3 Accessibility Guidelines

CSS Property Reference

EPUB 3 reading systems that visually render content are expected to provide support for the CSS properties listed on this page, but support is not required. Properties not listed here may still be used (e.g., from evolving CSS 3 modules), but content authors should use due diligence and assess the impact on rendering and accessibility when using such properties.

CSS 2.1

Property Considerations
background The background property is a shorthand for defining one or more properties. Refer to each individual background-* property for potential issues.
Note that background properties are largely unsupported at this time outside of fixed layouts.
background-attachment
background-color
  • Ensure sufficient contrast with text color
background-image
  • Ensure sufficient contrast with content color (text and graphic)
  • High mix of gradients and colors in images can make reading overlaid text difficult
background-position
background-repeat
These border properties are shorthands for defining one or more properties. Refer to each individual border-* property for issues
border-collapse
  • An element's border color must never be the sole means of conveying information about the nature of its content. See the Color info page
border-spacing
  • When using color to convey meaning, ensure borders are thick enough that visual readers can discern the color
  • Reading system support for absolute and fixed positioning is not guaranteed
  • Content should not be positioned in a way that makes its discoverability problematic for readers with low vision and/or using zooming software
caption-side
clear
clip
  • Although clipping content to 1 pixel is sometimes used on the Web to hide content, support for the property and its reliance on absolute positioning makes the practice not recommended in EPUBs
color
  • See the Color info page for the range of considerations when coloring text and graphical content
content
  • Any content inserted using this property should be purely presentational, as it typically won't be available to assistive technologies
cursor
  • Avoid changing the cursor such that clickable elements are no longer distinguishable
direction The direction property is not supported in EPUB 3. HTML5 markup, such as the bdi and bdo elements and dir attribute, should be used to express directionality
display
  • Setting the display property to the value none removes the element from rendering both visually and to assistive technologies. It is not a mechanism for hiding content from visual display that should be rendered by ATs.
empty-cells
  • Setting the empty-cells property is not required for HTML5 tables, as borders are rendered (do not insert placeholder text such as dashes or non-breaking spaces)
  • For forwards compatibility with EPUB 2 reading systems, the property should be set to the value show to ensure table borders are drawn around empty cells
float
  • Elements should not be floated in a way that makes their discoverability problematic for readers with low vision and/or using zooming software
  • Ensure sufficient margins exist around floated content so that it is clearly distinguishable from the content that flows around it
  • When floating primary content to the right, ensure that it is not positioned in the markup to accommodate the float (i.e., it occurs at the logical reading point so that it makes sense in non-visual playback contexts)
font The font property is a shorthand for defining one or more properties. Refer to each individual font-* property for issues
font-family
  • Avoid fonts that do not provide sufficient character differentiation, such as sans-serif fonts that represent capital I, lower-case L and the number 1 as identical (or near-identical) characters (e.g., Arial).
  • Avoid cursive and highly ornamented fonts that can be difficult for readers to decipher
  • Try to limit the number of fonts used in any given publication and use families consistently (e.g., one family for headings and one for body content)
  • Give preference to fonts that provide sufficient kerning between characters
font-size
  • Use relative sizes such as percentages and ems to facilitate scaling
  • Ensure default font size does not affect legibility of the prose (e.g., avoid specifying x-small, xx-small and equivalent font sizes)
font-style
  • Use CSS to apply italics only for decorative purposes (similar to using the i element). Use em tags if the words are to be stressed
  • Avoid lengthy use of decorative italics, as italicized words can be harder to read than roman face
font-variant
font-weight
  • Use CSS to apply bolding only for decorative purposes (similar to using the b element). Use strong tags if the words are to be stressed
  • Avoid lengthy use of decorative bolding, as bolded words can be harder to read than roman face
height
  • Assistive technologies typically ignore content that has 0 height and/or width set on its containing element, so do not use this property to hide content that is only intended for non-visual playback.
letter-spacing
  • The letter-spacing property can be used to increase the kerning between letters to improve the readability of tightly constructed fonts
  • Whitespace should never be added between the letters of a word that is not intended to be spelled out. Always use this property to visually expand the spacing between characters when such spacing is necessary
line-height
  • Use caution when changing line heights. Slight increases in the line height can improve overall readability, but too much space between lines can have the opposite effect (e.g., it becomes harder to distinguish paragraphs)
  • Avoid shrinking the line height to compress content
list-style The list-style property is a shorthand for defining one or more properties. Refer to each individual list-style-* property for issues
list-style-image
  • Avoid using images to convey the meaning of a list. If the image is important to comprehension of the items, ensure that a semantic is attached to the list to convey that meaning. If the list represents a figure or aside, use the appropriate container element and include a caption
list-style-position
list-style-type
  • Do not change the nature of a list using the list-style-type property (e.g., to not use the property to give an unordered list the appearance of ordering)
  • Note that reading systems typically restrict the ability to modify body margins
  • Changing margins to move content off screen, common on the Web, is not guaranteed to work in reading systems. This practice is also known to cause problems depending on the reader's preferred reading direction and the placement of the content so is not recommended for that reason, as well
  • Outlines surround borders and serve a similar function. The issues with each are the same. See the corresponding border properties for more information
  • Ensure when using both borders and outlines that sufficient contrast is maintained between them if they both visually convey information.
overflow
  • Avoid using the hidden value, as content may not be visible, especially when zoomed
position
  • Absolute positioning should not be used to re-order content differently than it is laid out in the markup
  • Elements should not be absolutely positioned in a way that makes their discoverability problematic for readers with low vision and/or using zooming software
  • Note that the fixed value is not included in the EPUB 3 Style Sheets profile and its use is not recommended (see the oeb-page-head and oeb-page-foot custom properties for including static headers and footers)
quotes
table-layout
text-align
  • Avoid justifying text, as the uneven spacing that occurs between words can reduce the readability for some people.
text-decoration
  • Use the del element to semantically mark deleted text
text-indent
  • A sometimes used trick to hide text for assistive technologies is to use a large negative value, but like negative margins this technique is not reliable in reading systems and may cause issues depending on the reader's preferred text direction
text-transform
  • Avoid lengthy decorative use of capitalization as it can make words difficult to distinguish and read
unicode-bidi The unicode-bidi property is not supported in EPUB 3. HTML5 markup, such as the bdi and bdo elements and dir attribute, should be used to express directionality
vertical-align
visibility
  • Hidden content is not available to assistive technologies, so do not use this property to hide content from visual rendering that is intended to be read out
white-space
width
  • Assistive technologies typically ignore content that has 0 width and/or height set on its containing element, so do not use this property to hide content that is only intended for non-visual playback.
word-spacing
  • Increasing word spacing can help improve readability of tightly constructed fonts
  • Use this property in preference to adding non-breaking spaces to increase the space between words
z-index
  • azimuth
  • cue
  • cue-after
  • cue-before
  • elevation
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • play-during
  • richness
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • voice-family
  • volume

CSS 2.1 Pseudo-Classes

Pseudo-Class Considerations
:active
:first-child
:focus
:hover The :hover pseudo-selector should never be used, as it is not device independent and may not be activatable by many readers as ebook readers typically do not have mice.
:lang
:link
:visited

CSS 2.1 Pseudo-Elements

Pseudo-Element Considerations
:before
and
:after
  • Not all assistive technologies announce text injected using the :before and :after pseudo-elements.
  • Since the expected behavior is to announce the injected text, avoid the using the pseudo-elements for decorative purposes.
  • Readers without CSS support will not have access to the injected text.
:first-letter
:first-line

CSS Speech Module

Note that prefixed properties should be used until the CSS 3 Speech module becomes a recommendation and a revision to EPUB 3 is released. The syntax for the prefixed properties is taken from the Working Draft dated August, 18, 2011. Each prefixed property links to this draft. The semantics are drawn from the current draft or recommendation and are provided on the corresponding CSS property in parentheses.

Property Considerations
-epub-cue
(cue)
-epub-pause
(pause)
-epub-rest
(rest)
-epub-speak
(speak)
-epub-speak-as
(speak-as)
-epub-voice-family
(voice-family)

CSS Text Level 3

Note that prefixed properties should be used until the CSS Text module becomes a recommendation and a revision to EPUB 3 is released. The syntax for the prefixed properties is taken from the Working Draft dated April, 12, 2011. Each prefixed property links to this draft. The semantics are drawn from the current draft or recommendation and are provided on the corresponding CSS property in parentheses.

Property Considerations
-epub-hyphens
(hyphens)
-epub-line-break
(line-break)
-epub-text-align-last
(text-align-last)
-epub-text-emphasis
(text-emphasis)
-epub-text-emphasis-color
(text-emphasis-color)
-epub-text-emphasis-style
(text-emphasis-style)
-epub-word-break
(word-break)

CSS Writing Modes Module Level 3

Note that prefixed properties should be used until the CSS 3 Writing Modes module becomes a recommendation and a revision to EPUB 3 is released. The syntax for the prefixed properties is taken from the Working Draft dated April, 28, 2011. Each prefixed property links to this draft. The semantics are drawn from the current draft or recommendation and are provided on the corresponding CSS property in parentheses.

Property Considerations
-epub-text-combine-horizontal
(text-combine-horizontal)
-epub-text-combine-mode
(text-combine-mode)
-epub-text-orientation
(text-orientation)
-epub-writing-mode
(writing-mode)

CSS Multi-column Layout Module

Property Considerations
break-after
break-before
break-inside
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns