Textual content comes in many forms, including
- semantically in paragraphs, headings, lists and tables;
- visually in images, infographics and fliers and
- programmatically in alternative text, closed captions and transcriptions.
All forms should be made readable and understandable, using proper grammar, capitalization, punctuation, spelling, formatting, styling and word choice.
Formatting versus Styling
While it is not always apparent within the software you are using, you should always lean towards formatting options over styling options to create semantically correct text content.
Formatting Considerations for Bold and Italics
An entire paragraph that is bolded does not indicate to a screen reader that it is a heading. As a heading, it obtains special functionality that aids screen reader users in scanning a page much like a visual user skipping around on a page. But as a bolded paragraph, it does not obtain that scanning functionality. Instead, it behaves like the average paragraph, but it is read as though there is strong emphasis across all the content in the paragraph. That takes away from the functionality defined for the bold styling, since if everything is important, then nothing is important.
Similar issues occur for italicizing a paragraph as this indicates emphasis, a slightly lower form of importance.
Styling Considerations for Bold, Italics and Underline
Styling on the Tarleton website is determined mostly by the AP Stylebook. Web standards are added on to assist with reading web content.
For example, you do not use underline for titles or headings on webpages because underlined text typically is understood to be a link. Instead, quotes may or may not be used, depending on the publication, to denote titles.
See Brandeis University’s Web Style Guide cheat sheet regarding Associate Press Style for titles, along with numbers, abbreviations (e.g. academic degrees, dates, time, geography) and punctuation.
Jargon (Unusual Words)
We are familiar with our own jargon, however, the words we use are not always shared across other universities, geographic regions or cultures.
For example, Residential Living & Learning is commonly searched for by terms like housing, dorms, halls or accommodations. Degree programs may be called courses, majors or fields of study.
- Try to use common words first for navigational elements, links and headings, and then introduce the jargon/terms with as many context clues as possible.
- Define all jargon/terms either on the page using context clues, or link to more information and/or definitions.
Abbreviations
Similar to jargon, we have our own abbreviations, including unique acronyms. These should be spelled out the first time they are mentioned on a page, followed by the abbreviation in parentheses.
For example, “Student Government Association (SGA).” From then on, you can use the abbreviation and occasionally switch back to the full name where needed.
When possible, the HTML tag <abbr>
may be used to surround the abbreviation and define it (e.g. <abbr title="Student Government Association">SGA</abbr>
). Not all software allows for editing HTML code, including certain programmable areas like metadata and alternative text.
Note that “TSU” is not an approved abbreviation from The Texas A&M University System for Tarleton State University on any content or materials distributed to an external audience (e.g. web, social media, email to prospective students). We only use “Tarleton” or “Tarleton State University.”
References
Guides and How-To’s
- Usability.gov’s Web Standards and Usability Guidelines
- Chapter 3: Accessibility
- Chapter 9: Headings, Titles, and Labels
- Chapter 11: Text Appearance
- Chapter 12: Lists
- Chapter 15: Writing Web Content
- Chapter 16: Content Organization
- Web Accessibility Initiative (WAI)
- Tutorials
- Designing and Developing
- Web AIM
- Brandeis University: Web Style Guide – Associated Press Style
- Associated Press (AP) Stylebook (Tarleton subscription)
- Purdue University: Online Writing Lab (OWL)
- Plain Language Action and Information Network
Guidelines
- WCAG 2.0 Guideline 3.1 – Readable
- Understanding WCAG 2.0 Guideline 3.1
- Techniques for WCAG 2.0 3.1.5: Reading Level
- G86: Providing a text summary that can be understood by people with lower secondary education level reading ability
- G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes
- G79: Providing a spoken version of the text
- G153: Making the text easier to read
- G160: Providing sign language versions of information, ideas, and processes that must be understood in order to use the content