Basic Web Accessibility Guide

Any new content created and posted to a Trent University website as of January 1, 2012 must meet the standards outlined in the Web Content Accessibility Guidelines 2.0 Level A. If someone requests an accessible format of a section on your site, you must be able to provide it to them.

As a basic guide, the key components of having accessible website content include:

• Text
• Navigation
• Images
• Hyperlinks
• Colour
• Audio/Video
  • How to create video closed captions
  • How to create a video transcript
• Tables
• Documents

Text

• Body Copy

  • Content should always be placed in logical order from top to bottom.
  • Never centre align nor justify any text, it makes it difficult to read for persons with vision disabilities.
  • Never create images of text, as text must be re-sizable to 200% and still readable as persons with low-vision will increase the text size to read it.
  • For public web content the recommended reading level is about grade 9, or lower level high school.
    • Paragraphs and sentences must be short and written in plain, concise language.
    • Introduce acronyms and spell out abbreviations in the first instance on every individual webpage, after that you can use the acronym or abbreviation on that page.
    • Avoid making the webpage too "busy" by using lots of white space and by avoiding too many different colors, fonts and images
    • Avoid jargons
  • Copy and paste text from a plain text editor directly onto a webpage, never use Microsoft Word (e.g. Note Pad). If you have a Microsoft Word document, copy and paste the text directly to NotePad and then from Notepad onto your webpage. Web content can be perceived easily when reading top to bottom in the source code.

• Headings

  • Use headings to break up sections of the page using clear and concise language. They make it simple for users with screen reading devices to navigate the page quickly to find the section that they are interested in.
  • A sentence is not a heading, use this webpage as an example.
  • Headings must be used properly in a hierarchical fashion, as demonstrated on this webpage, and describe the topic accurately. This is achieved using the 4 following text styles found in the Format Menu (drop down):
    • Normal (for body copy only)
    • Heading 1 (for Title at the top of the page) - there can only be one H1 on a webpage.
    • Heading 2 (for the page Subtitle and secondary headings)
    • Heading 3 (for headings nested inside of the secondary headings)
    • Heading 4 (for headings nested inside of the tertiary heading sections)
  • Use this page as a guide for correctly setting up the headings on your webpage.
  • The text styles in Drupal have been pre-styled using cascading styles sheets (CSS) to match the Trent University brand standards and to adhere to accessibility standards. Refrain from coloring text and creating your own styles as they create accessibility barriers (e.g. never bold headings)

• Lists

  • Lists, groups of links, or other listable items must be styled using <ol>, <ul>, or <dl> which is automatically achieved using the bulleted list button and the numbered list button.
  • Refrain from using the spacebar and the return keys to create horizontal spaces, as these will create barriers for screen reader users.

Navigation

• The entire Trent University website must be navigable with the keyboard alone so that users can use keyboard functionality to move around the page. To achieve this ensure that you are exclusively using the formats available to you in the Format Menu (mentioned above, see Headings) for every piece of content that you upload onto your website.

Images

• Provide text equivalents for every non-text element (images, graphical representations, image map regions, animations, applets and programmatic objects, frames, scripts, etc.) via alternative text (alt text), no exceptions. Alt text must replace the meaning of an image accurately and succinctly. Alternative text is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.

  • Alt Text Best Practices

    • • Alt text must replace the meaning of an image accurately and succinctly. For example, it wouldn’t be helpful to someone who is blind and switches on their assistive device to hear “room” when they come across an image on the Trent University housing website and want to learn more about the physical components of a residence room. It would be more useful to hear “Interior second-floor carpeted residence room at Otonabee College with 2 single beds & a window view overlooking the river”
      • Alt text should be limited to 125 characters since most assistive devices will stop dictating after that point. Secondly going over the character limit will output an error message in Web Accessibility Checker reports preventing the website from meeting the AODA standard.
      • Don't put the word "image" in alt text.
      • Don't use symbols such as amersands in alt text. Use the word "and" instead.
      • If the image is a hyperlink, the alt text must describe the destination of the hyperlink and not the content of the image itself. For example an icon of a telephone that hyperlinks to a chat application could have alt text such as “Chat now with sales representatives via our online chat application”, which informs the user that they will be taken to another window and into an application if they click on the hyperlink.
      • Website content contributors can easily add alt text to all images using Drupal, Adobe Contribute, Microsoft Word documents, PDF documents, etc., using the resources below:
        • How to add alt text to an image via Microsoft Word Documents & PDFs
        • How to add alt text to an image via Adobe Contribute
        • How to add alt text to an image via Drupal
• Use text to convey information rather than images of text whenever possible
• Always choose clear images
• Never blur images
• Never use graphics alone to indicate a state (i.e. on/off; yes/no)

Hyperlinks

• Avoid using URLs as link text, instead use meaningful hyperlink name. Hyperlink names must briefly describe the destination of the link, and is usually the title of the target webpage or document. Hyperlinks must not be written in the format "http://www.trentu.ca/calendar".
  • For example: Discover the Trent University Calendar instructs the user where they will land once they click on the hyperlink.
• Never use “click here” or “read more”; these are meaningless without context.
• Don't open links in a new window. It breaks the back button and should only be used in special circumstances and with advanced warning.

Colour

• Don't rely on colour alone to convey information, always include a visible indication. For example don’t instruct the user to click on a link that is of a certain colour, there must always be a physical indicator such as a bullet point.
• Colour contrast needs to be at least 4.5:1. By using the Trent University format menu you will ensure that the colour contrast is always accurate and consistent for all content that you upload.

Audio/Video

• Always provide closed captions on your videos and audio files.

  • YouTube

    • • Youtube has the ability to automatically generate fairly accurate captions for uploaded videos. However, these automatic captions are never fully accurate, especially when there are multiple speakers or background noises. Start with what YouTube provides you, then improve upon it manually.
      • Follow the Captioning YouTube Videos (video and instructions) on the National Center on Disability and Access to Education website.
      • Below is a list of steps to create and upload closed captions onto your YouTube videos:
  1. Upload your finished video (never begin closed captioning until the video is final!) to your YouTube channel.
  2. Set it to Private (since it's not ready to be shared just yet).
  3. Follow the How to automatically add captions to YouTube videos instructions. You will likely have to wait several hours for YouTube to generate its automatic closed captions. The longer the video, the longer it takes.
  4. Once YouTube has generated the automatic closed captions, use YouTube’s closed caption editor to clean up the following: (How to edit captions on YouTube videos)
     • Words: fix spelling, and remove “ummms” that get in the way of understanding
     • Pacing: shift words to the next or preceding caption to ensure complete phrases never bridge two captions (i.e. nouns and verbs are connected to their modifiers, and prepositional phrases are not separated)
     • Consider deleting any time segments which are left blank, then select the timer on your full-sentence caption and increase the time to run for the duration of the full sentence. The idea is to steal time from pauses to fit in the full text, in situations where it’s difficult to get all the words in… but not to go as far as to replace pauses that are part of “the story"
     • No caption should appear for less than two seconds
     • Add descriptions of sound in square brackets (such as [music] or [laughter]) to help users understand what is taking place
     • For each speaker, add tags like ”>> BERMAN:”, at the beginning of a new line, to identify speakers or change of speaker
     • If someone is spelling a word, caption it with hyphens, as in S-P-E-L-L-I-N-G
     • Always include alternative (alt) text for every video or audio file: alt text needs to replace the meaning of image accurately and succinctly.
  5. Looking to post your video(s) to the Trent University YouTube Channel? Prepare an email request to send to webrequest@trentu.ca including the following items:
     • Attach the Closed Captioning file (see above for details on creating this document)
     • Attach the transcript (see above for details on creating this document)
     • Supply a description of your video.
       • Include the same keywords targeted in the title of your video within the description field at least once.
       • While YouTube gives you 5,000 characters to play with in the Description field, it’s best to keep the first line of your description relatively brief, as no more than the first 157 characters will appear as a snippet in search. In fact, most search engine results will truncate descriptions starting at approximately 100 characters.
       • Include a link sending viewers back to your website immediately after the first sentence of your description. This can help ensure the URL does not appear as a rich snippet in search results, but will also not be hidden beneath the “Show More” section of the Description field.
       • Additional External Resources:
         • YouTube SEO Best Practices: Titles and Descriptions [eBook Excerpt]
     • Supply a list of relevant keywords, no more than 5-10 that are separated by commas. Please note that Trent University’s standard video keywords include: Trent University, Trent, University, Education, Peterborough, Ontario

  • Vimeo

    • Vimeo does not have the ability to input Closed Captions in the same way that YouTube does. The steps to add closed captions to Vimeo videos are as follows:
      1. Upload your video to your Vimeo account (note that your video must be made public)
      2. Copy the sharable link
      3. Create an account on amara.org
      4. Click on Subtitle Video
      5. Paste the sharable Vimeo link into the URL field and click Begin
      6. Under the Contribute section, click on Add a New Language
      7. Select the language settings from the dropdown menu that apply, then click continue
      8. The Amara closed caption editor will load your video. Add closed caption to the video by clicking play and adding the closed captions to the timeline. (note: click on the wrench icon and add the timeline view to the application to make this task simpler) You can save your draft by clicking on the Save Draft button and can revisit any time.
      9. When you're satisfied with your work click on Yes Start Syncing.
      10. Next click on Review
      11. Next click Exit
      12. Under the Language section, click on the closed caption file that you created
      13. A Download dropdown menu will appear on the right, choose VTT format from the dropdown menu and a file will download to your computer.
      14. Open up Vimeo and navigate to your video.
      15. Click on Settings.
      16. Click on the Advanced tab.
      17. In the Upload Captions & Subtitles section and click on Choose File.
      18. Navigate to the .VTT file that you saved to your computer in step 13 and click Upload.
      19. Click on Save Changes at the bottom of the page.
      20. Test the video in a web browser to ensure that the CC icon toggle has been added as a link to the bottom of the video.
• To achieve Level A compliance on your website, you must include a descriptive text transcript (WCAG 2.0 1.2.3). Always provide a transcript of the audio/video immediately following the link to the audio/video.​
  • How to create a transcript file for video with audio - follow these formatting guides in order to meet the AODA requirements
    1. ​​Go to the YouTube video’s Transcript (select the Transcript icon) and copy and paste it into a Microsoft Office Word document. Use this sample video transcript (.docx) as your template since it already contains the appropriate formatting. Remember to update the Property settings in the document with your information to meet accessibility standards for Microsoft Word documents.
    2. Remove all of the timecodes by hand
    3. Add >> to identify speakers or change of speakers (e.g. >> DR. JANE DOE: We're gathered here today....)
       • Include speakers' full names
    4. Avoid broken sentences, search and replace any extra hard-returns. Also replace all line endings with single spaces.
    5. Add headings and links where it will make the transcript more usable. This also helps with search engine optimization.
    6. It is not appropriate to change the meaning from the audio. Likewise, it is usually not appropriate to significantly correct grammar or other mistakes.
    7. Insert any descriptive text using square brackets to designate background sounds. For example, [music] or [laughter]. You can conveniently take text from an audio description script if you happen to have one). For example: [The speaker is sitting in an armchair in front of a fireplace. Throughout the entire video, he addresses the camera directly]
    8. Use a blank line to force the start of a new caption.
    9. File naming convention: YYYYMMDD_Type_AddtionalDetails.docx (e.g. 20160322_Testimonial_KaitlynParks.docx)
       • Avoid spaces
       • Use plain text and avoid characters such as &!?/•#()*^$@~><{}|
       • You can use underscores and hyphens
    10. Insert the resulting .docx into the page on your website that is linked to the “transcript” link directly below the video. Ensure that this link accurately describes the trancript, for example it it not sufficient to have a link named "Download Video Transcript" as it doesn't descirbe the trancript. Instead use "Download Bachelor of Science Graduate, Jane Doe's 2017 Convocation Testimonial".
  • How to create a transcript file for video only (no audio) - follow these formatting guides in order to meet the AODA requirements
    1. ​​View the video-only content while referring to the alternative for time-based media.
    2. Check that the information in the transcript includes the same information that is in the video-only presentation.
    3. If the video includes multiple people or characters, check that the transcript identifies which person or character is associated with each action described.
    4. Check that at least one of the following is true:
       1. The transcript itself can be programmatically determined from the text alternative for the video-only content
       2. The transcript is referred to from the programmatically determined text alternative for the video-only content
    5. If the alternate version(s) are on a separate page, check for the availability of link(s) to allow the user to get to the other versions.

Tables

• Tables should rarely be implemented and ONLY for tabular data, never for design. 
• Always use the table editor for creating tables.
• Your table must have a header column and/or row, or both. Screen reading devices will read out the appropriate heading column or row title as a user progresses through a multiple column/row table ensuring that the user never gets lost.
• Each table requires a brief description indicating the content of that table, called a caption. In Drupal the caption field is located at the bottom of the table dialog window.
• Table width must always be set to %100 to ensure that the table will be responsive and flow correctly.
• Best practices for creating accessible tables
• Table accessibility tutorials

Creating Accessible Documents

• Resources:
  • General guidelines outlined by the AODA
    • Creating Accessible Word Documents
      • Use the Accessibility Checker on your Windows desktop to find accessibility issues
      • Creating Accessible Word Documents Tutorial
      • Check Your Word Document for Accessibility Issues
      • Always populate the Summary in the Properties Panel with the following information:
        • Title (must be written as a heading, without underlines and file ending)
        • Author
        • Keywords
    • Creating Accessible Microsoft Excel Documents
    • Creating Accessible Powerpoint Presentations
    • Creating Accessible Microsoft Outlook Emails
    • Creating Accessible PDFs with Acrobat DC
    • Create and verify PDF Accessibility Acrobat Pro DC
• Do's and Don'ts
  • All of the guidelines set out above also apply to documents
  • Make a table of contents for long documents
  • Always use heading styles
    • Use short titles in headings
    • Ensure all heading styles are in the correct order
    • Use hyperlink text that is meaningful
  • Avoid using repeated blank characters
  • Avoid using floating objects
  • Use font sizes between 12 and 15 points for body text
  • Use fonts of normal weight, rather than bold or light weight fonts. If you do choose to use bold fonts for emphasis, use them sparingly
  • Use standard fonts with clear spacing and easily recognized upper and lower case characters. Sans serif fonts (e.g., Arial, Verdana) may sometimes be easier to read than serif fonts (e.g., Times New Roman, Garamond)
  • Avoid large amounts of text set all in caps, italic or underlined
  • Use normal or expanded character spacing, rather than condensed spacing
  • Avoid animated or scrolling text
  • Avoid image watermarks
  • Add alternative text to image and objects
  • Specify column header rows in tables
    • Use simple table structure
    • Avoid using blank cells for formatting
    • Structure layout tables for easy navigation
  • Use HTML: Avoid having content available only as PDF, MS Word, etc.