Screen Readers

Screen readers help people who are visually impaired use a computer by providing text-to-speech or text-to-Braille functionality. Some popular screen readers include NVDA, JAWS, and VoiceOver.

Creating applications that are compatible with screen readers is important to ensure people can see what's on your site and navigate to different pages.

One of the simplest ways to improve your site's accessibility is adding an aria-label attribute onto interactive elements like buttons, links, and inputs. When a screen reader comes across an object, the aria-label text is read out so an individual can have more information about the element that they are on.

If you are using Storefront UI (opens new window), interactive elements come with screen-reader compatibility out-of-the-box. For example, the Button component has a special prop called ariaLabel that gets added to the button's aria-label. This is the value that will be read by the screen reader. But if you don't pass an ariaLabel prop, the screen reader will read the data inside the button.