A background image allows you to place an image in the background of your page or area of a page.
Keyboard users should not be able to interact with or navigate to the background image, as it is not an interactive element.
Screen reader users do not need to be able to interact with the background image. However, using alternative text for the screen reader to be able to describe the background image when the user navigates to a page is beneficial.
Accessibility application:
- Check that there is sufficient color contrast between different parts of the background image and any text that will be on the image. Automated testing tools don't often pick up background image colors, so they may not be able to tell you if contrast is sufficient for users with visual disabilities.
View source on GitHub
