Comments (9)
It's worth noting that the @prefers-contrast
media query (:contrast-more
in Tailwind) has support for both less
and more
, and might be a good option for making things more a11y friendly.
from skeleton.
We can use the formula listed on WCAG and test whether colours meet accessibility guidelines, and generate complementary "high contrast" colours. We'd also be able to provide users with this information while they're generating themes, which would be very helpful. I won't have time to dig into this just yet, so don't assign it to me in case someone else wants to have a crack at it, but I figured I'd at least put that idea out there so it's visible.
from skeleton.
I've completed some tests regarding visual a11y. In short, it's not really about what color values are used, so much as how high the contrast ratio is. For our themes, the biggest offender is typically text on top of a primary or accent color.
Take this example, generated with https://huewind.jordantwells.com/
Note there's not a particular swatch level (ex: 500) that the overlapping text flips from white to black or vice versa. Rather this is handled per shade and varies per each column. This will be hard handle programmatically and would require an insane effort to test every possible theme and component combination.
Instead, I propose we approach these challenges from a different angle. See below.
1.
We improve our global and component default styles as much as possible. Aiming to better accommodate for contrast. Take our global paragraph style for example, the contrast is way too low, but can be easily fixed:
main p { @apply text-base text-surface-500 dark:text-surface-400; }
Should be:
main p { @apply text-base text-black/80 dark:text-white/80; }
Results before vs after:
This provides a much better contrast ratio out of the box for both light and dark modes. Though obviously users can choose to customize further if they wish. Perhaps even going for full 100% opacity.
2.
We may need to recommend that if a11y is a focus, you should pin your design to use only light or dark, not toggle between both. The variance between the two modes means there's too many variables to keep up with. Plus focusing one mode makes it easier to define and override the default values. For example, if we only used dark mode for the Skeleton theme, we could use the following to improve button contrast:
.button { @apply !bg-primary-400 !text-black; }
Results before vs after:
However, we should look to review each component and ensure it's possible to target styles in a global manner. The style above would affect ALL buttons, whether filled or outlined, which is not very visually appealing.
Something like .button-primary-filled
or .button-ghost
would suffice. This could be added programmatically as well.
3.
Finally, we should provide at least one theme and set of stylesheets purpose-built for a11y. This could be our reference for best practices. Per this, most a11y-focused themes I've seen to to use high contrasting black/white theme with subtle color highlights for interactive elements (ex: buttons).
Here's a very monotone example:
https://labinator.com/wordpress-marketplace/lat-demo/
The ARIA APG site is also a great example:
https://www.w3.org/WAI/ARIA/apg/patterns/
from skeleton.
I'd recommend we handle this after the built-in themes and modular stylesheet PR is merged to dev. This will make this process MUCH easier!
from skeleton.
Note that the new proposed Button Refactor opens the door to handling button visual a11y by allowing for easier global overrides of styling:
This takes us one step closer to supporting this!
from skeleton.
Note that we've also updated the default typography to improve color contrast ratios. So a bit more progress here! One of the last big steps will be providing a11y friendly theme options, which we should try to include in the next release.
from skeleton.
@ryceg Really great info to know! Thanks!
I am still relatively new to the a11y side of things, but trying to learn and improve. Any other tips are absolutely welcome, visual or otherwise.
from skeleton.
https://twitter.com/vitalyf/status/1580017289868771328
from skeleton.
With the following update going live tomorrow, I'm feeling confident in our visual a11y:
This doesn't meant things are perfect or 100% accessible, but rather that we're meeting the standards and quality expected when this ticket was created way back in August. I do expect we'll see additional updates and improvements as part of these tickets:
Likewise another dedicated a11y audit will be recommended prior to the v1.0 launch.
But for now, this ticket has served it's purpose.
from skeleton.
Related Issues (20)
- Refactor React components to fall more inline with existing React libraries HOT 4
- RFC: Remove return types from React components
- A little bit of white peeking out on the progress bars (styling issue) HOT 4
- InputChips does not have restProps HOT 2
- Table of Contents: support setting scrollTarget, scrollOffset HOT 1
- AppRailTile on:click not working (v2.10.1) HOT 5
- Revert missing on:click event for App Rail Anchor Tile component
- NEXT: component consistency pass
- Missing import of popup HOT 3
- Carousels example HOT 2
- v3 Component API Revisions HOT 1
- NEXT: Revisit Tab Component and API HOT 1
- NEXT: Accordion missing a11y HOT 1
- NEXT: Dependency updates
- NEXT: Introduce the skeleton-a11y package
- Hover state on buttons in mobile stays after click in incoherent ways HOT 5
- AppRail HTML markup is invalid and not accessible HOT 1
- ListBoxItem HTML markup is invalid and not accessible HOT 2
- Disabled State for AppRailTiles
- NEXT resolve Astro doc site project dependency error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.