Description
Many web-based games and utilities in the repository appear to rely primarily on mouse interactions. This can make them difficult or impossible to use for keyboard-only users and reduces overall accessibility.
Problem
Some common accessibility issues that may exist include:
Interactive elements are not reachable via the Tab key.
Missing visible focus indicators.
Game controls only respond to mouse clicks.
Custom buttons/divs lack keyboard event support (Enter/Space).
Inconsistent navigation between different projects.
Proposed Solution
Perform an accessibility audit and implement keyboard support across web-based projects by:
Adding proper semantic HTML elements (button, input, etc.) where appropriate.
Ensuring all interactive elements are keyboard-focusable.
Adding visible focus styles.
Supporting Enter and Space key activation.
Documenting keyboard controls for games.
Testing navigation using only a keyboard.
Example
element.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
element.click();
}
});
Benefits
Improved accessibility and inclusivity.
Better compliance with WCAG guidelines.
Enhanced usability for all users.
More professional and maintainable UI components.
Acceptance Criteria
All interactive elements are keyboard accessible.
Focus indicators are visible.
Enter/Space activate custom controls.
Keyboard-only navigation works correctly.
Accessibility documentation is updated.
Difficulty
Beginner → Intermediate
Labels
type:accessibility, type:enhancement, good first issue, gssoc
Description
Many web-based games and utilities in the repository appear to rely primarily on mouse interactions. This can make them difficult or impossible to use for keyboard-only users and reduces overall accessibility.
Problem
Some common accessibility issues that may exist include:
Interactive elements are not reachable via the Tab key.
Missing visible focus indicators.
Game controls only respond to mouse clicks.
Custom buttons/divs lack keyboard event support (Enter/Space).
Inconsistent navigation between different projects.
Proposed Solution
Perform an accessibility audit and implement keyboard support across web-based projects by:
Adding proper semantic HTML elements (button, input, etc.) where appropriate.
Ensuring all interactive elements are keyboard-focusable.
Adding visible focus styles.
Supporting Enter and Space key activation.
Documenting keyboard controls for games.
Testing navigation using only a keyboard.
Example
element.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
element.click();
}
});
Benefits
Improved accessibility and inclusivity.
Better compliance with WCAG guidelines.
Enhanced usability for all users.
More professional and maintainable UI components.
Acceptance Criteria
All interactive elements are keyboard accessible.
Focus indicators are visible.
Enter/Space activate custom controls.
Keyboard-only navigation works correctly.
Accessibility documentation is updated.
Difficulty
Beginner → Intermediate
Labels
type:accessibility, type:enhancement, good first issue, gssoc