A more accessible landing page for staff

Posted in: Accessibility, Design, Development

In a large organisation such as ours the range of input and navigation methods covers a wide spectrum ranging from mouse/pointer and touch screens to screen readers and voice recognition. We have a duty to ensure all users can access our information no matter how they navigate the site. Our delivery principles reinforce our commitment to put users needs first and foremost.

I've just completed a sprint to resolve a number of accessibility issues on our internal staff landing page - a high traffic page used by university staff on a daily basis. Some of our colleagues had raised issues regarding their ability to efficiently navigate the multi-tiered menu that provides access to key online tools and services for staff.

University of Bath staff page
Some visitors to the staff landing page had problems whilst accessing submenus

The issues

  • Accessing the Javascript-powered flyout submenus was at best erratic and at worst completely impossible using only keyboard input
  • Contextual feedback for assistive technologies was absent. Users unable to see the visual indicators were not aware the links had related submenus
  • 'Clickable' links were not explicitly declared as such
  • Some links were only used as 'hooks' for the Javascript functionality. These links were navigational dead ends for users unable to access the submenus

Our solutions

  • Increased the 'touchable' link area to encompass the image and the title. A small win for touchscreen device users 🙂
  • Added relevant ARIA roles via HTML and Javascript. These provide additional information to visitors using assistive technologies regarding the role and status of elements on the page
  • Rewrote the Javascript functionality to ensure the menu is fully navigable via keyboard

But does it work for everyone?

Not quite yet. But we are working on it…

Although these changes are a positive step towards unlocking our content for all our users the solutions implemented above only really deal with those who navigate via keyboard, mouse or touch.

We're now actively looking at ways to give our users with voice recognition software the best possible experience on the University of Bath website. Simplifying navigation options and avoiding jargon will go a long way to helping those using only their voice to get around.

Posted in: Accessibility, Design, Development