Skip to main content

Accessibility & Alt Text

PHSA is committed to making its websites as accessible as possible to as many visitors as possible.
Accessibility

To make our websites accessible, PHSA follows standards developed by the World Wide Web Consortium (W3C). We follow general W3C principles and have developed specific guidelines for our own websites. 

Generally speaking, for a website to be accessible, it must:

  • be available through sight, hearing or touch
  • be compatible with a keyboard or mouse
  • be user-friendly and easy to comprehend
  • work across browsers and assistive technologies (such as screen magnifiers, screen readers, voice recognition software, and so on)

For more detail about what makes a website accessible, see WebAIM Quick Reference: Web Accessibility Principles.

Here’s what PHSA’s web team does, and what you as content editors should do while editing your pages, to support accessibility.

PHSA sites have features built into them that, if used correctly, make the sites available through sight, hearing and touch. 


To support these features, editors must:

  • provide alt text for essential non-text content (images, videos and graphics with essential content, not decorative graphics); see the Alt text tab on this page
  • create videos that are able to have subtitles or described video content (such as captions or audio description); see Videos
  • follow the editing guidelines presented in the training and throughout this website, which help the templates and background setup work correctly. When the guidelines are not followed, we cannot meet accessibility standards. 

Here are a couple of examples: 

  • If you upload an image to your page but do not follow the guidelines about giving an image an alt tag, you are preventing a visitor with a visual impairment who is using a screen reader from accessing the content of the image. A screen reader reads an image without alt text simply as “image”.
  • If you put a link to an external website on your page but do not follow the guidelines about giving a link an alt tag, you are preventing a visitor with a visual impairment who is using a screen reader from accessing the content of that link. A screen reader reads a link without alt text simply as “link”.   
 

The content of PHSA sites can be accessed with a keyboard or mouse. The Webteam is developing a “skip to main content” feature. For an explanation of how this helps visitors with visual impairments, see WebAIM: "Skip navigation links"


To support compatibility, editors must:

  • contact the Webteam if they have content that needs to be “interacted with” in a set time. The Webteam will need to build a mechanism that visitors can use to turn off or extend the time required. 
  • not add content that flashes more than three times in any one second because this kind of content can cause seizures due to photosensitivity
  • use the editing ribbon when editing and not access their content through Site Contents (except when following the guidelines to access their own Document Library). 

Here's an example:

  • If you use Site Contents to navigate to a page in a Page Library and edit and publish that page, instead of using the editing ribbon to edit the page, an orphan page that visitors can find through a search will be created. An orphan page interferes with accessibility because it has no breadcrumb trail and is not linked to the site navigation, meaning that visitors are prevented from finding content, from orienting themselves within the site or from navigating through the site.

 

PHSA sites have a suite of page templates available to editors to help them make sure that the visitor experience is the same regardless of how the visitor navigates through the content. The templates make sure that navigation items such as breadcrumb trails and menus appear in the same place and order and dynamic components such as search tools and forms function in the same way across the site. 


To support this consistency in design and structure editors must: 

Here are a couple of examples:

  • If you do not edit a clinic page following the guidelines for editing a clinic template (for example, by including content that a patient visiting the clinic does not need, or by not including links to Directions & Parking or to Referrals), you are forcing a visitor to learn a different route through the site than one they might have already taken, and they might not find the content they need or navigate successfully through the site. 
  • If you write for a reading level that is higher than grade 7 or 8, or you use unusual or foreign words, acronyms or abbreviations without explaining them, you will make your content less accessible to the average visitor. (An exception is using specialized terms in specialized material, such as chemotherapy protocols, that is for a particular audience group.)

PHSA sites are designed to be compatible across browsers and work with different assistive technologies. They are also designed to help our web developers respond as needed to these technologies, which change rapidly. Poorly formed or unconventional markup or code can “break” or circumvent assistive technologies, making our site incompatible with these technologies and hampering our developers’ ability to manage our sites. 


To support this compatibility and responsiveness editors must:

Here’s an example:

  • If you paste content directly from a web page to the page that you are editing, all the code that makes the content appear in a certain way on the original page will be included. If there is something in that code that interferes with a screen reader, for example, an error will be created that our web developers have to investigate. Having to pick through a lot of unnecessary code prevents them from quickly finding and solving the problem.
Variety of devices being served on a platter

Alt text

Alt text is what special-accessibility software uses to read the site aloud to a visitor with disabilities. 

For each image, document and link to webpages or sites (internal and external) that you put on a page, be sure to fill in the alt text (for images), and the description field (for documents and links to websites).

  • For documents and links, the alt text is in the Description field in the Link tab in the editing ribbon. 
  • For images, the alt text is in the Alt text field in the Image tab in the editing ribbon. 

Alt text is added when you add a link to an image, document or external website. 

Best practice

To follow best practice for alt text:  

  • Keep the alt text between 5 and 15 words.
  • Use keywords and other text that is meaningful to the website visitor, for example: if the image is about "cleaning a j-tube" use that text, not some other, formal language that the visitor won't understand.
  • Clearly and succinctly describe the image or link.
  • Do not include a file extension such as .jpg or .com.
  • Do not repeat the caption of an image, if there is one.
  • Don't include phrases such as "Image of . . .", "Link to . . .". 
  • Every link should make sense if the link description is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.

For more about alt text, see the website WebAIM (web accessibility in mind).

Alt tag that reads "two-people.jpg"

Example of a poor alt tag

Alt tag that reads "Doctor talking to senior stroke patient"

Example of a descriptive alt tag


Tab Heading
Tab Heading
SOURCE: Accessibility & Alt Text ( )
Page printed: . Unofficial document if printed. Please refer to SOURCE for latest information.

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2017 Provincial Health Services Authority.