Web Accessibility

6 posts

github2 min readCurated summary

From one-off prompts to workflows: How to use custom agents in GitHub Copilot CLI

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.

Read original(opens in new tab)
github3 min readCurated summary

Continuous AI for accessibility: How GitHub transforms feedback into inclusion

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.

Read original(opens in new tab)
woowahanOriginal article

In Search of Lost Accessibility | Woowa (opens in new tab)

Achieving a high accessibility score on automated tools like Lighthouse does not always translate to a functional experience for users with visual impairments. This post explores how a team discovered that their "high-scoring" product actually required over 300 swipes for a screen reader user to reach a purchase button, leading them to overhaul their approach. By focusing on actual screen reader behavior rather than just checklists, they successfully transformed a fragmented interface into a streamlined, navigable user journey. ### Navigational Structure with Landmarks and Headings * The team implemented a clear hierarchy using landmarks (header, main, footer) and heading levels, which allows screen reader users to jump between sections via tools like the iOS VoiceOver "Rotor." * To ensure consistency, they developed a reusable component that automatically wraps content in a `<section>` and links it to a heading using the `aria-labelledby` attribute. * They addressed a common CSS pitfall: because setting `list-style: none` can cause VoiceOver to stop recognizing elements as a list, they explicitly added `role="list"` to maintain structural context for the user. ### Consolidating Fragmented Text for Readability * Information that should be heard as a single unit, such as prices (e.g., "990" and "Won"), was often fragmented into separate swipes; the team corrected this by using template literals to merge data into single strings. * For cases where visual styling required separate DOM elements, they used a "NoScreen" component strategy: hiding the visual elements from screen readers with `aria-hidden="true"` while providing a single, visually hidden description for the screen reader to announce. * The team noted that `aria-label` on generic containers like `<span>` or `<div>` is often ignored by iOS VoiceOver, making screen-reader-only text a more reliable method for cross-platform accessibility. ### Defining Roles for Interactive Elements * The team identified that generic buttons like "View All" lacked context, so they updated them with specific labels (e.g., "View all 20 reviews") to clarify the outcome of the interaction. * They ensured that all interactive elements have clearly defined roles, preventing the ambiguity that occurs when a screen reader identifies an element as a "button" without explaining its specific purpose or the data it controls. True accessibility is best measured by the physical effort required to complete a task, such as the number of swipes or touches. Developers should move beyond automated audits and regularly perform manual testing with screen readers like VoiceOver or TalkBack to ensure their services are genuinely usable for everyone.

figma2 min readCurated summary

Who Says Design Needs a Mouse? | Figma Blog

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.

Read original(opens in new tab)
figma2 min readCurated summary

Announcing FigJam screen reader support | Figma Blog

FigJam now supports screen readers and keyboard-only navigation, enabling users to read and create much of a file’s content. The release focuses on making canvas-based collaboration more inclusive while acknowledging that some features remain inaccessible. Figma’s approach relied heavily on user testing, careful iteration, and reusable accessibility patterns. ## What the Update Enables - Users can move focus around the FigJam canvas and through menus and screens. - Screen readers can interpret: - File structure and canvas hierarchy - Shapes containing text - Stickies and tables - Image alt text - Users can create, edit, and read content without relying on a mouse. ## Expanding Accessibility to Collaborative Work - FigJam was prioritized because it brings entire teams together for brainstorming, alignment, and decision-making. - Its relatively surface-level interface provided an opportunity to address accessibility before tackling Figma Design’s more complex menu and interaction structure. - The goal is to make collaboration inclusive for as many team members as possible. ## Designing Without Established Canvas Patterns - Unlike conventional websites and widgets, canvas-based tools have relatively few established ARIA patterns or accessibility best practices. - Figma first had to determine which capabilities were essential for effectively using FigJam with assistive technology. - The team worked with Fable and users of assistive technologies to test designs and gather feedback. - User journeys helped define a practical set of core features for the initial release. ## Learning Across Keyboard and Screen Reader Setups - Different screen readers, settings, and keyboard layouts create thousands of possible interaction combinations. - Beta interviews revealed new usage patterns and accessibility issues that informed the product. - Improvements also benefited Figma’s broader codebase, including reusable ARIA labels and tags for React components. - Remaining unsupported features include cursor chat, stamp adjustments, voting, the emote wheel, widgets, and editing freeform vector elements such as lines, highlights, washi tape, and marker drawings. Figma’s release is a meaningful foundation for accessible FigJam collaboration, but users should expect continued gaps as the team expands support to more interactive and multiplayer features.

Read original(opens in new tab)
figma2 min readCurated summary

A conversation with Figma's accessibility team | Figma Blog

Figma’s accessibility team describes how open beta testing and user feedback shaped screen reader support for prototypes. They learned that accessibility must account for different assistive technologies, varied user needs, and interaction between visual and nonvisual experiences. The team sees the current release as an important step, but plans further improvements to generated HTML and accessibility evaluation tools. ## Lessons from the Open Beta - Testing with real users revealed that support working well in Mac VoiceOver did not guarantee compatibility with JAWS and other screen readers. - Figma began testing major screen reader technologies earlier in development. - The team recognized that screen readers complement visual work rather than serving only users who cannot see. - Low-vision users may use visual and audio information together for additional context. ## Design Decisions for Screen Reader Support - Added positioning information to the accessibility tree so sighted screen reader users can understand the cursor’s location on the canvas. - Made “On hover” interactions activate when clickable elements receive focus. - Enabled scrollable areas to follow the screen reader cursor, similar to native HTML behavior. - Adjusted auto-hiding toolbars so focused controls remain visible. - Added shortcuts to open prototype mode: - Mac: `Option + Command + Return` - PC: `Alt + Ctrl + Enter` - Added a persistent screen reader support toggle and more guidance through Figma Community. ## Feedback from Accessibility Partners - Figma works with Fable to test product flows with people who use assistive technologies. - Partner feedback highlighted the need to communicate accessibility controls more clearly. - Accessibility navigation shortcuts are being added to the keyboard shortcuts panel, along with improvements to the panel itself. - For FigJam, screen readers now receive information about the number of children or siblings associated with each item. - Fable’s input helps Figma support different screen reader software and users with varying levels of expertise. ## Future Accessibility Improvements - Figma plans to make content available to screen reader users by default. - The team wants to give designers greater control over the HTML generated from their designs. - Longer term, Figma hopes to provide tools that help designers assess accessibility without requiring deep screen reader knowledge. Figma’s experience shows that accessibility improves through ongoing testing, direct collaboration with assistive-technology users, and removing assumptions about how people work. The current screen reader support is presented as a foundation for continued product and design improvements.

Read original(opens in new tab)