無障礙

無障礙（Accessibility，縮寫 a11y）是現代媒體製作不可忽視的一環。Remotion 影片雖然以程式碼生成，仍然可以透過良好的設計，讓更多人能夠取用你的內容。

字幕與文字說明

為影片加入字幕是最基本的無障礙措施。Remotion 提供了 @remotion/captions 套件，可以幫助你將語音轉文字結果同步顯示在影片中：

import { Caption } from "@remotion/captions";
 
export const SubtitleOverlay: React.FC<{ captions: Caption[] }> = ({
  captions,
}) => {
  const frame = useCurrentFrame();
  const fps = useVideoConfig().fps;
  const currentTimeMs = (frame / fps) * 1000;
 
  const current = captions.find(
    (c) => currentTimeMs >= c.startMs && currentTimeMs < c.endMs
  );
 
  if (!current) return null;
 
  return (
    <div
      style={{
        position: "absolute",
        bottom: 80,
        width: "100%",
        textAlign: "center",
        fontSize: 36,
        color: "white",
        textShadow: "0 2px 4px rgba(0,0,0,0.8)",
      }}
    >
      {current.text}
    </div>
  );
};

色彩對比

確保文字與背景之間有足夠的色彩對比度，是讓低視力使用者也能閱讀內容的關鍵。

WCAG 2.1 的建議標準：

AA 等級：普通文字對比度至少 4.5:1，大型文字至少 3:1
AAA 等級：普通文字對比度至少 7:1

// 良好的對比範例
const goodContrast = {
  backgroundColor: "#000000",  // 黑底
  color: "#ffffff",             // 白字 — 對比度 21:1
};
 
// 不佳的對比範例
const poorContrast = {
  backgroundColor: "#ffff00",  // 黃底
  color: "#ffffff",             // 白字 — 對比度僅約 1.07:1
};

你可以使用 WebAIM 對比度檢查工具來驗證色彩組合。

影片中的替代說明

當影片被嵌入網頁時，可以透過 <Player> 元件的 aria 屬性提供輔助說明：

import { Player } from "@remotion/player";
 
<Player
  component={MyVideo}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  // 提供無障礙標籤
  aria-label="產品介紹影片：展示三款新功能的動畫說明"
/>;

避免閃光效果

頻繁閃爍的動畫可能對患有光敏性癲癇的使用者造成危險。WCAG 建議：

每秒閃光次數不超過 3 次
閃光面積不超過畫面的 10%

// 有問題的閃爍效果
const dangerousFlash = frame % 5 === 0 ? "white" : "black";
 
// 較安全的替代方案：使用緩慢的漸變
const safeAnimation = interpolate(frame, [0, 30], [0, 1]);

音訊的無障礙考量

提供音訊說明（Audio Description）給無法看到畫面的使用者。
確保重要資訊不只依賴聲音傳達——畫面上也應有對應的視覺提示。
若影片有背景音樂，確保旁白音量明顯高於背景音樂（建議至少差 20dB）。

import { Audio } from "remotion";
 
<>
  <Audio src={staticFile("bgm.mp3")} volume={0.2} />
  <Audio src={staticFile("narration.mp3")} volume={1.0} />
</>;

動態效果的尊重

對於在系統層級開啟「減少動態效果」偏好設定的使用者，可以透過 CSS 媒體查詢來調整動畫：

雖然 Remotion 渲染出來的影片無法直接響應作業系統設定，但在 Remotion Player 嵌入網頁時，可以檢測使用者偏好：

const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;
 
const animationDuration = prefersReducedMotion ? 0 : 30;

小結

無障礙項目	建議做法
聽障使用者	加入同步字幕
視障使用者	提供 aria-label 與音訊說明
低視力使用者	確保色彩對比度符合 WCAG AA
光敏使用者	避免每秒 3 次以上的閃爍
動態敏感	尊重 prefers-reduced-motion