< Back to Demos | Learn more at PaulJAdam.com >

Accessibility of CSS text-decoration: line-through; and <del> <ins>

Problem: Need to let blind users know of a price reduction, sale price that is visually denoted by grayed out text with strike through lines and red colored text.

Problem 2: Screen reader assistive technologies do NOT indicate changes in text when using standard HTML4/CSS semantic code. Why don't screen readers support this!?

CSS text-decoration: line-through;

$12.50 $3.99

<del>Delete</del> <ins>Insert</ins>

$12.50 $3.99

Accessibility Hacks (Solutions) for Screen Readers

One problem is that finding the visually hidden text with explore-by-touch navigation on an iPhone with VoiceOver is not really possible.

These solutions do sound good with linear, swipe navigation, however.

Visually Clipped Text

Modern method to hide text from visual users to be read by screen reader users only.

Price Reduced From: $12.50 On Sale At: $3.99

CSS Generated Content + Visually Clipped Text

With CSS content property you can keep your markup much cleaner and still visually hide the CSS generated text.

$12.50 $3.99

Options for Focusable Elements

With focusable elements you can just change the accessible name of the element in the API e.g. using aria-label. DIV elements with a tabindex won't speak aria-labels unless you apply an accessibility API role. VO OS X though does read the aria-label of the tabindex div with no role as a "Group".

aria-label On Focusable Elements

$12.50 $3.99

$12.50 $3.99

$12.50 $3.99

$12.50 $3.99

aria-label On Static Text Elements role="text" on 2nd example

$12.50 $3.99

$12.50 $3.99

aria-label and role=img On Static Text Elements

$12.50 $3.99