agamjotsingh18 / codesetgo

Open Source Website of CodeSetGo
https://codesetgo.netlify.app/
MIT License
76 stars 236 forks source link

Issue: Accessibility Improvements for Enhanced Hexagon GridTitle #683

Open tamannaaaaa opened 11 months ago

tamannaaaaa commented 11 months ago

Is your feature request related to a problem? Please describe.

The current code provides an enhanced hexagon grid with background images and improved hover effects for a visually engaging experience. However, there are concerns related to accessibility that need to be addressed to ensure all users can have a seamless interaction with the grid.

Describe the solution you'd like.

Improving accessibility is essential to make the hexagon grid usable by a wider audience, including people with disabilities. By addressing the proposed changes, we can create a more inclusive user experience for all users.

Describe alternatives you've considered.

Solution: The solution we'd like is to enhance the accessibility of the existing hexagon grid by making the following changes:

Add alt attributes to background images: We should provide meaningful and descriptive alt attributes for the background images used in the hexagons. This will ensure that users with visual impairments or those using screen readers can understand the content conveyed by the images.

Implement semantic HTML elements: We will use appropriate semantic elements, such as

,
, and
, to structure the content of the hexagon grid. This will improve the document outline and make it easier for assistive technologies to interpret the page's structure.

Add visible focus indicators: Interactive elements, such as hexagon links, should have visible focus indicators to improve keyboard navigation for users who don't use a mouse. This will ensure that all users can easily identify which element is currently focused and navigate through the grid effectively.

Check and adjust color contrast: We will review the color contrast between the background, text, and interactive elements to ensure it meets accessibility standards. Adequate color contrast is crucial for users with visual impairments to read and understand the content without difficulty.

Add any other context or screenshots about the feature request here.

It's important to conduct usability testing with users of different abilities to gather feedback on the accessibility improvements and make further enhancements if necessary. Collaborating with the accessibility community and experts can provide valuable insights and feedback on the changes made. Periodically reviewing and updating the accessibility of the hexagon grid as the project evolves will ensure it remains inclusive and accessible to all users.

Record

  • [X] I agree to follow this project's Code of Conduct
  • [X] I have checked the existing issues
  • [X] I'm a GSSoC'23 contributor
  • [X] I want to work on this issue
agamjotsingh18 commented 11 months ago

Sure @tamannaaaaa