This article demonstrates how to assign visual hierarchy to dense link clusters in a DevOps requirement detail view by distinguishing primary task paths from secondary entries, using color, weight, and layout while preserving discoverability across keyboard and touch interactions.
This article details a methodology for organizing UI color systems by distinguishing structural, action, and status colors, covering role assignment, state mapping, scene calibration, and validation checklists to ensure clarity, accessibility, and scalable design consistency across platforms.
This article demonstrates how to improve navigation hierarchy by reducing visual weight of unselected items instead of amplifying the active one, covering contrast ratios, accessibility states, CSS implementation, and a validation checklist for maintaining readability while establishing clear focus.
This case study demonstrates how to adapt auxiliary text colors for a deep blue summary panel, replacing neutral gray with a light blue (#c5e4ff) to achieve a 5.04:1 contrast ratio while maintaining visual hierarchy, with CSS implementation and state verification steps.
As AI tools rapidly produce functional but often inconsistent interfaces, design engineers become essential for establishing taste, implementing judgment into maintainable components, codifying standards, automating quality checks, and preserving human oversight of brand and context.
The article explains how multimodal testing expands traditional automation by synchronously capturing vision, audio, text, sensor and biometric data, detailing concrete use cases, technical stacks, quantitative results, and four engineering challenges with practical solutions for building a digital twin of user interactions.
The lesson extends the CI pipeline with a separate QA audit loop that checks accessibility, internationalization, and performance using Playwright‑axe, i18n‑checker, and Lighthouse CI, and ties the results to a ledger‑based sign‑off process to ensure feature quality for all users.
This lesson extends the CI pipeline with a separate QA audit loop that checks accessibility, internationalisation, and performance, explains why QA must be independent of CI, describes the three‑dimensional audit model, provides concrete Playwright‑axe‑core and i18n‑checker scripts, and shows how to integrate Lighthouse CI and ledger updates for a complete quality sign‑off.
The author recounts using Claude Design to read the code80 homepage code, generate three animation concepts, refine the chosen smart‑routing sketch, and produce a pure‑HTML/CSS terminal animation that integrates seamlessly with existing Vue components while addressing accessibility and deployment issues.
This guide lists eight AI‑powered agent skills for UI designers, explains why the installation order matters, provides concrete CLI commands and example workflows, and shows how these skills turn Claude Code from a code generator into a full‑featured design partner.
The article examines the technical and human challenges of turning a simple IMU‑based head‑controlled wheelchair prototype into a reliable, everyday mobility solution for a high‑level spinal‑injury patient, highlighting sensor noise, environmental variability, user‑specific adaptations, and the broader lesson that engineering should serve concrete, real‑world problems.
Microsoft’s new FocusGroup preview simplifies complex navigation elements for developers, enabling full keyboard operation, faster page loads, and better accessibility compliance with WCAG standards, now available in Edge and contributed to Chromium.
The article explains how software testing is shifting from merely verifying functional requirements to a multidimensional user experience discipline, detailing usability, accessibility, emotional experience, and value perception, and outlining practical methods, data analysis, skill upgrades, and organizational changes needed for this transformation.
The article outlines essential UX testing dimensions for education software—including functional, usability, accessibility, emotional load, and security—while detailing challenges such as multi‑role scenarios, performance demands, and compliance, and proposes agile, AI‑enhanced, cross‑disciplinary approaches and concrete case studies to improve learning outcomes.
The article explains how modern software testing is shifting from simple functional verification to a multidimensional user experience testing approach, covering usability, accessibility, emotional impact, and value perception, and outlines the methods, skill upgrades, and organizational changes needed to adopt this paradigm.
This article presents an AI‑driven accessibility solution that embeds code‑review and automatic fixing into the development workflow, tackles high‑frequency issues such as text reading, focus management and interaction recognition, achieves over 95% fix rates in both testing and production, and outlines future extensions to native and D2C scenarios.
This guide outlines a systematic six‑dimensional usability testing framework—including recognizability, learnability, operability, error protection, visual appeal, and accessibility—provides detailed test scenarios, concrete test‑case examples, expected metrics, a combined testing matrix, key success factors, and a real‑world enterprise collaboration software case study.
The ERNIE Open Innovation Hackathon’s multimodal track showcased a diverse set of award‑winning projects that leveraged the ERNIE‑4.5‑VL model to dramatically shorten video‑production cycles, create audio‑only smartphone assistants for seniors, enable personalized autism‑intervention platforms, generate AI‑driven music for videos, and more, demonstrating the practical impact of multimodal AI across real‑world scenarios.
The QianShou Guanyin project introduces a real-time video sign‑language recognition app that captures hand gestures, instantly translates them into speech, and aims to improve communication efficiency, promote educational equity, and enhance social inclusion for millions of hearing‑ and visually‑impaired people in China.
This article walks through creating a pure‑CSS elevator simulator that uses custom properties, :has() selectors, counters, and aria‑live to model a complete state machine with direction indicators, animated transitions, floor display, and full accessibility without any JavaScript.
This article explains the semantic and practical differences between the CSS declarations border: 0 and border: none, covering their behavior, use‑cases, performance impact, compatibility with older browsers and assistive technologies, and provides code examples for each.
Chrome 135’s CSS Overflow 5 spec introduces the ::scroll-button() and ::scroll-marker() pseudo‑elements, letting developers build over a hundred carousel styles using only CSS, eliminating JavaScript, improving performance, and adding built‑in accessibility features.
This article outlines essential PHP development best practices—including performance optimization, framework utilization, clean coding, security, mobile responsiveness, accessibility, template engines, testing, media optimization, and continuous monitoring—to help businesses build fast, secure, and user‑friendly web applications that drive better engagement and business outcomes.
This article reviews the historical prominence of Element UI, outlines its limitations in modern projects, and explains why the team switched to Radix UI, highlighting Radix's customizability, broad framework support, web‑standard compatibility, and strong accessibility features.
This article explores accessible voice control technology for people with limited hand mobility, detailing its purpose, core concepts, command structures, screen overlay modes, design guidelines, challenges, and future directions such as natural language and multimodal input, while comparing it with VoiceOver and offering practical design recommendations.
This article explores how to make text color automatically adapt to background brightness and how to let users freely customize theme colors while ensuring sufficient contrast, using JavaScript libraries, CSS blend modes, relative color functions, and contrast‑adjustment algorithms.
This article presents ten practical CSS snippets—ranging from content width limits and larger text to balanced headings and reduced motion—each explained with code examples and screenshots to help developers create cleaner, more accessible web pages.
This article examines the hidden environmental costs of digital products and offers practical UI design strategies—covering environmental, social, and economic sustainability—to reduce energy consumption, data waste, and carbon emissions while improving accessibility and user experience.
This article introduces the open‑source Python library TRACC, explains how to install it, prepare destination and travel‑cost data, and walk through a step‑by‑step workflow—including code snippets—to compute potential, passive, and minimum travel‑cost accessibility metrics for urban areas.
CAPTCHAs, originally designed as human‑based computation tools to block bots, have become costly, discriminatory, and largely ineffective security measures that waste billions of dollars annually while providing profit to service providers, prompting a 2024 debate on their continued use.
These 20 practical recommendations guide you in selecting appropriate chart types, setting correct axes, avoiding misleading designs, improving readability, applying suitable color schemes, ensuring accessibility, and choosing the right visualization libraries, helping you create clear, accurate, and insightful data visualizations.
A recent Progress Software report reveals that over half of organizations plan to increase investment in human‑centered software development, highlighting five core pillars, key challenges, and practical recommendations for creating inclusive, user‑focused applications.
Firefox for iOS version 124 stripped the night‑mode setting from half its users in a gray‑scale data‑gathering test, prompting fierce backlash from light‑sensitive users, while the three‑engineer team blamed a deteriorated codebase for the month‑long effort and pledged a full refactor by year‑end despite Apple’s restrictive iOS ecosystem.
shadcn/ui is a rapidly popular, copy‑and‑paste component collection that provides accessible, highly customizable Tailwind‑styled UI elements with a two‑layer architecture, theme editor, dark‑mode support, and CLI, offering simplicity and fine‑grained control while requiring manual integration and careful bundle‑size management.
This guide explains why screen‑reader accessibility matters, outlines WCAG‑based design principles, introduces core concepts, interaction modes, accessibility attributes, and advanced tools like rotors, then provides a step‑by‑step design process, acceptance checklist, and broader integration tips for inclusive mobile UI design.
Vivo’s front‑end team outlines practical accessibility adaptations for H5 Android projects, emphasizing ARIA roles and states, proper tabindex ordering, language attributes, alt text or aria‑label for images, button roles, numeric speech conversion, focus management in dialogs and pickers, and a comprehensive checklist to ensure inclusive mobile experiences.
This article translates the "16 Little UI Design Rules" into practical guidelines, showing how applying spacing, consistency, contrast, typography, and accessibility principles can dramatically improve the usability and visual hierarchy of a short‑term rental property detail page.
This article introduces Chakra UI, explains its core features, advantages, installation steps, and key components—including layout, media, navigation, and form elements—while also covering its drawbacks and providing practical React code examples for developers seeking a fast, accessible UI solution.
The article examines the surge of generative AI, outlining its potential to democratize software interaction through natural‑language prompts while highlighting challenges such as prompt‑engineering complexity, the opaque nature of large language models, and the risk of marginalizing users lacking literacy or GUI‑based control.
This article explains how to create senior‑friendly banking mobile applications by following the "Mobile App Elderly Design Specification", covering entry design, perceptibility, operability, understandability, compatibility, and security, and provides concrete examples from major Chinese banks.
This article examines how enabling system-wide large‑font mode on Android and iOS can distort Webview layouts for driver‑focused apps, presents data on user font‑size usage, compares approaches from other apps, and offers practical CSS and code solutions to reliably disable or adapt to large fonts.
This article presents Ant Security's research on novel biometric methods—brainwave (脑纹) and behavior recognition—detailing their scientific background, data collection, multi‑modal deep‑learning algorithms, adversarial and contrastive training strategies, experimental results, and practical applications for inclusive, secure identity verification.
This article explores the definition, importance, and practical guidelines of age‑friendly design for mobile banking applications, detailing elderly users' visual, auditory, motor, and cognitive challenges, and showing how inclusive design benefits both seniors and the broader user base.
WeChat’s Android accessibility framework abstracts common perceivable, operable, and understandable requirements into reusable rules, automatically enlarges touch targets, generates unified content descriptions, and includes a walk‑through verification service, enabling developers to efficiently implement scalable accessibility features for millions of visually or hearing‑impaired users.
VS Code 1.75 introduces configurable profiles, signed extensions, accessibility upgrades, multi‑view resizing, tree view search history, improved link detection, new Git commands, experimental Dark+ V2 and Light+ V2 themes, Jupyter Notebook support, AI‑assisted code completion via GitHub Copilot, plus numerous UI refinements and language mode updates.
This article explains why people with disabilities heavily use the internet, defines information accessibility, outlines various disability groups, describes focus handling, showcases inclusive design innovations, and provides practical guidance on semantic HTML, ARIA attributes, tabindex, and testing tools for creating accessible web applications.
This guide introduces Monaco Editor—a browser‑based code editor supporting multiple languages—covers how to install it via Git and npm, and details key features such as keyboard navigation, high‑contrast mode, tab capture behavior, and built‑in accessibility help.
This article explains how to create a rational, extensible, and harmonious color system for an enterprise mobile banking app, covering principles, a step‑by‑step workflow, brand color evolution, auxiliary palette generation, WCAG contrast validation, and implementation details for design and development teams.
The article details Youku's comprehensive approach to making its video app accessible, covering unified component specifications, screen‑reader support, extensive testing, scoring mechanisms, content adaptations, and future plans that together create a sustainable, user‑friendly experience for visually impaired users.
The HTML inert attribute is a Boolean property that makes browsers ignore user input, focus, and selection within an element and its children, helping developers create more controlled and accessible user interfaces while being widely supported with a polyfill for older browsers.
This article explains why accessibility is essential for UI component libraries, describes the main types of disabilities, and provides concrete Semi Design guidelines—including color contrast, keyboard navigation, semantic markup, media handling, and layout recommendations—to create inclusive front‑end experiences.
This article explains the importance of inclusive design for B2B products, outlines core design principles, and provides practical strategies based on user research and persona analysis to ensure accessibility for diverse users ranging from young professionals to senior shoppers.
The article explains the concept of inclusive design, its growing importance in product development, the relationship with accessibility, recent governmental initiatives in China, and practical principles for designing B‑to‑B products that cater to diverse user groups such as the elderly and people with disabilities.
The March 24 online forum co‑hosted by Baidu MEUX and the Information Accessibility Society highlighted the current state of app accessibility in China, presented expert research on senior‑friendly design, and outlined concrete actions—ranging from expanding retrofitting to user‑centered standards—to foster an inclusive digital ecosystem for older adults and people with disabilities.
Fastbot is an intelligent automated testing service developed by Quality Lab and GIP iOS Platform Architecture Team, utilizing machine learning and reinforcement learning to improve test coverage and stability, achieving over 100% improvement in problem discovery and code coverage compared to traditional Monkey testing.
This article presents a comprehensive study on how to create senior‑friendly mobile app text layouts by defining ideal font sizes, line heights, and weight combinations through user research, eye‑tracking experiments, and a systematic evaluation framework.
Fastbot, a collaborative AI‑powered testing service from ByteDance’s Quality Lab and GIP iOS platform team, overcomes TestFlight limits by using machine learning and reinforcement learning to automate stability testing, improve code coverage, detect accessibility issues, and streamline result consumption for faster app releases.
This article explores user experience from a front‑end perspective, defining UX, examining the many factors that influence it—including user state, environment, and product features—and outlining practical design considerations such as performance, interaction details, and accessibility to create truly engaging digital products.
Baidu’s AI‑driven sign‑language digital human combines ultra‑accurate speech recognition, specialized translation, and precise gesture‑generation models—backed by extensive motion‑capture data and expert validation—to deliver 24‑hour, high‑fidelity signing for millions of hearing‑impaired users, showcasing inclusive AI communication.
This article walks through the design and implementation of Ant Design Mobile's Picker component, covering its API, gesture handling, animation techniques, performance optimizations, and accessibility improvements for screen‑reader users, while sharing practical code examples and visual diagrams.
This article explores how age‑related changes in the eye—such as lens yellowing, reduced pupil size, and altered cone distribution—affect light and colour perception, and provides practical design recommendations for creating elder‑friendly interfaces and colour schemes.
This case study details the design of the Digital Palace Museum WeChat mini‑program, covering its cultural goals, simplified visual language, clear content categorisation, immersive and warm UI for all ages, AI‑driven voice assistance, AR navigation, and real‑time crowd‑flow features.
This curated collection presents a range of technical articles covering front‑end user experience, 3D visualization, WebGPU vs WebGL performance, React and Node.js advancements, as well as practical guides on unit testing and web accessibility, offering valuable insights for modern web developers.
The article offers a hands‑on guide, drawn from the Shopee WMS rebuild, that improves web user‑experience by optimizing interaction design—applying “Don’t Make Me Think,” appropriate cursor cues, expanded click zones, selective text‑selection, semantic navigation links, and system‑font stacks—and by enforcing accessibility standards such as WCAG contrast ratios, focus‑visible styling, and WAI‑ARIA roles and attributes.
This article provides a detailed overview of iOS UI automation testing, covering XCUITest fundamentals, accessibility considerations, code examples, manual and recorded test case creation, command‑line toolchains, Web Service‑based architecture, and a comparison of Appium and Macaca for building scalable, cross‑platform mobile testing platforms.
This article offers a comprehensive overview of W3C specifications—including HTML, CSS, and accessibility guidelines—explaining their purpose, lifecycle, key working groups, practical usage tips, and how developers can actively contribute to the standards development process.
This guide, based on rebuilding Shopee’s Warehouse Management System front‑end, details how to enhance UX through responsive page layouts, strategic content placement, robust empty‑state and image handling, and purposeful transitions and animations, while emphasizing speed, accessibility, and thoughtful design.
This study investigates the challenges elderly users face when buying medicine on the Ele.me app, conducts usability testing with eight senior participants, identifies visual, cognitive, and interaction barriers, and proposes three design strategies—visual adaptation, what‑you‑see‑is‑what‑you‑get, and minimalism—to create an age‑friendly experience.
This article explains the concept of information accessibility, why it matters for a cleaning‑staff app, the specific barriers faced by older workers, and the design solutions—including optimal font size, adjustable text, color contrast, clear icons, simplified information, and multimodal feedback—that were implemented to create a more inclusive user experience.
Facing a rapidly aging population, Baidu’s Big Font app combines AI‑driven large‑font interfaces, high‑contrast colors, extended audio cues, simplified gestures, and voice‑over features to create an accessible, emotionally supportive mobile experience that addresses seniors’ visual, auditory, motor, and cognitive challenges.
This article explains why accessibility matters for billions of users, outlines common screen‑reader issues, and provides concrete front‑end techniques—including ARIA attributes and auto‑generated code via Imgcook—to ensure mobile and web interfaces are usable by people with visual impairments.
This article explores how the human eye perceives color, explains various color models and color blindness, and shows how these insights can be applied to frontend design, accessibility, and automated color generation for smarter, more inclusive user interfaces.
This article explains the purpose of dark mode, outlines design principles such as layer hierarchy, color contrast, saturation, text opacity, and state representation, and distinguishes dark mode from night mode, providing practical guidelines for creating accessible and visually appealing dark‑theme interfaces.
This article explains the design, presentation modes, precise positioning, keyboard interaction, and technical implementation—including mask handling, popover placement, and React portal usage—of a step‑by‑step guide component for frontend applications, along with code examples and deployment considerations.
This article details the evolution of the Taobao Gold product, the challenges faced during its upgrade to a town-themed experience, and the frontend solutions—including a mixed DOM‑Canvas architecture, layered rendering, animation techniques, performance optimizations, and accessibility implementations for visually impaired users.
Eva.js, an open‑source interactive game engine developed by Alibaba for two years, lets front‑end engineers create low‑cost, high‑performance web games using familiar HTML/CSS and PixiJS rendering, with ECS architecture, performance‑focused loading, accessibility support, and a lightweight state‑management system.
This article details the background, research, identified issues, and step‑by‑step technical solutions—including code examples—for implementing comprehensive accessibility support in the JD Daojia React Native (RN) platform, aiming to enable visually impaired users to complete the full purchase flow.
This article explains how the Taobao interaction team used a custom EVA front‑end solution, optimized page rendering infrastructure, and a global stability strategy to achieve lightning‑quick, fault‑free interactive experiences during Double‑11, while also supporting accessibility and low‑code modal production.
This article explains why accessibility matters for all users, demonstrates how blind users interact with mobile screens, identifies common focus and labeling issues, and provides practical ARIA and ReactNative code patterns plus Imgcook‑driven automation to generate accessible components efficiently.
This post curates a selection of frontend development articles on accessible components, gesture‑driven design, CSS performance tricks, obscure CSS properties, SVG filters, WebAssembly video frame extraction, Notion editor architecture, low‑code/no‑code tools, and front‑end engineering low‑code systems.
This guide explains how to build sign‑in forms that are secure, accessible, and easy to use by leveraging semantic HTML elements, appropriate input attributes, responsive design, password‑visibility toggles, client‑side validation, and real‑user monitoring to reduce abandonment and improve the overall user experience.
This guide outlines essential sign‑in form best practices, covering meaningful HTML elements, proper labeling, attribute usage, mobile‑friendly design, accessibility features, password handling, validation, analytics, and real‑time testing, with code examples to help developers create secure, user‑centric login experiences.
This article aggregates and translates the major 2020 web‑development research—including MDN’s developer needs assessment, HTTP Archive’s state‑of‑the‑web, State of CSS, GitHub Octoverse, Stack Overflow, Angular, JetBrains, WebAIM, and numerous other surveys—to reveal trends in accessibility, documentation, CSS adoption, API usage, and developer satisfaction across the front‑end ecosystem.
This article explains how the EVA system’s 2.5D isometric approach, layered architecture, asset pipeline, and accessibility enhancements enable rapid development and high‑quality rendering of the Gold Coin Town interactive game, complete with code examples and best‑practice guidelines.
This article details Youku's comprehensive accessibility overhaul for its mobile client, describing collaboration with blind‑testing experts, deep technical adaptations across Android, iOS, Weex, Flutter and H5, and specific UI improvements that enable visually‑impaired users to navigate and enjoy video content independently.
This article analyzes the recent cash‑payment refusal incident involving senior citizens, presents the Chinese government's response, and shares in‑depth research on elderly users' challenges and expectations with mobile banking, culminating in four actionable design principles to improve accessibility, control, security, and boundary awareness.
On International Day of Persons with Disabilities, Youku partnered with the China Braille Library to launch an Accessibility Theater, adding screen‑reader support, voice navigation and a color‑blindness mode to its app, and pledging 100 accessible films within three years, making it China’s first video platform offering comprehensive services for visually impaired users.
This article explores why web accessibility matters for interactive applications, outlines the four core A11Y principles, and provides concrete front‑end techniques—semantic HTML, proper alt text, focus management, ARIA usage, color contrast, and testing tools—to create inclusive, user‑friendly experiences.
Alibaba’s Double 11 “Super Star Show Cat” interactive experience achieved ultra‑fast page loads, seamless animation, and zero failures by leveraging a custom EVA front‑end solution, optimized page rendering infrastructure, modular loading, data slimming, accessibility support, and a global stability strategy with device‑level experience grading.
This guide explains why information accessibility matters for billions of users, and provides actionable recommendations for designers on screen‑reader labels, safe color choices, control sizing, readable text, and responsible animation to create inclusive digital experiences.
This article explains how Alibaba’s EVA interactive engine uses an Entity‑Component‑System architecture, editor integration, performance and accessibility optimizations, and Rax‑based components to create a highly extensible, developer‑friendly solution for building engaging game‑like experiences across its ecosystem.
Angular, a Google‑maintained front‑end framework from version 2 onward, offers cross‑platform capabilities such as progressive web apps, native mobile and desktop applications, along with high performance through code generation, server‑side rendering, automatic code splitting, and a rich productivity ecosystem including CLI, IDE support, testing, animation and accessibility tools.
This article explains how DinamicX provides cross‑platform accessibility support for mobile apps, detailing the definitions of accessibility, the technical solutions for iOS and Android, SDK attributes, code examples, validation gates, and the broader vision of making Taobao usable for visually impaired users.
Visual Studio Code 1.45 introduces enhanced syntax highlighting, accessibility options, GitHub authentication, a preview JavaScript debugger, WebAssembly performance boosts, and new editor settings, offering developers a richer, more efficient coding experience across platforms.
This article presents a comprehensive front‑end performance checklist covering network optimizations like OCSP stapling, IPv6 adoption, HTTP/2 deployment, HTTP/3 readiness, HPACK compression, security hardening, testing workflows, continuous monitoring, and quick‑win tactics to dramatically improve page load times and user experience.
This article offers four actionable strategies—color‑blind‑friendly design, meaningful alt text, light/dark mode support, and video subtitles—to make websites more accessible for the billions of users with visual impairments, improving overall user experience and inclusivity.
This article explains how to build an Android Accessibility service to perform black‑box automation testing, compares its advantages and limitations with UiAutomator1.0/2.0, and provides detailed configuration steps and code examples for service setup, event handling, gesture dispatch, and practical testing scenarios.
This article explains how to set up an Android Accessibility Service to perform black‑box automation testing, outlines its advantages over standard UiAutomator frameworks, details configuration steps, code examples, limitations, and provides guidance on selecting appropriate testing solutions.
This article explains why dark mode has become a web design focus, describes system‑level dark/light themes, and provides step‑by‑step CSS and JavaScript solutions—including media queries, custom properties, color‑scheme, filters, mix‑blend‑mode, image handling, and loading strategies—to implement reliable dark mode across browsers.
The article delivers a detailed 117‑page, eleven‑chapter overview of Youku’s full Dark Mode implementation, explaining the motivation, battery and accessibility benefits, design methodology—including color token systems and contrast hierarchy—and the coordinated technical execution across iOS and Android platforms.
