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.
- 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
Earth.fm is a completely free streaming service of 700+ nature sounds from around the world, offering natural soundscapes and guided meditations for people who wish to listen to nature, relax, and become more connected.
You can join the earth.fm family by signing up for our newsletter of weekly inspiration for your precious ears, or become a member and not only enjoy extra earth.fm features and goodies but help us grow new forests on our beloved planet.