Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: Linked images using CSS class "img-responsive" do not have focus indicator #358

Open
aduth opened this issue Jul 1, 2020 · 0 comments

Comments

@aduth
Copy link

aduth commented Jul 1, 2020

For linked images where the image is assigned CSS class img-responsive, there is no visible indication when the link is focused.

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/about/approach-team-structure.html
  2. Tab to navigate to the linked image under "How We Work"

Expected: Focus should be visible.
Actual: Focus is not visible.

WCAG Success Criteria (AA): 2.4.7: Focus Visible

Relevant technique: CSS C15: Using CSS to change the presentation of a user interface component when it receives focus

Relevant failure: F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Remediation guidance:

Focus styling appears to be absent due to assignment of display: block on images of class name img-responsive.

iamjolly added a commit that referenced this issue Sep 11, 2020
Signed-off-by: Robert Jolly <robert.jolly@gsa.gov>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant