wcag

From one-off prompts to workflows: How to use custom agents in GitHub Copilot CLI (opens in new tab)

Custom agents in GitHub Copilot CLI turn repeated terminal tasks into reusable, consistent workflows. Defined as Markdown profiles in a repository, they encode team-specific expertise, tools, standards, and safety rules instead of relying on one-off prompts. This makes workflows easier to review, version, share, and reuse across the CLI, IDE, and GitHub. ## What Custom Agents Are - A custom agent is a specialized Copilot agent configured through a Markdown file. - Its profile specifies: - Role and area of expertise - Available tools - Required standards and procedures - Guardrails and expected output formats - Teams can tailor agents to requirements such as: - WCAG accessibility standards - Formatting and testing conventions - Security and privacy policies - Review and ownership requirements - Because profiles live in the repository, they can be versioned, reviewed, and shared like code. ## Creating and Using Agents in Copilot CLI - Invoke Copilot CLI from the terminal and use the `/agent` command to select an agent. - Store the profile in the repository’s `.github/agents` directory. - Agent files use YAML frontmatter and typically end in `.agent.md`, such as `accessibility.agent.md`. - The profile defines the agent’s name, description, model, tools, instructions, scope, and guardrails. - Copilot CLI is especially suitable for these agents because it can execute scripts, call APIs, inspect repositories, and work directly with command-line tooling. ## Automating Repeated Workflows Custom agents are most useful for recurring tasks that span the terminal, IDE, and pull requests. - A security audit agent can: - Run standard checks across repositories - Group findings by Critical, High, Medium, and Low severity - Produce a pull-request-ready checklist with owners and next steps - It can use tools such as `gitleaks`, `trivy`, `semgrep`, `gh`, `git`, and `jq`. - Agents should prefer existing repository configuration files, including `.semgrep.yml`, `.trivyignore`, and `.gitleaks.toml`. - Missing security tools should be reported as coverage gaps rather than replaced with invented results. - Instructions can require secrets to be redacted, inclusive terminology, and consistent date formats. - Ownership mappings can assign findings to teams based on affected paths, using `CODEOWNERS` when available or defined defaults otherwise. Custom agents provide a practical way to capture team expertise once and apply it consistently. Start by converting a repetitive, execution-heavy task into a narrowly scoped `.github/agents` profile with explicit tools, outputs, and safety rules.

Building a general-purpose accessibility agent—and what we learned in the process (opens in new tab)

GitHub is piloting a general-purpose accessibility agent that answers accessibility questions and automatically fixes straightforward issues in front-end code. The agent has reviewed 3,535 pull requests and resolved 68% of identified issues, especially problems involving structure, control names, status messages, text alternatives, and keyboard focus. GitHub’s experience shows that an accessibility agent is most effective as an augmentation of human expertise, supported by a strong foundation of manually documented accessibility work. ## Goals and Results - The agent serves two purposes: - Provide just-in-time accessibility guidance through GitHub Copilot CLI and VS Code. - Detect and automatically remediate simple, objective accessibility issues before production. - It evaluates pull requests that modify front-end code. - Its five most common issue categories are: - Making structure and relationships understandable to assistive technologies. - Giving interactive controls clear, concise names. - Ensuring users receive important status announcements. - Providing text alternatives for non-text content. - Maintaining a logical keyboard focus order. - Example fixes can identify mismatches between visual order and screen-reader reading order, then suggest code changes that developers can commit directly. ## An Augmenting, Not Universal, Tool - GitHub frames accessibility through the social model of disability: barriers are often created by how digital environments are designed and built. - The agent is intended to help engineers remove those barriers, not “solve” accessibility independently. - It is not a silver bullet capable of handling every accessibility scenario. - Clearly limiting its responsibility helped GitHub launch the experiment more quickly and gain broader internal support. ## Why Manual Accessibility Work Matters - New and upcoming regulations, including the European Accessibility Act and the Americans with Disabilities Act’s planned WCAG 2.1 AA requirements, increase the importance of accessibility investment. - Organizations without established processes for manually identifying and fixing accessibility problems will be at a disadvantage. - GitHub already had a mature issue-management process containing: - Structured problem reports. - Reproduction steps. - Severity, service-area, and WCAG metadata. - Links to fixing pull requests. - Acceptance criteria. - Centralizing these issues in one repository made the collection a valuable reference corpus for the agent. ## Using Historical Issues as Training Material - The agent examines past accessibility issues and related pull requests to find applicable code and language patterns. - LLMs’ fuzzy matching can be useful here because it helps connect new problems with similar historical examples. - Generic instructions such as “follow accessibility best practices” are insufficient. - LLMs often reproduce accessibility antipatterns because their training data contains decades of inaccessible code. - Manually cataloged issues and organization-specific fixes provide contextual examples that are more useful than short, generic accessibility checklists. GitHub’s experience suggests that teams should first build reliable human processes for reporting and remediating accessibility issues. Once that structured knowledge exists, an agent can help apply it consistently and efficiently—while remaining a complement to, rather than a replacement for, accessibility expertise.

Continuous AI for accessibility: How GitHub transforms feedback into inclusion (opens in new tab)

GitHub built a continuous, AI-assisted accessibility feedback system to replace scattered reports, unclear ownership, and unresolved “phase two” promises. The workflow combines GitHub Actions, Copilot, and GitHub Models to turn user feedback into tracked, prioritized issues while preserving human judgment. Its goal is continuous follow-through: every accessibility barrier is captured, routed, reviewed, and acted upon. ## Accessibility as a Living System - GitHub treats accessibility as an ongoing methodology rather than a one-time audit or standalone product. - The approach combines: - Automation - Artificial intelligence - Human expertise - Real user feedback is considered more valuable than automated code scans because it reveals barriers experienced in real workflows. - The system supports GitHub’s 2025 Global Accessibility Awareness Day pledge to improve accessibility across the open source ecosystem. - Technology helps process feedback at scale, turning unstructured reports into clearer, implementation-ready work. ## Designing for Different Users The workflow was designed around three primary groups: - **Issue submitters** - Community managers, support agents, and sales representatives submit reports for users and customers. - Since they may not be accessibility specialists, the system guides them and teaches accessibility concepts during submission. - **Accessibility and service teams** - Engineers and designers need actionable reports containing reproducible steps, WCAG references, severity ratings, and ownership information. - **Program and product managers** - Leaders need trend data, issue categories, and progress visibility to prioritize investments. The design treats feedback as data moving through a pipeline and allows the process to evolve over time. ## Event-Driven Feedback Workflow - Each workflow stage triggers a GitHub Action that determines what happens next. - Key events include: - New issues launching Copilot analysis through the GitHub Models API - Status changes initiating hand-offs between teams - Resolutions triggering follow-up with the original submitter - Actions can be started manually or rerun, allowing humans to intervene whenever necessary. - GitHub initially built the system largely by hand in mid-2024; newer tools such as Agentic Workflows could now create similar Actions from natural-language instructions. - The workflow contains seven stages: - Intake - Copilot analysis - Submitter review - Accessibility team review - Link audits - Closing the loop - Improvement - Feedback loops allow submitters to rerun analysis, resolved issues to return for further review, and improvements to update Copilot prompts. ## Actioning Intake - Accessibility feedback can arrive through support tickets, social media, email, direct outreach, or GitHub’s accessibility discussion board. - Approximately 90% of feedback currently comes through the public discussion board. - Public discussions let other users: - Confirm reported problems - Add context - Share workarounds - Reports from the community often contain more detail than conventional support tickets. - GitHub acknowledges every report within five business days, including reports it cannot directly address. - When internal action is needed, a team member creates a tracking issue using a custom accessibility feedback template. - The template records: - The user’s original report - The feedback source - Relevant product components - This preserves important context as feedback moves from intake into triage.

Who Says Design Needs a Mouse? | Figma Blog (opens in new tab)

Figma is introducing keyboard accessibility features to make end-to-end design possible without a mouse. Developed with feedback from keyboard- and screen-reader users, the updates improve canvas navigation, object insertion, and selection while providing better spoken feedback. The goal is to remove barriers so more designers can participate fully in design work. ## Keyboard-Only Canvas Navigation - Users can pan across the canvas with the arrow keys. - Holding `Shift` enables faster movement or scrolling. - New shortcuts provide finer zoom control and access to the move and hand tools. - These changes address problems such as getting stuck at the top of the canvas or zooming into the wrong area. ## Inserting Objects Without a Mouse - Most object types, including shapes and text, can now be added using the keyboard. - Frames can be inserted with keyboard shortcuts through a crosshair-guided view. - Pressing `Enter` places text in the center of the current screen. ## Selecting and Positioning Objects - A keyboard box-selection tool allows users to select objects on the canvas. - Arrow keys move a pink cursor between objects. - Pressing `Enter` selects the object under the cursor. - Multiple objects can be selected using a selection box. ## Broader Accessibility Improvements - Enhanced screen-reader support announces actions as users work, helping them stay oriented. - Figma’s accessibility efforts also include a color-picker contrast checker for evaluating WCAG compliance. - Semantic HTML tags can be assigned in designs to support products that work better with screen readers. - Figma emphasizes accessibility as an ongoing commitment rather than a one-time checklist. Users can consult Figma’s help center for instructions on using the new keyboard controls and enabling screen-reader support.

How to Streamline Your Design System Workflow in Figma | Figma Blog (opens in new tab)

Figma’s latest design-system updates reduce the repetitive work involved in organizing variables, styles, components, and documentation. The post combines nine quality-of-life improvements with a set of plugins covering the workflow from color and typography foundations through documentation, component specs, and code handoff. Together, these tools aim to make design systems faster to build, easier to maintain, and more useful to developers. ## Reordering Modes and Collections - Modes and variable collections can now be rearranged with drag and drop. - Existing modes and IDs remain intact, avoiding resets, broken dependencies, or out-of-sync designs. - Teams can: - Move frequently used collections to the top. - Group related modes. - Reorganize collections during rebrands or product-line updates. - The default mode can also be changed more easily. ## Nine Quality-of-Life Improvements Figma introduced several smaller improvements intended to remove workflow friction: - A shortcut for jumping directly to a component’s main source. - The ability to duplicate and copy styles. - Options to hide and reveal variable paints. - A clearer component-description interface. - A variable modal that can be dragged from anywhere in its header. - Automatic saving for variable changes. - Tooltips that provide context for component names. - Better alignment for the Edit button. - Improved text overflow handling for long style names. ## Building the Foundations The post recommends using community plugins to accelerate the foundational work of creating colors, typography, spacing, and other core design-system decisions. ### Creating Color Palettes The highlighted tools support different aspects of color-system creation: - **CSS color-mix()** helps create color palettes and gradients. - **Colorbox** generates complete color ramps. - **The Genome Color Tool** helps build color scales that meet WCAG accessibility requirements. ### Establishing Typography and Variables - **Peppercorn** assists with setting up an entire type system. - **Print Variables** creates sticker sheets for variable collections. - **Auto Documentation** generates visual documentation for variables. - **Variables and Styles List** presents variable sheets inside a Figma canvas widget. ## Documenting Components and Styles Documentation tools help teams make systems easier to understand and adopt: - **Propstar** maps component property and prop variations. - **Specs** generates component specifications. - **Similayer** filters for particular layers and properties. - **Style Finder** locates styles across pages. These tools can reduce the manual effort required to explain component behavior and find existing design decisions. ## Bridging Design and Development The recommended implementation tools connect Figma variables and styles with code: - **CTRL Var** supports variable renaming. - **Export Import Variables** moves variables into or out of Figma. - **Handoff** copies CSS variables quickly. - **Variables Converter** translates variables into code. - **Shaper** helps manage token architecture and generate CSS. ## Practical Recommendation Start with Figma’s built-in improvements for organizing collections, modes, styles, and variables, then add plugins selectively for color generation, documentation, component specification, and code handoff. The goal is not to use every tool, but to create a repeatable workflow that keeps design-system foundations consistent and makes implementation easier for developers.

The Future of Design Systems Is Accessible | Figma Blog (opens in new tab)

Design systems can make accessibility a scalable, built-in practice rather than a late-stage compliance task. By standardizing accessible colors, components, documentation, and feedback processes, they allow improvements to spread across an entire product ecosystem. The article also highlights AI as an emerging tool for detecting and fixing accessibility issues, while emphasizing the need for responsible implementation. ## Accessibility and design systems belong together - Only about 3% of the internet was accessible to people with disabilities in 2022. - Design systems offer a way to improve that figure by embedding accessibility rules into shared components and guidelines. - In-house design system adoption increased by 22% in 2020, and 47% of surveyed organizations reported including accessibility guidelines. - Accessible design is both a social responsibility and a business opportunity, given the global population of people with disabilities and their significant purchasing power. - Accessibility can be integrated into: - Tested foreground and background color combinations - Individual UI components - Consistent documentation and usage guidance - Ongoing feedback and testing processes - System-level changes can be propagated across many product instances, making accessibility fixes more efficient and consistent. ## Responsible AI in accessibility - Design system teams are increasingly exploring AI to improve accessibility. - New AI-powered tools aim to identify and resolve common issues automatically. - Potential applications include: - Generating descriptions for images - Labeling buttons that lack accessible names - Adding semantic structure to interfaces - These tools can accelerate accessibility work, but they should supplement—not replace—human expertise, testing, and accountability. Design systems should treat accessibility as a foundational requirement from the beginning. Teams can make the greatest impact by combining accessible system components and standards with continuous testing, inclusive feedback, and carefully governed automation.

Illuminating dark mode | Figma Blog (opens in new tab)

Dark mode looked like a simple color swap, but Figma found it required a broad redesign of its UI architecture and engineering processes. The project aimed not only to satisfy user demand and improve accessibility, but also to create a scalable foundation for future themes. Figma ultimately treated dark mode as a systems problem involving product scope, shared components, edge cases, and maintainability. ## Accessibility and User Demand - Dark mode became Figma’s most requested feature after users complained about bright screens during late-night work. - It could improve legibility for people with certain visual impairments and aligned with Figma’s mission of making design accessible. - The team also considered WCAG contrast requirements rather than treating the feature as purely cosmetic. - Figma shipped dark mode in May 2022 after months of product, design, and engineering work. ## The Complexities of Color - The initial idea was to replace light colors with dark ones, but this approach would not scale as the product evolved. - Figma wanted a solution that: - Made new features support dark mode by default. - Simplified onboarding for engineers. - Reduced regressions when experimenting with themes. - Could support additional themes in Figma and FigJam. - Some decisions were straightforward: - Light editor panels would become dark. - Text and icons would become light foreground elements. - Toolbars and menus already dark in light mode would remain dark. - Other questions required product decisions: - Which parts of Figma should support dark mode? - Should user-created canvas content, such as the canvas background, change with the theme? - Should colors rendered by the C++ editor engine, including the transparency grid, also change? ## Auditing the Product Surface - Before coding began, team members audited Figma’s UI to estimate the work required for each surface. - The project involved far more than the main editor: - Modals - Panels - Toolbars - Dropdowns and submodals - Hidden states and complex edge cases - Each surface needed its full range of views and states considered, not just its most commonly seen appearance. ## Building a Systematic Approach - At kickoff, ten product engineering teams owned major parts of Figma’s interface. - Shared UI components had to be refactored so they could support dark mode where appropriate while remaining unchanged on unsupported surfaces. - The team recognized that a small central engineering group could not manually handle every component and state. - This drove the need for a systematic, regression-resistant approach that could scale across teams and continue supporting future product development. Figma’s experience shows that theme support should be designed as an extensible system, not implemented as a one-time recoloring exercise. Teams planning similar work should begin with a full product audit, define theme boundaries clearly, and invest in shared components and automation that make future themes easier to add.

A step forward in our accessibility efforts | Figma Blog (opens in new tab)

Figma argues that making design accessible requires enabling people of all abilities to participate throughout the design process. Its new prototype screen reader beta addresses a major gap for blind and low-vision users by making prototype content readable and navigable with assistive technology. The company presents this as an important step, while acknowledging that substantial accessibility work remains. ## Prototype Screen Reader Beta - Previously, screen readers encountered Figma prototypes as an essentially empty canvas, making text, images, and interactive content inaccessible. - The beta supports: - Text notes - Image alt text - Navigation through prototypes - Buttons and keyboard actions such as tabbing - Because Figma designs are not built as HTML, the company created an HTML representation of prototypes specifically for screen readers. - The beta was launched to gather feedback and improve the experience; it later became an open beta for everyone. ## Accessibility Work Underway - Figma has also introduced: - Dark mode and improved color-contrast compliance - Live captions for audio chat - A platform-wide accessibility assessment by Deque - Greater support for accessibility plugins, widgets, and community files - The company is developing reusable UI components and internal tools that encourage keyboard and screen reader compatibility. - Accessibility is being incorporated into team expectations, product development, and early user testing through alpha and beta programs. ## Remaining Challenges - Figma recognizes that more screen reader and general accessibility support is needed. - Planned capabilities include allowing users to: - Add alt text - Assign ARIA roles to components - Define prototype tab order - The company emphasizes that accessibility improvements should be developed collaboratively with the community. Figma’s recommendation in practice is to continue testing accessibility features with users who rely on assistive technology and to treat accessibility as an ongoing part of product design and engineering rather than a one-time update.

Tackle accessibility in your designs with these useful plugins | Figma Blog (opens in new tab)

Accessibility should be integrated into the design process so products do not exclude users with visual or motor impairments. Figma highlights four plugins that help designers evaluate color contrast, simulate color blindness, and plan keyboard focus order. Together, these tools make accessibility issues easier to identify and address before implementation. ## Color Contrast and WCAG Compliance - **Able** analyzes two selected objects and checks whether their contrast meets WCAG AA or AAA standards. - It updates dynamically as selections change and provides: - Text/background previews - Color-swapping controls - Simulations of different types of color blindness - Statistics showing how many people are affected by each condition - **Contrast Checker**, created by Stark, displays the contrast ratio between selected objects. - It provides contextual previews based on whether a layer contains text and shows: - AA/AA+ and AAA/AAA+ ratings - Contrast requirements for different font sizes - An indication of whether text larger than 18 points meets the relevant standard ## Simulating Color Blindness - **Color Blind** creates canvas-based simulations rather than only previewing colors in a separate interface. - It duplicates selected design elements and organizes them into named groups representing different types of color vision deficiency. - This lets designers inspect how an entire interface may appear to users with varying visual perceptions. ## Designing Keyboard Focus Order - **Focus Orderer** helps designers document the order in which a browser should move focus between interactive elements. - Designers can: - Add focus points to selected elements - Reorder them by dragging in the plugin interface - Automatically renumber annotations on the canvas - Tab through elements to test the intended navigation flow - The plugin connects accessibility planning directly with the design-to-development process. Designers should use these plugins alongside the Web Content Accessibility Guidelines (WCAG) to catch accessibility problems early. Teams can also explore Figma’s Plugin API to build custom accessibility tools.