Body

v3.0.0

Body is a collection of styles that apply to common content elements, these styles help users read page body content more easily.

Released

History
View changes
Install
npm i @gold.au/body
Tags
Requires
Contributors
  • Dominik Wilkowski avatar picture
  • Patrick De Young avatar picture
  • Alexander Sadleir avatar picture
  • Julian Fleetwood avatar picture
  • Alex Page avatar picture
  • Hannah J. Nicdao avatar picture
  • Petra Gulicher avatar picture
  • Simon Pascal Klein avatar picture
  • Gary Broadbent avatar picture
  • Raj Ghuman avatar picture
  • Trevor Brennan avatar picture

Maximum width paragraphs

Paragraphs are given a maximum width inside body to optimise readability across multiple lines of text. The Web Content Accessibility Guidelines recommend that lines of text do not exceed 80 characters in length.

This option can be overwritten by changing the AU-maxwidth however it is not recommended.

Horizontal separator tag

If a <hr> tag is used within content frequently it can become frustrating for users with screen readers. We recommend using aria-hidden="true" in order to hide it from screen readers.

The complete screen reader friendly tag would look like this: <hr aria-hidden="true">

Abbreviations

Screen reader support for the <abbr> element is limited and use of this element should be avoided. Abbreviations should be done in accordance with readability guidelines defined in the content guide. This means use contextual abbreviation for the first mention, and using the abbreviated term in future mentions.

As an example:

The Australian Football League (AFL) has 18 teams. The AFL was founded in 1896

The W3C (World Wide Web Consortium) provide a similar example. This way the reading-experience of a screen reader more closely user matches that of a non screen reader user.