The Importance of Accessibility

POUR - Perceivable, Operable, Understandable, and Robust

Accessibility is a critical aspect of digital design. According to WCAG 2.0 (Web Content Accessibility Guidelines), there are four central principles of accessibility which state that content must be: Perceivable, Operable, Understandable, and Robust.

To read more about WCAG, browse the WCAG 2.2 Guidelines.

Universal usability

Accessibility is more than just making sure users with disabilities can navigate and utilize something; it should be inclusive of all demographics and universally usable for both novice and expert users. Being able to effectively and easily browse content should be possible for everyone. Following standardized and widely accepted accessibility and usability principles is a great place to start to ensure your designs meet this expectation.

The following sections outline the ways in which functionality and accessibility can merge to achieve the most inclusive designs possible.

Color Contrast

It is estimated that globally, around 2.2 billion people have a near or distance vision impairment1, with at least 300 million people having some form of color blindness (mostly red-green) 2. This illustrates the importance of incorporating proper color contrast into designs and brand identity.

To view F&G's brand colors in an expanded palette, as well as a tool to check color contrast with F&G colors, explore our expanded color palette, which includes a tool to test color contrast.

Another useful tool when working with color is WebAIM's contrast checker which allows you to get the color contrast ratio of two colors.

Color isn't everything

Accessibility includes considering multiple ways to understand part of an interface - designs shouldn't stop with differentiating aspects of a website using only color. Adding labels, icons, or other context clues ensures that users will be able to perceive at least one or more elements in order to understand the content.

Alternative Text

What is alternative text?

Also known shorthand as 'alt text', it describes the content of an image in an accurate but succinct manner. Images without any relevance to the content (i.e. decorative only), should be handled differently - a common implementation is to leave the alt attribute blank.

On a platform like SharePoint, there is an toggle-able button within the Accessibility section in an image's settings: "Mark as decorative", which will fulfill this requirement.

Button toggled on in Sharepoint image settings

At the end of this section you can find links to more information about different types of images and how to handle writing appropriate alt text for them.

Why does it matter?

According to webaim.org, there are three primary reasons for alt text to be included with images3:

  1. Screen readers: Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images
  2. Browser loading and configurations: If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image; this can increase usability for users with slow internet or security protocol that block images from loading
  3. Search engines/SEO: Search engines use alternative text and factor it into their assessment of the page purpose and content

Best practices

For images that require alternative text, there are a few best practices to follow:

Be succinct

Be accurate

Beware of redundancy

Punctuation is good

More resources for writing alt text

For more detailed information and examples, refer to the following links:

Alt text Examples

Here are a handful of different examples of images and their alt text you can find throughout some of F&G's digital content.

Older woman in grey sweater

Alt: "Older woman in grey sweater"

Des Moines skyline with purple buildings

Alt: "Des Moines skyline with purple buildings"

A group of smiling professionals

Alt: "A group of smiling professionals"

F&G teammates volunteering at Meals for the Heartland

Alt: "F&G teammates volunteering at Meals for the Heartland"

Full-color F&G logo with tagline

Alt: "F&G aspirations logo"

*Note: for logos used as hyperlinks to landing pages/home pages (i.e. fglife.com), it is often best to simply write "F&G" as the alt text4.

Buttons and Calls to Action (CTAs)

Buttons are one of the most common components found in an interface and throughout the web - they are vital for a number of purposes, including functional purposes such as navigation, and desired user interactions such as contacting an organization or adding an item to a shopping cart.

A "Call to Action", or CTA, can be understood as a primary desired user interaction often found near the top of a page, standing apart from other buttons or links on the page in it's notice-ability (i.e. color, size of text, etc.).

Effective calls to action

How to write buttons and calls to action

Do's Dont's
Use clear and concise labels Don't use punctuation marks
Use sentence-case capitalization Don't use title case capitalization or all caps
Use active verbs or phrases for labels (i.e. delete or cancel) Don't use vague and generic labels (i.e. yes or no) or lead-in text such as "click the button"
Strive for short text within your button, generally 2-5 words Avoid using long phrases that might wrap onto multiple lines, as these can be difficult to read on mobile devices

Button placement and layout

Buttons vs. hyperlinks

Working with code

Understand the semantic difference between a <button> element and an <a> (anchor) element - a button generally performs an action or changes something on a page; an <a> element creates a hyperlink to anywhere that can be accessed with a URL, including other web pages, files, emails and more.

<a> elements can be styled to appear like a button, using CSS, as follows.

Learn More about F&G

They can also appear in the default in-line style, as follows.

Contact our team

How we use buttons

To learn more about how to style buttons with F&G brand colors and different use cases and examples, explore our section dedicated to button components.