Creating Accessible Content

10 Minute read

Ceros Accessibility Article Image
Reading Time: 10 minute

Why is accessibility important?

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.

At its core, accessibility is about usability. While designers commonly strive to improve usability for the masses, it also pays to focus on the unique challenges faced by those dealing with various vision, hearing or motor impairments and the assistive technology commonly used to minimize them. After all, improving aspects such as text legibility, color contrast or ease of navigation is ultimately beneficial for everyone.

The Web Consortium Accessibility Guidelines, or WCAG for short, provides great guidance for creating accessible web experiences and consists of three levels – A, AA and AAA. The AA level serves as a near universal standard for organizations around the world, providing a helpful blueprint to work from. We highly recommend checking the guidelines out in detail here.

Please note: The following accessibility features are a part of an ongoing beta program. If you are interested in these features or have any questions, please contact your Customer Success Manager.

Building accessible content in Ceros

Accessibility of Ceros content can be greatly enhanced by investing in simple improvements across 4 key areas: designing for accessibility, creating hierarchy, translating visual information and lastly improving navigation.

Before we get into it, a few important things to remember:

  • You’ll need to be part of the Accessibility Working Group to access many of the features outlined below, as they’re currently in development. For more info, contact your Customer Success Manager.
  • The features are currently opted into on a per experience basis, so you’ll need to turn them on for each new experience, 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.

Click on any of the below titles to navigate to that section. 

1. Design for accessibility

The underlying design of any experience plays a huge role in its accessibility. Being mindful about aspects such as colour 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.

Use clear UX/UI language

It is hugely important to remember making accessible content starts with creating a clear user interface. Do you have a succinct hierarchy to your content that allows users to easily understand how to navigate and consume your content? Some key areas to consider are:

  • Using widely understood iconography to easily convey meaning 
  • Buttons and CTA’s should indicate an action is available through a clearly distinguishable design

For more information on this particular topic, be sure to check out the Web Content Accessibility Guidelines on non-text components.

Be smart with color

Have you used colors that are easily distinguishable to visitors with color blindness or difficulties distinguishing certain color patterns?

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. It’s also a important to ensure your background and foreground colors have a high enough contrast difference to allow a larger audience to be able to view it. 

Although it may be difficult to know yourself how others may see your content, 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. 

For more information on this particular topic, be sure to check out the Web Content Accessibility Guidelines on color.

Make sure text is legible

Are you following WCAG 2.1 AA compliant text spacing? 

In order to comply with accessibility standards, it is recommended that you follow the below guidelines when creating text components: 

  • Line height (line spacing) to at least 1.5 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size

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.

Avoid using text within images

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. In both cases, Alternative text tags should be applied to those images to convey meaning (see below).

For more information on this particular topic, be sure to check out the Web Content Accessibility Guidelines on how to handle images of text.

2. Create hierarchy

It’s easy to understand the hierarchy of visual content thanks to a range of cues. Font weights and text placement differences denote headings and subheadings, sections are clearly defined and navigation menus separate themselves from the underlying content. These design decisions make scanning and understanding any web experience quick and easy – however, none of these visual cues translate to those using screen readers. To improve this, we can instead communicate hierarchy through non visual means using tools like header tags and landmarks.

Ordering your content

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.

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. For example, in the GIF below, 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. 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 below) to ensure the correct reading order.

Quick Tip: Group multiple text boxes together to have that entire group of text read regardless of hierarchy. In the example below, 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.

Apply header tags

While we rely on stylistic, size or placement differences in text to visually convey its hierarchy, this information doesn’t translate to screen readers. Instead, we convey this information with the use of header tags.

Text in Ceros can be tagged with a range of header or paragraph tags to create this hierarchy and structure. As a general rule:

  • H1 tags should be used only for the page title
  • H2 tags should be used to identify major headlines or sections of content
  • H3 tags should be used for major sub headings
  • Paragraph tags should be applied to body copy

Not only is applying these tags important from an accessibility perspective, it will also help with SEO and ensure search engine crawlers are able to identify main points of your content.

To apply header tags in Ceros:

  1. Select the textbox 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.

Create landmarks

Just like header tags translate the visual hierarchy of text into a format 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. 

In Ceros, these can be created using HTML section tags via the Design tab after selecting a group of components. 

By applying these 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. 

Note: 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.

3. Translate the Visuals

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.

Add alt tags to your images

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.

Note: If you’re using the Getty Images integration, Ceros will automatically pre fill any Getty images alt tag with its description.

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.

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.

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.

Hide text from screen readers where necessary

On occasion, content that makes sense in a visual context can prove redundant for those using screen readers. For instance, 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.

Redundant text like this can be hidden from screen readers altogether. Just select any text box and look for the ‘Hide from Screenreaders’ checkbox at the bottom of your design tab.

Quick Tip: 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.

4. Improve Navigation

For most of us, navigating through an experience is as easy as visually scanning the page and scrolling directly to points of interest using your mouse or trackpad. However, those 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.

Use the skip to main content link

For those using assistive technology, constantly having to tab through headers or navigation to get to the main content below can be slow and tedious, especially within multi page experiences. Skip to main content allows this 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 them to instantly jump right to it. You can then customize the link text via the Accessibility tab in your Experience Settings.

Use ‘scroll to object’ interactions

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 example, consider an experience where each section of content is grouped together and you want a button in the navigation to bring you down to the CTA nested within the last section. 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. However, 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.

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.

Name your pages

To better convey information, even at the webpage level, 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.

Was this helpful?

3 0
3 out of 3 people found this helpful