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.

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

Use kbd to represent user input #2838

Closed

Conversation

dragunovartem99
Copy link
Contributor

Description

  1. Changed the HTML element
  2. Added CSS to achieve same visual effect that was created by strong + u combination

Motivation

I think it's more appropriate, and may motivate readers to investigate into <kbd> semantics. Maybe in future this element can be included in corresponding page's "See also"

Additional details

https://html.spec.whatwg.org/dev/text-level-semantics.html#the-kbd-element
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

@dragunovartem99 dragunovartem99 requested a review from a team as a code owner September 13, 2024 19:30
@dragunovartem99 dragunovartem99 requested review from estelle and removed request for a team September 13, 2024 19:30
Copy link

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

@dragunovartem99 dragunovartem99 changed the title Use kbd for representing user input Use kbd to represent user input Sep 13, 2024
@estelle
Copy link
Member

estelle commented Sep 16, 2024

Thank you for your contribution to MDN.

I don't think using <kbd> for the accesskey character is a "best practice". If you use voice over to read the edit, it reads "press the ess tress reliever", but it does that for other elements as well. This page should likely be updated, but not with KBD

@dragunovartem99
Copy link
Contributor Author

@estelle thank you for the feedback, it was useful, as I never considered this a11y side so seriously. Probably I should learn about screen readers!

Maybe I can change it to single element, preserving the styling?

According to WHATWG: The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance

If you will be satisfied with this solution, I can add another commit or create new PR

@estelle
Copy link
Member

estelle commented Sep 17, 2024

a <b> would work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants