[Usability] Explore making failure instance highlight more visible
ferBonnin opened this issue · 8 comments
Describe the bug
In assessment, we highlight elements to review with a thin red line. In certain cases, it can be hard to understand what elements have been highlighted
To Reproduce
Steps to reproduce the behavior:
- Go to Accessible university
- Open Assessment > Images > 14.1
- Turn on visual helper
Expected behavior
Explore making the visual highlight clearer in different background colors. Design team suggested trying multiple border colors with red in the center and white surrounding this.
Another option to explore would be making the red border slightly thicker and giving a bit of padding between the element and the line
The major concern is adding too many colors and lines might cover other elements thus why we are filing this bug to explore these two suggestions and discuss.
Screenshots
example of multiple border colors with a orange background and red and white borders
Context (please complete the following information)
- OS Name & Version: N/A
- AI-Web Version & Environment: Prod 2.32
- Browser Version: N/A
- Target Page: N/A
Are you willing to submit a PR?
No
Did you search for similar existing issues?
Yes
Additional context
usability. Bug to explore alternatives
This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!
if picking this issue, talk with @peterdur that has a prototype working.
If possible, lets just do this change for automated checks, needs review and assessment highlights
@ferBonnin I can help with this one; if not already assigned to anyone :)
PS: PRs for already picked issues are ready to review & merge.
@Pranav-yadav I started working on a prototype of what would be required from the HTML/CSS perspective to make double-line outlines work at main...peterdur:accessibility-insights-web:double-highlight; haven't yet had the opportunity to clean/parameterize the code to production quality, update tests, etc.; also meant to explore whether there was a cleaner CSS way to do this.
Thanks! Will check it out..
Nice!