Accessibility in the UBCMS

To be accessible, audio files such as those in the Audio Player component require a transcript.

Best practice: place a File Download component immediately below your Audio Player component, to link your transcript file.  Your transcript can then be uploaded into your page, or stored in Assets.

Authors are responsible for any custom adjustments they make to their UBCMS pages. This includes code added using External Embed or HTML Snippet components, or introduced through page Properties.

Best practice: only a developer should modify the standard UBCMS code or styling, and any adjustments should be made thoughtfully, with regard for accessibility and long term maintenance.

Accessibility includes the legibility of text on our pages.  Font sizes and the contrast between text and background must be great enough that people with reduced eyesight can read the words.

The UBCMS system-wide fonts and our UB Brand colors are optimized to meet ADA and Web standards (more about our new brand palette).

Best practice: Please do not adjust our standard fonts or introduce new palettes using custom CSS.

Documents, spreadsheets, slideshows and other assets must be accessible for use with assistive technology and presented in a format that is clear and well-organized whether they are embedded or linked from your Web page (e.g. through the File Download component).

Best practice: Make sure your original document is created accessibly before you upload it or convert it to another format such as a PDF.

The File Download component is specially coded with a warning that it will download a file, the file type for common formats, and if the file is in the UBCMS, the coding will also automatically indicate the file size.

However, remember that any file you link from this component must also be accessible. PDFs and other office documents are especially risky, because they require a lot of accommodations to meet accessibility guidelines.

Documents, spreadsheets, slideshows and other assets must be accessible for use with assistive technology and presented in a format that is clear and well-organized whether they are embedded or linked from your Web page (e.g. through the File Download component).

Best practice: Make sure your original document is created accessibly before you upload it or convert it to another format such as a PDF.

Accessibility includes the legibility of text on our pages.  Font sizes and the contrast between text and background must be great enough that people with reduced eyesight can read the words.

The UBCMS system-wide fonts and our UB Brand colors are optimized to meet ADA and Web standards (more about our new brand palette).

Best practice: Please do not adjust our standard fonts or introduce new palettes using custom CSS.

Forms should be intuitively organized with headings, clearly marked required fields and clear instructions about what information is desired.

Forms must also be usable for people using screen readers or tabbing using a keyboard. This includes providing a clear label for each field.

Much of this functionality is already built into our UBCMS components and Formstack forms, but be careful not to circumvent these settings.  

Best practice: For the UBCMS, a meaningful value must be supplied in the title or label for each form component such as the Dropdown List or Text Field.

To meet accessibility requirements, every page must have an H1 heading (e.g. using the Title component).

Sometimes it is preferable for aesthetic reasons not to show the main heading, especially on a home page. In such cases, a Properties setting 'Use Site Title as H1' adds the page's title into the page's source code, where it is not visibly displayed but is available for assistive technology such as screen readers.

• This setting is ON by default for every home page, but can be turned off if needed.
• This setting is OFF by default for any page that is not a home page, but can be turned on if needed.
• This setting works for standard heading types. For custom headings, additional coding may be required.

Headings, provided by the UBCMS Title component, provide structure to the content on your Web pages. They break up your content into meaningful sections, define its hierarchical structure and provide handy anchors for deep linking or the On This Page component. WebAIM.org calls this semantic structure. Done effectively, this structure allows humans, screen readers and automated search engines to easily digest your page.

Headings in the UBCMS are generally constructed using Title and Collapsible Content Container components.

Best practice: To facilitate navigation and understanding of the overall document structure by both users and search engines, headings should be nested; e.g., one H1 followed by one or more H2's, each H2 followed by one or more H3's, each H3 followed by one or more H4's, and no jumps of more than one step (e.g. an H2 should not be followed by an H4).

For example,

• H1, then H2, then H3... is ok.
  
• H1, H2, H3, then H2... is ok.
  
• H1 then H3... is NOT ok.

Several components are specifically designed to display headings on your page, such as the Title component. Spoofing headings, such as by using bold text in a text component, or through custom CSS, is confusing, inconsistent, and most important, will fail accessibility review.

Best practice: Always create headings using the Title component or the title feature supplied in other components such as the Flex Module. (Do not use bold text formatting to give the visual appearance of headings.)

Best practice: Do not use Title components solely for visual results. They should be used as intentional section headings. Other components, such as the Callout, or the Pull Quote in the Related Content Container are intended to call special attention to short text segments.

Best practice: Do not choose a particular heading level merely because it 'looks better.'

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is  a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.

Alt text is required in these contexts:

• If the image is a link. *
  
• If the image is zoomable.
• If the image depicts important information not clearly provided in a caption or other text on the page.
  
• If the image has a function; e.g. for navigation -- 'next slide'. *
  
• For a static thumbnail image that are generated by Video and Flex Module components.

* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). Screen readers will treat this image as a standard link.

Purely decorative images (those that do not convey content or have a function on the page as listed above) can instead be set as "This image does not require Alt text" in some components. If the component does not have that setting, you will still need to supply Alt text.

Alt text should be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets'). 

Best practice:

• Screen readers automatically announce "image of...", so do not include that in your alt text.
  
• Add a final period so screen readers will pause before reading the rest of the page.
• Be concise (under 150 characters) but include any significant elements to the image.
  
• Avoid technical language, jargon, and abbreviations.
• Only mention personal identity when relevant to the page (name, age, race, ethnicity, gender, religion, or cultural identifiers).
• If the image is used for navigation, describe what will happen, e.g. "next page of results". 
• If the image is a link to another page, name or describe the target page (e.g., "School of Nursing.") but do not say it is a link -- screen readers indicate that as well. This also applies to zoomable Photos.
• If the image is a link that starts a video (named ABC), consider "YouTube video entitled ABC." or just "watch ABC."
  
• If the image contains a lot of text (e.g. a chart or table), provide this information in other ways on your page, perhaps as a nearby collapsible container labeled appropriately.
  
• Alt text should be added whenever images are uploaded into Assets, in case the image is later used in a way you did not originally expect.

Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.

For photo galleries, the image captions also serve as Alt text, which must be manually provided at the source for each image.  

Please provide either the Alt Text, or the Description, or both, because the two can be applied differently in some photo components. For the Gallery:  

• If a Description is provided, that is used as Alt Text.
• If no Description is provided, the Alt Text is used as Alt Text.
• If no Description or Alt Text, no Alt Text is provided. (The Title field is not used for Alt Text.)

Best practice, always provide Alt text whenever an image is uploaded into Assets.

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.

Images displayed as teasers in lists require Alt text. Normally this is supplied in the original listed pages, often in shared content, and in some cases, in the metadata of the referenced images in Assets.  

Best practice, Alt text should be added whenever an image is uploaded into Assets.

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

For the Tabs component, this setting provides that tab with additional text that is visible to screen readers. This solves the accessibility issue where there may be multiple Tabs components on the same page that have linked content with otherwise duplicate names.

Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.

This setting (e.g. in Call to Action and Button components) assists screen readers by giving more context for links with repetitive occurrence on the page. That is, if you have a page with several identically labeled links (e.g. ‘email’ links in a series of employee profiles, where brevity and repetition are desirable), the screen reader will apply the additional text to clarify the difference between these otherwise identically labelled links.

Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.

Text components with the Rich Text Editor (e.g. Body Text, Intro Text) can hold hyperlinks in the body of their content that are built using the toolbar. These links have an additional setting for 'Alt text', which is intended to provide additional context for screen readers (and also shows as a mouseover tooltip).

Best practice: Use this Alt text setting when there are multiple links on a page that have the same link text but go to different target pages, or when the existing link text is ambiguous taken out of context (e.g. the link text is also the URL).

Best practice: Alt text should always be concise but clear. If you choose to use this setting, the text:

• should be able to stand on its own (in a mouseover 'tooltip');
  
• should make sense if read after the main link text (many screen readers will read it this way);
• should not be essential (most users will not see it);
• should not simply repeat the actual link text.

Using this setting text suppresses Siteimprove’s "Link text used for multiple different destinations” warning if it makes the link text unique, but does not suppress the “Link text is too generic” warning when supplementing links like “Click here” or “Read more”.

To avoid confusion, every unique link on a page must have unique link text. It is not hard to compose comprehensive text for manually coded links, but links that are generated automatically by lists and carousels must also be different, which takes more planning.

Also consider Call to Action, Button, and Tabs components, as well as the pagination and "see all" links in the Event and News List components which may have the same labels and appear more than once on a page. (Some of these have additional label settings that can help prevent this redundancy.)

Best practice: when creating shared content pages that will be used in lists, use distinct titles, or set the Navigation Title in the page Properties so none of your pages have the same title if they are displayed together. Also take advantage of additional label settings in other components when you will have several on a page.

Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.

Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:

• Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
• Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

To avoid confusion, every unique link on a page must have unique link text. It is not hard to compose comprehensive text for manually coded links, but links that are generated automatically by lists and carousels must also be different, which takes more planning.

Also consider Call to Action, Button, and Tabs components, as well as the pagination and "see all" links in the Event and News List components which may have the same labels and appear more than once on a page. (Some of these have additional label settings that can help prevent this redundancy.)

Best practice: when creating shared content pages that will be used in lists, use distinct titles, or set the Navigation Title in the page Properties so none of your pages have the same title if they are displayed together. Also take advantage of additional label settings in other components when you will have several on a page.

• Place a Date Created component on all pages in collections you wish to be labeled as an archive. (This component is included by default for pages created using the News Article template.)
• If there is no Date Created component, see the alternative suggestion below.
  

If you would like to explore other archiving options, please consult with our EIT Accessibility Officer, Mary Henesey.

The user should control carousels, slideshows and video, so they are not confused by unexpected behavior and to provide enough time for them to process each segment.

Best practice:

• Do not auto-start video.
  
• Do not automatically scroll a carousel or slideshow.
  
• Provide tools that allow users to start, stop and resume animations.
  

These recommendations are supported by default in UBCMS carousel, slideshow and video components. Please comply with this best practice if you embed external video or animations.

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

Tables can have a number of accommodations to assist screen readers.

• Headings - Column and row headings are required for tables that portray data. Add the headings to table cells, then in Cell Properties, set Cell Type to 'Header').
  
• Merged Cells - Cells should not be merged except for headings.
• Captions - Data tables must have a concise but comprehensive caption made using the table settings or an accompanying Caption component. This can be added in the Table component settings, using the Caption field in Table Properties or sometimes by using an adjacent Caption component.

For the Tabs component, this setting provides that tab with additional text that is visible to screen readers. This solves the accessibility issue where there may be multiple Tabs components on the same page that have linked content with otherwise duplicate names.

Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.

Text components with the Rich Text Editor (e.g. Body Text, Intro Text) can hold hyperlinks in the body of their content that are built using the toolbar. These links have an additional setting for 'Alt text', which is intended to provide additional context for screen readers (and also shows as a mouseover tooltip).

Best practice: Use this Alt text setting when there are multiple links on a page that have the same link text but go to different target pages, or when the existing link text is ambiguous taken out of context (e.g. the link text is also the URL).

Best practice: Alt text should always be concise but clear. If you choose to use this setting, the text:

• should be able to stand on its own (in a mouseover 'tooltip');
  
• should make sense if read after the main link text (many screen readers will read it this way);
• should not be essential (most users will not see it);
• should not simply repeat the actual link text.

Using this setting text suppresses Siteimprove’s "Link text used for multiple different destinations” warning if it makes the link text unique, but does not suppress the “Link text is too generic” warning when supplementing links like “Click here” or “Read more”.

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

Several components are specifically designed to display headings on your page, such as the Title component. Spoofing headings, such as by using bold text in a text component, or through custom CSS, is confusing, inconsistent, and most important, will fail accessibility review.

Best practice: Always create headings using the Title component or the title feature supplied in other components such as the Flex Module. (Do not use bold text formatting to give the visual appearance of headings.)

Best practice: Do not use Title components solely for visual results. They should be used as intentional section headings. Other components, such as the Callout, or the Pull Quote in the Related Content Container are intended to call special attention to short text segments.

Best practice: Do not choose a particular heading level merely because it 'looks better.'

Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.

Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:

• Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
• Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.

Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.

This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.

Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.

Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.

Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.  

If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.

Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.

Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".

Videos that automatically popup, autoplay, or loop can be confusing for some users, and will probably annoy everyone in general. It is always best to let the user decide how to interact with your website.

Video must also have controls to start/stop and replay, which are standard for YouTube, which is why we recommend its use.

Best practice: keep the default settings when using the Video component.

The user should control carousels, slideshows and video, so they are not confused by unexpected behavior and to provide enough time for them to process each segment.

Best practice:

• Do not auto-start video.
  
• Do not automatically scroll a carousel or slideshow.
  
• Provide tools that allow users to start, stop and resume animations.
  

These recommendations are supported by default in UBCMS carousel, slideshow and video components. Please comply with this best practice if you embed external video or animations.

All videos on UBCMS websites must have synchronized captions. An additional transcript is optional, but if provided, should be closely associated with the video player. Captions (and transcripts) support those who cannot see or hear your video.

Best practice: captions are most easily added using the automated tools on YouTube, even if the final placement is not in that platform.

Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is  a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.

Alt text is required in these contexts:

• If the image is a link. *
  
• If the image is zoomable.
• If the image depicts important information not clearly provided in a caption or other text on the page.
  
• If the image has a function; e.g. for navigation -- 'next slide'. *
  
• For a static thumbnail image that are generated by Video and Flex Module components.

* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). Screen readers will treat this image as a standard link.

Purely decorative images (those that do not convey content or have a function on the page as listed above) can instead be set as "This image does not require Alt text" in some components. If the component does not have that setting, you will still need to supply Alt text.

Alt text should be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets'). 

Best practice:

• Screen readers automatically announce "image of...", so do not include that in your alt text.
  
• Add a final period so screen readers will pause before reading the rest of the page.
• Be concise (under 150 characters) but include any significant elements to the image.
  
• Avoid technical language, jargon, and abbreviations.
• Only mention personal identity when relevant to the page (name, age, race, ethnicity, gender, religion, or cultural identifiers).
• If the image is used for navigation, describe what will happen, e.g. "next page of results". 
• If the image is a link to another page, name or describe the target page (e.g., "School of Nursing.") but do not say it is a link -- screen readers indicate that as well. This also applies to zoomable Photos.
• If the image is a link that starts a video (named ABC), consider "YouTube video entitled ABC." or just "watch ABC."
  
• If the image contains a lot of text (e.g. a chart or table), provide this information in other ways on your page, perhaps as a nearby collapsible container labeled appropriately.
  
• Alt text should be added whenever images are uploaded into Assets, in case the image is later used in a way you did not originally expect.