The YuJa EqualGround DevAssist Plugin leverages AI to help you resolve HTML accessibility issues directly in the VS Code IDE, saving time needed for retroactive manual remediation after websites and web apps have gone live. YuJa DevAssist checks against WCAG 2.1 and 2.2, Level A, AA, and AAA standards to help ensure full compliance.
Setting Up YuJa EqualGround DevAssist
The YuJa EqualGround DevAssist plugin can be downloaded through the EqualGround website and installed within Visual Studio Code.
In the EqualGround sidebar menu, go to Configuration > DevAssist.
Click the Download Plugin button in step 1 to download the EqualGround VS Code Plugin.
- Open Visual Studio Code.
Select the Extensions tab from the sidebar.
Click the More Actions menu, and choose Install from VSIX.
Locate the downloaded EqualGround plugin file and select Install to complete the setup.
- Open any HTML file to start real-time accessibility analysis.
How to Use YuJa EqualGround DevAssist
YuJa EqualGround DevAssist corrects code errors by proposing Quick Fixes. Selecting a Quick Fix will instantly apply the changes to your code. Quick Fix suggestions can be identified by a yellow lightbulb icon.
- Open Visual Studio Code.
- Open any HTML file to start real-time accessibility analysis. Issues are flagged directly in your code with a wavy red underline.
Hover over an issue to learn more about the problem and why it matters.
- Use Quick Fix to make instant corrections to your code. To open Quick Fix:
Use the Ctrl +. Keyboard shortcut.
Note: This is the default shortcut; your keybinding may be different.
Scroll to the bottom of the pop-up and click Quick Fix…
Select the line with the error, then click the blue lightbulb icon.
Issues YuJa DevAssist Can Resolve
See the table below for the different WCAG 2.2 issues YuJa DevAssist can resolve.
| WCAG Guideline | WCAG Success Criteria Number | Issue |
| 1.1 Text Alternatives | 1.1.1 Non-text Content | Images, icons, and non-text elements are missing alt text or ARIA labels. |
| 1.2 Time-based Media | 1.2.1 Audio-only and Video-only (Prerecorded) | The pre-recorded audio/video has no text transcript alternative. |
| 1.2.2 1.2.2 Captions (Prerecorded) | The pre-recorded video is missing synchronized captions. | |
| 1.3 Adaptable | 1.3.1 Info and Relationships | There is improper use of semantic HTML (e.g., <div> instead of <nav>, inputs without labels, heading hierarchy skipped). |
| 1.3.4 Orientation | Content locks to a specific screen orientation (portrait/landscape only). | |
| 1.3.5 Identify Input Purpose | Form fields are missing autocomplete attributes for personal data (name, email, etc.) | |
| 1.4 Distinguishable | 1.4.10 Reflow | Content breaks or overflows when zoomed to 400% or at a 320px viewport width (poor reflow). |
| 1.4.12 Text Spacing | Text clips or overlaps when spacing is overridden (line height, letter spacing, or word spacing). | |
| 2.2 Enough Time | 2.2.1 Timing Adjustable | Time limits (sessions, quizzes) can't be turned off, extended, or adjusted. |
| 2.2.2 Pause, Stop, Hide | Auto-playing or moving content (carousels, animations) has no pause/stop control. | |
| 2.4 Navigable | 2.4.2 Page Titled | Pages are missing a meaningful <title> element. |
| 2.4.3 Focus Order | There is an Illogical keyboard focus order that doesn't match the visual layout. | |
| 2.4.9 Link Purpose (Link Only) | Links with vague labels like "click here" or "read more" are ambiguous out of context. | |
| 2.4.10 Section Headings | Long content sections are missing headings that allow users to navigate through them. | |
| 3.1 Readable | 3.1.1 Language of Page | The <html> element is missing the lang attribute. |
| 3.2 Predictable | 3.2.5 Change on Request | There are unexpected context changes on input (e.g., page redirects or form submissions triggered without user intent). |
| 4.1 Compatible | 4.1.2 Name, Role, Value | Interactive elements (buttons, inputs, custom widgets) are missing name, role, or value attributes for assistive technologies. |