How we’re improving keyboard accessibilityHow we’re improving keyboard accessibility

Accessibility is the practice of making something available to anyone. In the real world, we add wheelchair ramps where there are steps at entrances to libraries and shops, and lifts for staircases in buildings. 

As our lives become more and more digitised, it’s important we consider how we make websites and web applications usable by a wider audience. To do this digitally, we can use interactive elements, text labels, follow coding standards, and allow people to navigate easily around the web, that includes people with disabilities who might use assistive devices and technologies. This is called digital accessibility.

In this post, we’ll look at some recent work we’ve done to improve Sharesies’ accessibility, how we’ve done it, and some of the improvements we’ll be looking at in the future.

Keyboards are key 

Many of us use a mouse to click (or our fingers to tap) buttons and links to navigate our way around the web. But some of us rely on using a keyboard—either temporarily (like if you’ve injured yourself), or as a way of life. 

Whatever the reason, we want to improve the web accessibility of the Sharesies platform and help remove one more barrier to developing wealth.

Building better buttons

We've started with the buttons and other bits you interact with once you’re signed in; buy, sell, view and search for investments; and manage your settings or Portfolio. You can now use a keyboard, screen reader, or other assistive device to interact with these buttons—as well as by mouse and finger.

In technical terms: we’ve changed the HTML elements to be more ‘semantic’, which means we’re giving the code more meaning and structure. It’s a bit like construction inside a house—when building a doorway, you could consider using a window instead of a door. Technically, it would function similar to a door, in that you could open the window and go inside. But a door would be more appropriate and easier for people to use, and is something built for a specific purpose.

In our case, we're using buttons where buttons are meant to be used. They still look and work the same way they did before, but a web browser is now given more information about what they do. For example, a screen reader can understand that something can be ‘clicked’, and a keyboard can focus on different buttons when the ‘tab’ key is pressed.

Finding focus

When you use a mouse to navigate the web, the cursor’s position is visible on-screen, which lets you select the button you want with precision. When you use your fingers on a touchscreen, you can just prod at the button you want to use. 

When you navigate on a site with a keyboard, it can be a bit harder to know what’s selected. Some web browsers and devices show a black or pale blue ring around the selected button, but it can be inconsistent. Sometimes, it even shows up when using a mouse or touchscreen!

We took a distinctly Sharesies approach to show what’s in focus. Now when you press the ‘tab’ key on the keyboard, a pink focus ring highlights the selected button. When you press the ‘tab’ key again, the focus shifts to the next interactive button. Pressing the ‘return’ (or ‘enter’) key accesses, or ‘clicks’, the highlighted button with the keyboard.

We’re just getting started

Better keyboard accessibility is a fundamental step in improving the overall accessibility of Sharesies. It sets a foundation for enabling other assistive devices to read, understand, and navigate Sharesies.

We know there's still more work for us to do. Next, we plan to extend keyboard accessibility to even more parts of the platform and improve screen reader support, colour contrast, and font sizes.

For more info about using a keyboard to navigate Sharesies, check out our help centre article.