Add Practice Page for Supporting High Contrast #2991
Conversation
|
@mcking65 |
|
Can someone run the prettier code on the CSS to get rid of the CSS linting errors |
Done in 5720724 |
|
|
||
| <h3>Limitations of Bit-Mapped Images</h3> | ||
|
|
||
| <p>The colors of pixels used in bit-mapped images (e.g. .png, .jpeg) do not respond to changes in media query values making them difficult or impossible for people with some types of visual impairments to see when the change contrast settings. Low resolution images also do not scale smoothly when the browser zoom features are used to increase the size of rendered content and the resulting distortion will make it more difficult or impossible for people to identify the component.</p> |
There was a problem hiding this comment.
The first sentence isn’t entirely true anymore since authors can manipulate the appearance of bitmap images with CSS techniques like filter: contrast(), mix-blend-mode, etc. in reaction to a user preference media query.
There was a problem hiding this comment.
Ok, it should acknowledge this technique. I will need to research the capabilities of the technique.
There was a problem hiding this comment.
@adampage
I made some changes to the bit-mapped image section based on your feedback, could you review an comment?
| <code> | ||
| @media (prefers-color-scheme: dark) { | ||
| button.color-scheme[role="switch"] { | ||
| background-color: #333; | ||
| color: #fff; | ||
| } | ||
|
|
||
| button.color-scheme[role="switch"] .label { | ||
| color: #fff; | ||
| } | ||
|
|
||
| button.color-scheme[role="switch"] svg rect { | ||
| fill: #36c; | ||
| stroke: #36c; | ||
| } | ||
|
|
||
| button.color-scheme[role="switch"] svg circle.off, | ||
| button.color-scheme[role="switch"] svg circle.on { | ||
| fill: #fff; | ||
| stroke: #fff; | ||
| } | ||
|
|
||
| button.color-scheme[role="switch"]:focus, | ||
| button.color-scheme[role="switch"]:hover { | ||
| border-color: #add8e6; | ||
| } | ||
| } | ||
| </code> |
There was a problem hiding this comment.
Now that light-dark() is widely implemented (only as of May 2024 😅), how about modernizing this code example using color-scheme and light-dark()? Or adding it as an alternative technique?
There was a problem hiding this comment.
Sounds like a good idea, want to look like we are keeping up with the times
There was a problem hiding this comment.
@adampage
Maybe we could do this for the next publication cycle.
| <button type="button" role="switch" aria-checked="false" class="increase-contrast"> | ||
| <span class="label">Increase Contrast</span> | ||
| <svg xmlns="http://www.w3.org/2000/svg" height="20" width="36"> | ||
| <rect class="container" x="1" y="1" width="34" height="18" rx="9" /> | ||
| <circle class="off" cx="11" cy="10" r="8" /> | ||
| <circle class="on" cx="25" cy="10" r="8" /> | ||
| </svg> | ||
| <span class="on" aria-hidden="true">On</span> | ||
| <span class="off" aria-hidden="true">Off</span> | ||
| </button> |
There was a problem hiding this comment.
I’m not seeing any change to the page when I toggle either the Increase Contrast or Dark Color Scheme switches. Are those meant to immediately show a simulated effect?
There was a problem hiding this comment.
Yes, there are suppose to change.
It may be there should be a separate switch to tun on the emulation next to the example.
There was a problem hiding this comment.
@adampage
Maybe I should take out the emulation, and people rely on seeing the cahnges when the change their contrast settings, I will do that.
There was a problem hiding this comment.
@adampage
I have updated the examples to only use the CSS media queries to change the rendering. My original way is confusing. Please review and let me know if it makes more sense now.
|
The ARIA Authoring Practices (APG) Task Force just discussed The full IRC log of that discussion<jugglinmike> Topic: PR 2991 - Practice Page for Supporting High Contrast<jugglinmike> github: https://github.com//pull/2991 <jugglinmike> Matt_King: Thank you for all the commits last Tuesday, jongund! <jugglinmike> Matt_King: All the checks are passing <jugglinmike> Matt_King: We requested review from three people. None of those reviews are in, yet <jugglinmike> Adam_Page: I reviewed and requested changes just a few minutes ago <jugglinmike> Jem: I plan to review after this meeting <jugglinmike> Matt_King: I think this depends on the nature of the feedback. I personally haven't spent the time on this that I planned on spending <jugglinmike> Matt_King: I'd like to commit to a specific time for making a merge decision on this pull request (to determine whether it will be included in tomorrow's release) <jugglinmike> Jem: (I wish that our Task Force had a way to announce a new release. This patch is a good candidate to highlight publicly.) <jugglinmike> Matt_King: I'd love to talk about that. We can add a topic to today's agenda <jugglinmike> s/I wish/By the way, I wish/ <jugglinmike> Matt_King: If we make the decision at 1PM PT, then will that give you enough time to release, howard-e? <jugglinmike> howard-e: Yes, I'm in eastern standard time. It will be 4PM for me, and that works <dmontalvo> present- dmontalvo <jugglinmike> Jem: I reviewed this a long time ago. Is there any specific aspect that I need to focus on as a reviewer? <jugglinmike> Matt_King: This is the final review. Clarity, style, relevance of information. We want to make sure that the guidance we're giving is useful and actionable by our readers. It's got to be consistent with what we want in the APG but also something that authors can actually use in practice <jugglinmike> Matt_King: More and more, I want to make sure we aren't stepping outside of our bounds. We shouldn't be trying to take the place of other important W3C resources. We should simply refer to those and remain focused on the APG's mission <jugglinmike> Matt_King: If we can get this merged by 1:00 tomorrow, we would like to include it in the next release. There are a lot of unknowns, though, and that includes me (i.e. whether I can fit it in among my other deadlines) <jugglinmike> howard-e: For what it's worth, I can wait as late as 2:30 PM PST <jugglinmike> Matt_King: Thank you, howard-e! Given my meeting schedule, that extra time might be really helpful <jugglinmike> Adam_Page: I have some additional thoughts about dark mode <jugglinmike> Matt_King: I think we're looking for minimum-viable product here. We can always enhance later <jugglinmike> Adam_Page: Yeah, that makes sense |
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
…ters or image substitution
Part of the resolution of issue #2864.
Preview Link
Preview high contrast practice page in compare branch
WAI Preview Link (Last built on Tue, 10 Dec 2024 22:00:54 GMT).