In this lesson, we are creating the audio player interface more visually appealing using icons from the React Icons library and Font Awesome, in this process, we are also ensuring that the interface remains accessible to screen readers by providing text descriptions for the icons, first by using the title
prop on each icon, and then by implementing a visually hidden
technique that hides the text descriptions from sighted users but makes them available to screen readers. This involves copying and pasting some CSS code to create a visually-hidden class, adding an aria-hidden
attribute to each icon, wrapping each icon in a React fragment, and then adding a span
element above each icon with the corresponding text description and the visually-hidden
class.
Think about:
aria-hidden
or visually hide spans?