Accessibility Tip Sheet

For Images: Alt Text

• Concise and meaningful replacement for the image; must convey the same message to the listener that a person with vision would perceive if viewing the image.

• If using a link with an image, alt text must give the destination of the link.

• For clipart, right-click and choose Properties to record a more accurate alt text.

• Technically, decorative pictures may be labeled by removing the text in the Alt text element through the html view which will read as a “Null,” but we discourage this practice in favor of describing the image even if it is decorative because people running the evaluation may disagree that an image is “decorative.”

Long Description

• If a long description is required (graph, chart, or info graphic) the best solution is to describe the image in words on the same page as the complex image.

• If placing the long description on the same page is not practical, place a link to another webpage with the long description, and use the alt text of the image to state where the long description can be found.

• The image itself can be linked to the longer description as long as the alt text of the image explains that clicking on the image will take them to a longer description.

• Long description should contain more details regarding message conveyed.

Images

• Reduce image size to increase page load speed (you shouldn’t need any image wider than 1960px, and only your banners may need close to that. Pictures on content space pages don’t usually need to be bigger than 900px wide.)

• There is an Image Optimizer setting on the back end of Presence that can help with automatically resizing images.

• Use a percentage in the width; allows image width to adjust to the size of the window it is contained within.

• Use images to convey meaning and express that meaning in the alt text.

• Decorative images may be labeled as such in the Alt text as null. This is done by removing the text in the Alt=”” through the html view (Again: We discourage this practice in favor of describing the image even if it is decorative because people running the evaluation may disagree that an image is “decorative.”)

• If using a frame, color must be high contrast for low vision or color-blind users

Links: Link Text

• Do not use “click here,” “here,” or “read more” as link text unless including destination: i.e. “Click here to go to www.schoolmessenger.com.”

• Link text should concisely define destination of link.

• Should not say “link,” but should indicate if it is a document or external page.

• The tool tip can be used for additional information about the link, or to inform the user that the link will open in a new tab.

• Use more than one or two words to make larger targets for users with low vision, mobility issues, or link target size on small devices.

• If you have multiple links on a page, avoid using the words “click here” at all.

Links and Document Links: Tool Tip

• Like Alt text, used to convey additional meaning for links of any kind; ex: document links or hyperlinks to other pages/sites.

• Should indicate how link opens if the target is being changed to “new window.”

• Used for document links, external hyperlinks, and internal page links. For internal page links, may right-click and choose Properties to input the tool tip.

Image Alignment

• Not required but does allow easier reading for sighted users.

• Alignments are absolute justifications regardless of screen size.

• Alignments may prevent author from adding text to the directional alignment area.

For Text:

Heading labels

(h1, h2, h3, etc.)

• Used to make information easier to digest for sighted users.

• Used for navigation by screen reader and keyboard only users.

• Must be used in order. Page Title should be h1 by default.

• Must highlight text of section headers and should start with h2

• First Section – h2 (you can just use h2s for each consecutive section, or you can use h3, h4, h5, h6 for the subsequent sections)

• Headers can be used to structure page like an outline, so you can have multiple header 2s,h3s,h4s. etc. (you should not have multiple h1s, so don’t use them at all in the content editor.)

• Headers may not skip sequence (you may not have a h3 jump to an h5 without having h4)

• Can adjust the size and formatting independent of the default formatting for that header, but it would be better to have the style sheet changed instead of inserting span formatting to change them independently.

Color

• Do not use color as the sole method to convey meaning.

• Use high contrast.

• Can download a plugin for Chrome or IE to help you check contrast.

Videos

• When embedding videos, they must have closed or open captioning (timed based dialogue and descriptions.) Must include:

• Dialog

• Identity of speakers

• Important sound effects (laughter, clapping, etc.)

• Music if important to mood or setting (with lyrics and identity of musician if it is important to the context)

• Transcript text beneath or around video is the only way blind-deaf have access to media.

• Advanced Settings:

  • Do not play the video automatically on load.

  • Leave display title before video starts playing enabled.

  • Leave enable fullscreen button on.

  • Leave enable privacy-enhanced mode on.

Data Tables

• Data Tables should not be used to replace layout functions (if they are you must put a role="presentation" tag in the html of the <table> element and avoid filling out the Accessibility tab at all.)

• For real data tables, right-click and go to Properties to get to the Accessibility tab.

• Must have a caption (data table title) for example, “Distance vs. Time.”

• May have a summary that describes how the rows relate to the columns. For example, “Distance, measured in meters, are listed in the rows and Times, measured in days, are listed in the columns.”

• Must have columns and row headers and designate how many rows/columns are headers.

• Must check Associate cells with headers.

For Graphs, Charts

• Do not use color as the sole means to convey meaning either in text or Graphs/Charts use patterns in conjunction with color.

• Long descriptions for Graphs, Charts, or Infographics should be located on the same page, or should be linked to another page with the long description, and the alt text of the image should be used to indicate where the long description is located or the image should be hyperlinked to the long description page.

Forms

• Clear text directions to fill out and explicit labels for fields should come before the form fields.

• If you use * to label a required field; you must include instructions. For example, “* denotes required field.”

• See additional forms documentation for creating accessible forms. Creating user input forms may require the manual insertion of specific html tags into the page at this time.

• When requesting a Forms training, make sure you specify “Accessible Forms.”

• Best bet is to provide additional help for users who need accommodations for accessible forms or avoid user input forms without extensive study of the WCAG 2.0 regarding this topic.

Twitter, YouTube, and Facebook

• Just like the iframe, they would require a title tag (iframe title = “some title” src=…) inserted into the html tab between the “iframe” and “src.”

• If inserting a Twitter feed, make sure the content is not continuous (in other words, it only displays a set number of tweets at a time unless the user clicks a link).

• YouTube and Facebook embeds are considered keyboard traps (individuals using keyboard navigation can get into the portlet, but cannot easily navigate away from the portlet.)

• Our suggestion is to stay away from them. If you have to use them, make sure they are the last item on the page, and that there is no important information after them. You may want to provide a “Skip Facebook” or “Skip Video” link before the content to allow user to navigate to a different area of the page.