- 🇩🇪Germany rkoller Nürnberg, Germany
i am taking a look now, was swamped the last few weeks with finishing the draft for gin.
- Issue created by @the_g_bomb
- 🇩🇪Germany rkoller Nürnberg, Germany
i agree probably it might be not only about the color contrast but also about the font size, a detail we've touched before in yesterdays discussion. and i've updated the issue summary and added a pointer what the navigation block title is in the screenshot.
- 🇨🇦Canada mgifford Ottawa, Ontario
Skip links are far too often skipped in the QA process.
- 🇨🇦Canada mgifford Ottawa, Ontario
- 🇨🇦Canada mgifford Ottawa, Ontario
In this example, the "Extend" link is orange on a light orange background. This is lower contrast than the other links, making it harder to read for many people. It should be the opposite.
- 🇨🇦Canada mgifford Ottawa, Ontario
In this example, the "Extend" link is orange on a light orange background. This is lower contrast than the other links, making it harder to read for many people. It should be the opposite.
- 🇨🇦Canada mgifford Ottawa, Ontario
The caret facing to the left is more or less invisible to most users I would think. It is too easy to miss as it isn't where folks are looking for this kind of a link.
- 🇨🇦Canada mgifford Ottawa, Ontario
- 🇨🇦Canada mgifford Ottawa, Ontario
@rkoller you've confirmed that this isn't a problem in Core, right?
- 🇨🇦Canada mgifford Ottawa, Ontario
Yellow is just such a difficult color for contrast. Orange is easier.
- 🇨🇦Canada mgifford Ottawa, Ontario
This is a useful took to find a better foreground-background color combination https://contrast-finder.tanaguru.com/
Note that opacity is something missed by most color contrast tools that are comparing foreground/background colors.
These seem to support it:
- 🇨🇦Canada mgifford Ottawa, Ontario
This would be a useful usability improvement.
- 🇨🇦Canada mgifford Ottawa, Ontario
Here is some more info on testing for target size
- https://adrianroselli.com/2019/06/target-size-and-2-5-5.html
- https://www.tpgi.com/how-to-test-2-5-8-target-size-minimum/
- https://www.digitala11y.com/understanding-sc-2-5-8-target-size-minimum/
Also, for folks who prefer extensions to bookmarlets:
https://chromewebstore.google.com/detail/target-size-minimum/akkbdipgjjn... - 🇨🇦Canada mgifford Ottawa, Ontario
Some of our admin pages are quite complex and would probably benefit everyone to have an easy way to both see a table of contents of the editorial sections and jump right to that section.
- 🇨🇦Canada mgifford Ottawa, Ontario
This would be really annoying as a keyboard only user.
- 🇨🇦Canada mgifford Ottawa, Ontario
Thanks @sandip poddar. Really appreciate this.
Making users physically ill is really not good UX.
More info on reduced motion:
https://sparkbox.com/foundry/prefers_reduced_motion_media_query_CSS_rule...
https://css-tricks.com/a-complete-guide-to-css-media-queries/ - 🇩🇪Germany rkoller Nürnberg, Germany
just as an fyi, the images are not focusable, only the three elements on the image, the checkbox, the edit button and the remove button.
- 🇨🇦Canada mgifford Ottawa, Ontario
There should definitely be a more visible change between enabled and disabiled states.
- 🇨🇦Canada mgifford Ottawa, Ontario
We can do more to highlight which is the selected image. Right now it is difficult for everyone to see.
- 🇨🇦Canada mgifford Ottawa, Ontario
This is an interesting one. I do think it is important to give folks the choice of either light or dark mode. Glad that Gin does that. However, if someone has already specified their preference by specifying a high contrast mode, then there really isn't a need to support two versions of their preferences. Probably simpler to just support one consistently.
- 🇨🇦Canada mgifford Ottawa, Ontario
Eric's always got good material for folks wanting to learn about High Contrast Mode https://someantics.dev/high-contrast-mode/
Adrian talks about the importance of system colors https://adrianroselli.com/2021/02/whcm-and-system-colors.html
Also check out
- https://hashrocket.com/blog/posts/embracing-accessibility-and-consistenc...
- https://dev.to/mpriour/an-introduction-to-high-contrast-accessibility-4im4 - 🇨🇦Canada mgifford Ottawa, Ontario
Thanks @rkoller. For folks looking at the icons, this might be a useful reference https://css-tricks.com/accessible-svgs-high-contrast-mode/
- 🇨🇦Canada mgifford Ottawa, Ontario
For the SVG files in this list, it may be that https://www.smashingmagazine.com/2020/03/accessible-svgs-inclusiveness-b... is a useful guide.
Thanks for catching these @rkoller - high contrast issues are often overlooked.
- 🇨🇦Canada mgifford Ottawa, Ontario
Amazing. Thanks for quickly replicating this @sandip poddar.
There are a lot of other resources here if needed https://www.drupal.org/project/drupal/issues/3413207 📌 META: Provide better support for color and contrast media queries Active
- 🇨🇦Canada mgifford Ottawa, Ontario
@rahuly072 Let me know if this helps you replicate the problem:
https://www.lambdatest.com/blog/windows-high-contrast-mode/ - 🇨🇦Canada mgifford Ottawa, Ontario
Great find. For more on testing for High Contrast Mode see:
https://bbc.github.io/accessibility-news-and-you/checklist/how-to/high-c...Also, here is some guidance from Microsoft styling for forced colors
https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-... - 🇩🇪Germany rkoller Nürnberg, Germany
@rahuly072 your theme settings are ok, but you also have to active the forced colors mode. your screenshots show that you are just in dark mode. you have to activate forced colors mode either in your operating system in case you are on windows or in chromium based browsers https://devtoolstips.org/tips/en/emulate-forced-colors/
- 🇨🇦Canada mgifford Ottawa, Ontario
Thanks so much @rkoller for this epic accessibility review. Many of the issues here will improve usability of Drupal CMS as well as of course accessibility. Gin is more complex than many other themes. It is important here that we give users good defaults, while striving to keep the flexibility which is built into this great theme. I look forward to engaging to find ways we can incorporate these improvements into Drupal sites moving forward.
- @sandip-poddar opened merge request.
Automatically closed - issue fixed for 2 weeks with no activity.
- 🇮🇳India jaydev bhatt Pune, Maharashtra
i have checked this issues on Drupal 11.1.1
with the steps mention above. double checked it. but was not able to replicate this issue.Steps for testing.
- Download and enabled the gin theme and cleared the cache.
- Enable the dark mode and activated the focus colors mode
- tried giving it the different colors
- Checked on the contnet type page as well.
Attaching the screenshot for reference.
Moving this to Needs Review.
After the verification can be moved to RTBC. - 🇮🇳India rahuly072
@roller, I tried to reproduce this issue in my local environment but couldn't succeed. I've attached a screenshot—can you check and let me know if I'm missing any theme settings?
- First commit to issue fork.
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller
- Issue created by @rkoller