Last week, we covered accessibility and audio for hearing and hearing impaired audience members. We distinguished between closed captions and subtitles and when transcripts should be used. This post can be viewed here: Hacking Accessibility: Audio.
In our post on January 25th, Hacking Accessibility: Visual Information, we looked at ALT Text and colour with regards to accessibility of digital content. This week, we want to look at text and how to alternatively emphasize key content without colour. This is to assist digital content designers in the creation of teaching content.
Whilst accessibility covers the creation of all content, this blog post covers accessibility in terms of content viewed on the internet. Within Queen’s University, this would include the creation of any digital content which is uploaded or accessed via Canvas or other online platforms.
Canvas pages are web pages. Accessibility in this instance is more crucial in relation to Web Content Accessibility Guidelines (WCAG) and Accessibility legislation. Everything we have covered in posts regards ALT Text, video, audio, etc., still applies for content inserted onto web pages (Canvas) as well as web pages.
Please do check out our previous accessibility posts and apply those best practices to web pages as well as digital content:
To begin, please see the paragraph (below) from our previous post. This is about WCAG guidelines in relation to text colour and background contrast for online use.
It’s worth considering the colour:
- of text and backgrounds of digital content in general
- appearing within images and other visual information
These considerations are to ensure key messages are conveyed whether colour is present or absent.
Why is contrast and colour important?
The Web Content Accessibility Guidelines (WCAG) Level AAA standard requires a contrast ratio of at least 7:1 for normal text, i.e., size 12. This ratio changes to 4.5:1 for large text with large text defined as size 14 and bold or bigger (i.e., size 18).
The contrast ratio can be defined as the measure of difference in perceived luminance (or brightness) between two colors or tones. This difference in brightness is expressed as a ratio. White text on a white background would be a 1:1 ratio (not viewable with no contrast between the elements) compared to black text on a white background as a 21:1 ratio.
Consider using these practices no matter if it related to content creation or web published pages.
Coloured text
As a design element, colour can be powerful. It can convey mood and assist in drawing attention to key content. However, it’s not a good idea to use colour by itself to convey meaning. This can be ineffective as:
- different cultures have different colour associations
- people living with colour blindness or visual impairment may or will not perceive colour
- people living with cognitive impairment may perceive colour very differently. This may set off triggers
Key text: don’t use colour alone
When digital content is created or announcements are posted to students, recipients often witness the use of red text to emphasize crucial information. From an accessibility viewpoint, this is not good practice. Why?
Consider people living with colour blindness. Those whom cannot see (for example) the red/green colours, see tones of grey. If using red to highlight important text, this may not have sufficient contrast for viewers to see the important information.
Additionally, visually impaired audience members are affected as screen readers do not recognise text colour. Screen readers only read text (characters) but not visual information (colour). Therefore, colour as emphasis disadvantages users of screen readers.
Emphasizing key text: best practice
Highlighting key information in MS Word, MS PowerPoint or via a web page should not be by colour alone. Apply the best practice of emphasizing key content through the use of text formatting or alternative visual cues.
Avoid underlining text to emphasize. Underlined text is used online to denote clickable links to other content.
Text formatting can include:
- bold
- italic
- different font type / size
Bold
Single words or phrases can be emphasized with bold formatting. This makes the text heavier. And heavier text is a visual clue to the importance of the message. Screen readers can ‘read’ the heavier text. This is conveyed via screen readers and the additional ‘tags’ applied to the text ‘behind the scenes’.
However, the overuse of bold formatting defeats the purpose of its use and gives all text equal weight. What is overuse? Two lines or more of text and/or full paragraphs in bold format.
Only use bold for important text.
Italics
Italic text can be harder to read and may be missed as key information. Italics is best used for citation and/or quotes.
Different font type / size
Font size and type can be amended to emphasize text. Again, use this on single words or phrases or on Intro paragraphs to articles or journals. This larger text might be 0.5 or 1.0 points larger, it’s a subtle use of larger text but it should be noticeable.
Text formatting can be used in MS Word, MS PowerPoint and for online web pages. On web pages, the bold and italic will differ slightly online to be <strong> and <em>. However, users may not be aware of HTML formatting if using a rich content editor. Don’t worry, format text how you normally would.
Use of visual cues or icons
If a course of study has a lot of regular tips, reminders or other recurring items. Why not use visual cues or icons? Cues could be:
- text cues, i.e., !Tip! or !Reminder! or !Important Information!
- icons
Text cues
Repeated use of words or phrases can be enough to highlight information as important, i.e., !Important information! The text enclosed in exclamations ‘stands out’.
These text cues could be colour coded and/or formatted for sighted users with the added benefit of being picked up by screen readers.
Icons
Icons could include small graphics for lectures, practicals, lab, tutorials, essential reading, top tips, assessment, etc. Again, consider the colour and contrast of the icons against the background.
These visuals can be used regularly to:
- form expectation and familiarity regards content and layout
- build upon consistently
In Canvas, it would be nice to have a page template with the same or similar layout per day or week of teaching (based on available content). On modules with multiple contributors, more consideration and co-ordination is required regards layout and consistency as this impacts student experience.
That said, whatever method you use to highlight key information, keep it consistent and do consider the suggestions within this post.
Visual content: colour
Before we finish up on this weeks post, please do consider colour in visual content (images, graphics, charts, icons, etc.).
There is a colour blindness plug-in available for the Chrome and Firefox browsers (Chrome is recommended for using Canvas, O365 and Mediasite platforms). This is helpful to ensure images convey the intended message. The plug is is called Let’s Get Colour Blind.
To use the plug-in, download it for the relevant browser. Load the web page you want to simulate and click the Extension icon. We compared are a number of simulations on the Queen’s Online portal, which follow.
Here is a screen grab of Queen’s Online in Normal view:
Next, Queen’s Online in Deuteranomaly (green is affected) simulated:
Then, Queen’s Online in Protanomaly (red is affected) simulated.
Lastly, Queen’s Online in Tritanomaly (blue is affected) simulated.
Please note, the icons only change in colour. Users of this site can still navigate and nothing relies solely on colour.
No doubt there are examples where signposting icons are the same shape/size with different colours. This is not good practice. Colour code icons but use different icons to separate different sections.
For more on Contrast and images, please refer to our previous post on Hacking Accessibility: Visual Information. This gives guidance on image colour and contrast. It also covers a little on using patterns and symbols to communicate information.
Line charts can use thick, thin, dashed and/or dotted lines with square, round, triangular symbols. Colour isn’t required.
Summary
Throughout this post, we have emphasized the use of formatting, text cues and icons to highlight important text. Do not use colour by itself as this is not beneficial to all audience members.
In the latter part of the post, we show some alternatives to communicating chart information through using pattern and/or symbol. This makes colour redundant.
Next time
Our blog post next Monday will look at hacking accessibility in the form of Design. The design of digital content will be over several weeks and we will make design suggestions to assist users with content creation.
Remember, the DigiKnow blog posts are now released at noon on a Monday.
Please do join us then to learn more and don’t forget to follow us on Twitter: @MDBSelearn.
0 Comments