navigatr

Navigatr extends basic keyboard accessibility functionality for websites. It allows users to focus elements on the screen both in order and backwards using arrow keys, and can autofocus on page load.

Comment

Inspiration

While doing some research, our team found that one of the main accessibility challenges for web pages was keyboard-only navigation (found here). We wanted to make an attempt to broaden this functionality using a Chrome extension, so that all web pages would be impacted.

What it does

This Google Chrome extension allows the user to navigate around a webpage using the "shift" button and the left and right arrow keys.

How we built it

We used the example Google Chrome extension project as a starting point. We modified the JavaScript files to build out the functionality that we wanted to include. The bulk of the project and functionality was made with JavaScript, and then we added some HTML and CSS for the extension popup window. The popup window allows the user to automatically focus on the first element on the page when they load it, or they can turn this functionality off.

Challenges we ran into

  • It was a challenge to determine which elements could actually focused on in a web page.
  • It was a challenge to map out the elements and a storable data structure so that we could change the focus to the next element and the previous element on the page.
  • We ran into lots of bugs that had to be fixed on the fly.
  • This was the first Chrome extension that we've attempted to build, and there are many limitations that we were not aware of, with regard to passing data between functions, how to organize the files and sub-functions, etc.

Accomplishments that we're proud of

The core functionality of the extension works on static web pages! The popup is not the prettiest thing in the world, but it also works well.

What we learned

We learned the basics of creating a Google Chrome extension! We learned some Javascript along the way. We also learned about localstorage in Chrome - both how to store information here and how to retrieve it.

What's next for navigatr

We want to expand the core functionality to accommodate pages that dynamically load new content, such as Facebook and Twitter. Currently, we map out the site on the initial page load, however we ran into issues trying to update our mapping when new content arrives. This was mostly due to encountering race conditions accessing the localstorage when the page mutated.

We also want to expand the core functionality to utilize the up and down arrow keys to go to the closest element up or down from the current element in focus. This will require some sort of remapping of nodes based on the x, y-coordinates of the elements on the page.

The final thing we want to pursue is publishing the extension to the Chrome extension web store!

Share this project:

Updates