gitlabMar 9, 2026

Navigate repositories faster with the file tree browser (opens in new tab)

GitLab 18.9 introduces a collapsible file tree browser that makes repository navigation more like using an IDE. The panel keeps files and directories visible while reading code, reducing back-and-forth navigation and preserving context. It is available on GitLab.com, Self-Managed, and Dedicated, with support for accessibility, responsive layouts, and large repositories. ## Persistent Repository Context - A resizable, collapsible panel appears alongside file lists and code. - Users can expand or collapse directories and switch files without losing their place. - When opening a nested file directly, parent directories expand and the current file is highlighted. - The tree stays synchronized with the selected file or directory in the main content area. ## Filename Search - Press `F` to open the global file search dialog. - Search results can match part of a filename or extension. - Each result includes its parent directories, making the destination clear before navigation. - Press `Enter` to open the selected file. ## Keyboard and Accessibility Support - The browser follows the W3C ARIA treeview pattern. - Users can navigate with arrow keys, `Enter`, `Space`, `Home`, `End`, and character keys. - The design supports screen readers and keyboard-first workflows. ## Responsive Design and Performance - On desktop, the tree appears beside the file list and code. - On smaller screens, it becomes a toggleable left-side drawer. - On mobile, it is hidden to maximize the code-view area. - Pagination prevents large repositories from overwhelming the page and keeps the interface responsive. ## Availability and Usage - Open a repository at `/<project>/-/tree/<branch>`. - Select the file tree icon or press `Shift+F` to toggle the browser. - The feature is available on GitLab.com and was released in version 18.9 for GitLab Self-Managed and GitLab Dedicated. The file tree browser is recommended for anyone navigating large repositories, especially users who want IDE-like structure, faster file discovery, and better keyboard accessibility.

keyboard-navigationgitlabaccessibilitydevsecops+4

slackNov 19, 2025

Android VPAT journey (opens in new tab)

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.

keyboard-navigationaccessibilityandroidjetpack-compose+2

figmaOct 13, 2025

15+ Ways We're Improving Accessibility in Figma | Figma Blog (opens in new tab)

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.

keyboard-navigationfigmafigjamaccessibility+4

figmaAug 3, 2025

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.

keyboard-navigationfigmawcagscreen-readers+2

discordFeb 26, 2025

How to Navigate Discord Using Only Your Keyboard (opens in new tab)

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.

keyboard-navigationdiscordaccessibilitykeyboard-shortcuts+1

figmaMay 15, 2023

Announcing FigJam screen reader support | Figma Blog (opens in new tab)

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.

keyboard-navigationfigjamreactscreen-readers+2

figmaNov 16, 2022

A conversation with Figma's accessibility team | Figma Blog (opens in new tab)

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.

keyboard-navigationhtmlscreen-readersweb-accessibility+1

figmaMay 18, 2022

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.

keyboard-navigationaccessibilityhtmlwcag+3

figmaAug 15, 2019

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.

keyboard-navigationfigmaaccessibilityjavascript+3