Formatting for the web
Accessibility
Creating accessible content is all about making it easy for readers to comprehend the information and message presented to them. You can achieve this by breaking up your content into small, digestible parts and organizing it in a logical manner with headers and subheaders.
This will be particularly helpful for readers using a screen reader as the headers and subheaders help convey a clear content structure to them.
Refer to the headings and subheadings section for best practices.
Abbreviations (acronyms, initialisms, etc.)
Please avoid the use of all abbreviations as users of the website will not necessarily understand what they mean. Additionally, abbreviations are often mispronounced when spoken out loud by screen readers. For a screen reader to correctly read out a specific abbreviation, it needs to be taught how to do so using specific code. The Digital and Web Operations team has done this for several commonly-used abbreviations at Athabasca University (ie - AU). For any abbreviations that you must use in your content, please email web_services@athabascau.ca so that we can prepare code for screen readers to read it aloud correctly.
Avoid directional language
Using directional language will help someone reach a destination in real life, but on the web, it diminishes our content’s accessibility. For example, fill out the form below or click the button to the right isn’t helpful for people with visual impairments. Instead of fill out the form above you could write fill in the form on this page to get in contact with us. In the other example, omit click the button to the right, because buttons with the link destination will be orally dictated to the user on accessibility tools.
Alt text
Alt text is an important element in inclusive web design to make images accessible to readers who may be unable to see them. The reasons for that can vary from users who are visually impaired (and using screen readers) to users whose browsers block images. To make our web content accessible to all users, regardless of visual ability or browser preference, we ensure that all of our image files include descriptive alt text.
Tips for good alt text:
- Describe the image as detailed as possible. Someone who is unable to see the image should get the same information from it as someone who can.
- However, be mindful of screen reader limits. Most readers cut off alt text after 125 characters, so ensure you get the image content across within those limits.
- Skip phrases like "image of" or "picture of". There is no need to add descriptors like that (and waste valuable characters) as it is assumed that alt text refers to images.
- Use relevant keywords if possible. While our first priority is describing the image accurately to our users, alt text also provides a great opportunity to signal to search engines that our content is highly relevant for certain keywords.
Example
Alt text: A male university student in blue shirt sitting in a classroom with classmates raising his hand.
Headings, subheadings, and body copy
Headings and subheadings are used to organize content and denote hierarchy. The main heading (H1), and the paragraph(s) underneath it, appears first and conveys the entire page’s purpose. Each subheading (H2, H3, H4 and so on) summarizes a different supporting idea that contributes to the core message of the page.
Make sure all of your headings are descriptive and contain the main point of the subsequent paragraph(s).
Here’s an example of how to use headers and subheaders correctly:
Getting started at Athabasca University (H1)
Admission requirements (H2)
Undergraduate admissions (H3)
Graduate admissions (H3)
Non-program admissions (H3)
Italics, bold, and underline
Avoid using underline, italics, bold text or switching fonts unless it is required for branding. Do not use all caps for any body copy or headings.
Italicize the titles of books, magazines, songs, musical compositions, movies, computer games, and similar art and literary works.
- Vogue
- McLean’s
- The Godfather
- The Simpsons
- Waiting for Godot
If there is an exclamation mark or question mark that is part of the italicized phrase, put it in italics.
- My favourite movie is Who’s Afraid of Virginia Woolf?
Links and buttons
Insert links (also called hyperlinks) into your content to direct the reader to trusted internal or external resources if they are directly relevant to your content. Avoid linking to supporting resources if they are not directly related to your message. Adding too much additional context runs the risk of the reader getting lost or overwhelmed by an abundance of information.
Keep the following in mind when creating a link:
- Good links are descriptive, concise, and include a keyword
- Use just as many words as needed to describe the link’s destination while keeping it concise
- Do not use the same words to link to distinct sources
- Embed the hyperlink directly into the flow of a sentence
- Do not call out links specifically with added phrases like click here
- Include relevant keywords where possible
Example
- Our academic advisors are also available to help you choose your courses.
- Please feel free to contact us to book an appointment or discuss any of the services we have available.
Buttons
Buttons are visual elements used to encourage users to take a particular action on a page. A few rules of thumb to use buttons effectively:
- write text for all buttons and links in sentence case, not title case
- avoid the use of exclamation points
- use action words (Sign up, Send)
- use active voice (‘Submit your request’ vs. ‘Request submission’)
- keep it short (‘Apply now’ vs ‘Upload your application submission form’)
Here are some common AU website button examples:
Register nowSubmitAsk AU
Subscribe
Lists – bulleted and numbered
Where the list is short and simple, write it out in sentence form and especially so where the introduction and items listed form complete and proper grammatical sentences. Otherwise, use vertical lists. To avoid long, dangling, ‘skinny’ lists, short items may be arranged in 2 or more columns.
If the items are not complete sentences or are phrases without internal punctuation, begin each item with a lowercase letter. Do not use capitals or "ending" punctuation such as periods at the end of each item; let them sit "naked".
Example
In this course you will learn:
- the process of creating a project network diagram
- estimation of time durations
- the difference between effort and duration
- determination of the critical path and calculate float
- working with milestones
- how to create a project schedule
Numbered vertical lists
Unless lettered or numbered lists serve a purpose (e.g., indicate task order or chronology) they should be omitted.
Example
How to enrol as a non-program student:
- Fill out the Undergraduate General Application, and choose to enrol as a non-program student.
- Pay the 1-time general application fee.
- Write down your AU student ID number at the end of the application process. Your ID number will also appear on your printed or emailed receipt if you choose one of those options.
- You are now ready to start registering for an AU undergraduate course as a non-program student.
Updated August 12, 2024 by Digital & Web Operations (web_services@athabascau.ca)