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

Issue: Introduce Separate <em> Tags for Emphasis #587

Open
etiennejcharles opened this issue Jun 23, 2024 · 0 comments
Open

Issue: Introduce Separate <em> Tags for Emphasis #587

etiennejcharles opened this issue Jun 23, 2024 · 0 comments

Comments

@etiennejcharles
Copy link

etiennejcharles commented Jun 23, 2024

Hey Team 👋🏿 !
Thank you for creating this headlesS CMS solution it's - such an amazing product 😉

Description

In our current implementation, <i> tags are often used for both emphasis and stylistic purposes. However, these tags serve different purposes, or we would love it to ❤️

  • <em> is intended for text that needs to be emphasized, conveying importance or stress.
  • <i> is typically used for text that is set off from the normal text for stylistic reasons, such as foreign words, technical terms, or names of ships.

To enhance the semantic meaning of our HTML and improve accessibility, we propose introducing separate <em> tags for emphasis while keeping <i> tags for stylistic purposes.

Proposed Solution

  1. Add <em> Tags:

    • Introduce <em> tags where text needs to be emphasized, replacing the misuse of <i> tags for this purpose.
    • Retain existing <i> tags for their intended stylistic purposes.
  2. Update CSS Styles:

    • Ensure that styles applied to <i> tags for emphasis are now correctly applied to <em> tags to maintain visual consistency.
  3. Accessibility Improvements:

    • Improve the semantic HTML structure, aiding screen readers and other assistive technologies in providing a better user experience.

Rationale

  • Semantic HTML: Using tags correctly enhances the semantic meaning of our HTML.
  • Accessibility: Screen readers and other assistive technologies rely on the correct use of HTML tags to provide a better user experience.

Additional Information

This issue is a part of our ongoing effort to enhance the accessibility and semantic correctness of our codebase and align with our internal design system needs 😉 we'd love to see an "emphasis" tag there (eventually)

image

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

No branches or pull requests

1 participant