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

Accessibility Improvement: labels for form elements and proper list semantics #423

Open
tkim602 opened this issue Nov 4, 2024 · 2 comments · May be fixed by #425
Open

Accessibility Improvement: labels for form elements and proper list semantics #423

tkim602 opened this issue Nov 4, 2024 · 2 comments · May be fixed by #425
Labels
feature Feature request or suggestion

Comments

@tkim602
Copy link

tkim602 commented Nov 4, 2024

Feature

While working on the project, I noticed some accessibility issues in the components features.tsx and section1.tsx during a Lighthouse audit: 1. Missing labels for form elements and 2. list structure that items are not contained within

    or
      elements.

      Although no formal issue had been previously assigned, I took a proactive approach to identify and test solutions to these accessibility concerns. My intention was to confirm that these changes would indeed improve accessibility before formally proposing them. After implementing the changes, the Lighthouse accessibility score improved from 88 to 96 (used chrome devTools)

      I have applied aria-label to the JsonInput component in section1.tsx to ensure that form controls are announced properly and wrapped feature items in

        and
      • elements.

        Before:
        Screenshot 2024-11-04 at 7 13 38 AM
        After:
        Screenshot 2024-11-04 at 7 10 09 AM

        Since I haven't contributed frequently, I apologize if my approach to creating and testing this solution is not fully aligned with the expected process. My intention was to ensure the changes would be beneficial before formally proposing them through a pull request. I wanted to raise this issue to share the potential improvement and gather feedback from the team before formally creating a PR.

        Alternative solutions or implementations

        No response

        Other context

        No response
@tkim602 tkim602 added the feature Feature request or suggestion label Nov 4, 2024
@TallTed
Copy link
Contributor

TallTed commented Nov 4, 2024

@tkim602 — Note that your <html> elements are invisible, because they're not code fenced. Single backticks, like `<html>`, are good for inline things. Entire lines or paragraphs can be preceded and followed by lines of just 3 backticks, like

```
blah <bfefea;sl> blah
```

@AykutSarac
Copy link
Owner

Thanks for creating issue. Feel free to open a PR, then I can review it.

@tkim602 tkim602 linked a pull request Nov 4, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature Feature request or suggestion
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve accessibility: added aria-label and replaced SimpleGrid tkim602/jsoncrack.com
3 participants
@TallTed @AykutSarac @tkim602