Accessibility improvement on earth.fm

The earth.fm web development team has been working on improving accessibility on the site. This mainly relates to enabling and optimizing keyboard controls, and improving its structure and content for assistive technology (AT) screen readers.

1. Operate search via keyboard

Search is an important feature because it allows users to discover and experience earth.fm’s contents. It wasn’t previously possible to use our search feature with just a keyboard. We have therefore now made this possible, as follows:

• To access search results: Type a keyword in the search field, then simply press enter or the arrow down (↓) key. The focus will move to the search results; these can be navigated by tabbing.
• To access search results from the filter button: Once the search filter is enabled by pressing enter on the filter button, press the arrow down (↓) key to move the focus to the search results.
• To return to the search text field from search results: From the first item of the search results, press the arrow up key (↑), or shift + tab key, to return to the search text field.
• To close search: Pressing the escape key within the search results will move the focus back to the search text field. There, either search other keywords or press the escape key again to close the search field entirely. 

2. Skip to content

To avoid the tab key having to be pressed repeatedly to enter the site’s main contents, we have added a ‘Skip to content’ button. If you press enter on ‘Skip to content’ on any page, focus will skip the heading (including the home button, search, and menu) and move directly to the main contents.

3. earth.fm sound map

Via the earth.fm sound map, users can select markers of recordings in order to listen to nature sounds from all around the world. Previously, to play recordings, users had to click each marker to view previews. 

We have also improved the sound map so that users can use it with a keyboard:

• To navigate with a keyboard: Once the focus is entered and one of the sound map markers is selected, navigate to other markers with the arrow keys. We have added the title of each recording to the label of its marker, meaning that screen readers can now tell users the recording’s title.
• To play and pause the recording: Press enter on the marker that you would like to listen to. The focus will then move to the play button in preview; use enter to press play.

4. Modals and pop-up menus

We have improved the accessibility of our modals and pop-up menus via keyboard. Additionally, the focus stays within the modals and pop-ups when it is opened. To close modals or pop-ups, press enter on the close button. 

You can also now create your own playlists and check recordings’ details freely with a keyboard.

5. Further improvements

• Text colors: Some texts in earth.fm were previously particularly light. We have changed these text colors for the benefit of users who prefer higher contrast settings, so they will show the same green without visual effect.
  

Before

After

• Improvement for screen readers: We have also improved earth.fm heading structures, aria-labels, and screen reader texts so that the correct information is delivered to screen reader users.

Our aim is to make earth.fm accessible to all users. If you have any feedback, please let us know!

Chohee and Team earth.fm

---

Featured photo by Eugene Golovesov on Unsplash