Accessibility Updates in the Virtual Career Center

Accessibility is critical to our mission at uConnect. As a result, we’ve been making ongoing updates to ensure that the Virtual Career Center provides the most comprehensive accessibility options possible, and that our clients are equipped with best practices for building accessibility into their strategies. We’re excited to announce accessibility updates and best practices for the following VCC elements:

Hero Banners

The landing page is every virtual career center's "front door." It's a great opportunity for visual impact, but the carousel in this area was a common issue in accessibility reports.

During the recent WCAG 2.1 AA upgrade, we did significant research on carousels. We discovered that in many cases, carousels were both inaccessible and ineffective. Should I use a carousel? provides a great overview of these issues, including how statistics from one school (not a uConnect platform) revealed that "1% clicked a feature. Of those, 89% were on the item in the first position.” That’s just 1% of clicks for the most significant object on the home page!

We then reviewed our uConnect clients' sites and identified some additional common problems, such as text-heavy images without alt text making the content invisible to screen readers, and "carousel dots" (the navigation between slides) overlapping with content on mobile devices when clients had optimized their banners for desktop instead.

To solve for these and other issues, we’ve turned off the carousel functionality and use a single banner instead for all new VCC instances, which is better optimized for accessibility and the mobile experience. We also added a few thoughtful styles to make added-text content more readable on mobile.

For existing sites, we didn't want to suddenly remove functionality that our clients were already using. Multi-banner carousels can still be used, but we added an in-app warning about the accessibility considerations when clients edit their banners. Being able to recognize and address a potential problem spot like this instead of waiting on an accessibility report is a huge win for our clients, and being warned rather than suddenly blocked means that clients can adjust their content strategy on their own timelines.

Safely Respecting Client Branding

Another area of focus for our Accessibility work was color. As we worked on correcting color contrast issues throughout the platform, we identified several places where text colors were hard-coded, forcing the text to be a certain color (usually black or gray) that may not be in the client's brand palette.

Some of these were easy to swap to the client's default or heading text colors, but we also saw an opportunity to give clients the ability to make their branding consistent in more areas of their VCC. We used "color math" to dynamically generate muted colors that meet contrast guidelines while still matching the clients' main brand colors.

Client customizations typically include a dark-colored button with white text, but we saw that some clients were using "ghost buttons", an outline-style variant with a border, white or transparent background, and darker text. Some areas in our theme used the button background color as an accent, which was safe in most cases – but for those using the "ghost button,” some content was made invisible rather than attention-grabbing. We updated our styles and templates to use a different accent color from the clients' palette and streamlined some of our button styles to ensure that content remains visible regardless of any branding customizations.

Staff Page Navigation

Our previous staff page template featured a carousel with many sets of staff members. In our accessibility testing, we discovered that the top portion of the template was not navigable by keyboard and that updates to the carousel (such as switching to the next set of people) were not properly announced to screen readers. We redesigned the top portion of this template to use a scrolling region instead, which makes navigation by keyboard or mouse much easier.

Some operating systems hide scrollbars when there is not direct interaction with the scrollable content. We made sure that our scrollable region has a visible scrollbar regardless of operating system to signify that additional staff members are visible on the page.

We also avoided the “keyboard trap” where keyboard users would have to press the Tab key many, many times to navigate from the top of the page, through all of the staff member thumbnails, and finally into an individual staff member’s profile or contact information. With a large team, all of those extra key presses can really add up. The Tab key lets users navigate into the scrollable region, and the arrow keys can be used to switch between profiles. Now, keyboard users can jump from the top of the page to the scrolling staff list and then directly to any profile content – that’s just 3 stops instead of countless more!

Upcoming Improvements & Events

Comboboxes

We’re actively working on extending a free, open-source combobox module from one of the leaders in accessibility testing. Once this work is completed, our improved comboboxes will be available in forms throughout the VCC, such as the Labor Market Insights and Outcome Data Visualization modules. Even better yet, we’ll be keeping our combobox code updates freely available for others to use and build upon – even if they aren’t uConnect customers.

WCAG 2.2 AA Compliance

When we outlined work in our recent VPAT update, we also noted the improvements to make for the most recent WCAG 2.2 standard, which introduced 9 new success criteria. We already meet many of them, and we’ve identified the remaining tasks for our future updates.

Live Session on May 2

Join us on May 2 for a live session on accessibility best practices with Stephy Miehle, a frontend engineer and accessibility advocate at uConnect. More details to come!