🎯 Objective:
Build a feature that allows users to switch between a visual representation and a code view of accessibility issues, helping content editors, developers and designers resolve problems from both a visual and technical perspective.
❤️ Key Benefits:
- Facilitates issue resolution by allowing both non-technical users and developers to view issues in the format that best suits their expertise.
- Enhances collaboration between design and development teams by providing both visual and technical insights into accessibility problems.
📈 Success Metrics:
- Number of issues resolved through the ability to switch between visual and code views.
- User satisfaction with the flexibility of the issue representation options.
📘 User Story:
As a website developer or designer, I want to switch between a visual representation and a code view of accessibility issues so that I can resolve problems from both perspectives.
✅ Use Cases:
- Primary Use Case: Developer switches visual view to get overview of issues and then to the code view to identify and adjust the specific lines of code causing an accessibility issue.
- Secondary Use Case: User can Designer identify other areas where the issue exists and roll out fixes that will work across the board.
⚙️ Functionality:
- Allow users to toggle between a visual view (highlighting accessibility issues directly on the website or design) and a code view (showing the specific lines of code responsible for the issue).
- Ensure the visual view highlights areas like colour contrast, text readability, or content hierarchy, making it easy for non-technical users to understand the issues.
- The code view should provide a technical breakdown of the issue, offering developers insight into which parts of the code need adjustments.
- Provide clear links or recommendations between the two views, helping users understand the connection between visual problems and their underlying code.