接纳失败：构建一个可访问的乐观切换器

乐观 UI 设计是一种强大的设计范式，它通过假设操作将成功来优先考虑用户体验。当用户将“邮件提醒”设为开启时，界面会立即更新，反映预期的状态。如果后端请求失败，UI 通常会恢复到原始状态，让用户和屏幕阅读器用户陷入黑暗。这种无声的失败可能令人沮丧且适得其反，特别是对于依赖辅助技术的用户。本文探讨了如何构建一个可访问的乐观切换器，以优雅地承认失败，确保所有用户都能获得更好的体验。

理解乐观切换器

乐观切换器的核心思想是向用户提供即时反馈，使交互感觉无缝。例如，当用户启用“邮件提醒”时，开关会立即移动到“开启”位置，无论服务器是否成功处理请求。这种方法创造了对速度和效率的积极感知。

然而，这种简单性是有代价的。当后端失败时，UI 通常会重置为之前的状态，没有任何解释。这种行为对屏幕阅读器用户来说尤其成问题，他们可能不明白为什么切换器恢复了。缺乏反馈让他们猜测，可能导致困惑和沮丧。

需要超越布尔值

传统的乐观切换器基于一个简单的布尔值：true 或 false。但这种二元方法无法捕捉用户交互的细微差别。为了创建一个更具包容性和信息量的切换器，我们需要定义四个不同的状态：

待处理（Pending）：操作正在进行中，UI 应反映这一点以防止进一步交互。
成功（Success）：操作成功完成，UI 应保持在新的状态。
错误（Error）：操作失败，UI 应解释原因并提供重试选项。
初始（Initial）：任何操作之前默认的状态。

通过结合这四个状态，我们可以创建一个能与所有用户（包括使用屏幕阅读器的用户）更有效沟通的切换器。

实现可访问的切换器

为了实现可访问的乐观切换器，我们将结合使用 HTML、CSS 和 JavaScript。让我们逐步分解这个过程。

第一步：定义 HTML 结构

首先，我们将创建切换器的基本 HTML 结构。这包括开关本身，以及用于显示消息和加载指示器的元素。

<div class="toggle-container">
  <label for="email-toggle" class="toggle-label">邮件提醒</label>
  <input type="checkbox" id="email-toggle" class="toggle-input">
  <span class="toggle-indicator"></span>
  <div class="toggle-message" aria-live="polite"></div>
</div>

第二步：使用 CSS 样式化切换器

接下来，我们将使用 CSS 样式化切换器，使其看起来美观且直观。我们将使用 CSS 创建开关并处理不同的状态。

.toggle-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-label {
  margin-right: 10px;
  font-size: 16px;
}

.toggle-input {
  display: none;
}

.toggle-indicator {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.3s;
}

.toggle-input:checked + .toggle-indicator {
  background-color: #4caf50;
}

.toggle-input:checked + .toggle-indicator::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: left 0.3s;
}

.toggle-input:checked + .toggle-indicator::after {
  content: '✔️';
  position: absolute;
  left: 15px;
  top: 5px;
  color: white;
  font-size: 12px;
}

.toggle-message {
  margin-left: 10px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}

.toggle-message.visible {
  opacity: 1;
}

第三步：添加 JavaScript 处理状态

现在，让我们添加 JavaScript 逻辑来管理四个状态：待处理、成功、错误和初始。

const toggleInput = document.getElementById('email-toggle');
const toggleMessage = document.querySelector('.toggle-message');

toggleInput.addEventListener('change', async () => {
  toggleMessage.textContent = '';
  toggleMessage.classList.remove('visible');

  // 设置待处理状态
  toggleInput.disabled = true;
  toggleMessage.textContent = '正在更新...';
  toggleMessage.classList.add('visible');

  try {
    // 模拟 API 调用
    await simulateApiCall();

    // 设置成功状态
    toggleMessage.textContent = '邮件提醒已开启！';
    toggleMessage.style.color = 'green';
  } catch (error) {
    // 设置错误状态
    toggleMessage.textContent = '更新失败。请重试。';
    toggleMessage.style.color = 'red';
  } finally {
    // 重置为初始状态
    toggleInput.disabled = false;
  }
});

async function simulateApiCall() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟 50% 成功或失败的概率
      const isSuccess = Math.random() > 0.5;
      if (isSuccess) {
        resolve();
      } else {
        reject(new Error('API 请求失败'));
      }
    }, 1000);
  });
}

第四步：增强可访问性

为了确保切换器完全可访问，我们需要考虑屏幕阅读器和键盘导航。以下是一些改进：

ARIA 属性：使用 ARIA 属性为辅助技术提供额外的上下文。
键盘支持：确保切换器可以使用键盘操作。

<div class="toggle-container" role="switch" aria-checked="false" tabindex="0">
  <label for="email-toggle" class="toggle-label">邮件提醒</label>
  <input type="checkbox" id="email-toggle" class="toggle-input" aria-hidden="true">
  <span class="toggle-indicator"></span>
  <div class="toggle-message" aria-live="polite"></div>
</div>

toggleInput.addEventListener('keydown', (event) => {
  if (event.key === ' ') {
    event.preventDefault();
    toggleInput.click();
  }
});

toggleInput.addEventListener('click', () => {
  const isChecked = toggleInput.checked;
  toggleMessage.textContent = isChecked ? '邮件提醒已开启！' : '邮件提醒已关闭。';
  toggleMessage.style.color = isChecked ? 'green' : 'red';
});

优雅地处理失败

乐观 UI 的关键挑战之一是有效地处理失败。当后端请求失败时，用户应被告知并可以选择重试。以下是如何改进我们的切换器以优雅地处理错误的方法：

显示错误消息

当 API 调用失败时，我们向用户显示错误消息。此消息应清晰且可操作。

catch (error) {
  toggleMessage.textContent = '更新失败。请重试。';
  toggleMessage.style.color = 'red';
}

重试机制

为了使体验更好，我们可以添加一个重试按钮，允许用户再次尝试操作。

<button class="retry-button" aria-label="重试">重试</button>

const retryButton = document.createElement('button');
retryButton.textContent = '重试';
retryButton.className = 'retry-button';
retryButton.addEventListener('click', () => {
  toggleInput.click();
});
toggleMessage.appendChild(retryButton);

记录错误

为了调试目的，将错误记录到服务器或控制台至关重要。这有助于开发人员识别和修复问题。

console.error(error);

结论

构建一个可访问的乐观切换器需要一个平衡速度和清晰度的深思熟虑的方法。通过结合四个不同的状态——待处理、成功、错误和初始——我们可以创建一个既高效又包容的用户体验。这种方法确保所有用户（包括使用屏幕阅读器的用户）都能获得清晰的反馈，并有机会优雅地纠正失败。

关键要点

一个可访问的乐观 UI 不仅仅是快速的成功路径；它是在透明地承认和解决失败。通过提供有意义的反馈和可操作的选项，我们可以构建不仅高效而且尊重所有用户的界面。

Embracing Failures: Building an Accessible Optimistic Toggle

Optimistic UI design is a powerful paradigm that prioritizes user experience by assuming actions will succeed. When a user toggles "Email alerts" on, the interface updates immediately, reflecting the intended state. If the backend request fails, the UI typically flips back to the original state, leaving the user and screen-reader users in the dark. This silent failure can be frustrating and counterproductive, especially for users who rely on assistive technologies. This article explores how to build an accessible optimistic toggle that acknowledges failures gracefully, ensuring a better experience for all users.

Understanding the Optimistic Toggle

The core idea behind an optimistic toggle is to provide immediate feedback to the user, making the interaction feel seamless. For example, when a user enables "Email alerts," the switch moves to the "on" position instantly, regardless of whether the server processes the request successfully. This approach creates a positive perception of speed and efficiency.

However, this simplicity comes at a cost. When the backend fails, the UI often resets to the previous state without any explanation. This behavior can be particularly problematic for screen-reader users, who may not understand why the toggle reverted. The lack of feedback leaves them guessing, potentially leading to confusion and frustration.

The Need for More Than a Boolean

A traditional optimistic toggle operates on a simple Boolean value: true or false. But this binary approach doesn't capture the nuances of user interactions. To create a more inclusive and informative toggle, we need to define four distinct states:

Pending: The action is in progress, and the UI should reflect this to prevent further interactions.
Success: The action completed successfully, and the UI should remain in the new state.
Error: The action failed, and the UI should explain why and provide an option to retry.
Initial: The default state before any action is taken.

By incorporating these four states, we can create a toggle that communicates more effectively with all users, including those using screen readers.

Implementing the Accessible Toggle

To implement an accessible optimistic toggle, we'll use a combination of HTML, CSS, and JavaScript. Let's break down the process step by step.

Step 1: Define the HTML Structure

First, we'll create the basic HTML structure for the toggle. This includes the switch itself, along with elements to display messages and loading indicators.

<div class="toggle-container">
  <label for="email-toggle" class="toggle-label">Email alerts</label>
  <input type="checkbox" id="email-toggle" class="toggle-input">
  <span class="toggle-indicator"></span>
  <div class="toggle-message" aria-live="polite"></div>
</div>

Step 2: Style the Toggle with CSS

Next, we'll style the toggle to make it visually appealing and intuitive. We'll use CSS to create the switch and handle the different states.

.toggle-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-label {
  margin-right: 10px;
  font-size: 16px;
}

.toggle-input {
  display: none;
}

.toggle-indicator {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.3s;
}

.toggle-input:checked + .toggle-indicator {
  background-color: #4caf50;
}

.toggle-input:checked + .toggle-indicator::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: left 0.3s;
}

.toggle-input:checked + .toggle-indicator::after {
  content: '✔️';
  position: absolute;
  left: 15px;
  top: 5px;
  color: white;
  font-size: 12px;
}

.toggle-message {
  margin-left: 10px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}

.toggle-message.visible {
  opacity: 1;
}

Step 3: Add JavaScript to Handle States

Now, let's add the JavaScript logic to manage the four states: pending, success, error, and initial.

const toggleInput = document.getElementById('email-toggle');
const toggleMessage = document.querySelector('.toggle-message');

toggleInput.addEventListener('change', async () => {
  toggleMessage.textContent = '';
  toggleMessage.classList.remove('visible');

  // Set pending state
  toggleInput.disabled = true;
  toggleMessage.textContent = 'Updating...';
  toggleMessage.classList.add('visible');

  try {
    // Simulate an API call
    await simulateApiCall();

    // Set success state
    toggleMessage.textContent = 'Email alerts enabled!';
    toggleMessage.style.color = 'green';
  } catch (error) {
    // Set error state
    toggleMessage.textContent = 'Failed to update. Please try again.';
    toggleMessage.style.color = 'red';
  } finally {
    // Reset to initial state
    toggleInput.disabled = false;
  }
});

async function simulateApiCall() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulate a 50% chance of success or failure
      const isSuccess = Math.random() > 0.5;
      if (isSuccess) {
        resolve();
      } else {
        reject(new Error('API request failed'));
      }
    }, 1000);
  });
}

Step 4: Enhance Accessibility

To ensure the toggle is fully accessible, we need to consider screen readers and keyboard navigation. Here are a few improvements:

ARIA Attributes: Use ARIA attributes to provide additional context to assistive technologies.
Keyboard Support: Ensure the toggle can be operated using the keyboard.

<div class="toggle-container" role="switch" aria-checked="false" tabindex="0">
  <label for="email-toggle" class="toggle-label">Email alerts</label>
  <input type="checkbox" id="email-toggle" class="toggle-input" aria-hidden="true">
  <span class="toggle-indicator"></span>
  <div class="toggle-message" aria-live="polite"></div>
</div>

toggleInput.addEventListener('keydown', (event) => {
  if (event.key === ' ') {
    event.preventDefault();
    toggleInput.click();
  }
});

toggleInput.addEventListener('click', () => {
  const isChecked = toggleInput.checked;
  toggleMessage.textContent = isChecked ? 'Email alerts enabled!' : 'Email alerts disabled.';
  toggleMessage.style.color = isChecked ? 'green' : 'red';
});

Handling Failures Gracefully

One of the key challenges of an optimistic UI is handling failures effectively. When the backend request fails, the user should be informed and given the option to retry. Here's how we can improve our toggle to handle errors gracefully:

Displaying Error Messages

When the API call fails, we display an error message to the user. This message should be clear and actionable.

catch (error) {
  toggleMessage.textContent = 'Failed to update. Please try again.';
  toggleMessage.style.color = 'red';
}

Retry Mechanism

To make the experience even better, we can add a retry button that allows the user to attempt the action again.

<button class="retry-button" aria-label="Retry">Retry</button>

const retryButton = document.createElement('button');
retryButton.textContent = 'Retry';
retryButton.className = 'retry-button';
retryButton.addEventListener('click', () => {
  toggleInput.click();
});
toggleMessage.appendChild(retryButton);

Logging Errors

For debugging purposes, it's essential to log errors to a server or console. This helps developers identify and fix issues.

console.error(error);

Conclusion

Building an accessible optimistic toggle requires a thoughtful approach that balances speed and clarity. By incorporating the four distinct states—pending, success, error, and initial—we can create a user experience that is both efficient and inclusive. This approach ensures that all users, including those using screen readers, receive clear feedback and have the opportunity to correct failures gracefully.

Takeaway

An accessible optimistic UI is more than just a fast happy path; it's about acknowledging and addressing failures transparently. By providing meaningful feedback and actionable options, we can build interfaces that are not only efficient but also respectful of all users.

构建一个可访问的乐观切换按钮，它能够承认自己错了