成人大片

Alternative (alt) text is used to convey meaning and provide context in place of an image, graph and other media. Blind and low vision users rely on the alt text attribute to understand the equivalent meaning of images, figures or other graphics in textual form. Alt text should provide a concise description conveying essential information about the image. Here are some key tips:

• Should be concise and meaningful, yet does not compromise on detail for it to make sense.
• Usually, around one hundred characters or less, like a 鈥渢weet鈥�.
• Uses full stops and commas, so it can be read in a more human way by a screen reader.
• Avoids phrases such as "image of鈥︹�� or 鈥減hoto of..." or "graphic of鈥�"
  • A screen reader already indicates this information.
• Consider the context of the surrounding information when writing.

Where to add alternative text

Once you upload an image to the DAM, insert alternative text in the 鈥淭itle鈥� field. Alternatively, you can use the Accessibility Dashboard to add alternative text or to mark images as decorative. 

Decorative images

Set images as decorative in the Accessibility Dashboard if they do not add meaningful information to a page. Decorative images are ignored by assistive technologies, such as screen readers. 

Whether to set an image as decorative is based on your judgement. Visual elements such as borders or spacer elements should be set as decorative. If the surrounding text already captures the information in the image, it may be set as decorative too. Otherwise, please add alternative text to your image.

Images that capture a mood

Use alt text for images that attempt to capture a mood or concept, images that are meant to evoke emotion or to make someone feel a certain way.

Images that tell a story

Images with a visible caption

Avoid duplicating the visible caption text for the alt text. It will be read twice by a screen reader.

Images of text and numbers 飦�

Plain text should always be used instead of placing text inside of an image. Plain, selectable text is much more flexible and accessible. Real text can be resized using the browser without losing clarity. Secondly, text colours and spacing can be adjusted to suit the reading preferences of users with the help of browser settings or extensions.

Recommended: Use the Infographic, Full Width Colour, Block quote or Image with Overlay Text component instead of embedding text within an image.

Accessibility guideline: Avoiding images of text is a WCAG 2.0 Level AA success criterion. Please reference: 

Problems with images of text

• Cannot translate automatically.
• More likely to distort and pixelate when resized. At high magnification, the text may look "fuzzy" and sometimes unreadable. 
• The text within the image will not scale proportionally when using the browser's magnification features. 
• In small viewports (like mobile screens), the text may become too small or very difficult to read.
• Not selectable (impossible to copy and paste), and won't be accessible for people who use assistive technology unless a text alternative is provided.
• Not customizable for people with browser preferences or extensions that make it more readable for them. 
• If using a dark mode extension, sometimes the image becomes completely unreadable because it blends in with the background. 

Images of people for a biography page or profile

Simply use the person's name as the alt text. It is not necessary to include the words "Portrait of" or "Photo of".

Images that hyperlink to another page

For 'clickable' images, it is highly recommended to use Overlay Text with the Image Component. The Overlay Text replaces the alternative text of the image in this case, and accurately describes to an assistive technology user where the image takes you.

Logos and brand marks

All logos should have accurate alternative text. The word "logo" is not necessary or useful as part of the alternative text. There is also no need to provide a literal description of what the logo looks like.

Alternative text for complex images and figures

For complex images such as charts, math equations, flowcharts, graphs and infographics where the text alternative is very long - it is best to provide the text equivalent below the image in plain text. 

Alternative description for Google Data Studio

Google Data Studio widgets can be problematic for people who use a keyboard to navigate and people who have difficulty perceiving visual content. Similar to the example above, a Google Data Studio widget should also have a plain text alternative.

Relevant WCAG 2.0 Success Criteria

Providing alternative text for images is a Level A success criteria, which is required for conformance with WCAG 2.0 and the Accessibility for Ontarians with Disabilities Act (AODA).

•  All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...
•  If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except...
•  Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.