Update index.md - Added note due to accessibility issues with high contrast mode. #36206
Conversation
Added note due to accessibility issues with high contrast mode. > [!NOTE] > Generating visual content like in the above mentioned example may not display the expected results, when high contrast mode is applied.
MarcusMorba
requested review from
chrisdavidmills
and removed request for
a team
github-actions
bot
added
Content:Learn:CSS
There was a problem hiding this comment.
Hi @MarcusMorba, and thank you for your interest in contributing to MDN. I have some comments and questions, and suggestions for making the content more useful. I know this is a bit more work than you were originally intending. Let me know your thoughts.
| @@ -120,6 +120,9 @@ In this next example, we have added an empty string using the `::before` pseudo- | |||
|
|
|||
| The use of the `::before` and `::after` pseudo-elements along with the `content` property is referred to as "Generated Content" in CSS, and you will often see this technique being used for various tasks. A great example is the site [CSS Arrow Please](https://cssarrowplease.com/), which helps you to generate an arrow with CSS. Look at the CSS as you create your arrow and you will see the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements in use. Whenever you see these selectors, look at the {{cssxref("content")}} property to see what is being added to the HTML element. | |||
|
|
|||
| > [!NOTE] | |||
| > Generating visual content like in the above mentioned example may not display the expected results, when high contrast mode is applied. | |||
There was a problem hiding this comment.
| > Generating visual content like in the above mentioned example may not display the expected results, when high contrast mode is applied. | |
| > Generating visual content like in the above mentioned example may not display the expected results, when high contrast mode is applied. |
I have a couple of thoughts here:
- I agree that supporting high contrast mode is an important consideration for a11y, but isn't it important for all visual aspects of a website? Why single out generated content in particular?
- This content is supposed to be a beginner's guide to using pseudo-classes/elements. Your note in its current state probably confuses more than it helps — they might ask "what is high contrast mode?", and "how do I get my content to display as expected results in high contract mode?"
Ideally it would be good to:
- Create some content that explains what high contrast mode is, and how to design for it.
- Link to it from suitable places where you want to point out that high contrast mode is an important consideration.
If anything, https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Generated_content is probably a better place to talk about the importance of high contrast modes and generated content.
We have a guide to color contrast at https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast. Maybe that would be a place to talk about handling high contrast?
There was a problem hiding this comment.
Hi Chris,
thanks for your comments. Please be patient for a while, until I have checked the other sections and can provide something better.
Regarding the comment, that this is a beginner guide - especially beginners should made aware that solutions might not work for all and that accessibility is more important than ever. If not learned about accessibility right from the beginning, it´s often hard to change already learned methods.
Otherwise, we would not have so many basic accessibility issues everywhere.
There was a problem hiding this comment.
Maybe an option is to improve the linked example?
Will check this out: https://github.com/hojberg/cssarrowplease
There was a problem hiding this comment.
Sounds good, thanks for your consideration @MarcusMorba.
I agree that the linked example could be improved.
Description
Note
Generating visual content like in the above mentioned example may not display the expected results, when high contrast mode is applied.>
Motivation
Support for high contrast mode is an important feature for accessibility.
Affected page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
Relevant section: "Generating content with ::before and ::after"
Relevant Paragraph: "A great example is the site CSS Arrow Please, which helps you to generate an arrow with CSS. Look at the CSS as you create your arrow and you will see the ::before and ::after pseudo-elements in use. Whenever you see these selectors, look at the content property to see what is being added to the HTML element."