Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update index.md - Added note due to accessibility issues with high contrast mode. #36206

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update index.md - Added note due to accessibility issues with high contrast mode. #36206

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a22574c
Update index.md
MarcusMorba Oct 5, 2024
9931947
Merge branch 'main' into patch-1
MarcusMorba Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ...learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> 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:

  1. 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?
  2. 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:

  1. Create some content that explains what high contrast mode is, and how to design for it.
  2. 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?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

@MarcusMorba MarcusMorba Oct 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe an option is to improve the linked example?
Will check this out: https://github.com/hojberg/cssarrowplease

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good, thanks for your consideration @MarcusMorba.

I agree that the linked example could be improved.


## Summary

In this article we've introduced CSS pseudo-classes and pseudo-elements, which are special types of selectors.
Expand Down