Body
v3.0.0Body 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
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.