To implement an accessible PatternFly background image:
- Check that there is sufficient color contrast between different parts of the background image and any text that will be on the image.
- A background image should not be used as the sole method of conveying important information.
At a minimum, a background image should meet the following criteria:
- 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.
A background image does not have any further React props for accessibility.
A background image does not have any further HTML/CSS attributes or classes for accessibility.
View source on GitHub