Accessibility Tools & Guidelines

What Accessibility Looks Like

Perceivable

Users should be able to understand the content using just one sense, like sight or hearing.
Operable

All webpage elements must be operable by end users. For example, your site should be fully navigable using a keyboard or voice commands for those who don’t use a mouse.
Understandable

Simply put, users need to understand what’s on the page and how it works.
Robust

The website should clearly convey information to all users, including those using assistive technologies, and stay compatible with changing technologies and user needs.

Best Practices

Images

For guidelines on when to use alt/title tags on images, please refere to the image guildelines page.

Do's and Dont's

Table showing Accessibility Dos and Donts of Authors in AEM
DO	DON'T
Author links without the extra characters to keep the content clear and concise. EXAMPLE: Read more about McGraw Hill Literacy	Don't use special characters with links. In this example, the screen reader will read the ">" as "greater than". EXAMPLE: Read more about McGraw Hill Literacy >
Ensure lists are semantically marked up using <ul> or <ol> tags and include an appropriate heading to introduce the content. If needed, consider using a different component. The call to action, card varations (button cards, manual card, article cards) have this built in. EXAMPLE: Discover flexible solutions for any learning environment. For district & school For at-home	Do not create list-style content without semantic markup (<ul> or <ol>) or without contextual information. EXAMPLE: For district & school For at-home
Use the link styling Dark Link or Dark Link Underline on light blue (#DBE5FA) or grey accent 01 (#e5e5e5) backgrounds. Either style will meet a11y requirements. Test link Bolded Text link Test link Bolded Text link	Do not use the blue text links on the light blue (#DBE5FA) or grey accent 01 (#e5e5e5) backgrounds. They will not pass the ratio checks. Test link Bolded Text link Test link Bolded Text link

Additional Tips

Avoid using logos or images as an <h1> element. Ensure the <h1> clearly describes the page's purpose to help users understand where they are.
Group cards within a single component. This component will automatically wrap them in a <ul>, signaling to users that the cards are related to the same section.
Do not split a single <ol> or <ul> across multiple columns, as this can create confusion for screen readers.
When adding a link to the site and using generic text (e.g., "Learn More," "Read More," "Buy Now"), it is essential to include an aria-label to clearly inform users about the specific destination or purpose of the link.

Tools

Bookmarklets

Can be added to your bookmarks and are easy and basic accessiblity checks to pages on the site. To add just drap the link in the "Install Link" column to your bookmarks bar. When you are ready to use, just click on the bookmark.

Add Bookmarklets
Wave Evaluation Tool

Evaluate web accessibility within your browser using this Chrome extension.

Add Extension
axe DevTools
Chrome extension used under Developer Tools to run an analysis on a webpage.
Add Extension
Accessibility Insights for Web

Used under developer tools. Accessibility Insights for Web enables developers to efficiently identify and resolve accessibility issues.

Add Extension
ARC Toolkit

Chrome extension used in developer tools.

Add Extension
NVDA Screen Reader

Free tool that will read content on page aloud to a user.

Downoad Tool
Screaming Frog

This software provides a report detailing several accessibility guidelines across different compliance levels.

Learn More

Component Updates

Tabs

Field: aria-label

The tab component needs an aria-label that will define the group to a user. In some instances, this can be the h2.

JIRA ticket referencing issue

Card Buttons

Field: Cards group aria-label

The Card Buttons component needs an aria-label that will define the group to a user. In some instances, this can be the h2.

JIRA ticket referencing issue

mp4 Video Component

Field: Video title

The .mp4 video component requires a descriptive video title. This is typically something brief, like “Anna’s Story.” It will be visually hidden but available to screen readers.

JIRA ticket referencing issue

Table

Field: Caption

The table component needs a caption that describes its content in place of a visible title. This caption will be hidden from sighted users but available to screen readers.

JIRA ticket referencing issue

Field: Row Header Options

The table component requires authors to check a box that will mark each row header for the screen reader. This will tell the user that the content in the row is associated with that first column. Pretty much every table will need this unless it is only one column, which is rare. I am working with dev to make this checked by default but for now, authors will have to check it manually.

JIRA ticket referencing issue

Article Cards

Field: Pagination aria-label

This field provides a description of both the pagination and the group of cards for users. When referencing the page numbers beneath the component, it will automatically add the word ‘pagination’ to the text (i.e. blog articles pagination)

Text Component

Select add language icon (quote box)

This option allows authors to identify text written in a foreign language. Screen readers normally use the default language (e.g., English), but this flag ensures proper pronunciation and correct language recognition.

JIRA ticket referencing issue

Updated call to action from a text link to a button

The promo card previously had a text link for the CTA. This was not accessibile against all background colors so UX has agreed to change this to a primary button outline.