Week 21 Technical Service Bulletin - C22: Using CSS to control visual presentation of text

20 May 2019 | Tech Update

Helen Grimbly
  • Tweet this item
  • share this item on Linkedin

This week, Support Lead, Helen Grimbly is looking at the acessibility technique "C22: Using CSS to control visual presentation of text".

The objective of this technique from the W3C is to demonstrate how CSS can be used to control the visual presentation of text. This allows for the modification of the visual characteristics of the text. The text characteristics include things such as colour, size and font. CSS helps to separate the document structure from the presentation, which benefits accessibility.

An example that is highlighted in Sitemorse of actions for C22 is: 
- C22: Use 'em' or 'strong', or stylesheets, instead of 'b', e.g. 
If you have <b>membership</b> then you will receive a discount.

The tag <b> should be replaced with <strong> or <em> which would affect the presentation, but also these provide the semantics which screenreaders can use to translate this vocally to the user, which improves accessibility. If you wish the graphical display of the text to differ from how browsers display <strong> or <em> content, then you can do this using CSS rather than avoiding these tags. It is always important to consider document structure separately from presentation.

e.g. If you wish emphasised text to be in red then indicate the emphasis in HTML and the display attributes in CSS:

strong { color: red }

If you have <strong>membership</strong> then you will receive a discount.