Integrate accessiblility in your messages.

Prerequisites

Common core

  • Accessible writing
  • Accessible Word to PDF
  • Checking and correcting PDF accessibility

External links

to download

Content

Document properties

Document vs Web content

Document

Web content

  • Uploaded onto the Web
  • Attached to an email
  • Not necessarily going onto the Web
  • Printable
  • Written using Word, Excel, InDesign or PowerPoint
  • Formatted by the writer
  • Templates available
  • Saved and protected depending on its use
  • On the Web
  • As a hyperlink in an email
  • Only on the Web
  • Not designed to be printed
  • Written using Drupal, Dreamweaver, Contribute, DotNetNuke, WordPress etc.
  • Formatted according to a predetermined Cascading Style Sheet (CCS)
  • Templates sometimes available: Drupal, LibGuide
Document parameters
  • Make sure to clearly identify the language of your document.
  • The way your document’s parameters are set depends on the formatting tool used.
Naming a document

Good

Bad

  • Unique. (Autumn-form.pdf)
  • Short (Presentation-letter.docx)
  • Representative of the content (Intro-letter.pdf)
  • Unilingual (letter.pptx)
  • Correct language (letter.pdf)
  • No accents or symbols (intro-day.rtf)
  • Words separated by hyphens (name-of-document.docx)

  • Redundant (form.pdf)
  • Long (Presentation letter_conf_invitation_lunch_Tuesday_2014_VIP.pdf)
  • Not representative of content (letter_aid3948e.pdf)
  • Bilingual (lettre_letter.pptx)
  • Wrong language (Intro_lettre_EN.pdf)
  • Contains accents or symbols (Résumé_intro.rtf)
  • Separated by spaces or underscores (no letter.doc) (no_letter.doc)
Bilingual

Good

Bad

  • Names or acronyms in both languages separated by a hyphen

e.g.: hro-bdp.jpg (English acronym first for pages in english and French acronym first for    pages in French)

  • Use words that are identical in both languages

e.g.: guide-uottawa-2014.jpg

  • English name for English pages, French name for French pages

e.g.: atelier-word-2014.jpg

  • Adding an extension at the end of a French title (-eng, -en, -e or -E) to indicate that the document is in English (or vice versa)

e.g.: sortie-printemps-formulaire-eng.jpg

Visual cues

Visual clues
  • Use the University’s logo, colours and font on all your documents to remind the reader where the document originated.
  • To learn more, see the 2014 uOttawa Web Style Guide (PDF version 1.1 MB )
  • The Communications Directorate now offers accessible Word, PowerPoint and InDesign templates, with online video tutorials coming soon. 

 

Examples
  • The form’s logo matches the Web page, which reminds the user where the form originated.

Screenshot canada revenue agency

Form canada revenue agancy

Vocabulary

Directions

Avoid giving vague directions.

 

Bad

Good

  • To learn more, click here
  • Contact us
  • See the table below
  • To learn more, check the Standards index
  • Contact the Human Rights Office
  • See the table below, entitled Annual Report on Communications Accessibility 2014
Several languages in the same document
  • Avoid creating bilingual documents.
  • A switch from one language to another must be labelled in the document; the labelling depends on the type of document.
Use the right terms

Characters

Colour
  • Try to use black and white for text.
  • Try to use coloured characters only for headings or underlined text only.

Good colors and bad colors

 

Font

Bad

Good

Size
  • Printed: 12-point or larger
  • Electronic or Web: 9-point or larger

Word emphasis

Bad

Good

Good word emphasis
  • Important information must also be readable for people who have trouble telling colours apart.

Space between letters

Bad

Good

  • When you use Arial, Verdana or Myriad, the character spacing is automatically set to meet the standard.

Styles

Line spacing

Standard

Example

  • Space between lines: 25% to 30% of character height.
  • Thicker characters require slightly more space between lines.

Line spacing example
  • If you find yourself using the space bar or return key several times to create the line spacing you want, you probably haven’t formatted your document properly.   
  • The line spacing automatically generated by Word, Excel, PPT and email meets the standards.
Columns

Linear text

Text in columns

 

 

  • Dividing texts into columns reduces eye movement.
Margins
  • Increasing the size of your document’s margins helps readers who use a magnifying glass.
Headings and sub-headings
  • Separate the text in a document by using headings and sub-headings (Heading 1, Heading 2, Heading 3…)
  • Create a table of contents and/or reference points for long sections of text.
  • Heading 1 is reserved for the document title only. Subsequent heading levels are Heading 2, Heading 3, Heading 4
Headings - Incorrect use

Bad practices

Examples

  • Using the Heading function to emphasize a sentence that is not in the heading.
  • Switching from Heading 3 to Heading 5 to increase the font size.

 

Errors in the example above:

  • Switching from Heading 1 to Heading 3.
  • Heading 3 is not representative: the heading should read Contact, Address or Partner … And the creator of the document is not listed.
Headings - Correct use

Good practices

Examples

  • Headings and sub-headings in hierarchical order
  • Headings and sub-headings running consecutively (Heading 123...).
  • Heading reflects the content.

Other incorrect practices

Bad practices

Examples

  • Setting up the page layout or changing pages by using spaces or returns.
  • Creating lists with hyphens or special symbols.
  • Using pictures
  • Using hyphens
  • Using the space bar
  • Using return to create or format lists

Other correct practices

Goodd practices

Examples

  • Setting up the page layout or changing pages by using page or section breaks.
  • Creating lists using the bulleted list  or numbered list functions.
  • Introduction to Accessibility
  • Accessible Writing
  • Making Videos Accessible
  • Accessible Forms
  1. Visit the Accessibility website
  2. Pick a workshop
  3. Check the prerequisites
  4. Download the material required
  5. Register

Pictures

Pictures

There are two types of pictures:

  • Decorative pictures
  • Informative pictures
Decorative vs. Informative Pictures

Decorative Pictures

Informative Pictures

  • Used to make a page more visually appealing.
  • Contains information that is not essential to the message.
  • Use of one decorative image is encouraged.

 

  • Used to inform the reader.
  • Contains information that is essential to understanding the message, but that cannot be read by assisted reading software.
  • May be simple or complex.
  • Use of informative picture is not recommended.
Decorative pictures - Examples

Decorative Pictures

Examples

  • Picture at the top of a letter
  • Calendar picture without date
  • Other drawings or photos that do not express information tha tis essential to understanding the message.

 

 

Informative pictures - Examples

Informative Pictures

Examples

Simple

  • Arrow
  • Calendar with date
  • Signature
  • Logo
  • Checkmarks in a table

Complex

  • Complex math formula
  • Geographic map
  • Diagram
  • Org chart

 

Requirements for each type of picture

Decorative Pictures

Informative Pictures

  • Alternate text not required.
  • A picture label is required: usually background, artefact or null alt text so that a screen reader ignores the picture.
  • Picture should not be wrapped in line with the text.
  • The way to label depends on the document format.
  • Alternate text or caption required.
  • A picture label is required: usually done automatically with the addition of an alt text.
  • Picture should be wrapped in line with the text so that a screen reader can tah the image to a specific portion of the text.
  • Label depends on the document format.

 

Alternate text vs caption

Alternate text

Caption

  • A few words (150 characters max)
  • Simple description of the picture or photo
  • Generally hidden
  • Can only be read using assistive software

 

  • Text can be short or long
  • Summarizes or describes complex informative picture
  • May or may not be hidden
  • May be visible to all or may only be read using assistive software (your choice)
  • Put a period at the end of alternate text or captions, even if not a complete sentence, to tell the reader to change intonation.
Standards for alternate text

Good practices

Examples

  • Dividing texts into columns reduces eye movement.
  • Attach alternate text to the image (the method depends on the document or page format)
  • Text is in the language of the document or page
  • Avoid redundancies, i.e.: do not write “picture of” or “logo of” or repeat a portion of the text or heading in the alternate text itself.
  • Tip: Replace informative pictures with text, e.g.: write Register Now instead of using a picture. 

Alternate text: Important!!!

Alternate text: November 15

Standards for captions

Bad practices

Good practices

  • Repeating the title of the graph that is already included in text format in the caption.
  • Writing ''graph of'' or ''picture of'' in the caption,
  • Include the caption as an attachment or under the picture.
  • Make sure the caption is in the same language as the document.
  • Include the name of the graph only if it is stated in the picture (not as text).

Tables

Tables

There are two types of tables:

  • Layout tables
  • Data tables

Both these types of tables can be either simple or complex.

  • Tables are difficult for assisted software to read. Therefore, we recommend that you avoid using tables.
  • If you must use a table, make sure that you simplify it.
Layout Tables

Characteristics

Example

  • Table is used for laying out text on a page. Do not use this type of table.

Why no use this type of table?
  • Increases file and document size unnecessarily.
  • Increases development time (more code, longer to test, changes are difficult).
  • Greatly reduces accessibility and can lead to printing problems.

Layout table
Data table

Characteristics

Example

  • A data table is used to organize various sets of data (either numeric or textual) so that they can be compared and analysed.
 

 

Simple data table

Characteristics

Example

  • No cells have been merged or split
  • Straight-forward division of information
Requirements:
  • You must assign headers to the rows and columns (see pictures 1 and 2).
 

 

Complex data table

Characteristics

Example

  • Uses more than one row of headers or more than one column of headers, hence one column header refers to  two or more columns of data.
  • Uses “split” or “merged” cells

 

Requirements:
  • Associate each cell (except those in the top row and first column) with every corresponding header. In other words…
  1. Assign a unique ID to each header cell.
  2. Assign an attribute header (title) to each data cell.
  3. This must be done by hand directly in the code
  • Insert a caption
 

 

  • Avoid using complex data tables; to make sure that content is easy to read, use several simple tables instead. 
Simplifying a table

Bad practices

Good practices

  • Leaving rows blank.
  • Adding rows to make the table look better.
  • Imbedding tables within tables.
  • Merging cells.
  • Inserting pictures.
  • Create several smaller, simple tables rather than one large, complex table.
  • Highlight the column and row headers by using bold or a larger font size.
  • Provide row and column header titles.
  • Replace missing data with text (e.g. n/a).
  • Use formatting options to create spaces.
  • Describe the contents of the table in a caption.

Simplifying a table - Examples

Complex Elements

Example

  • Two merged cells
  • One empty cell
  • Horizontal and vertical headers
  • An informative picture (x)

 

Solutions

Example

  • Divide the table into two
  • Fill in the empty cell
  • Eliminate the horizontal header
  • Remove the informative picture

 

Layout

Contrast

Bad practices

Good practices

  • Use contrasting colours for text and background. 
Check the contrast

After downloading the contrast checker

  1. Select the first dropper and place it on the text
  2. Select the second dropper and place it on the background colour that seems to contrast least with the text.
  3. Check the contrast result under the Text sub-heading. Contrast must be at least AA or better. 

  • Are you using a picture as a background? Check the contrast in both languages!  The translated text may extend over a greater or smaller surface area. 

Navigation

Table of contents
  • If your document is well organized, the table of contents will be easy to make. The method of doing so will depend on the medium or formatting tool you use.
Bookmark
  • Allows readers to return easily to the section of the document to which it refers.
  • Can be tagged to a word, a section of text, or a location in the document.
Cross-Reference
  • Refers to an item that appears somewhere else in the document.
  • May refer to a heading, a footnote, a bookmark, a caption or a numbered paragraph.
  • Do not use a cross-reference to refer to another document. 
Hyperlink

Allows the reader to

  • Navigate to somewhere on the Web,
  • Navigate to somewhere else in the document itself,
  • Open an email address,
  • Open another file.
Standards for hyperlinks
  • Underlined
  • Clear and concise
  • Specifies the link destination
  • No longer than 80 characters
  • Specifies whether the link opens a PDF, and its size e.g., Registration Form (PDF version, 36 KB)
  • Specifies if the link opens a new window or is leaving the current site, e.g. See Accessibility (new window) or (external link)
  • Always use text to describe picture hyperlinks
  • Make sure that the tooltip option(pop-up windows) is empty.
Naming a hyperlink
  • Use text to describe the link, not the address itself.
E.g..:“Contact uOttawa” not “Contact http://www.uottawa.ca
  • Use the entire email address for links to an Outlook email address. E.g..:Marie-Claude.Gagnon@uottawa.ca” not “Marie-Claude Gagnon ”.
  • Be specific about the destination of the link.
E.g.: Write “Check the calendar of events” not “Click here
  • Do not give the same name to two different hyperlinks.
E.g. “Contact us” (for a link to the library) and “Contact us” (for a link to uOttawa) can cause confusion on the same page. Better to write “Contact the library” and “Contact uOttawa”.
  • Be specific in naming hyperlinks that lead to a PDF document.

Type of paper

Paper and materials

Bad practices

Good practices

  • Watermarks
  • Complex pictures in the background
  • Paper with a glossy finish
  • Use a paper with a matte or non-glossy finish to reduce glare
  • Instead of a watermark, place the information at the top of the page

 

Quick checklist

Tools

Internal links

External links

Communications Directorate
Word, PowerPoint and InDesign templates(soon available on the CD website)
Language Services
Human Rights Office– Accessibility

Workshops

Support

Teaching and Learning Support Service

To download (ideally from Firefox)

 

Accessibility training: Introduction
How to create an accessible campaign
How to interact with accessibility in mind
How to create accessible web content
Find an expert

Marie-Claude Gagnon, Web Accessibility Compliance Coordinator

613-562-5800 extension 7452
Marie-Claude.Gagnon@uOttawa.ca

Back to top