Accessibility: How You Can Take Control

Topics Covered

• Overview
• Why is Color Contrast Important for Accessibility?
• Customizing Theme Colors in Configio
  • Variation Tiles
  • Body
  • Preheader
  • Header
  • Footer
  • Buttons
  • Links
  • Input Fields
• Using Custom CSS for Additional Modifications
  • What is CSS?
  • What is a HEX value?
  • Product In Stock Tags
  • Price Tags
  • Testing Custom CSS
• Why is Text Size Important for Accessibility?
  • Body Text Size
• Why Are Descriptive Labels Important for Accessibility?
  • Form Fields

Overview

Ensuring your website complies with the Americans with Disabilities Act (ADA) and the Web Content Accessibility Guidelines (WCAG) is essential for both legal compliance and fostering inclusivity. While the ADA is a U.S. law that prohibits discrimination against individuals with disabilities and mandates accessibility in public spaces (including digital environments), WCAG provides a detailed set of internationally recognized technical guidelines for creating accessible web content.

In Configio, you can directly address key accessibility aspects, such as proper color contrast and text size, helping to meet the ADA’s legal requirements and WCAG’s technical standards.

This guide will walk you through the significance of these aspects and provide step-by-step instructions to help you improve accessibility on your Configio site.

Why is Color Contrast Important for Accessibility?

Color contrast is critical for users with visual impairments, including those who are colorblind or have low vision. Strong color contrast ensures that text and visual elements are distinguishable, enhancing readability and usability.

To identify and resolve color contrast issues, you can use tools like:

• WebAIM Contrast Checker

• Accessible Web Contrast Checker

• Coolors Contrast Checker

1. Enter your current text and background colors using HEX values (e.g., #FFFFFF).

2. Check the accessibility score.

3. Adjust the colors to meet WCAG guidelines.

With Coolors Contrast Checker, when you select the Click to Fix link, Coolors will suggest the most accessible color combination that is close to your original colors.  You can select "Adjust text color", "Adjust background color", or "Adjust both colors".

4. Copy the HEX values of the updated colors to apply them to your site.

If you’re managing multiple themes, ensure updates are applied across all active themes to maintain consistent compliance.

Customizing Theme Colors in Configio

You can use the Theme Builder to update various site elements, ensuring accessibility compliance. Below are detailed steps for each section:

Variation Tiles

Navigate to the Theme Builder:

• Go to the Advanced tab → Variation Display section.

• Modify the color of variation tiles (including hover states).

Body

• Navigate to Advanced → Body in the Theme Builder.

• Customize the content background, text color, and other visual aspects of all site pages.

Preheader

• Go to Advanced → Preheader in the Theme Builder.

• Adjust the background color or apply gradients for a polished look.

Header

• Navigate to Advanced → Header in the Theme Builder.

• Modify the background, apply gradients, and customize font colors.

Menu

• Go to Advanced → Menu in the Theme Builder.

• Adjust the background, font, and border colors for menu items and dropdowns.

Footer

• Navigate to Advanced → Footer in the Theme Builder.

• Customize the footer’s background, font, and borders.

Buttons

• Go to Advanced → Buttons in the Theme Builder.

• Adjust button colors, borders, and hover states.

Note: For the login button, use the Alt Background and Alt Font Color options.

Links

• Navigate to Advanced → Links in the Theme Builder.

• Modify font colors, hover behavior, and text decoration.

Input Fields

• Go to Advanced → Inputs in the Theme Builder.

• Adjust colors for backgrounds, borders, labels, and hover states.

Using Custom CSS for Additional Modifications

For elements with hardcoded colors (e.g., product availability tags), you can use custom CSS to make adjustments.

What is CSS?

CSS (Cascading Style Sheets) is a language used to style and format the appearance of a website. While HTML structures the content (like headings, paragraphs, and images), CSS controls how that content looks, such as its colors, fonts, spacing, and layout, making websites more visually appealing and user-friendly.

What is a HEX value?

Hex values are a way to represent colors in digital systems. They use a combination of numbers and letters (0-9, A-F) to define the intensity of red, green, and blue in a color.

Here's how it works:

• Hex code: A hex code consists of six characters, like #FF0000.
• Red, Green, Blue: The first two characters represent the amount of red, the next two represent green, and the last two represent blue.
• Intensity: Each pair of characters ranges from 00 (no color) to FF (maximum color).

For example:

• #FF0000 is pure red (maximum red, no green or blue)
• #00FF00 is pure green
• #0000FF is pure blue
• #FFFFFF is white (maximum of all colors)
• #000000 is black (no color)

By combining different intensities of red, green, and blue, you can create a wide range of colors.

Product In Stock Tags

To update the color of the “In Stock” tag:

.tag.orange {

    background: #933C13;

    color: white; 

}

Replace #933C13 with your desired HEX color.

Note: There are configurations that impact Product availability (Settings>Setup>Configurations). If you have enabled the configurations to add coloring to stock warnings, there are additional styles that can be edited, but at this time, those styles are ADA and WCAG compliant. 

Price Tags

To modify product price tags:

.price-tag {

    border: 1px solid rgba(0, 0, 0, 0.21);

    background: white;

    color: #1B4B1F;

}

Update #1B4B1F to your preferred color, ensuring it meets WCAG standards.

Testing Custom CSS

After making changes, verify the contrast using tools like the Coolors Contrast Checker to ensure compliance.

Why is Text Size Important for Accessibility?

 Text size is important for accessibility because it ensures everyone, including people with vision impairments, can read and understand content on a website. If text is too small, it can be hard to read, especially for users with low vision or on smaller screens like phones. Proper text size makes a site more user-friendly, meets accessibility standards, and ensures all users can access the information easily without straining their eyes or relying on extra tools.

To identify and resolve issues with text size, you can use tools:

• WAVE Evaluation Tool 

Body Text Size

To change the text size for various text elements on your product list page, such as:

• Menu
• Search Controls
• Product SKU 
• Product Short Description
• Product Location
• Form Field Labels

Go to Advanced → Body in the Theme Builder.

• Adjust the font size and family

Why Are Descriptive Labels Important for Accessibility?

Descriptive labels are crucial for accessibility as they provide clear and meaningful information about user interface elements, enabling people with disabilities to navigate and interact with digital content effectively. For individuals using assistive technologies, such as screen readers, these labels describe the purpose and function of buttons, links, and form fields, reducing confusion and ensuring a seamless user experience. Proper labeling not only enhances usability but also ensures compliance with accessibility standards, fostering inclusivity and equal access for all users.

Form Fields

Configio has introduced functionality that will automatically provide form fields with accessibility labels.  However, in addition to that functionality, we have also introduced the ability for admins to choose the label they wish each form field to have. 

To modify the accessibility label for an existing form field, log in to your admin account, and navigate to the Forms management page (Settings>Assignments>Forms), and identify the form you wish to modify.  Then, select the option to edit form questions.  On the Edit Form Questions page, select the edit icon to modify a specific question.  The settings for that question will be displayed, and you will see a field labelled Accessibility Label.  Any text that is input in the Accessibility Label field will then be used when the form is loaded. 

To modify the accessibility label for a new form field, log in to your admin account, and navigate to the Forms management page (Settings>Assignments>Forms), and identify the form you wish to modify. Then, select the option to edit form questions.  On the Edit Form Questions page, select the button to add a new question.  On the next step, choose the question you would like to add.  You can choose between the questions that are available for the form you are modifying or you can choose a custom question. The settings for that question will be displayed, and you will see a field labelled Accessibility Label.  Any text that is input in the Accessibility Label field will then be used when the form is loaded. 

 

By following these steps and using the recommended tools, you can enhance your Configio site’s accessibility, providing an inclusive experience for all users.

 

This knowledge article provides information on specific Configio features. To ensure continuity with documentation and product functionality, Configio reserves the right to amend or update this knowledge article as needed. For more information, reach out to Configio Support.