Skip to content

Conversation

@Gandhi9381
Copy link
Contributor

To enhance your password tool, I focused on accessibility, user experience (UX), and semantic structure. I made it more accessible by explicitly linking all s to their inputs (like the slider and checkboxes) using for/id, replacing the div-based strength bars with the proper tag, and adding aria-live so screen readers announce dynamic updates like "Copied!" or the new strength level. For better UX, I changed the checker input to type="password" to mask typing and added a "Show Password" toggle. Finally, I improved the HTML structure by wrapping the generator and checker controls in separate

tags and grouping the checkboxes with a , making the tool more robust and easier for all users to navigate.

To enhance your password tool, I focused on accessibility, user experience (UX), and semantic structure. I made it more accessible by explicitly linking all <label>s to their inputs (like the slider and checkboxes) using for/id, replacing the div-based strength bars with the proper <meter> tag, and adding aria-live so screen readers announce dynamic updates like "Copied!" or the new strength level. For better UX, I changed the checker input to type="password" to mask typing and added a "Show Password" toggle. Finally, I improved the HTML structure by wrapping the generator and checker controls in separate <form> tags and grouping the checkboxes with a <fieldset>, making the tool more robust and easier for all users to navigate.
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.

1 participant