Cisco

Collaborative Knowledge

Visual designer for Cisco Collaborative Knowledge (SaaS product being developed for an online social learning network with collaboration and a shared knowledge library. I worked as part of a small agile team developing this.

One of my responsibilities was Section 508 Compliance for Accessibility and the Web Content Accessibility Guidelines (WCAG 2.0) which are similar to Section 508, but on an international level. WCAG 2.0 requires specific techniques for compliance and is more current than Section 508. Some examples of accessibility are shown below.

ck website

Operable content

Make all functionality available from a keyboard. As you tab through the content, the focus moves to each actionable element.

This image defines how the focus will appear on the various elements.

ck with accessibility

Perceivable content

Provide text alternatives for non-text content. All actions only represented by color must have a text description.

The right side of the banner was reworked, with simpler icons and text describing the Jabber (texting) state and number of notifications.

blue accessible

High contrast color scheme

The color contrast is not enough for accessibility standards, so an alternative white banner was created for the high contrast color schemes.

The search tool was updated to a more modern look.

white accessible
search
search dropdown

Color contrast and font size

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. I used a color contrast checker tool, and adjusted our color pallet to be within the acceptable ranges.

The new menu has more contrast, larger fonts, and bold fonts so that it is compliant.

color contrast
menus