search

mdn / interactive-examples

Home of the MDN live code editor interactive examples
Creative Commons Zero v1.0 Universal
733 stars 512 forks source link

Use kbd to represent user input #2838

Closed dragunovartem99 closed 2 months ago

dragunovartem99 commented 2 months ago

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

github-actions[bot] commented 2 months ago

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.

estelle commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

a <b> would work!