The Accessibility Settings screen allow you to enable an Accessibility Menu* with several modes to address accessibility issues related to color contrast levels, animations, and keyboard navigation focus outlines.


* Only our new (react) templates have the latest accessibility features. If you are using one of our legacy templates, you should consider upgrading your website. There is no additional cost for this. Contact our Support team to get started.


To access your Accessibility Settings, log into your iHOUSEweb admin menu, click Settings, then click Accessibility Settings.



Accessibility Icon

You can choose to show or hide the Accessibility Icon from the Settings: Accessibility page in your Admin Menu. The icon appears fixed in the lower left hand corner of your website and inherits its color based on your website's color theme.

Note: even if you have chosen to hide the icon by default, it still appears when focused - so it remains discoverable and usable for keyboard-only users. It is the third focusable element on the page, just after the "skip to main content" and "skip to main navigation" links.



Accessibility Menu

The Accessibility Menu includes the following options:

  • Buttons to enable alternative versions / modes:
    • Stop Animations mode
    • High Contrast Colors Mode
    • High Contrast Focus Outlines Mode
  • Accessibility Statement
  • Accessibility Feedback Form


This menu can be opened from either the Accessibility Icon button or from the Accessibility link in the footer of your website. It exists on every page, and any modes you turn on will persist as you navigate through the site.



Stop Animations

This mode provides a way for users with motion sensitivities to manually suppress auto-play type animations that they may not have direct control over otherwise - animations that the page initiates automatically as they view or scroll it. This includes:

  • Banner background videos, where content may be on top of and blocking the normal controls.
  • Slideshows and carousels that are set to autoplay.
  • Scroll-spy animations where content animates into place as you scroll down the page


Note: This mode is NOT meant to suppress animations that the user has manually started.



High Contrast Colors

Some vision-impaired users may have difficulty reading text if your initial website theme colors do not have a high enough contrast with their backgrounds. Rather than compromising brand colors and design aesthetics for all users, we provide an optional high-contrast mode that can be turned on for those that need it. Even in this mode, we retain as much of your original colors as possible, while shifting them enough to meet AA color contrast requirements under WCAG 2.1


Before:

After:



High Contrast Focus Outlines

Some partially vision-impaired users that are using the keyboard to navigate may struggle to identify which element is currently focused. This mode provides a very visible thick dashed red outline around the currently focused element.



Accessibility Statement

The accessibility statement is a simple message stating your intent to provide an accessible website. It asks website users to contact you if they have difficulty accessing your website content.



Accessibility Feedback Form

There is also a form for your website users to report any accessibility issues they encounter. It collects their name, email, phone number, and message. It also automatically includes what page of your site they were on when they submitted the form. These feedback form submissions are sent to you by email.