Standards: WCAG 2.1 Standards - bounswe/bounswe2024group11 GitHub Wiki

2.1.1 All content throughout the application, whether user-generated or system-driven, must adhere to WCAG 2.1 Standards to ensure accessibility for all users. Interactive elements, such as buttons, links, and form controls, should follow specific guidelines to enhance usability across devices and assistive technologies.

This document sets forth requirements to ensure the application is accessible to users with diverse needs and abilities.

The primary goal is to achieve compliance with WCAG 2.1, ensuring that all interactive and content elements are accessible to users with various disabilities, including but not limited to visual, auditory, motor, speech, cognitive, and neurological conditions. The guidelines, while not exhaustive, are structured to improve usability for all users.

Each interactive element must be labeled for clarity, facilitating better navigation and interaction via keyboard and assistive devices. By providing semantic meaning to content, all users benefit from a more structured and intuitive user experience.

• Color Contrast: Ensure adequate contrast between text and background colors.
• Responsive Design: Ensure content adapts to various screen sizes.
• Keyboard Accessibility: Make all interactive elements accessible via keyboard navigation.
• Meta Tags in Head: Include appropriate metadata for accessibility and SEO.
• Semantic HTML: Use semantic tags to structure content.
• Visible Hover and Focus States: Ensure interactive elements visually indicate focus or hover.
• Multilingual Support: Enable content display in both Turkish and English, respecting language-specific accessibility needs.

• <button>: Triggers an action when clicked.
• <a>: Triggers a navigation when clicked.
• <input>: Allows users to enter data.
• <select>: Allows users to select options from a list.
• <textarea>: Allows multiple lines of text input.
• <label>: Associates a form control with a label.
• <fieldset>: Groups related form controls.
• <legend>: Provides a caption for a fieldset.
• <form>: Creates a user input form.
• <figure>: Groups elements as a unit with a descriptive caption.
• <figcaption>: Provides a caption for a figure.
• <img>: Embeds an image.
• <svg>: Embeds an SVG image.
• <hr>: Inserts a horizontal rule.
• <main>: Indicates primary content.
• <aside>: Indicates secondary content.
• <nav>: Defines navigational links.
• <header>: Defines a header for a section.
• <footer>: Defines a footer for a section.
• <article>: Represents an independent item, like a blog post.
• <section>: Represents a section, such as a forum’s comment area.
• <ul>: Represents an unordered list, such as a tag list.

• Search by Quiz Name: Input field with search function.
• Filter by Quiz Type: Radio button options for filtering quizzes.
• Take Quiz: Button that initiates the quiz.

• Open a Forum Page: Button or card to view a forum thread.
• Bookmark a Forum: Button to save a forum for future reference.

• Keyboard and Screen Reader Compatibility: All interactive elements must be accessible via keyboard and support screen readers, utilizing appropriate aria-* attributes as defined by WCAG 2.1.
• Labels and Instructions: Provide clear labels or instructions for all interactive elements, particularly those that require user input (e.g., forms, buttons).
• Focus Order: Maintain a logical and predictable focus order, ensuring that keyboard navigation follows a sequential and intuitive path across elements.
• Visible Focus: Ensure that focus states are visually distinguishable, clearly indicating which element is active or focused.
• Error Identification: Provide descriptive error messages that explain the nature of the error and offer guidance for correction.
• Timeout Notifications: Notify users of any session timeouts and provide an option to extend time, if needed.
• Alternative Text for Media: Ensure that all images and media elements include descriptive alt text or captions.
• Responsive Design: Design the application to adapt to various screen sizes, ensuring that content and interactive elements are accessible and usable on both desktop and mobile devices. Elements should adjust fluidly, maintaining readability and ease of interaction on smaller screens.
• Flexible Layouts and Font Sizes: Use scalable font sizes and flexible layouts to accommodate different screen resolutions and user preferences.

##Examples

<aside className="flex flex-col gap-6">
 <main className="grid grid-cols-1 gap-6 md:grid-cols-3">
                <section className="rounded-lg rounded-2 p-6 ring-1 ring-slate-200">
                    <h2 className="mb-4 flex items-center text-xl font-medium text-cyan-800">
                        <RiBookReadLine size={20} className="mr-2" />
                        Frequently Confused Words
                    </h2>