## Quick Links - [All GitLab.com Accessibility Issues](https://gitlab.com/gitlab-org/gitlab/-/issues/?sort=weight&state=opened&label_name%5B%5D=accessibility&first_page_size=20) - [All GitLab UI Accessibility Issues](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/?sort=weight&state=opened&label_name%5B%5D=accessibility&first_page_size=20) - [Critical Assessment Epic](https://gitlab.com/groups/gitlab-org/-/epics/16378) - [Serious Assessment Epic](https://gitlab.com/groups/gitlab-org/-/epics/16756) - [A11y Day Tracking](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1978) - [Workflow Setup](https://docs.gitlab.com/ee/user/duo_workflow/) ## Initial Setup 1. Prerequisites: - VS Code installed - GitLab Workflow extension (min version 5.16.0) - Docker installed and configured - Access to a GitLab.com project with Ultimate subscription - Developer role or higher in the project 2. Environment Setup: - Open VS Code - Check out the branch you want to modify - Open the project repository folder ## Triage and Review Process - Initial focus will be on weight 1-2 issues for quick wins - All MRs should have a review from Product Accessibility Working Group maintainers (as second reviewer) - For questions during triage, use #accessibility channel for support ## Using Workflow 1. Launch Workflow: - Open Command Palette (Cmd/Ctrl + Shift + P) - Type "GitLab Duo Workflow" - Select "GitLab: Show Duo Workflow" - Click "New workflow" 2. Write Your Task Description: Example: ``` I need to fix an accessibility issue in [file path]. The component is missing an alt text attribute for an image. Context: - Issue ID: [reference the specific issue ID] - Current implementation: [paste relevant code snippet] - Required fix: Add appropriate alt text following WCAG guidelines Please help me: 1. Analyze the current implementation 2. Suggest appropriate alt text 3. Implement the fix following GitLab's accessibility standards ``` 3. Review and Execute: - Review Workflow's suggested changes - Use the pause/adjust options if needed - Verify changes meet accessibility requirements ## Best Practices 1. Task Description Tips: - Be specific about the accessibility violation - Include file names and issue IDs - Reference any similar fixed issues or MRs - Mention relevant Pajamas Design System guidelines 2. Scope: - Focus on junior-level tasks (weight 1-2 issues) - Work on one file/component at a time - Verify fixes with accessibility tools 3. Languages: - Ensure you're working with supported languages (HTML, CSS, JavaScript, TypeScript, etc.) 4. Focus on weight 1-2 issues from [Deque Comprehensive Web Assessment - Critical epic](https://gitlab.com/groups/gitlab-org/-/epics/3429732) - Adding missing attributes (alt, aria-label) - Simple component modifications - Documentation updates | Weight | Issues | | |--------|--------|--| | **1** | [5 Issues](https://gitlab.com/groups/gitlab-org/-/issues/?sort=title_asc&state=opened&epic_id=3429732&weight=1&first_page_size=100) | These include simply copy or attribute changes. For example adding an `alt` tag to an image. | | **2** | [90 Issues](https://gitlab.com/groups/gitlab-org/-/issues/?sort=title_asc&state=opened&epic_id=3429732&weight=2&first_page_size=100) | Frontend changes that don’t require any changes to the UI. Often these are missing or incorrectly applied labels and attributes. | | **3** | [44 Issues](https://gitlab.com/groups/gitlab-org/-/issues/?sort=title_asc&state=opened&epic_id=3429732&weight=3&first_page_size=100) | Frontend changes that appear to be more complex and anything that will require [design exploration](https://gitlab.com/groups/gitlab-org/-/issues/?sort=title_asc&state=opened&epic_id=3429732&weight=3&label_name%5B%5D=workflow%3A%3Aready%20for%20design&first_page_size=100). | | **5** | [79 Issues](https://gitlab.com/groups/gitlab-org/-/issues/?sort=title_asc&state=opened&epic_id=3429732&weight=3&first_page_size=100) | Potentially complex solutions that require more significant changes, updating complex keyboard interactions, or solutions that require the use of assistive technologies to validate. | ## Validation 1. Test changes locally 1. Add axe Accessibility Linter extension to your VS Code to leverage [GitLab UI components mapping](https://gitlab.com/gitlab-org/gitlab/-/blob/master/axe-linter.yml?ref_type=heads). 2. Verify with axe DevTools and accessibility tree in your browser's inspector. 2. Use assistiveLabs to test with screen readers (access via 1password). You can connect your GDK with a little script, there are instructions in assistiveLabs. 3. Check against [WCAG guidelines](https://www.w3.org/TR/WCAG21/), [WCAG docs](https://www.w3.org/WAI/WCAG21/Understanding/) and our [accessibility best practices](https://docs.gitlab.com/ee/development/fe_guide/accessibility/best_practices.html) 4. Create MR with appropriate labels Remember: Workflow works best with clear, detailed instructions and junior-level tasks. For complex accessibility issues, consider breaking them down into smaller, manageable pieces.