Looks good @the_g_bomb I was thinking of refactoring against something like the Web Sustainability Guidelines
- User Experience Design
- Web Development
- Hosting, Infrastructure, Systems
- Business Strategy & Product Management
As I suggested here https://www.drupal.org/project/pasc/issues/3512043 📌 Move to Performance and Sustainability Checklist Active
But that's just a framework to think about the bigger problem.
We'd also talked about spinning out Apache/Nginx, MySQL/SQLite/Postgresql and PHP out into a sub-module, as if you're hosting on Acquia or Panteon, you're not going to be fiddling with their configs.
But with this approach here, I'm wondering about starting with Apache, as that's not the lowest common denominator. Probably most folks installing this will be Drupal admins. They might be able to use this to bring in front-end design folks into the equation.
I took a look at YSlow and just realized how old that library was. Is it still a best practice? I think sitespeed.io or Unlighthouse.dev would be better.
Take any of the auto-detect code for the module considerations.
I really don't think that those should be checklists, since we know what modules are installed (and shouldn't be).
I do like reminding folks to disable the PASC module, as having this enabled in production isn't going to help anyone.
Several of the links to best practices are only available on Archive.org. I think we can find new references that would be better than archived pages from over a decade ago. I hope so. Maybe not.
Gander is something I wanted to mention but haven't yet https://www.tag1consulting.com/blog/gander-future-drupal-performance-and...
Worth including, I think.
Nice. Glad to see this get to RTBC.
mgifford → created an issue.
mgifford → created an issue.
mgifford → created an issue.
mgifford → created an issue.
mgifford → created an issue.
The full presentation is also up here:
https://speaking.unlockopen.com/t7cQZt/open-source-governance-for-softwa...
In MermaidJS this could look something possibly like this for Drupal:
graph TD;
A["US Legal System"]-->|Legislation| B["Drupal Association"];
B-->|Bylaws| C["Executive Director"];
C-->D[Working Groups];
D-->L[Drupal Code];
D-->M[Drupal.org];
D-->N[Community];
L-->O[Drupal Core]
L-->P[Drupal CMS]
L-->Q[Drupal Code Projects]
O-->|GOVERNANCE.md| E["Maintainers"];
O-->|OWNERS.YAML| F["Code owners"];
O-->|GOVERNANCE.md| G["Reviewers"];
N-->|COC TEAM CHARTER| H["CoC Team"];
N<-->|Code_of_Conduct.md| I["Contributors"];
L-->|CONTRIBUTING.MD| I;I'm just trying to plot out what this might look like.
Could also try to highlight Dries role with the trademark, and for that matter the role of the board vs the CEO.
mgifford → created an issue.
I do like this idea, but also know this would be a rough time to do it. There is a certain government, that uses a lot of Drupal and that need not be named, that is doing a search/delete on anything that is tagged with DEI.... This is not a good moment for global democracy.
I'd like to see something for Drupal CMS to see how it differs from Core. Maybe the governance will be the same, but I suspect not.
This looks good to me.
I missed this issue @smustgrave - sorry about the delay.
Looks good to me. This would be a significant improvement in semantically presenting this content.
Seems like a good approach to me @itmaybejj
To add some additional context:
This is a bug.
Can we not just search for the depreciated -ms-high-contrast and replace this in Core?
We do need to track better use of forced colors, so but think another meta issue might be the place for this.
So yes, we should remove this and rebuild the functionality with The forced-colors media query.
This is now a depreciated tag https://blogs.windows.com/msedgedev/2024/04/29/deprecating-ms-high-contr...
So yes, we should remove this and rebuild the functionality with The forced-colors media query.
@kentr definitely useful to set up sub issues to see that there is some progress on this issue that Andrew set up initially in 2019.
Accessibility issues are bugs.
For folks testing in high contrast, here is a guide.
https://www.lambdatest.com/blog/windows-high-contrast-mode/
Looks to me like it is merge-able now, least technically. Is anything else needed before RTBC?
Skip links are far too often skipped in the QA process.
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.
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.
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.
@rkoller you've confirmed that this isn't a problem in Core, right?
Yellow is just such a difficult color for contrast. Orange is easier.
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:
This would be a useful usability improvement.
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...
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.
This would be really annoying as a keyboard only user.
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/
There should definitely be a more visible change between enabled and disabiled states.
We can do more to highlight which is the selected image. Right now it is difficult for everyone to see.
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.
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
Thanks @rkoller. For folks looking at the icons, this might be a useful reference https://css-tricks.com/accessible-svgs-high-contrast-mode/
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.
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
@rahuly072 Let me know if this helps you replicate the problem:
https://www.lambdatest.com/blog/windows-high-contrast-mode/
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-...
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.
Some public guides for reference:
- https://www.w3.org/WAI/tutorials/images/decision-tree/
- https://www.w3.org/WAI/tutorials/images/
- https://accessibility.huit.harvard.edu/describe-content-images
- https://developers.google.com/tech-writing/accessibility/self-study/writ...
- https://www.levelaccess.com/blog/alt-text-for-accessibility/
- https://infogram.com/blog/how-to-write-alt-text-descriptions/
Happy to try to help support the community. I'll definitely be mentioning Drupal in my talks this weekend and also when talking with folks about Digital Public Goods.
marcus_johansson → credited mgifford → .
mgifford → created an issue.
How would one create this without modifying the database? How does this crop up, without doing something that 99% of site builders don't do?
Taking off the NeedsMoreInfo tag as I think I've dealt with that.
mgifford → created an issue.
adding tagging
mgifford → created an issue.
For folks not sure how to turn it on https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-o...
So much comes down to governance models and IP. Drupal is specifically set up to not rely on a benevolent dictator's good wishes. What you find on Drupal is GPL or GPL Compatible code, so licensing is very straight forward. I don't know if folks have paraphrased the idea of, "come for the code, stay for the community" in WP.
Accessibility is a bug in Drupal, where more of a feature request in WP. Sustainability is also something that there is support behind from this community.
For windows users, you can enable high contrast mode by following:
https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-o...
I believe we're looking at:
.cms-installer .button:focus {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
Which is:
--color-focus: var(--gin-color-focus);
Which is:
--gin-color-focus: rgba(0, 125, 250, .6);
rgba(0, 125, 250, .6) converts to #007dfa99
Opacity is a problem for this. Many tools don't support it. For instance:
https://contrast-finder.tanaguru.com/result.html?foreground#007DFA&backg...
The report was for:
2.2:1 (#7EB2FD/#FFFFFF)
This should work:
--gin-color-focus: rgba(8, 113, 243, 1);
But someone could just provide something with opacity that is better.
mgifford → created an issue.
Thanks @rkoller. Installation is critical to adoption.
mgifford → created an issue.
Was specifically from https://docs.pantheon.io/supported-drupal#drupal-cms-on-pantheon
Drupal CMS is currently available to install via this Dashboard Link or Terminus:
Worth noting that I just got this error on Pantheon by following https://docs.pantheon.io/release-notes/2025/01/drupal-cms-upstream
And installing a new site.
adding link to Mobile documentation or responsive images.
Adding this issue here https://www.drupal.org/project/gin/issues/3500065 🐛 Invalid ARIA attributes Active
mgifford → created an issue.
mgifford → created an issue.
Having a report like this that is able to centralize bad accessibility is useful. You'll be able to sort by date which is useful. There may be other ways to organize the information as well in that table.
I would love to see these errors show up on the admin pages where the images are used too.
Great catch @rkoller. We do need to improve the user interface to see it meets the Minimum Target Size requirements.
https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
Added in WCAG 2.2, this isn't yet a requirement by many countries (but it will be soon).
https://tetralogical.com/blog/2023/10/05/whats-new-wcag-2.2/
There are some bookmarklets to help with this too, this one by Steve Faulkner - https://github.com/stevefaulkner/targetsize/blob/main/bookmarklet.md
This is important for our community. As Drupal CMS becomes a reality, we need to ensure it is accessible.
I'd love to see this brought into Core. This adds some missing semantics to our work.
This makes sense to me.
Took a look at the code and it seemed reasonable. @smustgrave thanks for doing the manual testing. Would be nice to get it in.
@rkoller pointed me to both Craft CMS & Plone. Here are some other CMS that Starshot (Drupal CMS) has identified as key competitors (except Plone):
Craft
https://craftcms.com/accessibility/report
WordPress
https://vpats.wordpress.com/wp-content/uploads/2017/10/geoscience-world.pdf
Webflow
https://uploads-ssl.webflow.com/6140f4a34b5bb2103667d3ec/6144f1b8b581660...
Shopify
https://www.shopify.com/ca/accessibility/vpat-checkout
Plone
https://plone.org/accessibility/plone-5-2-vpat.pdf/@@download/file
Removing CKEditor Accessibility Auditor as it only works with D7 and CKEditor 4. This should be reconsidered if it is upgraded. Until then, use Editoria11y.
swirt → credited mgifford → .