Accessibility | Techlist.io

discordAug 4, 20262 min readCurated summary

Squircles, Styles, and Spacing: How Your Feedback is Helping Improve Mobile

Discord is updating its mobile app to align more closely with the refreshed desktop experience. The changes introduce consistent themes and shape conventions, improve accessibility and customization, and simplify the chat bar. The overall goal is to make Discord feel familiar and consistent regardless of platform. ## Desktop Themes Come to Mobile - Mobile now includes all four desktop base themes: - Light - Ash - Dark - Onyx - Ash restores the classic dark appearance with improved contrast for accessibility. - Onyx provides true black AMOLED backgrounds instead of dark gray, potentially reducing battery use on OLED displays. - Users can adjust contrast and saturation through Accessibility settings. - Nitro users’ voice and video tile backgrounds now match their selected profile theme across desktop and mobile. ## More Flexible Theme Customization - Users can choose which Light and Dark themes activate based on their device’s appearance mode. - The “Same as Device Theme” option is available under Appearance settings. - Device-theme synchronization takes priority over “Sync Across Devices.” - Themes such as Mint Apple for Light mode and Noir for Dark mode can be assigned to different times of day. ## Consistent Shapes Across the Interface - Discord now follows a simple visual rule: - People, including friends and bots, use circular avatars. - Servers and apps use squircle-shaped icons. - The distinction helps users identify people versus things while scanning lists. - Rounded corners on buttons, inputs, and containers have also been standardized. - Direct messages and group DMs remain circular to preserve their “friend circle” identity. ## A Less Crowded Chat Bar - The chat bar has been reorganized to create more space for composing messages. - Emoji, Gift, Voice Message, and frequently used quick actions remain visible near the right side. - Threads and app usage have moved into the **+** menu. - Long-pressing **+** provides a shortcut to any action without opening the full menu. - Although Threads and Apps now require an additional tap, the long-press gesture is intended to keep them readily accessible. Together, these updates make mobile Discord more visually consistent with desktop while giving users greater control over themes and preserving quick access to common actions.

Read original

Accessibility Design Systems Discord Dark Mode+3

githubJul 30, 20262 min readCurated summary

Stacked sessions and pull requests in the GitHub Copilot app

GitHub Copilot’s stacked sessions let developers split large, dependent changes into smaller pull requests while preserving their order. Cassidy Williams demonstrates this by modernizing a decade-old React application, recovering from an incorrect branch choice, and then starting a separate `react-bootstrap` replacement on top of the styling work. The approach made a difficult modernization more manageable and reduced the temptation to create an unwieldy “everything” pull request. ## Modernizing a Legacy Application - Williams’ personal dashboard had accumulated outdated dependencies and patterns: - React 15 - Less - An old version of `react-bootstrap` - Updating the application manually had previously seemed too time-consuming. - She used the GitHub Copilot app to plan a frontend modernization focused on: - Replacing Less with Tailwind or vanilla CSS - Improving accessibility and responsiveness - Modernizing dependencies - Cleaning up links, inputs, labels, wrapping, and container widths - Claude Opus 4.8 helped formulate the plan, while GPT-5.5 provided a review. - The initial attempt failed because the work began from the wrong branch. ## Recovering from the Wrong Branch - Williams discovered that an old `dev` branch already contained partial modernization work and was the version she actively used. - The new session had incorrectly branched from `main`, creating compatibility problems. - Rather than discard the work, she asked Copilot to: - Close the incorrect pull request - Start a fresh session from `dev` - Port the styling and accessibility changes onto that branch - Copilot handled the branch and pull request transition, preserving useful decisions from the failed attempt. ## Investigating Legacy Warnings - Testing exposed warnings involving: - `findDOMNode` - `componentWillReceiveProps` - The outdated code was largely coming from `react-bootstrap`, not Williams’ own application code. - She used Plan mode to compare upgrading or migrating existing components with removing the library. - Copilot recommended replacing `react-bootstrap` entirely. ## Stacking Dependent Sessions - Replacing `react-bootstrap` represented substantial scope beyond the current styling work. - Williams chose to submit the existing work first, then create a second session branched from it. - The new session would: - Build on the completed styling changes - Replace `react-bootstrap` - Produce a separate pull request - Eventually merge into `dev` after the first pull request - This structure keeps each change easier to review and test while maintaining the dependency between them. The practical recommendation is to use stacked sessions for large, related modernization efforts: isolate coherent tasks into separate pull requests, branch later work from earlier changes, and avoid allowing AI-assisted development to turn every improvement into one oversized change.

Read original

Accessibility React TypeScript Github Copilot+4

figmaJul 16, 20263 min readCurated summary

Workflow Lab: Deploying Designs Directly with Figma Make | Figma Blog

Figma’s workflow connects design, production code, and team review so designers can handle small, high-impact improvements without waiting for engineering backlog prioritization. Using Figma Make with a real codebase, a designer can identify accessibility issues, implement craft-level fixes, and move the work toward a merged pull request. The approach keeps engineers focused on larger architectural work while preserving design nuance and collaboration. ## The Problem with Backlog-Driven Fixes - Minor accessibility and usability improvements often enter a backlog where they compete with larger engineering priorities. - Small changes may be too granular to prioritize but too valuable to ignore. - Written handoffs can lose important nuance, creating clarification cycles between designers and engineers. - The example organization, the fictional Museum of Speculative Futures, is simultaneously improving accessibility and rewriting its website architecture. ## A Shared Ownership Model - The product manager proposes that engineers continue handling the major rewrite. - The designer takes end-to-end ownership of lower-risk, craft-level changes. - Figma Make with production code enables the designer to work directly against the real website implementation. - The workflow is intended to take changes from the Figma canvas through team review and into a pull request without filing a ticket. ## Testing the Existing Experience - Before making changes, the designer uses the Figma agent to generate synthetic personas, including: - A first-time visitor planning a trip - A returning member - Someone navigating with a screen reader - These personas explore the site and surface obvious friction early. - The audit identifies several issues: - A confusing exhibition or visit-page label - A call-to-action that is easy to miss - A date picker that is difficult to understand - A blank state when search returns no results - The article emphasizes that synthetic personas do not replace real user research, but they can identify issues before in-person sessions. ## Reviewing Design Improvements - The designer addresses the findings directly on the canvas. - The designer, engineer, and product manager review the proposed changes together. - They agree on improvements such as: - Clearer navigation language - A more prominent call-to-action - A more usable date picker - The changes support the shared goal of making the site easier to navigate for people with different ways of experiencing the web. The recommended workflow is to reserve engineers’ time for substantial technical work while enabling designers to directly resolve small, accessibility-focused issues in production code. Figma Make, the Figma agent, GitHub integration, and canvas-based review create a path from design insight to implementation without losing context or waiting indefinitely in the backlog.

Read original

Accessibility Figma AI Github+2

figmaJul 1, 20263 min readCurated summary

Building Accessibility Into a Canvas-Based Product | Figma Blog

Figma’s canvas-based rendering enables performance features such as infinite zoom and real-time collaboration, but it removes the browser’s built-in accessibility support. To restore that support, Figma built a synchronized “Mirror DOM” that represents the canvas in ordinary DOM elements for screen readers and keyboard users. The system combines an internal accessibility tree, React-rendered mirror elements, bidirectional selection syncing, and announcements for non-navigational changes. ## Why Canvas Requires a Different Accessibility Strategy - Figma renders designs on a canvas rather than with traditional HTML and DOM. - This improves performance but leaves the browser’s accessibility tree nearly empty. - Unlike a conventional web app with semantic elements such as `<button>`, `<p>`, and `<img>`, Figma’s canvas effectively has only one focus-holding `<input>`. - Without additional work, screen readers cannot navigate or meaningfully interpret the layers in a Figma file. ## Synthesizing an Accessibility Tree - Browsers normally derive an accessibility tree from the DOM, semantic HTML, ARIA attributes, and computed state. - Figma created its own internal accessibility tree to provide equivalent non-visual information for each design layer. - Each layer receives an accessible summary describing the role and content a screen reader should announce. - Summaries vary according to context: - In prototypes, editing-related layers can be omitted, while text and interactive roles are preserved for viewers. - In editing mode, structures such as autolayout frames need to remain available. - The tree is flattened by removing omitted nodes and connecting their relevant descendants. - Figma builds the tree initially, then applies surgical updates as documents change instead of rebuilding everything. ## Rendering the Mirror DOM - A recursive React component converts the internal accessibility tree into DOM elements. - Each component subscribes to accessibility data for one design layer and renders its role, label, and children. - React’s incremental updates help keep DOM changes minimal as the design changes. - The resulting elements are invisible to sighted users but available to assistive technologies. ## Synchronizing Canvas and Screen Reader Interaction - Figma maintains bidirectional synchronization between the visual canvas and the Mirror DOM. - Selecting a layer on the canvas moves focus to the corresponding DOM element. - When a screen reader user navigates the Mirror DOM, Figma updates the canvas selection accordingly. - This connects non-visual navigation with the editor’s visual state. ## Announcing Changes - A separate announcement system communicates changes that are not primarily navigational. - It reports actions such as nudging objects, switching tools, and other updates that would normally be apparent visually. - Together with the Mirror DOM, these announcements help screen reader users understand both the document structure and ongoing editor activity. Figma’s approach shows that accessibility can be rebuilt for canvas applications by maintaining a semantic representation alongside the rendering layer. Applications that prioritize canvas performance should provide a synchronized accessibility model rather than relying on the canvas itself to expose meaning to assistive technologies.

Read original

Accessibility React Screen Readers Dom+3

figmaJul 1, 20263 min readCurated summary

Got Skills? Make the Figma Agent a Better Collaborator | Figma Blog

Figma’s custom skills turn team knowledge and workflows into reusable instructions for the Figma agent. They complement design systems by adding guidance such as brand voice, critique methods, writing standards, and review processes. Figma’s experience suggests that any repeated task or team-specific judgment can become a shared skill that improves consistency and collaboration. ## Custom Skills Capture Team Expertise - A skill is a reusable set of plain-English instructions for the Figma agent. - Skills can be triggered in chat with a forward slash (`/`). - Teams and organizations can publish skills so members do not have to recreate prompts or explain workflows repeatedly. - They are particularly useful for practices that are easy to use but difficult to document and often exist only in someone’s head. ## A Second Opinion on Demand Skills can provide focused critique and help teams apply shared standards. - **Simulate stakeholder feedback:** Figma created a skill based on CEO Dylan’s comments, allowing designers to pressure-test work before a review. - **Apply UX writing standards:** A skill based on Figma’s style guide checks capitalization, punctuation, and other consistency issues. - **Review work as a new user:** The agent can assess an experience from a first-time user’s perspective, exposing friction and missing context that experts may overlook. - Design systems supply components, patterns, and UI elements; skills add broader team expertise such as compliance rules, product principles, and critique frameworks. ## Build Once, Use Everywhere Repeated team rituals are strong candidates for automation through skills. - **Catch-me-up:** Summarizes recent file or project activity so returning teammates can quickly understand what happened without searching comment threads. - **Crit preparation:** Interviews the designer about the project, persona, scope, and audience, then creates a critique page with guided discussion prompts. - Figma’s crit-prep skill draws on Nielsen Norman Group best practices to encourage more effective research questions. - **Crit recap:** Organizes feedback into themes, decisions, action items, and deferred items. - Recaps can be placed on the canvas or copied into Slack, helping preserve decisions and keep follow-up work visible. ## Connecting Existing Tools The article begins describing how skills become more powerful when they can draw on the tools a team already uses, suggesting that skills can connect workflows and information across the organization. The provided excerpt ends before giving the specific examples or implementation details. Teams should start by identifying repeated tasks, recurring meetings, or expert review processes and turn those into shared slash-command skills.

Read original

Accessibility Figma Design Systems AI Agents+2

githubJun 23, 20261 min readCurated summary

I automated my job (and it made me a better leader)

Ashley Willis is GitHub’s Senior Director of Developer Relations, where she focuses on open source, community, and developer advocacy. Her work combines leadership, accessibility, and inclusion, with an emphasis on making technology more human and building resilient teams. ### Leadership and Advocacy - Leads developer relations at GitHub. - Advocates for developers and open-source contributors. - Amplifies underrepresented voices in technology. ### Community and Accessibility - Builds supportive, inclusive spaces for contributors. - Focuses on creating tools that genuinely serve their users. - Works at the intersection of leadership, advocacy, and accessibility. Overall, Willis’s career centers on strengthening developer communities and making technology more inclusive, accessible, and human.

Read original

Accessibility Open Source Github Developer Relations

githubMay 15, 20263 min readCurated summary

Building a general-purpose accessibility agent—and what we learned in the process

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.

Read original

Accessibility Large Language Models Github Copilot GitHub Actions+3

discordApr 16, 20262 min readCurated summary

Making Discord on Desktop Look Just Right: Display Settings to Ease the Eyes

Discord’s desktop app offers several display and accessibility settings to make conversations more comfortable and easier to read. Users can control when media and spoilers appear, reduce interface color intensity, simplify names and role colors, manage HDR brightness, and adjust UI density and text size. These options let people tailor Discord to their visual preferences without changing how content appears to others. ## Chat Options for Customizing Conversations - In **User Settings > Display > Messages**, users can control whether images and videos appear automatically. - Media can be shown or manually opened when: - Posted as direct links - Uploaded directly to Discord - **Show embeds and link previews** can be disabled to prevent automatic previews for web links. - Alt text can be displayed by default when image descriptions are provided. - Spoiler content can be configured to appear: - **On click** - **Always** - **On servers I moderate** - Links can always be underlined, improving visibility—especially when interface saturation is reduced. ## Toning Down Discord’s Colors - The **Saturation** setting reduces the intensity of interface colors, including buttons, status indicators, and links. - Saturation can also be applied to custom colors such as server role colors. - User-created media—including avatars, custom emoji, photos, and videos—is not affected. - Role colors can be displayed as a dot beside a user’s name instead of coloring the entire name. ## Reducing Brightness and Visual Distractions - HDR-capable displays may show extremely bright images and videos. - In **Accessibility > High Dynamic Range**, users can switch from **Full Dynamic Range** to **Standard Range** to reduce HDR intensity. - Nitro display-name styling can be disabled through **Accessibility > Text Readability > Display Name Styles**. - Disabling these styles restores standard fonts and colors without notifying other users. ## Adjusting UI Density and Text Size - Discord also provides settings to make the interface more or less dense, depending on whether users prefer more information on screen or greater spacing. - The article introduces additional controls for changing the size and spacing of interface content, though the provided text ends before describing them in detail. Overall, Discord’s display settings can be combined to reduce visual overload: hide media until needed, lower saturation, soften HDR content, simplify names, and adjust spacing or text size for a more comfortable setup.

Read original

Accessibility Discord User Interface Responsive Design+2

discordApr 6, 20263 min readCurated summary

Discord Patch Notes: April 6, 2026

Discord’s April 6, 2026 patch focuses on performance, accessibility, media sharing, and a broad set of usability fixes across desktop, iOS, Android, and Linux. The most notable improvements reduce desktop voice-channel deadlocks by about 30% and reduce iOS image-upload sizes by 17% and latency by 12%. Discord also continues a major accessibility audit while addressing numerous navigation, layout, search, and platform-specific bugs. ## Performance and Media Sharing - Desktop changes reduced deadlocked Voice threads by approximately 30%, making users less likely to remain stuck on “Connecting.” - iOS image uploads now use files roughly 17% smaller and complete about 12% faster. - Mobile landscape mode was improved by calculating padding on a screen-by-screen basis rather than relying on global padding rules. - Android server reordering now scrolls more smoothly. ## Accessibility Improvements - Discord is continuing a large accessibility audit across its clients. - Fixes addressed keyboard focus rings, button alignment, text overflow, and controls becoming inaccessible in longer languages. - Desktop profile buttons, settings controls, and the Server Invite modal received layout and focus improvements. - Discord encourages users to report remaining accessibility problems through its bug-reporting channels. ## Search, Navigation, and Account Behavior - Search negation now works correctly with filters such as `has:-image`. - The desktop `CMD/CTRL+F` shortcut no longer opens server search while a modal is active. - Browser-style back and forward navigation now behaves correctly after switching accounts. - Opening a Discord link from a browser no longer replaces the current channel without preserving a usable way to return. - Fixed several Settings and modal-navigation problems, including unexpected jumps to the bottom of the page. ## Desktop and Settings Fixes - Corrected keybind-button alignment and keyboard focus positioning. - Fixed profile buttons extending beyond the visible area in languages with longer text. - Shop item modals can now be closed by clicking outside them at minimum window height. - Profile bio changes are properly cleared by the Reset button. - Removed a persistent “NEW” badge from the `@time` command. - Corrected outdated role designs in Server Template previews. - Fixed visual issues involving nameplates, profile banners, Nitro perk badges, and Shop error-message spacing. - The Desktop update indicator no longer appears clickable while an update is still downloading. ## Mobile and Platform-Specific Fixes - Wayland now properly detects when Linux users become active or go AFK. - Android now provides visual confirmation after sending a friend request through a QR code. - Android theme changes update the entire Settings interface immediately. - Android QR-code login buttons now appear active when usable. - Android’s In-App Browser setting correctly opens links inside Discord. - iOS users can now switch out of Invisible status reliably. - iOS server lists no longer jump when switching servers. - iOS Server Guide progress bars and welcome messages now display and dismiss correctly. - Fixed an iOS crash that could occur when canceling a Nitro Classic subscription. - iOS search results now display images in bot-message containers at the correct size. ## Messaging, Profiles, and Social Features - Removed duplicate friend suggestions for users who had already received a request. - Fixed incorrect profile connection icons for external links. - Corrected duplicate usernames shown in pending friend-request tooltips. - Channel-name inputs no longer incorrectly offer custom emoji, which channel names do not support. - Student Hub join-method filtering now works properly. - Server Tags and badges received alignment fixes on Android. - The Nitro gift emoji picker’s “Add Emoji” button now functions correctly. Discord recommends updating as fixes reach each platform, with additional early testing available through the iOS TestFlight release.

Read original

Accessibility Discord Android iOS+3

gitlabMar 9, 20262 min readCurated summary

Navigate repositories faster with the file tree browser

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.

Read original

Accessibility Gitlab DevSecOps Keyboard Navigation+4

discordMar 6, 20262 min readCurated summary

Discord Patch Notes: March 6, 2026

Discord’s March 6, 2026 patch focuses on safer mentions, faster desktop startup, accessibility, and a broad collection of platform-specific bug fixes. Escaped `@everyone` and `@here` mentions are now correctly ignored by the backend, preventing accidental mass notifications. Discord also reports an 11.8% median improvement in desktop time-to-interactive after changing API payload ordering. ## Safer Mention Handling - Escaped mentions such as `\@everyone` previously appeared harmless in the client but could still notify roles when sent. - Backend handling now respects escape characters for `@everyone` and `@here`, ensuring these messages do not trigger mentions. - The change addresses cases where users received no warning before unintentionally notifying large server populations. ## Desktop Performance - Discord changed the order of API payloads sent to desktop clients. - The update reduced median launch time, or p50 time-to-interactive, by 11.8%. - The improvement builds on navigation performance work released the previous week. ## Accessibility Improvements - Discord completed a broad accessibility pass covering Quest, Events, Profiles, Activities, and Nitro surfaces. - The changes are intended to improve screen-reader navigation and usability across these areas. ## General and Platform Fixes - Non-Nitro users can once again forward messages containing large attachments from Nitro users. - iOS startup times after a full device restart were fixed; an asset request had been competing with the busy boot-time background queue. - Mobile animations no longer remain stuck mid-transition. - League of Legends game invites and Overlay “Join” invites were repaired. - Android fixes include the Forest theme gradient, duplicate server-invite information, modal layering, role colors, and server-onboarding alignment. - Search-result keyboard selection no longer remains stuck on the first item. - Desktop fixes address private-channel role setup, oversized hyperlinks, broken embeds, Quick Switcher shortcuts, tooltip links, and copying webhook URLs without confirmation. - Server administration fixes include role sorting, role-selector scrolling, onboarding dropdown positioning, audit-log deletion reasons, permission-panel alignment, and non-removable role controls. - iOS fixes restore back-swipe navigation, correct switch styling, reduce overly aggressive settings scrolling, and prevent the device from being kept awake unnecessarily. - Browser and mobile layout issues were corrected across server lists, profiles, Nitro Home, boost flows, and message controls. Discord recommends trying the iOS TestFlight build for early features and reporting remaining bugs through the community bug megathread. Fixes had been merged but could still be rolling out gradually across platforms.

Read original

Accessibility Discord Android iOS+3

cloudflareFeb 27, 20263 min readCurated summary

The most-seen UI on the Internet? Redesigning Turnstile and Challenge Pages

Cloudflare redesigned Turnstile and Challenge Pages because these security interfaces are encountered billions of times daily and increasingly interrupt users as bot attacks grow. The redesign focused on reducing frustration through consistent information architecture, clearer language, better accessibility, and a deeper understanding of user journeys. The central conclusion is that security products must be designed not only to stop bots, but also to provide a humane, understandable experience for people at global scale. ## A Security Interface Seen Everywhere - Turnstile and Challenge Pages are served approximately **7.67 billion times per day**. - Their enormous reach creates a responsibility to support users across: - Different languages and cultures - A wide range of technical abilities - Different ages and accessibility needs - Varying devices, network conditions, and environments - As bot attacks increase, users are encountering verification challenges more frequently: - **2023:** 2.14 billion daily checks - **2024:** 3 billion - **2025:** 5.35 billion - This represented an average year-over-year increase of **58.1%**, making usability increasingly important. ## Auditing the Existing Experience Cloudflare reviewed every state, error message, and interaction in both products. - The audit found no consistent approach to error handling. - Some messages were overly technical and verbose, such as explanations involving incorrect device clocks or cached challenge pages. - Other messages were too vague, such as simply saying “Timed out.” - Layouts, visual hierarchy, and tone varied substantially between states. - User feedback mechanisms used ambiguous options like: - “The widget sometimes fails” - “The widget fails all the time” - These choices required frustrated users to interpret unclear distinctions and produced less useful feedback. - Challenge Pages also contained confusing states, technical jargon, and insufficient guidance about what users should do next. ## Mapping the Complete User Journey The team mapped both successful and unsuccessful paths through the verification experience. - The process covered initial encounters, errors, retries, and escalating frustration. - Designers collaborated with engineers who understood technical edge cases and product specialists who tracked user sentiment. - The team emphasized that technical sophistication does not automatically produce clear communication. - Interfaces needed to work for people with different: - Physical and mental capabilities - Cultural backgrounds - Ages - Levels of technical knowledge - At Cloudflare’s scale, unusual cases are common enough that they cannot be treated as negligible edge cases. ## Establishing a Unified Information Architecture Cloudflare applied the principle from *Don’t Make Me Think*: every moment users spend interpreting an interface creates friction, especially when they are already frustrated. - Previously, Turnstile and Challenge Pages placed information differently across states. - Users had to relearn where to find explanations, actions, and documentation links. - The redesign introduced one shared structure for both products. - Each experience would use: - The same visual hierarchy - Consistent placement for explanatory text - Consistent locations for actions - Consistent placement of documentation links - This approach limited some creative design options, but the team viewed those constraints as useful for improving clarity and consistency. Cloudflare’s redesign treats verification as a human-facing product rather than merely a security mechanism. A consistent structure, clearer messaging, and attention to accessibility can reduce the unnecessary frustration caused by challenges while preserving their protective purpose.

Read original

Accessibility User Experience Bot Detection Web Security+2

grammarlyFeb 5, 2026Original article

Campus-Wide Writing Support Leads to Stronger Student Success at Phoenix College (opens in new tab)

Phoenix College implemented a campus-wide writing support initiative through Grammarly for Education to address academic barriers for its diverse student population, including multilingual learners and working adults. By integrating AI-assisted writing tools directly into existing student workflows and learning management systems, the college aimed to reduce the mechanical grading burden on faculty while improving student literacy. An independent study subsequently confirmed that this "always-on" support led to measurable gains in course completion, retention, and overall GPA across all learning modalities. ### Scaling Support Through Workflow Integration * The college provided campus-wide access to Grammarly for all students and faculty, ensuring the tool functioned in-line within word processors, browsers, and learning management systems. * By meeting students where they already write, the initiative eliminated the friction of learning new platforms or adopting complicated, separate workflows. * The rollout emphasized flexibility, allowing instructors to choose how to integrate the tool into their specific curriculum rather than mandating a uniform pedagogical approach. ### Quantifying Impact on Student Outcomes * An independent study by LXD Research compared 569 Grammarly users with 3,067 non-users in writing-intensive courses during the 2023–2024 academic year. * Data showed a significant lift in course completion across all environments: a 6.4 percent increase for online learners, 5.0 percent for hybrid learners, and 5.2 percent for in-person students. * Beyond completion, the research identified higher year-over-year retention rates and a direct correlation between consistent tool usage and higher student GPAs. ### Shifting Instructional Focus to Higher-Order Skills * Automating mechanical corrections allowed instructors to redirect their feedback toward deeper academic concerns such as content, structure, and discipline-specific thinking. * The tool supported a process-oriented approach to writing, encouraging students to engage in iterative drafting and revision before submitting final work. * Faculty reported significant time savings, enabling them to provide more tailored, meaningful critique to a larger volume of students. ### Strategic Implementation and Adoption * The college utilized a "lead with access" model, ensuring every enrolled student had the same level of support to maintain equity between traditional and non-traditional learners. * Adoption grew organically through peer-to-peer sharing and onboarding resources that demonstrated how to use writing reports for student reflection. * The institution monitored specific "momentum indicators"—such as GPA trends and usage patterns—to identify which student subgroups were benefiting most from the intervention. Phoenix College's experience demonstrates that when writing support is frictionless and embedded within existing digital environments, it creates a scalable model for student success. Institutions looking to replicate these results should prioritize instructor autonomy and focus on tools that complement, rather than disrupt, the established writing process.

Accessibility Grammarly Educational Technology Online Learning+4

googleFeb 5, 20263 min readCurated summary

How AI tools can redefine universal design to increase accessibility

Google Research proposes Natively Adaptive Interfaces (NAI), a framework that uses multimodal and agentic AI to make interfaces adapt to individual users rather than forcing everyone into a fixed design. Developed through co-design with disability communities, NAI aims to reduce the accessibility gap by embedding assistive capabilities directly into products. Early prototypes suggest that personalized, context-aware interfaces can improve experiences for disabled users while also benefiting the broader population. ## Community-led co-design - Google follows the principle “Nothing About Us, Without Us,” involving people with disabilities as co-designers from the beginning. - Partnerships include RIT/NTID, The Arc of the United States, RNID, and Team Gleason. - These collaborations focus on real-world barriers and recognize the expertise of disability communities. - The approach also aims to create employment and economic opportunities for people who help shape the technology. ## Moving from reactive accessibility to adaptive interfaces - Google identifies an “accessibility gap” between the release of new features and the development of compatible assistive tools. - NAI addresses this by making accessibility native to the interface instead of adding it afterward. - Static navigation is replaced with dynamic, agent-driven modules that can interpret context and adjust the experience. ## Multi-system agents - An Orchestrator maintains shared context and delegates tasks to specialized sub-agents. - A Summarization Agent breaks down complex documents and assigns subtasks to expert agents. - A Settings Agent dynamically adjusts interface elements such as text size. - This structure lets users accomplish tasks without navigating complicated menus or searching for the right control. ## Multimodal interaction - Gemini-based prototypes combine voice, vision, and text rather than limiting accessibility to text-to-speech. - Live video can be converted into interactive audio descriptions. - Users can ask follow-up questions about specific visual details as events unfold. - Conversational interaction provides situational awareness and may reduce cognitive load. ## Proven prototypes - **StreetReaderAI** - Supports blind and low-vision users navigating physical spaces. - Combines an AI Describer that analyzes visual and geographic information with an AI Chat system for questions. - Maintains context so users can ask about previously encountered locations, such as the position of a bus stop. - **Multimodal Agent Video Player (MAVP)** - Makes audio description interactive rather than static. - Users can change the level of detail or ask questions during playback. - Uses an offline “dense index” of visual descriptions and retrieval-augmented generation (RAG) for fast responses. - **Grammar Laboratory** - Developed by RIT/NTID with Google.org support for American Sign Language and English learners. - Provides grammar instruction through ASL videos, English captions, spoken narration, and written transcripts. - Uses adaptive AI to customize lessons according to each student’s language preferences and interactions. ## The curb-cut effect - Accessibility features designed for people with significant constraints can benefit many other users. - Voice interfaces created for blind users may help sighted people who are multitasking. - AI synthesis and learning tools designed for people with learning disabilities can also support users who want information presented more clearly or flexibly. - NAI therefore treats accessibility as a source of better universal design, not as a specialized add-on. NAI’s central recommendation is to build accessibility into interfaces from the start, using multimodal AI, persistent context, and community-led design. The most effective systems will adapt to users while remaining accountable to the people whose needs they are intended to serve.

Read original

Accessibility AI Agents Generative AI Gemini+4

tossDec 14, 2025Original article

Painting the Wheels of a Moving Train: (opens in new tab)

Toss Design System (TDS) underwent its first major color system overhaul in seven years to address deep-seated issues with perceptual inconsistency and fragmented cross-platform management. By transitioning to a perceptually uniform color space and an automated token pipeline, the team established a scalable infrastructure capable of supporting the brand's rapid expansion into global markets and diverse digital environments. ### Legacy Issues in Color Consistency * **Uneven luminosity across hues:** Colors sharing the same numerical value (e.g., Grey 100 and Blue 100) exhibited different perceptual brightness levels, leading to "patchy" layouts when used together. * **Discrepancies between Light and Dark modes:** Specific colors, such as Teal 50, appeared significantly more vibrant in dark mode than in light mode, forcing designers to manually customize colors for different themes. * **Accessibility hurdles:** Low-contrast colors often became invisible on low-resolution devices or virtual environments, failing to meet consistent accessibility standards. ### Technical Debt and Scaling Barriers * **Interconnected palettes:** Because the color scales were interdependent, modifying a single color required re-evaluating the entire palette across all hues and both light/dark modes. * **Fragmentation of truth:** Web, native apps, and design editors managed tokens independently, leading to "token drift" where certain colors existed on some platforms but not others. * **Business expansion pressure:** As Toss moved toward becoming a "super-app" and entering global markets, the manual process of maintaining design consistency became a bottleneck for development speed. ### Implementing Perceptually Uniform Color Spaces * **Adopting OKLCH:** Toss shifted from traditional HSL models to OKLCH to ensure that colors with the same lightness values are perceived as equally bright by the human eye. * **Automated color logic:** The team developed an automation logic that extracts accessible color combinations (backgrounds, text, and assets) for any input color, allowing third-party mini-apps to maintain brand identity without sacrificing accessibility. * **Chroma Clamping:** To ensure compatibility with standard RGB displays, the system utilizes chroma clamping to maintain intended hue and lightness even when hardware limitations arise. ### Refined Visual Correction and Contrast * **Solving the "Dark Yellow Problem":** Since mathematically consistent yellow often appears muddy or loses its "yellowness" at higher contrast levels, the team applied manual visual corrections to preserve the color's psychological impact. * **APCA-based Dark Mode optimization:** Utilizing the Advanced Perceptual Contrast Algorithm (APCA), the team increased contrast ratios in dark mode to compensate for human optical illusions and improve legibility at low screen brightness. ### Designer-Led Automation Pipeline * **Single Source of Truth:** By integrating Token Studio (Figma plugin) with GitHub, the team created a unified repository where design changes are synchronized across all platforms simultaneously. * **Automated deployment:** Designers can now commit changes and generate pull requests directly; pre-processing scripts then transform these tokens into platform-specific code for web, iOS, and Android without requiring manual developer intervention. The transition to a token-based, automated color system demonstrates that investing in foundational design infrastructure is essential for long-term scalability. For organizations managing complex, multi-platform products, adopting perceptually uniform color spaces like OKLCH can significantly reduce design debt and improve the efficiency of cross-functional teams.

Accessibility Figma Design Systems Design Tokens+4