As frontend developers, we’ve all used border-radius countless times. It’s simple, it works, and it’s supported everywhere. But have you ever noticed that heavily rounded corners on larger UI elements look… off? Not quite as polished as you’d expect in a premium application?

The issue isn’t with your design skills—it’s mathematics.

Standard CSS border-radius creates circular arcs with constant curvature. At the point where this curved corner meets the straight edge, there’s a discontinuity—the curvature jumps abruptly from zero to 1/r. While this is barely noticeable on small elements, it becomes increasingly jarring at larger sizes, creating a harsh, “cut off” appearance rather than a smooth, organic flow.

Enter squircles—the smooth rounded rectangles that Apple has used throughout iOS since 2013. In this article, I’ll walk you through implementing true squircles in React using CSS Houdini’s Paint API, sharing the technical decisions and mathematical foundations behind our TabSwitcher component.

What Exactly Is a Squircle?

The term “squircle” is a portmanteau of square + circle, but the mathematics behind it are far more elegant than the name suggests.

Mathematical Foundation: The Superellipse

Squircles belong to a family of curves called superellipses (also known as Lamé curves), named after French mathematician Gabriel Lamé (1795-1870).

General Formula:

|x/a|ⁿ + |y/b|ⁿ = 1

Where:

• a and b are the semi-major and semi-minor axes

• n is the exponent that determines the curve’s character

The Shape Spectrum:

• n = 1: Diamond (rhombus)

• n = 2: Circle or ellipse

• n ≈ 4: Squircle (most common in UI)

• n = 5.2: Apple’s iOS icon shape (with modifications)

• n → ∞: Rectangle with sharp corners

The magic happens around n = 4. At this value, you get a shape that:

• Has variable curvature that tightens as it approaches the corner’s deepest point

• Gradually approaches zero curvature where it meets the straight edges

• Creates a mathematically continuous, smooth transition

• Looks more “natural” and “organic” to the human eye

Why Apple Chose Squircles

When Apple redesigned iOS 7 in 2013, they made a conscious decision to use squircles for every app icon and UI element. Their reasoning?

1. Visual Harmony: Squircles maintain better visual balance across different element sizes

2. Organic Feel: The variable curvature mimics curves found in nature

3. Premium Perception: The subtle sophistication signals attention to detail

4. Scalability: Works equally well at 40px and 400px

This wasn’t just a design fad—it became an industry standard. Today, failing to use smooth corners can make an interface feel dated or “cheap” to users familiar with iOS.

The CSS Houdini Solution

So how do we implement squircles on the web? CSS alone can’t create superellipse curves—it’s limited to circles and ellipses for corner rounding. We need something more powerful.

Enter CSS Houdini Paint API

The CSS Houdini Paint API (officially the CSS Painting API Level 1) allows JavaScript to programmatically generate images that are integrated directly into the browser’s rendering engine. Think of it as a way to extend CSS with custom drawing logic.

Key Characteristics:

• Worklets: Lightweight scripts that run during the render pipeline, off the main thread

• Thread-safe: Designed for parallelism (browsers create 2+ instances)

• First-cycle rendering: Included in initial paint, no FOUC (Flash of Unstyled Content)

• Hardware-accelerated: Leverages GPU where available

The Workflow:

1. Load worklet    →    2. Register paint    →    3. Use in CSS    →    4. Browser renders
   (once, in HTML)        (automatic)              (via custom properties)    (on each frame)

Browser Support Reality Check

Native Support (as of 2024):

• ✅ Chrome/Edge 65+ (March 2018)

• ✅ Opera 52+

• ✅ Safari 15.4+ (March 2022)

• ❌ Firefox (not yet supported, but polyfill available)

For production use, this covers ~85% of global browser traffic (excluding Firefox). The good news? Squircles degrade gracefully—unsupported browsers simply show elements without the mask, maintaining functionality.

Implementation: TabSwitcher Component

Let’s dive into the actual implementation. Our TabSwitcher component creates an iOS-style segmented control with smooth animated transitions between tabs.

Step 1: Load the Squircle Worklet

First, we load the css-houdini-squircle library in our public/index.html:

<!-- public/index.html -->
<head>
  <!-- ... other head content ... -->

  <!-- CSS Houdini Squircle -->
  <script>
    if (”paintWorklet” in CSS) {
      CSS.paintWorklet.addModule(
        “https://www.unpkg.com/css-houdini-squircle/squircle.min.js”
      );
    }
  </script>
</head>

Key points:

• Feature detection: “paintWorklet” in CSS checks for support

• CDN loading: Using unpkg for automatic updates and caching

• Early loading: In <head> before render to ensure worklet is available

• Size: ~3-5KB minified (negligible performance impact)

Step 2: The Container

The outer container establishes the tab switcher’s overall shape:

// src/assets/uiComponents/Navigations/TabSwitcher.js

<div
  className=”inline-flex items-center gap-0.5 p-1 relative bg-gray-200”
  role=”tablist”
  style={{
    maskImage: ‘paint(squircle)’,
    WebkitMaskImage: ‘paint(squircle)’,
    ‘--squircle-radius’: ‘8px’,
    ‘--squircle-smooth’: ‘0.35’
  }}
>

Breakdown:

• maskImage: ‘paint(squircle)’: Invokes our custom paint worklet

• WebkitMaskImage: Webkit prefix for Safari compatibility

• --squircle-radius: 8px: Corner radius (similar to border-radius)

• --squircle-smooth: 0.35: Smoothness factor (0.1 = subtle, 1.0 = dramatic)

The maskImage property applies the squircle shape as a mask—anything outside the squircle boundary becomes transparent.

Step 3: The Sliding Indicator

This is where it gets interesting. The active tab indicator uses a different smoothness value for visual emphasis:

<div
  className=”absolute h-8 shadow-sm transition-transform duration-500 ease-in-out”
  style={{
    background: accentColor,
    maskImage: ‘paint(squircle)’,
    WebkitMaskImage: ‘paint(squircle)’,
    ‘--squircle-radius’: ‘6px’,
    ‘--squircle-smooth’: ‘0.45’,  // More pronounced than container!
    width: `calc((100% - ${(tabs.length - 1) * 2}px - 8px) / ${tabs.length})`,
    transform: `translateX(calc(${activeTab} * 100% + ${activeTab * 2}px))`,
  }}
/>

Design Decisions:

1. Smaller radius (6px vs 8px): Creates a subtle inset effect—the indicator sits comfortably within the container

2. Higher smoothness (0.45 vs 0.35): The active indicator has more pronounced smooth corners, making it feel more “special” and drawing focus

3. Dynamic width calculation: Accounts for gaps between tabs (2px each) and container padding (8px total)

4. Transform-based animation: Smooth 500ms sliding using CSS transforms (hardware-accelerated)

Step 4: The Tab Buttons

{tabs.map((tab, index) => {
  const isActive = activeTab === index;
  return (
    <button
      key={tab?.id || index}
      onClick={() => setActiveTab(index)}
      className={`relative z-10 flex items-center justify-center gap-1.5
        whitespace-nowrap border-none bg-transparent h-8 px-3 w-auto
        transition-colors duration-300 ease-in-out overflow-hidden ${
        isActive ? “text-white” : “text-gray-400 hover:text-gray-600”
      }`}
      role=”tab”
      aria-selected={isActive}
      title={tab?.label}
    >
      <span className=”text-base”>{tab?.icon}</span>
      <span className={`text-xs font-medium whitespace-nowrap
        transition-[max-width] duration-500 ease-in-out ${
        isActive || showLabelsOnInactive ? ‘max-w-full’ : ‘max-w-0’
      }`}>
        {tab?.label}
      </span>
    </button>
  );
})}

Technical highlights:

• z-10: Ensures buttons sit above the sliding indicator

• Color transitions sync with indicator animation (300ms vs 500ms for subtle lag effect)

• Label expansion uses max-width transition (more performant than width: auto)

• Proper ARIA attributes for accessibility

Complete Component

Here’s the full TabSwitcher component:

const TabSwitcher = ({
  tabs = [],
  activeTab,
  setActiveTab,
  accentColor = “#3b82f6”,
  showLabelsOnInactive = false
}) => {
  return (
    <div className=”flex items-center justify-start w-full px-6 py-2”>
      {/* Container with squircle mask */}
      <div
        className=”inline-flex items-center gap-0.5 p-1 relative bg-gray-200”
        role=”tablist”
        style={{
          maskImage: ‘paint(squircle)’,
          WebkitMaskImage: ‘paint(squircle)’,
          ‘--squircle-radius’: ‘8px’,
          ‘--squircle-smooth’: ‘0.35’
        }}
      >
        {/* Sliding background with enhanced squircle */}
        <div
          className=”absolute h-8 shadow-sm transition-transform duration-500 ease-in-out”
          style={{
            background: accentColor,
            maskImage: ‘paint(squircle)’,
            WebkitMaskImage: ‘paint(squircle)’,
            ‘--squircle-radius’: ‘6px’,
            ‘--squircle-smooth’: ‘0.45’,
            width: `calc((100% - ${(tabs.length - 1) * 2}px - 8px) / ${tabs.length})`,
            transform: `translateX(calc(${activeTab} * 100% + ${activeTab * 2}px))`,
          }}
        />

        {/* Tab buttons */}
        {tabs.map((tab, index) => {
          const isActive = activeTab === index;
          return (
            <button
              key={tab?.id || index}
              onClick={() => setActiveTab(index)}
              className={`relative z-10 flex items-center justify-center gap-1.5
                whitespace-nowrap border-none bg-transparent h-8 px-3 w-auto
                transition-colors duration-300 ease-in-out overflow-hidden ${
                isActive ? “text-white” : “text-gray-400 hover:text-gray-600”
              }`}
              role=”tab”
              aria-selected={isActive}
              title={tab?.label}
            >
              <span className=”text-base”>{tab?.icon}</span>
              <span className={`text-xs font-medium whitespace-nowrap
                transition-[max-width] duration-500 ease-in-out ${
                isActive || showLabelsOnInactive ? ‘max-w-full’ : ‘max-w-0’
              }`}>
                {tab?.label}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default TabSwitcher;

Usage:

import TabSwitcher from ‘@/assets/uiComponents/Navigations/TabSwitcher’;

function ExpenseManagement() {
  const [activeTab, setActiveTab] = useState(0);

  const tabs = [
    { id: 1, label: “All”, icon: <FilterIcon /> },
    { id: 2, label: “Pending”, icon: <ClockIcon /> },
    { id: 3, label: “Approved”, icon: <CheckIcon /> }
  ];

  return (
    <TabSwitcher
      tabs={tabs}
      activeTab={activeTab}
      setActiveTab={setActiveTab}
      accentColor=”#10b981”
      showLabelsOnInactive={false}
    />
  );
}

Understanding the Parameters

The css-houdini-squircle library exposes several CSS custom properties:

–squircle-radius

Type: <length> (px, rem, em, etc.)
Default: 8px
Supports: 1-4 values (like padding)

Controls the corner radius size, similar to border-radius.

‘--squircle-radius’: ‘12px’              // All corners
‘--squircle-radius’: ‘12px 8px’          // Top/bottom, left/right
‘--squircle-radius’: ‘12px 8px 12px 8px’ // Top, right, bottom, left

–squircle-smooth

Type: <number>
Default: 1
Range: 0.1 to 1.0

Controls the smoothness of the curve—essentially how “squircle-y” it is.

Visual effect:

• 0.1-0.2: Minimal smoothing, closer to circular corners

• 0.3-0.4: Balanced, professional smoothness (our choice)

• 0.5-0.7: Pronounced smooth effect

• 0.8-1.0: Maximum squircle effect, very soft corners
  

Individual Corner Control

For asymmetric designs:

‘--squircle-radius-top-left’: ‘12px’
‘--squircle-radius-top-right’: ‘12px’
‘--squircle-radius-bottom-left’: ‘4px’
‘--squircle-radius-bottom-right’: ‘4px’

Advanced: Outline Mode

Instead of mask mode, you can use squircles as strokes:

style={{
  background: ‘paint(squircle)’,
  ‘--squircle-radius’: ‘10px’,
  ‘--squircle-smooth’: ‘0.5’,
  ‘--squircle-outline’: ‘2px’,  // Stroke width
  ‘--squircle-fill’: ‘#3b82f6’  // Stroke color
}}

Design Philosophy: When to Use Squircles

Squircles aren’t a wholesale replacement for border-radius. Strategic use is key.

✅ Use Squircles When:

1. Prominent UI elements - Cards, modals, panels that are focal points

2. Large rounded corners - Where border-radius discontinuity becomes visible (typically >12px radius)

3. iOS-style interfaces - Especially if targeting iPhone users or matching iOS design language

4. Premium, polished feel - When attention to detail signals quality

5. Animated elements - The smooth curves look better in motion

Examples from our codebase:

• TabSwitcher navigation (primary interaction element)

• ExpenseDetails panels (large containers with 20px radius)

• Table headers (subtle premium touch)

❌ Use Standard border-radius When:

1. Small elements - Buttons, badges, chips with <6px radius (difference is imperceptible)

2. Maximum browser compatibility - If you can’t use a polyfill for Firefox

3. Performance-critical - Low-end devices or hundreds of elements

4. Utility components - Internal tools, admin panels where aesthetics are secondary

Our Hybrid Approach

Our codebase has 239 occurrences of border-radius across 54 files, but only 3 files use squircles. This demonstrates strategic enhancement:

• Hero components and primary interactions get squircles

• Utility elements and less prominent components use border-radius

• Balances performance, compatibility, and visual excellence

Performance Considerations

The Good News

1. Off-Main-Thread Rendering: Worklets run in parallel with your JavaScript—no blocking

2. Hardware Accelerated: Browser’s rendering engine handles the worklet, GPU acceleration where available

3. First-Paint Inclusion: No Flash of Unstyled Content (FOUC)

4. Better Than Alternatives: More performant than SVG masks, clip-path, or multiple DOM elements

Potential Concerns

1. Initial Load: ~3-5KB worklet download (one-time, cached)

2. Bezier Calculations: More complex than simple border-radius, but negligible on modern devices

3. Browser Support: Requires feature detection and fallback strategy

Performance Testing Results

In our testing:

• No measurable FPS impact on 60fps animations (our 500ms tab transitions remain smooth)

• Negligible CPU overhead compared to border-radius

• No increase in paint time for our use case (3-10 squircle elements per page)

Recommendation: Use squircles freely for visible elements, but avoid on:

• Frequently re-rendered elements (e.g., scroll-synchronized animations with 100+ items)

• Low-end device targets

• Server-side rendered critical content (though it works, border-radius is safer)

Behind the Scenes: How the Worklet Works

For the technically curious, here’s what’s happening inside the css-houdini-squircle worklet:

Internal Algorithm

1. Distance Scaling: All radii are multiplied by 1.8 internally

   • This constant creates the characteristic squircle curve

   • Different from border-radius which uses 1:1 ratio

2. Bezier Approximation: The superellipse curve is approximated using canvas bezierCurveTo() methods

   • The --squircle-smooth parameter controls bezier control point distance

   • Value is multiplied by 10 for curve calculation

3. Constraint Validation:

   • Maximum radius automatically capped to prevent overflow

   • Auto-constrains to half the smallest dimension if needed

Simplified pseudo-code:

// Inside the paint worklet (conceptual)
class SquirclePainter {
  paint(ctx, geom, properties) {
    const radius = properties.get(’--squircle-radius’);
    const smooth = properties.get(’--squircle-smooth’);

    // Scale radius for squircle effect
    const scaledRadius = radius * 1.8;

    // Calculate bezier control points
    const controlDistance = smooth * 10;

    // Draw path with bezier curves
    ctx.beginPath();
    ctx.moveTo(scaledRadius, 0);

    // Top right corner
    ctx.bezierCurveTo(
      geom.width - controlDistance, 0,
      geom.width, controlDistance,
      geom.width, scaledRadius
    );

    // ... other corners ...

    ctx.closePath();
    ctx.fill();
  }
}

Real-World Impact: Why This Matters

The Subtle Power of Details

Design is a compounding game. Individual refinements might seem trivial, but they accumulate to create an overall perception of quality. Users might not consciously notice your squircles, but they’ll feel the difference.

Studies in design psychology show that:

• Softer, organic curves reduce visual stress and feel “warmer”

• Attention to subtle details signals trustworthiness and professionalism

• Consistency with familiar patterns (iOS) creates subconscious comfort

Industry Adoption

Squircles have moved from Apple-exclusive to industry standard:

• Blinkit (Indian grocery delivery) implemented continuous corners across their iOS app

• Figma has built-in corner smoothing (value of 60 replicates iOS squircles)

• Modern design systems increasingly specify squircles for premium products

The W3C Proposal

There’s active discussion (CSSWG Issue #10653) to add native squircle support to CSS:

/* Proposed syntax */
border-radius: 8px smooth(0.6);

The fact that this is under consideration shows squircles aren’t a fad—they’re becoming a web standard.

Practical Implementation Checklist

Before shipping squircles to production:

Setup

• Add worklet loading to index.html with feature detection

• Test in Chrome/Edge, Safari, and Firefox (for fallback)

• Verify no console errors in unsupported browsers

• Check CDN caching is working (Network tab should show 304 on reload)

Implementation

• Use maskImage and WebkitMaskImage for compatibility

• Start with conservative smoothness values (0.3-0.4)

• Test various element sizes to find optimal radius

• Ensure proper stacking context (z-index) for layered squircles

Performance

• Profile with Chrome DevTools Performance tab

• Verify animations run at 60fps

• Test on low-end devices or throttled CPU

• Limit usage to <20 squircle elements per page initially

Accessibility

• Confirm no impact on screen readers (squircles are purely visual)

• Verify keyboard navigation still works

• Check color contrast isn’t affected by mask

Fallback

• Design graceful degradation for Firefox (normal rectangles okay?)

• Consider css-paint-polyfill if Firefox support critical

• Document browser support in your design system

Advanced Variations

Nested Squircles

Create depth with layered squircles at different smoothness levels:

<div style={{
  maskImage: ‘paint(squircle)’,
  ‘--squircle-radius’: ‘20px’,
  ‘--squircle-smooth’: ‘0.3’
}}>
  <div style={{
    maskImage: ‘paint(squircle)’,
    ‘--squircle-radius’: ‘16px’,
    ‘--squircle-smooth’: ‘0.5’  // Inner layer is smoother
  }}>
    Content
  </div>
</div>

Asymmetric Corners

Different radii for visual hierarchy:

style={{
  maskImage: ‘paint(squircle)’,
  ‘--squircle-radius-top-left’: ‘20px’,
  ‘--squircle-radius-top-right’: ‘20px’,
  ‘--squircle-radius-bottom-left’: ‘4px’,
  ‘--squircle-radius-bottom-right’: ‘4px’,
  ‘--squircle-smooth’: ‘0.4’
}}

Animation-Aware Smoothness

Increase smoothness during animations for more dramatic effect:

const [isAnimating, setIsAnimating] = useState(false);

<div style={{
  maskImage: ‘paint(squircle)’,
  ‘--squircle-radius’: ‘12px’,
  ‘--squircle-smooth’: isAnimating ? ‘0.7’ : ‘0.35’,
  transition: ‘--squircle-smooth 300ms ease-out’
}}>

Note: CSS custom property transitions aren’t widely supported yet, but this technique works in Chrome/Edge.

Comparing Approaches

Alternative Methods We Considered

Before settling on CSS Houdini, we evaluated other approaches:

1. SVG Masks

<svg style={{ position: ‘absolute’, width: 0, height: 0 }}>
  <defs>
    <clipPath id=”squircle”>
      <path d=”M...” />
    </clipPath>
  </defs>
</svg>
<div style={{ clipPath: ‘url(#squircle)’ }}>...</div>

❌ Requires manually calculating SVG paths for each size
❌ Additional DOM elements
❌ Harder to make responsive

2. Canvas-Based Rendering

const drawSquircle = (ctx, x, y, w, h, r) => {
  // Manual bezier curve calculations
};

❌ Requires React canvas library
❌ Breaks semantic HTML
❌ Accessibility issues

3. Multiple Border-Radius Elements

<div className=”corner-tl” />
<div className=”corner-tr” />
{/* ... 4 corner elements ... */}

❌ DOM bloat
❌ Complexity
❌ Still uses circular arcs

CSS Houdini won because it’s:

• ✅ Dynamic and responsive

• ✅ Clean, semantic HTML

• ✅ Performant (off-main-thread)

• ✅ Easy to maintain

• ✅ Future-proof (potential native support)

Conclusion: Small Details, Big Impact

Implementing squircles in our TabSwitcher component was more than a visual upgrade—it was a statement about our commitment to craft. In an industry where “good enough” often wins, these subtle refinements separate premium products from mediocre ones.

Key Takeaways:

1. Squircles are mathematically superior for visual continuity—variable curvature beats constant curvature

2. CSS Houdini makes them practical for production with off-main-thread rendering

3. Strategic use matters—enhance primary elements, not everything

4. Browser support is solid for 85%+ of users, with graceful degradation

5. The industry is moving this direction—W3C proposal, Figma support, iOS ubiquity

The css-houdini-squircle library weighs just 3-5KB and requires minimal setup. For the visual polish it provides, that’s an exceptional ROI.

As we continue building modern web applications, we should ask: why settle for the limitations of circular corners when we can deliver the organic smoothness users have come to expect from premium interfaces?

Resources & Further Reading

Implementation:

• css-houdini-squircle on npm

• CSS Paint API Specification

• CSS Paint Polyfill (Firefox support)

Theory:

• The Squircle Curve - Pavel Laptev

• Superellipse on Wikipedia

• iOS Corner Radius - Figma Research

W3C Discussion:

• CSSWG Issue #10653: Add ‘corner-smoothing’ to CSS

Design Philosophy:

• Apple’s iOS 7 Design Changes

• Why iOS App Icons Are Squircles

Subscribe now

Stay up-to-date

You won’t have to worry about missing anything. Every new edition of the newsletter goes directly to your inbox.

Join the crew

Be part of a community of people who share your interests by joining our Slack Community.

Web accessibility has become more crucial since the internet has become a necessity for daily life. Making web information and apps usable by persons with disabilities, such as visual, auditory, or motor impairments, is referred to as accessibility.

Everyone can have equal access to information and services on the internet if accessibility is kept in mind. Web accessibility is crucial because utilizing the internet presents considerable challenges for those with disabilities.

People with motor disabilities may need assistive technology like speech recognition software to interact with web material, whereas people with visual impairments may rely on screen readers to browse websites. These people may encounter difficulties and be unable to access vital information and services online without effective accessibility.

The significance of web accessibility, recommended practices for producing accessible web content, and how to test your website for accessibility are all covered in this article.

The Importance of Web Accessibility

In addition to being required by law, web accessibility is also morally right. You can guarantee that everybody, regardless of their capabilities, may access the information and services you offer by making your website accessible.

Additionally, accessible websites can broaden your audience, boost user interaction, and increase search engine rankings.

Recommended practices

The Web Content Accessibility Guidelines (WCAG) are a detailed list of suggestions for making sure that all users can access content on the web. The recommendations are broken up into four main groups: Perceivable, Operable, Understandable, and Robust.

Perceivable
Assuring all users that web material is perceivable is called “perception.” You should provide captions for movies, alternative text for photos, and transcripts for audio recordings. Users who have trouble seeing can benefit from using colors with a lot of contrast and avoiding content that flashes or flickers.

Operable
“Operable” refers to making web information simple for all users to use. For instance, giving keyboard shortcuts, staying away from pop-ups, and using clear, succinct links might make it simpler for visitors with motor disabilities to use your website.

Understandable
Making sure that web material is understandable for all users. Users with cognitive impairments can benefit from strategies including utilizing plain language, minimizing jargon, and offering directions for challenging tasks.

Robust
Being robust implies making sure that web information can be accessed by a variety of hardware and software. For instance, ensuring that assistive technology can correctly comprehend web content requires utilizing acceptable HTML and avoiding proprietary technologies.

Web accessibility testing:

A website that is inclusive and accessible to users with disabilities must undergo web accessibility testing.

Manual Testing
Manual testing is one of the best techniques to check for web accessibility. Testing your website with assistive technology like screen readers, speech recognition programs, and keyboard-only navigation is part of this process.

You can find accessibility problems that automated methods might miss if you test with assistive technologies. Even though manual testing takes time, it offers insightful feedback and can point out usability problems that automated methods might overlook.

To gain input on your website’s accessibility, you can also interact with actual people who have disabilities.

Automated Testing
You can rapidly and effectively find accessibility problems with the aid of automated testing. The Web Accessibility Evaluation Tool (WAVE) and the Accessibility Insights for Web Browser plugin are two automated tools that may check your website for accessibility concerns. These tools can spot problems including missing form labels, inappropriate heading layout, and missing alternate text for photos.

Although automated testing can assist you in finding accessibility problems, it’s crucial to remember that it cannot replace manual testing. Automated tools might overlook some problems and signal false positives.

User Testing
Testing your website with actual people who have disabilities is known as user testing. User testing can offer insightful input on the usability and accessibility of your website. It can assist you in finding problems that manual testing or automated techniques might miss.

Depending on your requirements and budget, user testing can be carried out locally or remotely. Through advocacy organizations, social media, or websites that link usability testers and people with disabilities, you can find potential users with disabilities.

Conclusion

Modern web development must include web accessibility as a key component. You can make sure that all users can access your content and services by adhering to accessibility requirements and evaluating your website for accessibility.

Because of this, your community might grow, and your search engine rankings might go up. We can increase inclusivity and guarantee that everyone has equal access to online resources by making the web more accessible.

The post Web Accessibility: A Key to Inclusivity and Diversity appeared first on THE IMW POST.

1. Background

As we know from repeated Indian Supreme Court Rulings that lack of a valid arbitration clause is a clear ground for challenging the arbitration award and nullifying the full arbitration process.

What makes the clause invalid, especially in the context of online arbitration? Autonomy is the cornerstone of an arbitration process, and not getting clear consent to an arbitration clause from the customer, makes the arbitration clause null and void.

Most of our clients are switching to Online Arbitration Clauses by amending their Terms and Conditions or Dispute Resolution Policy on their respective websites, where consents are taken through clickwrap agreements.

Understanding how the courts assess online agreements is a crucial way to protect your business from risk. Yet 34% of online agreements were not enforced in court thanks to nonoptimal screen design, lack of evidence, and/or poor version control. How can your company design online agreements for enforceability?

What are Clickwrap Agreements?

A clickwrap contract is a popular type of a digital contract. It is an agreement which is between a user and a company. A user must click a box or button before they download content, make a purchase, or use a website. The Salient features of Clickwrap Contracts are:

• Clickwrap Contracts are unilateral Contracts. They contain standard terms and conditions which multiple users online agree on before using the websites or products.

• Unique identification of Clickwrap Contract are buttons like:

• I accept

• I agree

• Ok

• I consent

• Clickwrap Contracts usually relate to terms and conditions, usage, privacy related terms, or End-user license Contracts (EULS).

• Users can opt-out of the contract by clicking on the cancel button, I disagree, or by closing the sites.

Enforceability of Clickwrap Agreements

Foreign

• Feldman v. Google, Inc. – 513 F. Supp. 2d 229 (E.D. Pa. 2007)

While upholding the enforceability of the Clickwrap Contract court presented with “reasonable notice of the terms and manifested assent of the Contract.” While Plaintiff argued that he did not enter into any kind of contract with the defendant, the court held that there could be no purchase without agreeing to the terms and conditions of the Contract while purchasing the advertisement “Adwords” program.

• Specht v. Netscape Communications Corporation, 306 F.3d 17 (2d Cir. 2002)

Court held in the present case that Clickwrap Contracts are enforceable only when they are clearly and conspicuously posted on the website whereas in the present case Netscape posted the Contract inconspicuously.

• Hotmail Corporation v. Van Money Pie, 1998 WL 388389 (N.D.Cal.)

In this case, the court held that clicking on the “I agree” button at the end of the terms and conditions leads to the enforceability of the Clickwrap contracts.

       Indian Scenario

• Trimex International FZE v. Vedanta Aluminium Limited 

In this case, the court upheld that if the terms of a Contract had been discussed over the email, such emails constituted to be a valid contract and hence were enforceable.

• Ddit(lt) Mumbai v. Gujarat Pipavav Port ltd:

In this case, the Income tax tribunal held that Unconscionable or unreasonable bargain (contract adhesion) in Mass contracts like Shrinkwrap and Clickwraps makes them unenforceable even though they have all the components of a valid contract.

In India, under the Indian Contract act, 1872, the definition of Contract doesn’t cover any kind of E-contracts or the Clickwrap Contracts. In India, we have the Information Technology Act, 2000 under which E-contracts are given recognition by section 10-A (w.e.f 27-11-2009) and also through United Nation Commission on International Trade Law (UNCITRAL Model on E-commerce) validates electronic signature but doesn’t cover under its ambit terms as I agree, I accept or Ok. Whereas Section 65-B of the Indian Evidence Act, 1872 provides a procedure for furnishing electronic documents but this provision has nowhere been used in the context of Clickwrap or another kind of such Contract. Therefore Clickwrap Contracts cannot be said to be ‘electronically signed’ in the Indian context.

But so far, no Supreme Court ruling in India has held that Clickwrap Contracts are not valid in India.

The above-mentioned case laws very well outline that Clickwrap contracts are enforceable in the court of law but their enforceability depends majorly upon the question of whether the consent was taken freely and actively or not. While all the Clickwrap contracts can be enforced in court if they tick all the essentials of a valid contract, it can be seen that this kind of contract has got more sanctions internationally than in the Indian Scenario.

How to design the correct Clickwrap Agreement so that the Arbitration Clause cannot be challenged later?

From various international litigations, we can draw some of the best practices we can use to make the Clickwrap Contracts enforceable:

1. Active consent by the user: It is one of the best practices that the user can follow. The user must click on ‘I agree’, ‘Ok’ or ‘I accept’ button or ‘click on it’. The websites should not pre-check the box as the assent from the user must come actively.

2. Give reasonable notice before termination of services: The user should be informed about the TOS in clear words like Terms and Conditions, Privacy Policy, User Contract must be written in a font that is understandable by the user. Clear notice of the Contract makes the Contract enforceable in a Court of law.

3. Contracts should be easily understood by laymen:The websites or software providers should remember that not every person will understand the legal terms of the Contract. Once clickwrap Contracts need to be written in a way that someone without a background in privacy can read, comprehend, and give informed consent to. The site should clearly tell its users to read the TOS to its users.

4. Revised Conditions should be rechecked:The TOS of the Clickwrap Contract if revised should be made to agree by the user again so that the user is aware of the new terms of services.

5.  Specific Consent should be highlighted from the rest of the documents: I think to remember the service provider is that if they ask for permission for things like using users personal information, use it for marketing purposes, in such cases the TOS for such should be distinguishable.

6.  Documentation: One of the most important parts of enforcing the Clickwrap Contract is managing the record as to when the consent was taken and on what version the consent was given. Unless we are unable to prove who accepted the Contracts and which version(s) of the Contract was accepted, then the Clickwrap Contract is not likely to be enforceable.

7. Screen Design of the terms and conditions: It is best practice to keep the layout of the screen before designing a Click Wrap Contract :Simple and uncluttered.The entire screen shall be seen at one time.

   Use language which is easily understandable by the user.

   Never use a contrasting color

Conclusion

According to Clickwrap Litigation Trends Report (available here), more than 75 percent of Clickwrap agreements are enforced. Other 25 percent are not enforced due to lack of reasonable notice, lack of clear assent or just poor design making it difficult to understand the terms and conditions.

If you are an enterprise looking to incorporate Online Arbitration Clauses through a clickwrap agreements, it is imperative to follow the above-mentioned practices to ensure they are held enforceable in the court of law.

The post How to ensure that Online Arbitration Clauses are Valid? appeared first on THE IMW POST.

The new mediation bill puts the term conciliation under the definition of “mediation”.

“4. ―Mediation means a process, whether referred to by the expression mediation, pre-litigation mediation, online mediation, conciliation, or an expression of similar import, whereby parties request a third person or persons (―the mediator‖) to assist them in their attempt to reach an amicable settlement of the dispute.”

Practice

Insurance companies prefer arbitration over conciliation.

The post n9 appeared first on THE IMW POST.

General Electric (GE), one of the world leaders in power generation, was one of the early corporates to innovate with their legal strategy.

In GE, it wouldn’t be enough for a lawyer to win a case for the company, if the

time, expense, and publicity outweighed the gain. The goals were:

• Quick resolution of disputes

• Inexpensive resolution of disputes

• Minimal waste of executive and management time

• Reduced damage to important business relationships

• Minimized uncertainty of results

Practice

While designing dispute systems, it is imperative to understand the context and goals of the business.

The post n8 appeared first on THE IMW POST.

The following characteristics of a dispute resolution process can enhance the perception of procedural justice in ODR-

• Opportunity for voice-They got a chance to present their views, concerns, evidence to a third party

• Third-party considered their views, concerns, and evidence

• Third-party treated them in a dignified manner, the process itself was dignified.

• Party perception about your even-handedness and attempt at fairness

Practice

Life insurance companies do not have institutional arbitration processes, but they use an ombudsman mechanism to resolve their disputes.

The post n7 appeared first on THE IMW POST.

3 common definitions of Online dispute resolution (ODR) –

• ODR is a public-facing digital space in which parties can convene to resolve their dispute or case.

• ODR is the use of Information and Communication Technology (ICT) to resolve disputes.

• ODR is not a what, it is a how.

Practice

ODR is a legal process recognized (read “encouraged”) by courts and govt which helps you settle your disputes online.

The post n6 appeared first on THE IMW POST.

Emotional benefits of using ODR-

• Reduce Power Imbalance

• Easy to take a break

• Easy to reschedule

• Can switch from video to audio

• Can have a quick sidebar with any party at any time

• Moderate volume, if people are too loud

Practice

Resolving disputes is not easy across the world.

The post n5 appeared first on THE IMW POST.

While designing online dispute systems, it is imperative to have an online library of solutions. Whenever stakeholders are stuck at an impasse, they can leverage the outside information from this library and reach a resolution.

Practice

Pre-Arbitration/Notice of Invocation/Section 21 is a prerequisite for initiating the arbitration.

Section 21 performs an important function of forging such consensus on several aspects viz. the scope of disputes, the determination of which disputes remain unresolved, which disputes are time-barred, identification of claims and counter-claims, and most importantly, on the choice and procedure of appointment of the arbitrator. Without such notice, the arbitration proceedings which are commenced would be unsustainable in law.

If the above-mentioned ingredients are covered, even a Loan Recall Notice (LRN) can function as a pre-arbitration notice.

The post n4 appeared first on THE IMW POST.

The 7 stages of negotiation are-

1) Preparation and setting goals,

2) Initial interaction and offers,

3) Exchanging and refining information,

4) Bargaining,

5) Move towards closure,

6) Reach impasse/agreement, and

7) Finalize the agreement

Practice

Imagine, a simple notice covering all these 7 stages.

The post n3 appeared first on THE IMW POST.

The 5 stages of recovering from conflict are-

Denial- conflicts are like mirrors, exposes your own weaknesses,

Acceptance- accept the possibility that you are part of the problem,

Sacrifice- not mandatory to have a change of heart

Leap of Faith- movement

Renewal/Healing- It does not mean as good as before the conflict-but better, more wholesome, more compassionate, better beings. If you have such a fundamental change, it is less likely that you face the same conflict again in life. But if not, the conflict will keep returning.

Practice

In 60 minutes, 50,000+ Online Lok Adalat awards were generated on the Sama platform. Furthermore, 4 lakh cases were filed in an hour.  Also, when working at scale, it is important to minimize the human element as much as possible. One error in inputting data can have a huge impact.

The post n2 appeared first on THE IMW POST.