Skip to main content

Portrait of Ronan Corr, Front-End Developer

Ronan Corr

Front-end Developer with over 15 years of experience in the non-profit and telecommunications sectors. Holds an Honours Bachelor's degree in Business Administration and Technology Management. Passionate about turning accessibility principles into practical, inclusive digital experiences.

Email Ronan at corr.ronan@gmail.com

Bell Canada's Timeline Web Page

Bell Canada's Timeline Web Page

Enhanced web accessibility on a page with timeline filter buttons and history elements, improving the experience for blind and keyboard-only users.

The Problem:

  1. Timeline filter buttons were not providing enough information for screen reader users, making it unclear whether the buttons were active or checked.
  2. Timeline history items were structured in columns, resulting in an unordered navigation experience for keyboard users. Due to restrictions, I couldn't modify the HTML structure directly to reorder the items.

The Solution:

  1. Improved Filter Button Accessibility:
    Added the aria-checked attribute to the filter buttons, enabling screen readers to announce their active/inactive state. Additionally, I changed the role of these buttons to act as checkboxes, offering clearer context for screen reader users.
  2. Keyboard Navigation Enhancement:
    Added a tabindex attribute to all focusable elements on the page, ensuring a logical and sequential order when navigating through history items. This dynamic solution allowed for the addition of future timeline items while maintaining a consistent tab order for keyboard users.

Skills & Tools Used:

  • HTML, JavaScript, jQuery
  • ARIA (Accessible Rich Internet Applications)
  • NVDA Screen Reader
  • Keyboard Accessibility Testing

Demo