丁香园AV

• In Cascade the "Title" field uses the Heading 1 tag. This is the largest heading available and should not be used again on your webpage.
• After Heading 1, select Heading 2 and Heading 3 to build up the semantic structure of web content. Web pages should be structured in a hierarchical manner without skipping the heading levels. This helps users who use assistive devices to navigate our web pages. For example:

Heading 1 - Your Title

Followed by the content area:

Heading 2

Heading 3

Heading 3

Heading 2

Heading 3

• Do not use bolded text to give the appearance of headings. Use the actual heading.

More information on accessible headings is available at

Alternative (Alt) Text

When we add images to webpages we need to describe them. This description will be read by screenreaders.

• Use alt (descriptive) text for non-text elements such as images, photos, etc.
• Alt text should not contain file extensions. (ie. .jpg, .gif, .jpeg, .png)
• Do not use the word "image" in your alt text. For example: Don't use "Image of Wesley Hall" as alt text. Insteady, simply use "Wesley Hall." The screen reader will say "image of," so this information is redundant.
• Alt text should be more than six and less than 140 characters in length. If an image is complex and cannot be described in 140 characters, such as a graph, a full description must be included. A full description can be added below the image or another web page with the full description can be created and linked. Alt text must still be included.
• Some images are decorative and do not need alt text, but, in general, if the image is in your content area, it should be considered content and include alt text.
• Images that are linked MUST include alt text, even if it is considered decorative. 
• For more information on alt text, see .

Do not use images of text

Unless absolutely necessary do not use images of text. When doing so the text must be included in the Alt tag.

There are several reasons why images with text are problematic. Images cannot be enlarged without becoming blurry, and the text on images cannot be read by screen-reading technology. If an image such as a poster has a lot of text which is then included as alt/descriptive text, screen-reading technology will convert the alt text into a run-on sentence. Additionally, a great number of website visitors are using mobile devices, on which images unfortunately often become smaller and blurry. Add any necessary text as actual text on a web page and not as an image with text.

For example, instead of the below image:

Provide the text as written content:

2022 Open House

Are you an aspiring high school student or the parent of one?
Join us for Open House 2022

Thursday, January 27
5:00 PM

By providing the written text rather than the text on image, the content will be accessible, the text size can be adjusted, and the text will not be blurry on mobile devices.

Note:

If an image would be helpful, include an engaging photo or graphic that doesn't include text.

If you think a user might print the poster, consider including a link to a PDF of the poster.

Making link text descriptive

• Use concise and meaningful links. Text links should describe where the link will go. Do not link text such as "Click here," "Read more," etc.
• Users with screen readers may tab from link to link. "Click here" and its variants are ambiguous when read by a screen reader.
  • Incorrect text link: If you want to learn more information about The University of 丁香园AV, please click here.
  • Correct text link: Learn more about The University of 丁香园AV..
• Writing links this way also assists with search engine optimization. "Click here" and its variants do not aid with SEO, whereas linking descriptive text such as "The University of 丁香园AV" or a program name will make it more likely those items are found in a search.

Avoid Using URLs for links

Hypertext URLs should be avoided. Screen readers will read the URL letter by letter.

For example:

• A link that appears as such: /marketing-communications/social-media-resources/social-media-directory.html
• would become more accessible if linked through descriptive text, such as 丁香园AV Social Media Directory.

In rare instances – such as a short URL, such as the 丁香园AV home page – it may be acceptable to write it out as a hypertext URL. As a general rule, however, avoid hypertext URLs.

Avoid Using Multiple Links to Different Resources with the Same Text

• Same text links must go to the same destination. For example, if "Contact" is linked twice on the page, each instance should link to the same location. If the instances must go to different destinations, try to differentiate the text. For instance, "Contact" links could be expounded upon by using descriptive information such as "Contact the Dean" and "Contact the Department Assistant."
• Different text links must go to the different destination. Don't use different text to link to the same place on the same webpage.

Deleting links

When removing content with links, the best practice is to use the "unlink" function before deleting the content.

When we edit part of or delete a link, a fragment of the link may be left in the HTML. Despite being invisible in the content area, these fragments are read by screen readers and consitute a significant accessibility issue. Marketing and Communications uses a quality assurance tool to find those links, but users can avoid such issues by unlinking linked content before deleting the associated text from the page.

We recommend avoiding adding tables to web pages unless absolutely necessary. Tables can be difficult to make accessible and are problematic when rendering on mobile devices. 

Layout tables

In the past, tables were used to lay out content. This may work for sighted people but not for those using a screen reader. If you need to adjust the layout of your web page, please contact websuggest@uwinnipeg.ca for an alternate option.

Data tables

Data tables require the "fancy" class, as this adds rows of alternating colour to a table and is the class necessary for responsive tables on mobile devices. 

To add the class to a table, access the source code in the content editor. Once the table has been located in the source code, add the following inside the table tags:

• class="fancy" 
  • A properly styled table will appear in the source code as follows:
    <table class="fancy" style="width: 100%;">

Detailed information on creating accessible tables is available on the , please be sure to read that before you get started.

If you would like assistance please contact websuggest@uwinnipeg.ca. 

Before adding a PDF to a webpage, consider whether it needs to be a PDF. Many users put PDFs of posters on the website. Unless it is meant to be printed, the poster information should simply be added as text content to a web page. Web pages are much easier to read, easier to navigate, require less bandwidth, and are the preference of many users. Longer documents are often easy to convert to a web page as well. 

If a PDF must be used, ensure it is accessible in its original format, such as .

Ensure all documents are converted and exported to PDF in a way that preserves accessibility features. 

Before saving your document as a PDF in Microsoft Word, use the Adobe ribbon on Word and click create PDF to retain the accessibility tags. Otherwise, when saving the document in PDF format, select Options, followed by checking the "Document Structure tags for accessibility" box. Saving via "Print to PDF" will lose the accessibility format.

Note: Your document must have a title to be accessible. To add a title in Word open your document, select "File" and then type in the title of your document and save as Adobe PDF. Having a title also aids a Google search.

• Be sure to include the title of your video within your embed code. See more information on our guide to embedding video page.
• Provide captions for all video embedded on web pages. YouTube will automatically generate captions after video has been uploaded. Please review and ensure the captions are correct.
• To make changes to the captions, please contact websuggest@uwinnipeg.ca. We will provide the captions for editing.
• Provide transcripts for all audio embedded on web pages.