On this page about Accessibility Features in Anthology Adopt Guides, learn more about how your guides can reach all users.
Overview
These suggestions are accessibility recommendations from Pendo based on the current set of features. This document is not intended to demonstrate or indicate compliance with WCAG 2.1 AA Accessibility standards or other similar standards. Pendo's guide accessibility features are designed to allow you to build accessible guides, but Pendo does not guarantee that content will meet any accessibility standard.
Web content accessibility ensures equitable access to the internet. Pendo guides provide important information and communications about your application for users. Guide accessibility features help all users find and interact with your Pendo guides.
All guides apply some accessibility features automatically, such as Focus and input attributes for badges and keyboard navigation. Other features require activation configuration during guide creation. Features such as Auto-focus, ARIA labels, Alt Text, Title, and ARIA roles can be set up in the Visual Design Studio when you're creating a guide. Some requirements in accessibility guidelines such as color contrast, captions for embedded video or audio, and clickable element size need to be implemented by the guide designer.
Recommendations
Guide activation
- Badge-activated guides are more accessible. These guides are more accessible than automatic or target element guides because they give the user the option to trigger them.
- You should always set the badge position to “inline right” or “inline left”. This limits where you can place the badge in your user interface, but it ensures that the badge can be navigated to in a logical order with the keyboard navigation.
Guide creation
- Add descriptive Alt Text or ARIA Labels where possible. These are read by assistive technologies and provide necessary context for users.
- ARIA roles Dialog, Banner, and Complementary are the most common and helpful for Anthology Adopt guides.
- Auto-Focus should always be selected for the best guide experience.
- Confirm the color contrast ratio of guide elements meets WCAG AA standard in the guide theme.
- Adjust Badge sizes to 24 pixels, which is the WCAG 2.2 AA requirement for minimum target size.
Configure guide accessibility
Configure accessibility features in the container and building block settings of a guide in the Visual Design Studio. If an element has accessibility settings available, they are located in the Accessibility tab in the Edit modal.
The Color Contrast Checker is available when creating or editing a theme in Theme Settings in the Visual Design Studio.
Configurable Attributes
The following are attributes that you can edit in the container and building block settings to make your guides more accessible. Each attribute listed includes where they can be edited.
- Color contrast. Background and font color of elements that contain text.
- alt (Image Alt Text). Image building block.
- aria-label. Container, close button, button, badge, text building block.
- aria-modal. Container when backdrop is enabled.
- role. Container for each guide step.
- title. Video building block
- Autofocus this step. Container for each guide step.
Non-Configurable Attributes (applied automatically)
- h2, h3, p (semantic headers). Title, subtitle, and paragraph text blocks are automatically assigned to the appropriate header or paragraph element.
- aria-labelledby. Creates a relationship between two elements, used by open text, yes/no, multi choice, number scale, and NPS polls.
- aria-describedby. Creates a relationship between two elements, used by number scale polls and NPS surveys to connect the first and last numbers in the scale with their text descriptions.
- aria-expanded. Applied automatically to badges for guides and the resource center.
- role - role="group". Applied automatically to Yes/No buttons and multi choice radio buttons in poll building blocks.
Accessing Theme Settings
1. Select Guides on the side panel, then Manage Theme.
2. In either the Typography or Button areas, select the pencil icon to edit.
3. The Color Contrast Checker appears when you are editing. This verifies that the color choices applied to your guides comply with WCAG AA 4.5:1 or WCAG AAA 7:1 contrast ratio requirements. It updates in real time as you change the colors of backgrounds and fonts. If the contrast ratio requirement is not met, the WCAG tags flag red. If the requirement is met, the WCAG tags flag green.
Edit Container Accessibility Settings
Select the edge of an individual step within a guide to open Container Settings in Visual Design Studio.
Each guide step has unique settings to control the appearance and behavior of that step. If you're creating multi-step accessible guides, the Accessibility tab must be configured for each guide step.
Container Accessibility Settings
- ARIA Label - Accessible Name. Set the ARIA label for the entire guide container.
- Role. Select the ARIA role from a dropdown menu of available roles (no role, article, banner, complementary, contentinfo, dialog, form, main, navigation, presentation, and region).
- Autofocus this step. Traps assistive technology focus on the guide.
- ARIA Label - Close Button. Set ARIA labels for the default close button which can also be toggled in container settings.
Edit Text or Button Settings
In Visual Design Studio, select the plus button of the element you want to edit. This opens the Building Blocks settings panel.
ARIA Label can be configured for Text and Button building blocks.
Semantic HTML for text building blocks
Text building blocks automatically assign semantic headers in the HTML according to the selected theme style in text building block settings.
- Title is an h2 element
- Sub title is an h3 element
- Paragraph is a p element
- Custom retains the semantic header for the last assigned style (e.g. a text block with the paragraph style changed to custom style will remain a p element)
Edit Image Settings
Select the Image building block to open image building block settings. Image Alt Text can be configured for image building blocks. Alt text is the preferred method for adding accessible text to images. ARIA labels generally aren't used with images.
Edit Video Settings
Select the Video building block to open video building block settings. Title can be configured for video building blocks. Title is the preferred method for adding accessible text to videos.
Edit Poll Settings
The various poll building blocks have a combination of configurable and non-configurable settings to make them accessible.
Select the poll response fields to open Poll settings. Text and button elements in the poll have ARIA label fields.
ARIA-describedby, ARIA-labelledby, and group roles are applied automatically to connect poll responses with their respective question text.
Edit Badge Size
A Badge is one of the ways users can activate an Adopt guide within Blackboard. The default size of Anthology Adopt Badges is 14 pixels. The requirement for WCAG 2.2 AA for minimum target size is 24 pixels.
To change badge size, select Activation to open Activation Settings. Under Badges, select Edit Settings.
In the Styling tab, in the field Size, you can adjust the Badge pixel size within a range of 8px to 300px. When you change the number in the field, the badge size changes in real time.
Image Scaling
WCAG guidelines state that content should be "presented without loss of information or functionality, and without requiring scrolling in two dimensions." Guide containers scale image building blocks automatically to meet this requirement. If a user zooms in on a guide, the image automatically scales proportionally with the width of the container, and the image does not get cut off or add horizontal scrollbars.
Best practice for full-width images
Pendo guide containers have 40-pixel padding around the outside edge by default to space out guide content and make guide design easier. Images with fill set to 100% stay within the 40-pixel padding default. Negative margins can be used to spread the image out to the full width of the container. Image scaling automatically adjusts the image to match the container width if the user zooms in or out.
Full-width margin settings
All values are negative numbers
- Left margin -40px
- Right margin -40px
- If you have changed the guide container padding settings, match your negative margin to the container padding values
If using custom padding and margins to creatively adjust image building blocks into positions that aren't supported by out-of-the-box building block placement, image scaling may distort the presentation and placement of these images. Check your guides at different zoom levels to see if your custom settings interfere with automatic image scaling.
Focus
Focus states help users utilize apps without requiring a mouse or touchpad. A focus state can appear as a ring around an element, depending on CSS styling. Chrome versions 83+ allow you to style focus elements in your app. You may notice browsers adding a focus state, like an outline around the element, when clicking these elements or tabbing through a page.
HTML Tag - Input
Badges use the input tag in the HTML. They will likely inherit any properties assigned to input in your CSS styling. Prior to adding accessibility features, badges used the img tag. Here is an example of the Resource Center Badge inspected with a Chrome Browser's Dev Tools:
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
Autofocus
Autofocus this step traps focus for assistive technology on the guide step until it is dismissed. This setting is configured in Container Settings for each guide step.
ARIA Label, Alt Text, And Title
ARIA Labels, Alt Text, and Title are used to identify elements that aren't described in the UI in an accessible way. Accessibility tools use these properties in different ways. For example, a screen reader may read the ARIA label out loud to the user. ARIA Label refers to text and button building blocks, Alt Text applies to image building blocks, and Title is used for video building blocks. Here is an ARIA label inspected with a Chrome Browser's Dev Tools:
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
ARIA Label, Alt Text, and Title are added in each individual building block.
For additional information, refer to the W3C definitions for ARIA Labels and Alt Text for images.
Keyboard Navigation
Some users may not be able to use a cursor or touch screen to interact with the page. Keyboard navigation is an important input for content accessibility. Users can navigate guide content with keyboard inputs.
- Select Esc to dismiss the current active guide
- Select Tab to advance through element in a guide step
Guide ARIA Role
ARIA roles are used to identify elements for assistive technologies to provide the appropriate help to the user. Roles are defined in the ARIA Roles Model and have specific purposes. For example, there are different roles for widgets that identify interactive elements and document the structure that organizes content on the page, which generally aren't interactive.
Role is set for each individual guide step.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Available Roles
- No Role
- Article
- Banner
- Complementary
- Contentinfo
- Dialog
- Form
- Main
- Navigation
- Presentation
- Region
W3C recommends that roles are not changed by user behavior or over time after content has been published to users. Platforms and assistive devices generally don't have APIs that allow for progressive updating of roles. The first role seen by assistive technology is generally cached and will not update. If you need to change the ARIA role of a published guide, clone the guide, change the role, publish the updated guide, and disable the previous version. Cloning the guide generates new IDs and the new guide content will be cached by assistive devices.