Accessibility | Techlist.io

figmaDec 10, 20252 min readCurated summary

Figma Make Is Now Available in Figma for Government | Figma Blog

Figma Make is now available in Figma for Government, giving federal agencies a secure way to create and test interactive prototypes. Figma argues that faster, collaborative design can help modernize public services, improve accessibility, and build public trust. The feature is available within Figma’s FedRAMP Moderate–authorized environment, although some cloud infrastructure will not reach full compliance until 2026. ## Modernizing Public Services - Government teams are improving services such as public portals, operational systems, benefits platforms, and research tools. - The online passport renewal system demonstrates the potential impact: by 2025, more than two million people had renewed passports online, with 97% reporting a positive experience. - Public-sector projects are difficult because policymakers, technologists, and operational leaders must coordinate under changing requirements and limited resources. - A 2025 executive order highlighted usability, accessibility, and design consistency as essential to citizen-facing services. ## Faster Prototyping and Collaboration - Figma Make enables teams to turn ideas into interactive prototypes in hours rather than weeks. - Designers, policy leaders, researchers, engineers, and IT staff can collaborate in a shared workspace. - Teams can test workflows and validate assumptions with citizens before development begins. - Shared libraries, integrations, accessibility standards, and design patterns help agencies maintain consistency. - Prototyping supports a wide range of initiatives, including federal benefits, financial communications, education platforms, space systems, and internal agency tools. ## Security and Compliance - Figma Make is included in Figma for Government and operates within its authorized environment. - Figma for Government is FedRAMP Moderate authorized, providing agencies with a compliant foundation for design and prototyping. - Figma notes that part of its cloud infrastructure is expected to achieve full FedRAMP Moderate compliance in 2026, while Make is usable today within the authorized environment. ## Broader Government Design Efforts - Federal agencies are already using Figma to modernize complex public services. - Shared design systems can improve accessibility and consistency across agencies and products. - Examples such as the National Park Service’s digital app illustrate how small teams can transform large, paper-based systems into accessible digital experiences. Figma positions Make as a practical tool for helping agencies adopt faster, citizen-first design processes. Government teams can use it to explore ideas early, collaborate across disciplines, and test accessible services before committing development resources.

Read original

Accessibility Figma Design Systems Prototyping+3

slackNov 19, 20253 min readCurated summary

Android VPAT journey

Slack’s Android VPAT review uncovered recurring accessibility issues after the company’s 2024 UI redesign. Slack addressed problems involving error announcements, headings, form labels, list counts, and workspace reordering through changes to UI components and TalkBack support. The review also showed that some vendor recommendations required interpretation against Android conventions, while keyboard navigation remains future work. ## Background and Triage - A VPAT documents how a product aligns with accessibility standards and helps customers evaluate software. - Slack commissioned a third-party VPAT in 2024 after its IA4 redesign. - Straightforward issues, such as poor color contrast and missing image labels, were assigned immediately. - The remaining Android findings were grouped into recurring themes: - Inaccessible error messages - Missing semantic headings - Unclear edit-field labels - Incorrect list item counts - Inaccessible workspace drag-and-drop - Strikethrough information not conveyed to screen readers - Errors communicated through color alone - Keyboard navigation and focus, which remain future work because Android’s large-form-factor support is limited ## Making Error Messages Accessible - Invalid form submissions displayed errors visually, but TalkBack did not announce them. - Slack addressed both primary error patterns: - `OutlinedTextField` now announces errors positioned below the field. - Error-type `SKBanner` components now announce their messages to screen-reader users. - Users can therefore understand both that a field is invalid and why it failed without swiping through the screen. ## Adding Semantic Headings - Missing headings made page structure difficult for screen-reader users to understand and navigate. - Slack added headings in lists, including the Preferences page. - The team did not classify top app-bar titles as headings because testing with other Android applications showed that this is not a consistent Android convention. ## Providing Persistent Edit-Field Context - Some fields relied only on placeholder text, which disappears after text is entered. - This can make the field’s purpose unclear, particularly for users with cognitive impairments. - The team explored difficult cases such as the main search field and message input area. - Because of space limitations, the message input received no ideal redesign. - Slack added a search icon to the search field, giving it a persistent visual cue even after the placeholder disappears. ## Correcting List Item Counts - TalkBack incorrectly counted decorative dividers as list items. - For example, a bottom sheet with five actual rows and two dividers was announced as containing seven items. - Slack introduced `SKListAccessibilityDelegate` for `SKListAdapter`. - The delegate overwrites accessibility `CollectionInfo` with the correct number of meaningful list items. ## Making Workspace Reordering Accessible - Dragging workspaces requires dexterity that some users may not have. - Slack added an explicit Edit mode with visible six-dot drag handles for each workspace. - TalkBack users can now use custom “Move before” and “Move after” actions from the accessibility context menu. - These actions are available through a three-finger tap or TalkBack gestures such as `L` and `r`. - A Done button exits Edit mode and removes the drag handles. Slack’s experience demonstrates that Android accessibility improvements often require both component-level fixes and alternative interaction models. Teams should validate screen-reader behavior directly, distinguish decorative elements from meaningful content, provide persistent context for inputs, and offer accessible alternatives to gesture- or dexterity-dependent interactions.

Read original

Accessibility Android Keyboard Navigation Jetpack Compose+2

googleOct 28, 2025Original article

StreetReaderAI: Towards making street view accessible via context-aware multimodal AI (opens in new tab)

StreetReaderAI is a research prototype designed to make immersive street-level imagery accessible to the blind and low-vision community through multimodal AI. By integrating real-time scene analysis with context-aware geographic data, the system transforms visual mapping data into an interactive, audio-first experience. This framework allows users to virtually explore environments and plan routes with a level of detail and independence previously unavailable through traditional screen readers. ### Navigation and Spatial Awareness The system offers an immersive, first-person exploration interface that mimics the mechanics of accessible gaming. * Users navigate using keyboard shortcuts or voice commands, taking "virtual steps" forward or backward and panning their view in 360 degrees. * Real-time audio feedback provides cardinal and intercardinal directions, such as "Now facing North," to maintain spatial orientation. * Distance tracking informs the user how far they have traveled between panoramic images, while "teleport" features allow for quick jumps to specific addresses or landmarks. ### Context-Aware AI Describer At the core of the tool is a subsystem backed by Gemini that synthesizes visual and geographic data to generate descriptions. * The AI Describer combines the current field-of-view image with dynamic metadata about nearby roads, intersections, and points of interest. * Two distinct modes cater to different user needs: a "Default" mode focusing on pedestrian safety and navigation, and a "Tour Guide" mode that provides historical and architectural details. * The system utilizes Gemini to proactively predict and suggest follow-up questions relevant to the specific scene, such as details about crosswalks or building entrances. ### Interactive Dialogue and Session Memory StreetReaderAI utilizes the Multimodal Live API to facilitate real-time, natural language conversations about the environment. * The AI Chat agent maintains a large context window of approximately 1,048,576 tokens, allowing it to retain a "memory" of up to 4,000 previous images and interactions. * This memory allows users to ask retrospective spatial questions, such as "Where was that bus stop I just passed?", with the agent providing relative directions based on the user's current location. * By tracking every pan and movement, the agent can provide specific details about the environment that were captured in previous steps of the virtual walk. ### User Evaluation and Practical Application Testing with blind screen reader users confirmed the system's utility in practical, real-world scenarios. * Participants successfully used the prototype to evaluate potential walking routes, identifying critical environmental features like the presence of benches or shelters at bus stops. * The study highlighted the importance of multimodal inputs—combining image recognition with structured map data—to provide a more accurate and reliable description than image analysis alone could offer. While StreetReaderAI remains a proof-of-concept, it demonstrates that the integration of multimodal LLMs and spatial data can bridge significant accessibility gaps in digital mapping. Future implementation of these technologies could transform how visually impaired individuals interact with the world, turning static street imagery into a functional tool for independent mobility and exploration.

Accessibility AI Gemini Multimodal AI+5

figmaOct 13, 20252 min readCurated summary

15+ Ways We're Improving Accessibility in Figma | Figma Blog

Figma is rolling out more than 15 accessibility improvements to make its products easier to use with keyboards, screen readers, and enhanced contrast settings. The updates expand keyboard control across Figma Design, FigJam, Slides, Buzz, commenting, and Dev Mode, while improving screen-reader navigation and object descriptions. Together, they aim to make collaboration, canvas editing, and handoff more reliable for people with different access needs. ## Expanded Keyboard Controls - Users can navigate and manipulate more canvas objects without a mouse. - **Figma Design:** Add and edit lines, adjust ruler guides, and create or edit arcs from ellipses. - **FigJam:** Manage table rows and columns, adjust stamps, votes, washi tape, marker lines, and highlighter strokes, and navigate embedded content and other canvas objects. - **Figma Slides:** Resize presenter notes and adjust writing tone with AI. - **Across products:** Open and move between links in edit or view-only mode. ## Keyboard Support for Comments and Collaboration - Add, move, and navigate comments across Figma products. - Navigate and manage Dev Mode annotations with shortcuts. - Move between discussions without losing keyboard focus. - New personalization toggles let users disable Figma-exclusive shortcuts while typing and choose whether Spotlight automatically follows other users. ## Improved Screen Reader Support - Tab navigation through buttons, menus, panels, and other actions now follows a more logical order. - Users can jump directly to specific actions, such as opening menus or activating toolbar controls. - Object announcements include details such as type, name, and state. - More consistent announcements help users detect new comments and file updates. - Screen readers preserve rich-text meaning, including bold, italics, lists, and links. - Canvas objects in Buzz and Slides can now be recognized and announced. ## Enhanced Color Contrast - A new setting increases contrast between text, interface elements, and backgrounds in both light and dark modes. - The option can be enabled through Accessibility settings, the Actions menu, or General settings. - Stronger contrast improves text and icon legibility, clarifies interface structure, and makes buttons and outlines easier to identify. - It can also improve visibility in glare, sunlight, and prolonged or multitasked screen use. Figma’s updates make accessibility a broader part of everyday editing and collaboration rather than a separate workflow. Users who rely on keyboards or screen readers should explore the new controls, while all users may benefit from enabling enhanced contrast when working in difficult lighting or for extended periods.

Read original

Accessibility Figma Figjam Dev Mode+4

googleJul 1, 2025Original article

Making group conversations more accessible with sound localization (opens in new tab)

Google Research has introduced SpeechCompass, a system designed to improve mobile captioning for group conversations by integrating multi-microphone sound localization. By shifting away from complex voice-recognition models toward geometric signal processing, the system provides real-time speaker diarization and directional guidance through a color-coded visual interface. This approach significantly reduces the cognitive load for users who previously had to manually associate a wall of scrolling text with different speakers in a room. ## Limitations of Standard Mobile Transcription * Traditional automatic speech recognition (ASR) apps concatenate all speech into a single block of text, making it difficult to distinguish between different participants in a group setting. * Existing high-end solutions often require audio-visual separation, which needs a clear line of sight from a camera, or speaker embedding, which requires pre-registering unique voiceprints. * These current methods can be computationally expensive and often fail in spontaneous, mobile environments where privacy and setup speed are priorities. ## Hardware and Signal Localization * The system was prototyped in two forms: a specialized phone case featuring four microphones connected to an STM32 microcontroller and a software-only implementation for standard dual-microphone smartphones. * While dual-microphone setups are limited to 180-degree localization due to "front-back confusion," the four-microphone array enables full 360-degree sound tracking. * The system utilizes Time-Difference of Arrival (TDOA) and Generalized Cross Correlation with Phase Transform (GCC-PHAT) to estimate the angle of arrival for sound waves. * To handle indoor reverberations and noise, the team applied statistical methods like kernel density estimation to improve the precision of the localizer. ## Advantages of Waveform-Based Diarization * **Low Latency and Compute:** By avoiding heavy machine learning models and weights, the algorithm can run on low-power microcontrollers with minimal memory requirements. * **Privacy Preservation:** Unlike speaker embedding techniques, SpeechCompass does not identify unique voiceprints or require video, instead relying purely on the physical location of the sound source. * **Language Independence:** Because the system analyzes the differences between audio waveforms rather than the speech content itself, it is entirely language-agnostic and can localize non-speech sounds. * **Dynamic Reconfiguration:** The system adjusts instantly to the movement of the device, allowing users to reposition their phones without recalibrating the diarization logic. ## User Interface and Accessibility * The prototype Android application augments standard speech-to-text with directional data received via USB from the microphone array. * Transcripts are visually separated by color and accompanied by directional arrows, allowing users to quickly identify where a speaker is located in the physical space. * This visual feedback loop transforms a traditional transcript into a spatial map of the conversation, making group interactions more accessible for individuals who are deaf or hard of hearing.

Accessibility Speech To Text Sound Localization Speaker Diarization+3

figmaApr 1, 20253 min readCurated summary

Why Design is for Everyone | Figma Blog

Design is presented not as a discipline owned by professional designers, but as a shared way of solving problems and communicating ideas. As technology evolved from physical products like Sony’s Walkman to software and digital interfaces, design became increasingly central to usability, accessibility, and product success. The author argues that organizations achieve better products and systems when design knowledge is shared across teams rather than confined to a single department. ## Design as a shared practice - Design is described as: - A tool for solving problems - A mindset for approaching challenges - A framework for communicating and developing ideas - Professional designers may identify strongly with the discipline, but design should remain accessible to everyone. - Observing hundreds of teams and thousands of individuals led the author to conclude that individual expertise has limits. - Teams equipped with shared design knowledge can create: - Better user experiences - More effective processes - Stronger organizational systems - The future of design is therefore organization-wide, built through a design-driven culture rather than isolated design departments. ## Design through technological change - Design evolves alongside technology, helping transform technical possibilities into products people can understand and use. - Its role extends beyond appearance: design bridges the gap between prototypes and market-ready experiences. ## The Walkman: engineering combined with user-centered design - Sony’s 1979 portable stereo began with engineering advances from the Pressman tape recorder. - Engineers made the device smaller and lighter, removed recording functionality, and improved sound quality. - Design was essential to the Walkman’s widespread adoption: - User testing shaped its intuitive interface. - Field research identified ways to improve portability and usability. - Dual headphone jacks supported shared listening. - The “hotline” button allowed users to talk while listening. - Its distinctive blue-and-silver body and orange button differentiated it from conventional black, gray, and white electronics. - The Walkman illustrates how engineering, interface design, accessibility, user research, and design thinking can combine to create a cultural icon. ## The rise of interface design - By the mid-2000s, industry attention shifted from hardware toward the software that powered devices. - Apple’s products demonstrated that hardware alone was insufficient; interfaces, touch interactions, haptics, and software usability were equally important. - The App Store created a new mobile-software economy and intensified competition around digital experiences. - Web 2.0 and mobile apps accelerated investment in software and helped establish new technology companies. - Software expanded interface design beyond the constraints of physical controls, enabling more powerful and flexible interaction models. ## Digital-native interfaces - Early digital products often used skeuomorphism, imitating familiar physical objects such as buttons, sliders, and scroll wheels. - These visual metaphors helped users understand unfamiliar digital interfaces by connecting them to established physical experiences. Design works best when it is treated as a shared organizational capability. Giving non-designers a seat at the table allows teams to apply user-centered thinking to products, processes, and systems at scale.

Read original

Accessibility User Experience Design Thinking Software Design+3

figmaMar 12, 20252 min readCurated summary

How eBay Built a Bridge Between Brand and Product with Figma | Figma Blog

eBay rebuilt its design-system documentation to unite brand, product, accessibility, and engineering guidance in one evolving experience. Its new Evo system is centered on the 300-plus-page Playbook, which replaces scattered, manually maintained files with a centralized source of truth. By making Figma the starting point for content and automating validation and publishing, eBay reduced documentation updates from days to minutes and encouraged teams to treat documentation as part of their normal workflow. ## Rebuilding from the Ground Up - Before Evo, documentation was spread across separate Figma files, developer resources, and accessibility guidelines. - Designers manually updated static files and submitted tickets for changes to be published. - eBay’s OneExperience team chose to rebuild the process internally rather than patch the old system or rely on an external agency. - The goal was a system integrated with everyday design and development work, rather than documentation maintained as a separate task. ## Bringing Brand and Product Together - The new Playbook combines brand guidance, design-system documentation, technology resources, and accessibility information in one destination. - It acts as a centralized source of truth for both internal teams and agency partners. - Component pages include design, development, and accessibility views. - Component availability and implementation status are updated from library metadata instead of manually maintained tables. ## Component Status Across Platforms - eBay created an internal Component Status API to track components across its libraries. - The API records component names, versions, availability, and implementation status across: - Published Figma libraries - Native platform libraries - Open-source web-component libraries - Figma components store relevant metadata in their descriptions. - Developers can verify whether a component exists in their framework, whether it matches the Figma version, and whether the Playbook documentation is current. ## Automating Documentation Updates - eBay built a custom Figma plugin and exporter that powers the documentation workflow. - Components, guidelines, and accessibility notes originate in Figma. - Updates are linted, validated, and published directly from Figma without manual CMS work. - Changes that previously took days can now appear on the Playbook site in under two minutes. - Faster publishing makes documentation easier to iterate on and helps teams view it as a living part of their workflow rather than an administrative burden.

Read original

Accessibility Figma Design Systems API+3

discordFeb 26, 20253 min readCurated summary

How to Navigate Discord Using Only Your Keyboard

Discord’s Keyboard Navigation feature lets users browse the app, activate controls, manage messages, switch conversations, and control calls without a mouse or trackpad. Tab highlights interactive elements, Enter activates them, and arrow keys move through lists. The article also explains keyboard-based drag-and-drop for organizing servers and channels. ## Navigating Discord’s Interface - Press **Tab** to display the keyboard focus indicator and move through buttons, icons, and other interactive elements. - Press **Enter/Return** to activate the highlighted control. - Use the **Arrow Keys** to move through lists such as direct messages, servers, and channels. - Press **Esc** to move focus to the chat input; if a menu or modal is open, it closes that first. ## Managing Messages After highlighting a message, users can perform common message actions: - **E** or **Up**: Edit the last message. - **+**: Add a reaction. - **Backspace**: Delete the message. - **R**: Reply. - **P**: Pin. - **F**: Forward. - **Alt/Option + Enter/Return**: Mark as unread. ## Switching Between Servers, Channels, and DMs - **Ctrl/Cmd + Option + Up/Down**: Move through the server list. - **Option + Up/Down**: Move through channels or DMs. - **Option + Shift + Up/Down**: Browse unread channels or DMs. - **Ctrl/Cmd + Shift + Option + Up/Down**: Browse unread conversations containing mentions. - **Ctrl/Cmd + Option + Right**: Switch between the last viewed server and the DM tab. - **Shift + Page Up**: Jump to the oldest unread message in a text channel. ## Controlling Voice and Video Calls Before or during calls, keyboard shortcuts provide quick access to call functions: - **Ctrl + `**: Start a call in the current personal or group DM. - **Ctrl/Cmd + Enter/Return**: Answer an incoming direct call. - **Esc**: Decline an incoming direct call. - **Ctrl/Cmd + Shift + M**: Mute. - **Ctrl/Cmd + Shift + D**: Deafen, muting both the microphone and call audio. - **Ctrl/Cmd + Shift + Alt/Option + V**: Return to the current call view. - There is no built-in shortcut for disconnecting from a voice channel, but users can create a custom keybind. ## Keyboard-Based Drag and Drop Discord also supports using the keyboard to reorganize certain items, including servers and channels the user owns or is allowed to move. - Highlight the server or channel with Keyboard Navigation. - Press **Ctrl/Cmd + D** to pick it up. - Use the **Arrow Keys** to move it. - Press **Enter** to drop it in the desired location. Keyboard Navigation provides a practical mouse-free way to manage Discord, especially for users who prefer keyboard input or need improved accessibility. Learning the core focus, movement, and shortcut commands—and creating custom keybinds where necessary—can make everyday navigation significantly faster.

Read original

Accessibility Discord Keyboard Shortcuts Keyboard Navigation+1

figmaNov 20, 20243 min readCurated summary

The Making of the Figma Pattern Library | Figma Blog

Figma rebuilt its internal design system during the UI3 redesign after years of growth had produced inconsistent components, detached instances, and a fragmented workflow. The resulting Figma Pattern Library (FPL) was created through close designer-engineer collaboration and uses variables, APIs, and shared standards to keep design intent aligned with shipped code. Its goal is to provide both a reliable source of truth and a flexible foundation for building consistent, accessible products across Figma’s product suite. ## Why Figma rebuilt its design system - Figma’s internal system had become increasingly fragmented as the company and product portfolio expanded. - Components that were intended to be identical had accumulated subtle but important differences. - Detached component instances made consistency difficult to maintain. - The upcoming UI3 rollout made these problems impossible to ignore. - The team needed a foundation that could support consistent, efficient development across all Figma products. ## A paired design-and-engineering approach - A five-person team of designers and engineers led the rebuild. - The team modeled its workflow on pair programming: - One discipline would actively build. - The other would review and provide immediate feedback. - This collaboration helped bridge the gap between design intent and technical implementation. - The system was designed to be both: - A source of truth for shared UI decisions. - A springboard for future product development. - The effort resulted in the new Figma Pattern Library, or FPL. ## Using variables as a shared language - The previous system relied on Figma styles for designers and a separate Google Sheet for engineers’ color tokens. - Because the spreadsheet often lagged behind product changes, designs and production code diverged. - FPL replaced this disconnected process with Figma variables and the Figma REST API. - Typography variables were introduced and aliased through existing typography styles. - Color styles were migrated to color variables as a centralized source of truth. - CSS definitions were added to color variables so Dev Mode could display the correct variable names during inspection. ## Primitive and semantic color systems - FPL organized colors into two main variable collections: - **Primitive variables:** Color ramps organized by hue and numbered from 100 to 1000. - **Semantic variables:** Contextual names based on Figma’s dark-mode schema. - Semantic variables support multiple themes and products, including: - Light and dark modes. - Figma Design. - FigJam. - Slides. - Dev Mode. - Semantic variables alias primitive variables, allowing colors to be changed across themes and products without manually updating every component. - This structure enables shared components to adapt to different contexts while preserving visual consistency. The practical lesson is that a scalable design system requires more than a component library: it needs shared ownership, synchronized design and engineering tokens, and variable-based foundations that can support multiple products and themes.

Read original

Accessibility Figma Design Systems Design Tokens+4

figmaOct 20, 20243 min readCurated summary

Made in Figma: The National Park Service Goes From Paper to Pixels | Figma Blog

The National Park Service turned decades of printed visitor guides into a unified digital app serving 431 parks and monuments. GuideOne and Twohy Design Works drew on Massimo Vignelli’s 1977 Unigrid system to create a flexible interface that could accommodate diverse park data, long-term government use, and varied accessibility needs. Figma helped the NPS, designers, and developers collaborate on a practical design system that works for both visitors and park staff. ## A Digital System for 431 Parks - The NPS manages an unusually diverse collection of sites, ranging from major national parks to small historic memorials. - Each park controls much of its own data and writes its own content, making consolidation difficult. - The app needed to bring inconsistent information into one reliable system. - It includes: - Interactive maps - Self-guided tours - Essential visitor information - Content useful to both the public and NPS employees - The app launched in 2021 after the NPS moved from separate apps for individual parks to a single consolidated experience. ## Designing for Durability and Accessibility - Government software must remain useful for many years rather than follow short-lived product trends. - The app serves people with widely different accessibility requirements. - Designers had to balance a consistent national system with the individual character and needs of each park. - Collaboration between the NPS, GuideOne’s developers, and designers helped ensure concepts were feasible with the available data and engineering resources. ## Adapting the Unigrid - Before 1977, NPS brochures varied widely in format and visual style. - Massimo Vignelli’s Unigrid standardized: - Graphic components - Layout structures - Typography and visual hierarchy - Print-production methods - The system gave the NPS a recognizable identity while allowing individual parks to present their own stories. - GuideOne and Twohy Design Works treated Unigrid as a foundation for the app rather than copying the brochures directly. - The challenge was translating a print-based grid and editorial system into interactive screens, maps, and digital navigation. ## Figma as a Collaboration Tool - Figma made it easy to circulate designs among the NPS, designers, and engineering teams. - Shared prototypes exposed practical constraints around park data and implementation. - The workflow supported ongoing feedback instead of separating design from development. - This helped turn a historical visual system into a robust digital product. The project demonstrates how a well-established design system can be modernized without losing its identity. For complex public platforms, combining strong historical principles with collaborative prototyping, flexible data structures, and accessibility-focused design can produce a product that remains useful across many users and locations.

Read original

Accessibility Figma Design Systems User Experience+2

microsoftMay 16, 20242 min readCurated summary

Developing with Accessibility in Mind at Microsoft

Global Accessibility Awareness Day highlights the importance of building inclusive digital products. The post recommends integrating accessibility testing throughout development using Accessibility Insights for Web and Visual Studio’s Integrated Accessibility Checker. Combining automated scans with manual testing helps developers identify both common and deeper accessibility problems. ## FastPass for Rapid Automated Testing - Accessibility Insights for Web uses axe-core to detect common, high-impact accessibility issues. - FastPass can identify problems in under five minutes, often revealing failures within a couple of minutes. - Developers can use it while writing UI code to find and fix issues early. - The tool also includes WCAG 2.2 guidance and testing support in its Assessment feature. ## Visual Studio’s Integrated Accessibility Checker - Available since Visual Studio 2022 version 17.5, the checker scans desktop applications within the IDE. - It detects common accessibility issues and reports them directly in Visual Studio. - The feature is powered by the Axe-Windows engine, also used by Accessibility Insights for Windows. ## Manual Testing with Quick Assess - Automated tools cannot detect every accessibility issue, so manual inspection remains necessary. - Quick Assess provides 10 assisted tests for issues beyond automated detection. - Tests include explanations of why each issue matters, along with remediation resources and examples. - Examples include checking heading levels and reviewing individual instances for easier validation. ## Building Accessibility into Development - Accessibility testing should be part of the product life cycle rather than a final checklist. - Developers can use FastPass’s Tab Stops test to evaluate keyboard navigation and focus order. - Poor focus order can make interfaces difficult to use for people relying on screen readers, magnifiers, or those with reading disorders. - Small, consistent testing practices can significantly improve the experience for users with disabilities. The recommended approach is to start with automated checks, supplement them with Quick Assess and keyboard-based manual testing, and continue improving accessibility throughout development.

Read original

Accessibility Web Development Automated Testing Visual Studio+3

figmaApr 2, 20242 min readCurated summary

Join Us for Framework by Figma: Our Global Design Systems Event | Figma Blog

Figma announced Framework, a global design systems event focused on new tools, best practices, and the future of design systems. The event aims to help teams manage increasingly complex systems while improving collaboration between designers and engineers. It also highlights Figma’s broader effort to connect design systems more closely with code and organizational adoption. ## Event Focus and Agenda - Framework was scheduled as a half-day virtual event on April 16, 2024. - The program included: - Deep dives into new design system features - Best practices from companies such as Verizon - Product sessions about Figma’s future direction - A design-to-code roundtable with Bumble, GitHub, and Hewlett Packard - Expert Q&A sessions - The article also references features announced at Framework, including Code Connect, typography and gradient variables, and the Library Analytics API. ## Building More Adaptable Design Systems - Design systems have evolved from basic style guides into foundations for product design and development. - Figma acknowledges that implementing and maintaining them can be complex. - Its approach aims to support both structured workflows and more flexible, freeform design. - Product sessions were intended to cover how teams can structure, maintain, and increase adoption of their systems. ## Connecting Designers and Engineers - A central goal was to bring design systems practitioners from design and engineering together. - Sessions addressed both design principles and technical implementation. - Figma previewed capabilities intended to reduce the gap between design and development. - The event emphasized cross-functional collaboration as essential to successful design systems. ## Global Design Systems Community - Framework was presented as a global community event, with virtual programming for broad access. - Additional events were planned for Asia on April 18 and Tokyo on April 23, alongside future meetups in London and other cities. - Participants could attend the main-stage announcements and sessions online regardless of location. Figma positioned Framework as both a showcase of new capabilities and an opportunity to learn from the teams shaping modern design systems. Its practical recommendation was to participate in the event, explore the new design-to-code and analytics tools, and apply the shared practices to improve system adoption and collaboration.

Read original

Accessibility Figma Design Systems Design To Code+3

figmaMar 18, 20242 min readCurated summary

23 Prototyping Resources to Bookmark Right Now | Figma Blog

Prototyping is valuable throughout product development—not just at the end—as a way to align teams, gather feedback, conduct research, and improve products through iteration. Figma’s curated collection of 23 resources supports different learning styles, from introductory videos and community files to presentation techniques and advanced prototyping features. ## Cover the Basics - An eight-minute video introduces interactive prototypes, animation, and incorporating tester feedback. - A 50-minute playlist covers: - Easing curves and transitions - Smart Animate - Scrolling - Device frames - A 63-minute “Prototyping 101” video explains basic frame-to-frame navigation and advanced features such as interactive components. - A two-part series for product professionals demonstrates how non-designers can create lightweight prototypes. - Part one covers basic prototype creation. - Part two explores transitions, Smart Animate, scrolling, and other motion techniques. - The “Accessible prototypes in Figma” community file demonstrates prototype accessibility features, including compatibility with screen readers such as VoiceOver on Mac and JAWS on Windows. ## Level Up Presentations - Prototyping can make presentations more dynamic and engaging, whether for boardrooms, classrooms, or other audiences. - A 70-minute video explains how to build interactive slide presentations in Figma. - A short tutorial shows how to embed interactive elements, such as scrollable mobile screens, inside presentation slides. - Another video demonstrates using the Figma mobile app to click through presentation slides. ## A Broader Prototyping Practice - Figma positions prototyping as a tool for: - Building shared team understanding - Testing ideas with users - Facilitating stakeholder feedback - Iterating before development - The resource list follows recent Figma prototyping enhancements, including updates that help bring designs to life across mobile, tablet, and smartwatch interfaces. - The article is organized as a learning path, with additional sections intended to cover video, motion and flow, variables, and recorded office hours. Use the resources progressively: begin with the introductory tutorials, then explore accessibility, presentation workflows, motion, variables, and community examples as your prototyping needs become more advanced.

Read original

Accessibility Figma Prototyping User Research+3

figmaFeb 11, 20243 min readCurated summary

What Is a Design System | Design Systems 101 | Figma Blog

Design systems provide a shared foundation for designing and building consistent digital products. They combine principles, visual standards, reusable components, documentation, and development guidance to reduce duplication and prevent confusing or fragmented user experiences. Rather than limiting creativity, a well-designed system gives teams a common language and lets them focus on solving higher-level product problems. ## What a Design System Is - A design system is a collection of building blocks, standards, resources, and processes that guide product design and development. - It acts as a blueprint for an organization’s product ecosystem, covering: - Design tokens and technical specifications - Documentation and best practices - UX principles and decision-making processes - Brand, accessibility, and usability guidance - Its goal is to make products more consistent while reducing the time spent recreating common elements and patterns. ## The Three-Level Structure ### 1. The Design System - The highest-level container includes the organization’s overall guidance and evolving processes. - It may include design principles, documentation, technical specifications, tokens, and product-development standards. ### 2. Component and Pattern Libraries - Component libraries contain reusable interface elements such as buttons, input fields, and other UI controls. - Pattern libraries describe broader solutions, such as navigation flows, layouts, and data-display approaches. - These libraries can include: - Templates and layouts - Interaction patterns - Design components - Code snippets - Technical specifications - Usage documentation - They connect design and development by translating design intent into implementable code and shared practices. ### 3. Foundational Elements - Foundational elements establish the product’s visual language and voice. - Common examples include: - Color - Typography - Icons and logos - Illustrations - Voice and tone - Brand guidelines - Accessibility standards ## Design Systems Versus Related Resources - A component library focuses on individual UI elements, while a pattern library addresses complete interface solutions or user flows. - A design system is broader than a style guide: - Style guides mainly document visual elements such as colors, typography, and imagery. - Design systems also include components, coding standards, usability guidance, processes, and documentation. ## More Than Visual Consistency - Design systems influence the full user experience, not just appearance. - Consistent colors, icons, button behavior, language, and layouts help users understand and navigate products more easily. - The article challenges the idea that design systems eliminate creativity or force every design to look identical. - Instead, they handle repeated design and implementation decisions so designers can spend more time addressing unique product and user needs. A practical design system should be treated as an evolving shared foundation rather than a static style guide. Combining reusable components with clear standards, documentation, accessibility guidance, and development support helps teams scale product work without sacrificing consistency or usability.

Read original

Accessibility Design Systems User Experience Design Tokens+2

figmaJan 30, 20242 min readCurated summary

The Art and Science of Annotations in Dev Mode | Figma Blog

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace. ## Solving Designer and Developer Needs - Designers need to document information that visuals cannot fully express, including: - Accessibility requirements - Interaction behavior - Rationale behind design decisions - Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work. - Figma placed annotation workflows in Dev Mode so designers can: - Annotate from the same perspective developers use - Create a focused specification - Share a direct Dev Mode link with developers - Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete. ## Dynamic Annotations That Stay Current - Traditional annotations are manually created and quickly become outdated as designs evolve. - Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes. - Measurement indicators can also respond dynamically to layout or dimension changes. - Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation. - This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates. ## Positioning Annotations Without Canvas Clutter - Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers. - Figma wanted annotations to remain visible to developers without consuming space in the design itself. - The proposed solution was to position and display annotations automatically. - This required handling complex interactions such as: - Zooming and panning - Scaling - Selecting and hovering - Minimizing annotations - Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice. Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.

Read original

Accessibility Figma Design Systems Dev Mode+2