Extended Theme User Experience

The Extended themes deliver full WCAG/508 compliance and a more mobile-friendly experience. With the Extended themes, Cornerstone can be extended to serve more users and more devices, which extends the usage of the application. With these themes, users will have an enhanced experience and improved mobile capabilities.

Themes are configured for a division in Display Preferences. See Display Preferences .

On Desktop

When the width of the browser window is narrowed, the navigation bar responds to the change in width by wrapping the navigation bars. This allows all tabs to remain accessible. There is no limit to the number of rows that can appear when reducing the width of the browser window.

On Tablet/Mobile

When viewing the portal on a mobile device, the navigation bar wraps to allow all tabs to remain accessible.

Hover Event

A hover event occurs when hovering the mouse or mousepad over a navigation tab. The hover functionality for the Extended themes is the same as the existing functionality for the non-Extended versions. When hovering over the navigation bar with a mouse, the navigation tabs expand to display the sublinks. This experience is unchanged from the non-Extended versions. This experience is applied for a desktop, laptop, and a tablet with a mouse or mousepad.

Touch Event

A touch event occurs when touching the screen interface, such as when using a smartphone or tablet. When the Extended them is enabled, tapping provides the same experience as clicking. Users can tap the navigation tabs to open the sublinks drop-down, and then tap a sublink to open the associated page. Tapping the tab again collapses the sublinks drop-down.

Focus Event

A focus event occurs when using the Tab key on the keyboard. The Extended themes provide enhanced functionality for use with screen readers. When using the Tab key, a border appears around the selected tab. Upon selecting the Down arrow and Enter keys on the keyboard, the tab expands to show the sublinks. This functionality is designed to provide easy navigation for users who use screen readers to navigate websites. This supports the WCAG and 508 compliance requirements.