Search

Redacted text

Guidance on how to code redacted text.

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

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

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
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: