Texte caviardé

• Version: 1.0.1
• Expert: @duboisp
• Last updated: 2019-03-26
• History:
  • (2019-03-26) Changed the redacted character for "Full block" (U+2588)
  • (2018-12-13) Initial draft

Background

Redacted text is a sub-section, often inline, of published content that are obfuscated and unreadable. For some case, the number of redacted character is included and visually represented.

Recommendation

Make the redacted text to be sementically understood as an image and apply text alternatives techniques to ensure conformance with the web accessibility standard.

This technique leverage WAI-ARIA.

Technical specification

• Use always the same character for obfuscation in your pages.

• We recommend to use the Full block as your obfuscated character.

  • Name: Full block
  • Symbol: █
  • HTML Entity: █
  • Unicode: U+2588
• Make the redacted text need to be in its own container. like: <span></span>
• Add the attribute role="img" to the redacted text container.
• Add the attribute aria-label="Redacted text" and modify the label accordingly to your context of use. Its content should be enough descriptive to conform at the text alternative WCAG success criteria (SC 1.1.1)
• Add CSS class .redacted for an inline redacted text.

Notes:

Number of redacted character (Full block U+2528) repeated.

There no such requirement because we transform the redacted content into an image. Usually the number of repeated full block character would be the same as the number of redacted character. In some cases it can makes sense to repeat the full block character to represent the width taken by latin character considering the width on one latin character is approximativly half the width of the full block character.

Note: Text alternative (aria-label)

The label can be fully adapted to your context. In the redacted text context, it can makes sense to include an indication the following is redacted content (contenu caviardé) and in some situation to include the number of redacted characters or redacted paragraph.

Redacted section (Multiple consecutive paragraph)

The whole section should be made as one big image. The semantic need to be removed for all elements which provide some semantic, like paragraph (<p>) by setting their aria role to presentation (role=presentation)

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ████████████████████ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id█ est laborum.

████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

Column 1

Column 2

5. ████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

Empty column 2

Source Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <span role="img" aria-label="20 redacted characters">████████████████████</span> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <span class="redacted" role="img" aria-label="455 redacted characters">███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id<span role="img" aria-label="1 redacted character">█</span> est laborum.</p>

<p class="redacted" role="img" aria-label="Redacted paragraph of 460 characters">████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</p>

<p><span class="redacted" role="img" aria-label="460 redacted characters">████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</span></p>

<div role="img" aria-label="Redacted section of 2 paragraphs">
	<p class="redacted" role="presentation">████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</p>

	<p class="redacted" role="presentation">████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</p>
</div>

<table class="table table-bordered">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
	</tr>
	<tr>
		<td>
			<p>5. <span class="redacted" role="img" aria-label="460 redacted characters">████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</span></p>
		</td>
		<td>Empty column 2</td>
	</tr>
</table>

API

CSS Class

redacted

Style the consecutive obfuscated characters to don't overflow outside the container of the phrasing content and they start immediatly after the previous non-redacted character.

References

• WCAG 2.1 Guideline 1.1 Text Alternatives
• WAI-ARIA 1.1 img (role)
• WAI-ARIA 1.1 aria-label (property)

Version notes

v1.0.1

The recommendation to use the redacted character "Dark shade" (U+2593) are changed for "Full block" (U+2588).

Migration instruction: Change the "Dark shade" character in your document for the "Full block" character

WCAG note: None

Rational: We received feedback saying the dark shade was not visually pleasant. Also the use of the full block on printed document is much more common than the dark shade character.

Feedback (for v1.0) The consensus feedback from employees in a small office was the "it hurts the eyes" or "it is headache inducing".

v1.0

Released on: 2018-12-13 and packaged with GCWeb 5.0