Ensuring your content is accessible isn’t just a legal requirement – it’s also a way to improve the end user experience for everyone and expand your audience.
Scroll
Serves as the minimum level of conformance. It is the least compliant.
A
Serves as a near universal standard for organizations around the world, providing a helpful blueprint to work from.
AA
Serves as the maximum level of conformance. However, it may not always be achievable.
AAA
WCAG
The Web Content Accessibility Guidelines, or WCAG for short, provides great guidance for creating accessible web experiences. We highly recommend checking the guidelines out in detail here.
Here are the three levels that make up the WCAG:
Before we get into it, a few important things to remember:
Questions
Opt In Per Experience
Auto Republish
If you’re interested in opting into the Accessibility tool suite or have any questions, please contact your Customer Success Manager.
For each new experience, you'll have to turn on the accessibility features via the accessibility tab in the settings panel.
If you’re working with a published experience, turning the upgrades on will automatically republish the experience. We recommend testing these features with a copy before enabling them on a live experience.
Design for Accessibility
Click on the + for more information
Accessibility
Types of challenges viewers face
Click on an icon to learn more
Vision
Conditions could include complete or partial blindness, low vision, color blindness.
Hearing
Deafness, hard of hearing, hyper-sensitivity to certain sound frequencies and volume ranges of sound.
Motor
Paralysis, cerebral palsy, carpal tunnel syndrome, dyspraxia - effects the planning of how you coordinate your movements (can effect ability to use a mouse).
Cognitive
Conditions that alter cognition like developmental disability or autism, learning disabilities - cause an inability to focus on large amounts of information.
Opt in Per Experience
Source:
2,258
Filed in federal courts across the U.S in 2018. This was a 277% jump from the previous year.
ADA website lawsuits
adatitleiii.com
$500m
For not making websites accessible to the vast number of working-age adults with disabilities.
lost in spending power
fastcompany.com
2.2b
Many people with visual impairments rely on assistive technologies such as screen readers to enjoy access to websites.
with impaired vision
who.int/health boia.org
Click to view important notes
Using PNGs or images of text rather than live text is highly discouraged unless absolutely necessary to convey meaning. The main exception to this are designed logos that include text, or images of text being used in a physical space.
Avoid Text in Images
In both cases, alternative text tags should be applied to those images to convey meaning. For more information on this particular topic, be sure to check out the Web Content Accessibility Guidelines on how to handle images of text.
Logo with Text
PNG of Text
In order to comply with accessibility standards, it is recommended that you follow the following guidelines when creating text components:
For more information on this particular topic, be sure to check out the Web Content Accessibility Guidelines on best practices for text sizing and spacing.
Text
Line Height
Letter Spacing
Here are some key areas to consider:
Make smart color choices.
Color
Learn More
Use distinguishable colors
There Are Other Ways to Convey Information in Addition to Color
Use Contrasting Colors in the Background and Foreground
Use a Free Color Validator Tool
This tool shows three different ratio targets and how the colors in your palette perform with white, black, or the other colors in your palette. Check it out here
Color Palette Evaluator
Add up to 6 colors to create a color palette. The Toolness Accessible color palette builder shows color combinations that are in keeping with accessibility standards. Check it out here
Color Palette Builder
Another color and contrast picker tool to help ensure your colors contrast enough. If your colors do not meet the accessibility standers, this tool will suggest the closest accessible color. Check it out here
Color & Contrast Picker
This free color contrast validator tool from A11Y is a great resource to ensure your colors contrast enough to meet that portion of the WCAG 2.1 AA standard. Check it out here
Color Contrast Validator Tool
Check out the following free tools which can help to ensure your colors meet WCAG 2.1 AA standard. For more information, check out the Web Content Accessibility Guidelines on color.
Ensure your background and foreground colors have a high enough contrast difference to allow a larger audience to be able to view it.
add a description
The quick brown fox jumps over the lazy dog
High Contrast
Low Contrast
Add a description
It sounds like a no-brainer, but it is important to ensure your content is not solely relying on colors to differentiate between sections, objects, or to convey information.
25%
20%
15%
10%
05%
0%
Category 1
Category 2
Category 3
Think about other ways to differentiate between content. In the graph to the right, shapes have been added to the various categories.
Color, Shape, & Text
Only Color
This graph only uses color to differentiate between the different categories.
Use colors that are easily distinguishable to visitors with color blindness or difficulties distinguishing certain color patterns. Preview how an image or your color palette may appear to people who are color blind with the below free color blindness simulators.
View the Coloring for Colorblindness simulator here
True
Prot.
Deut.
Trit.
The colors in the left column are the “true” colors. In the remaining three columns, the colors are displayed in the way that a person with protanopia, deuteranopia, or tritanopia would see them, respectively.
Color Palettes
Images
View the Coblis image color blindness simulator here
The colors in the top left image are the “true” colors. In the remaining three images, the colors are displayed in the way that a person with protanopia, deuteranopia, or tritanopia would see them, respectively.
Making accessible content starts with creating a clear user interface.
For more information on this particular topic, be sure to check out the Web Content Accessibility Guidelines on non-text components.
Use clear UX/UI Language
Hierarchy
Visual Cues
Visual Clarity
UX/UI Language
Text in Images
The underlying design of any experience plays a huge role in its accessibility. Being mindful about aspects such as color contrast, consistency of UI and sizing of fonts and text spacing ensures anyone dealing with even low levels of visual impairment can easily digest your content.
Blue
Pink
Yellow
Line height (line spacing) should be at least 1.5 times the font size.
Letter spacing (tracking) should be at least .12 times the font size.
Have a succinct hierarchy of your content that allows users to easily understand how to navigate and consume your content.
Use widely understood iconography to visually convey meaning.
Buttons and CTA’s should indicate an action is available through a clearly distinguishable design.
Tt
Create Hierarchy
Quick Tip!
Group multiple text boxes together to have that entire group of text read regardless of hierarchy. In the example to the right, even though the subtext is below the second tile, because it is grouped with tile 1 both text boxes will be read before proceeding to the 2nd tile.
Bounding boxes influence reading order. In this GIF, the second tile visually appears in line with the rest of the images, however the bounding box actually extends above the first tile. Because of this, this would mean a screen reader would start on the second tile, before moving to tile 1, tile 3, and finally tile 4.
Reading order
Alignment
It’s a good practice to use the alignment tool to ensure objects have the correct placement, and to hover over each (like we did to the right) to ensure the correct reading order.
It’s important to note, the bounding box of an object or group will dictate the order that it is read, not necessarily the visuals on the canvas. Here are two areas to consider:
Bounding Boxes
In order for screen readers to present content in a logical order, it’s important to consider how the content on your canvas is laid out. Screen readers will always read Ceros content in a top-down manner, starting from the left and working across to the right. This is also how those navigating by keyboard will move through your experience. Please note: Interactivity built with Object States is not readable by screen readers and will not be considered accessible. Be sure to instead use On-Click and On-Hover interactions. Check out this article for more information on Activating Hidden Content
Ordering Content
Header Tags
Landmarks
It’s easy to understand the hierarchy of visual content thanks to a range of visual cues. However, visual cues do not translate to those using screen readers. To improve this, communicate hierarchy through non visual means using tools like header tags and landmarks.
While we rely on stylistic, size, or placement differences in text to visually convey its hierarchy, this information does not translate to screen readers. Instead, we convey this information with the use of header tags.
Apply Header Tags
General Rules for Tagging Text
How to Add Header Tags in Ceros
H1 tags should be used only for the page title
Text in Ceros can be tagged with a range of header or paragraph tags to create hierarchy and structure. As a general rule:
H1 Tags
H2 Tags
H3 Tags
Paragraphs
H2 tags should be used to identify major headlines or sections of content
Body text. This text should come after the subhead and should pertain to the subheader topic. Use text, facts, stats, etc. to get the point across about the subheader.
First Subheader
Section 2
Second Subheader
Section 1
H3 tags should be used for major sub headings
Paragraph tags should be applied to body copy
1.) Select the text box you’d like to tag. 2.) Navigate to the Design tab, and scroll to the “HTML Element” section. 3.) Select the appropriate tag for that text. This will be applied to the entire text box component.
SEO Bonus
While applying tags is important from an accessibility perspective, it will also help with SEO and ensure search engine crawlers identify main points of your content.
If you also apply an aria-label to that component, the screen reader will default to the aria-label instead of the HTML Section tag.
In Ceros, landmarks can be created by using HTML section tags via the Design tab after selecting a group of components.
How to Add Landmarks
Benefits of Section Tags
By applying section tags, users will be able to navigate directly to and from specific sections within your content without having to constantly tab through the entirety of the experience. Ensure that all the content of a section you want to tag is contained within that particular group so screen reader users can navigate to all of the appropriate content.
Just like header tags translate the visual hierarchy of text into a format that screen readers can understand, landmarks do the same for content as a whole. Landmarks convey the structure of a page, breaking it down into sections to help screen reader users better understand and navigate the content.
Translate the Visuals
H2
H1
In order for screen reader users to be able to digest your content in the same way a sighter user might, it’s extremely important to add alt text to your imagery (unless it’s purely decorative). Alt text is simply used to describe the image, translating visual meaning to text so screen readers can convey this information to the audience.
Add Alt Text to Images
Alt Text
Aria Labels
hide text from screen reader
Within a Ceros experience, visual elements tend to hold some of the most important information. While this goes beyond just adding alt tags to your images – after all, interactive buttons or animated charts also convey key info – translating this into a format screen readers can understand and communicate to your audience is very straight forward.
To add an aria label, select any non-image object or group and look for the “Aria label” option at the bottom of your design tab. For more info, check out the W3C’s documentation on aria labels here.
How to Add Aria Labels
Aria Labels for CTA's, Charts, and Graphs
A CTA to view a report may be labeled and read out as “Click here to view the full report, opens in new tab” to screen reader users, rather than solely relying on the button text. Likewise, key data from a chart can be added as an aria label to translate the visual data in an easily read manner, rather than leaving the screen reader to attempt making sense of multiple text boxes and assets.
If you’re using the Getty Images integration, Ceros will automatically pre fill any Getty images alt tag with its description.
Note
Use aria labels to describe other important visual elements. In the same way alt tags describe images, aria labels can provide screen readers with language that describes what any non-image object is or does. This is especially important for key elements such as interactive buttons, or more complex visuals like charts.
necessary text
Redundant text
A button may contain the words ‘More info’, while also being accompanied by a hotspot that has an aria label of ‘Click here for more info’. If not grouped as one unit, screen readers will read both – when the aria label alone is obviously sufficient.
Hide the redundant text from screen readers altogether. To do this, select any text box and look for the ‘Hide from Screenreaders’ checkbox at the bottom of your design tab.
On occasion, content that makes sense in a visual context can prove redundant for those using screen readers.
Hide Text From Screen Readers
There may be times where text must be separated into multiple text boxes (eg. when creating lists or dealing with multiple fonts). Hiding this text from screen readers and instead adding the content, in full and on a single text box, as an aria label can eliminate unnecessary pauses as screen readers shift from text box to text box, while also preserving the visual flexibility.
Screen Reader Quick Tip!
learn more
Improve Navigation
"Skip to main content’ allows the audience to jump directly to the core of your experience instantly, with no need to build out any interactions. If you have already defined the main area of content using the HTML sections feature, we’ll automatically create a hidden link that only appears to screen readers and keyboard users (once they hit the tab button) which allows users to instantly jump right to it. You can then customize the link text via the Accessibility tab in your Experience Settings.
Skip to Main Content
Scroll to Object
Name Pages
People who face motor or vision barriers often need to rely on their keyboard to navigate, jumping back and forth from element to element to reach what they’re looking for. Thankfully, many of the improvements we outlined in our ‘Create Hierarchy’ section greatly enhance navigation – but with a few extra considerations we really ensure a smooth user experience.
Scroll to Position
In this situation, ‘scroll to position’ will shift keyboard focus to the nearest parent object, which would be the top of the entire section, as it is a group.
By using ‘scroll to object’ you can shift the audience’s keyboard focus directly to the CTA nested deep within that section by targeting it specifically.
When setting up scroll to interactions, consider opting for ‘scroll to object’ rather than ‘scroll to position’. ‘Scroll to object’ interactions improve accessibility by targeting the exact object the user’s focus will shift to, which is key when dealing with content nested within groups.
As an added bonus, if your layout changes there’s no need to update anchors as your interaction is tied to the object rather than a position on the page.
Note on Anchors
To better convey information, it is important to apply a title to each page of your experience. This helps those using screen readers by providing additional context about each page in the URL. To enable this feature in Ceros:
1.) Navigate to the pages panel, and apply a title to each page in your Ceros experience. 2.) Open the Settings window. In the “Experience Settings” tab, enable the “Append Page Names to Experience Title” check box.
Interested in more resources? Check out the Ceros Educate page here
