Lab8 Standards - bounswe/bounswe2024group11 GitHub Wiki

Standarts Being Followed

  • WAI-ARIA, WCAG, and SVG standards are followed by the frontend team(Ümit Can Evleksiz, Hasan Kerem Şeker)

WAI-ARIA

Given the application's rich functionality and numerous features, adhering to WAI-ARIA standards was essential. We selected ARIA attributes to ensure accessibility, as outlined in our Wiki page. Additionally, we utilized a headless component library, Ariakit, which is designed with accessibility in mind. This allowed us to efficiently implement complex components such as hovercards and comboboxes, streamlining development while ensuring the application remains accessible.

Screenshot from 2024-12-03 16-47-21

Screenshot from 2024-12-03 16-45-59

CleanShot 2024-11-29 at 21.07.52@2x

CleanShot 2024-11-29 at 21.07.41@2x

CleanShot 2024-11-29 at 21.09.40@2x

CleanShot 2024-11-29 at 21.10.33@2x

WCAG

To accommodate both static content and user-generated content within the application, we followed WCAG guidelines and incorporated appropriate tags as detailed in our Wiki documentation. During code reviews, we actively identified and addressed issues related to missing or incorrect tag usage to maintain compliance and accessibility standards.

CleanShot 2024-11-29 at 21.08.42@2x

SVG

We added meaningful title attributes to SVG illustrations used in various sections, such as the error state, new forum question page, and start quiz page. These titles include clear and well-defined descriptions to enhance accessibility and provide context for assistive technologies.

Screenshot from 2024-12-03 16-48-29 CleanShot 2024-11-29 at 21.08.12@2x Screenshot from 2024-12-03 16-45-20

Since we mostly upheld the standards up to this point, only minor fixes for the existing features are required. However, we must keep complying to the standards while adding new features.

Acceptance Criteria

  • Each component in the project adheres to defined standards, with non-compliant components detected and corrected.
  • Newly added components are verified for standard compliance before merging into the main branch.
  • Ariakit is used as the base library for building new complex components to ensure consistency and functionality.