캔버스 기반 제품에 접근성 구축

비디오 게임과 유사하게, Figma의 캔버스는 성능을 극대화하기 위해 브라우저의 렌더링 기능을 넘겨받습니다. 이를 통해 무한 확대/축소와 실시간 멀티플레이어와 같은 강력한 기능을 제공할 수 있습니다. 하지만 Figma의 캔버스를 렌더링하는 데 기존의 HTML과 DOM을 사용하지 않기 때문에, 브라우저에 기본적으로 내장된 접근성 기능을 전혀 사용할 수 없습니다.

더 많은 사람들이 Figma에 접근할 수 있게 하기 위해, 모든 Figma 디자인과 동기화 상태를 유지할 수 있는 미러 DOM 구조를 만들었습니다. 여기에서는 어떻게 누구나 스크린 리더로 Figma 파일을 탐색하고, 변경 사항이 발표될 때 들을 수 있으며, 키보드로 편집기를 조작할 수 있도록 만들었는지 그 비하인드 스토리를 살펴볼 것입니다.

Figma의 키보드 및 스크린 리더 접근성 개선 사항에 대해 자세히 알아보세요.

DOM 합성

브라우저 엔진은 접근성 트리라는 개념을 가지고 있습니다. 이는 문서에서 추출된 데이터 구조로, 보조 기술의 작동에 필요한 비시각적 정보를 포함하고 있습니다. 스크린 리더 사용자가 "다음 입력 필드로 이동" 명령을 실행하면, 접근성 트리는 스크린 리더에 이동할 위치를 알려줍니다. 브라우저는 DOM, 의미론적 HTML, ARIA 속성 및 몇 가지 추가적으로 계산된 상태를 바탕으로 이 접근성 트리를 구축합니다.

일반적인 웹 앱에서는 모든 컴포넌트가 <button>, <p>, 또는 <img> 같은 자체적인 DOM 요소를 가집니다. 하지만 Figma는 렌더링에 HTML을 사용하지 않기 때문에, 캔버스는 디자인에 얼마나 많은 레이어가 있든지 간에 포커스를 유지하는 <input> 요소만을 가집니다. 이에 따라, 브라우저의 접근성 트리가 Figma 파일에 대해 사실상 비어 있었습니다.

이 문제를 해결하기 위해, 캔버스에 합성 DOM 요소를 다시 추가하여 스크린 리더가 파일을 탐색하고 편집할 수 있도록 했습니다.

시스템 작동 방식

비시각장애인 사용자의 눈에는 보이지 않지만, 캔버스 뒤에서는 보조 기술에 중요한 씬그래프의 일부를 미러링하는 DOM 요소를 렌더링합니다. 여기에는 네 개의 협력 시스템이 있습니다.

• 모든 디자인 레이어의 접근성 세부 정보를 캐시하고, 편집이 이루어질 때마다 처음부터 다시 구축하는 대신 정밀한 업데이트를 수행하는 Figma 내부의 "접근성 트리".
• 내부의 접근성 트리를 참조하여 실제로 요소를 DOM에 넣는 역할을 담당하는 "미러 DOM" React 컴포넌트.
• 선택에 대한 양방향 동기화 시스템. 캔버스에서 노드를 선택하면, 해당 DOM 요소가 포커스를 받습니다. 반대로, 스크린 리더 도구가 미러 DOM을 탐색할 때는 캔버스 선택이 업데이트됩니다.
• 편집 내용이나 탐색 이외의 변경 사항(예: 미세 조정, 도구 전환 등 비시각장애인 사용자는 쉽게 알아차릴 수 있는 변경 사항)을 사용자에게 알려 주는 안내 시스템.

내부 접근성 트리

어떤 DOM 요소를 어떻게 렌더링할지 결정하기 위해, 브라우저가 접근성 트리를 만들려면 무엇을 알아야 하는지부터 역방향으로 작업했습니다. 그래서 당사는 특정 Figma 문서에서 스크린 리더가 필요로 할 비시각적 정보를 캡처하는 자체 내부 접근성 트리를 구축했습니다.

문서의 각 레이어마다 스크린 리더가 읽어 줄 "접근성 요약"을 생성합니다. 이 요약은 컨텍스트 및 사용자가 사용 중인 애플리케이션의 종류에 따라 달라질 수 있습니다. 예를 들어, 프로토타입에서는 대부분의 편집 기능을 생략하고, 텍스트 필드의 텍스트나 클릭 인터랙션 항목의 버튼 역할만 제공하는 등 최종 사용자에게 콘텐츠만 재현할 수 있습니다. 반면에, 프로토타입의 접근성 트리에서 제외된 자동 레이아웃 프레임은 사용자가 문서를 편집할 때 포함되어야 합니다.

레이어를 하나씩 요약한 후에는 트리를 위에서 아래로 훑어가며 생략된 노드들을 평면화합니다. 문서를 처음 로드할 때는 내부 접근성 트리를 완전히 구축하지만, 세션이 진행됨에 따라 편집 내용을 모니터링하여 비용이 많이 드는 재구축을 피하면서 트리를 정밀하게 업데이트합니다.

미러 DOM

접근성 트리가 준비되면 DOM을 생성할 수 있습니다. 이는 스스로를 재귀적으로 렌더링하는 React 컴포넌트에 의해 처리되며, 컴포넌트의 각 인스턴스는 하나의 특정 디자인 레이어에 대한 접근성 트리의 변경 사항을 구독합니다.

function ScreenReaderElement({ layerId }: { layerId: string }) {
  const { label, role, children } = useAccessibleSummary(layerId);
  return <div role={role} ariaLabel={label}>
    {children.map((c) => <ScreenReaderElement key={c} layerId={c}>)}
  </div>
}

편집 내용을 추적하기 위해 접근성 트리를 최소한 점진적으로 변경하듯이 React를 활용하여 DOM 수정도 최소한으로 유지합니다.

미러 DOM의 한 가지 놀라운 점은 이러한 접근 가능하지만 시각적으로 숨겨진 콘텐츠에 대해 전형적인 시각적 숨김 스타일링을 사용하지 않는다는 것입니다. 이러한 기술은 페이지 레이아웃에 영향을 주지 않으면서 보조 기술이 콘텐츠를 해석할 수 있도록 해주지만, 실제로 미러 DOM 요소들이 레이아웃되어 있어야 합니다. 그 이유는 Figma 문서의 공간적 레이아웃이 그 의미에 중요한 역할을 하기 때문이며, 시각적 표시가 없어도 이러한 요소들의 위치는 보조 기술에 반영됩니다. 예를 들어 스크린 확대기는 포커스된 요소를 화면에 유지하기 위해 이동할 수 있으며, 스크린 리더는 저시력 사용자를 위해 고대비 윤곽선을 렌더링할 수 있으며, 음성 제어 도구도 화면에 안내 표시를 띄울 수 있습니다.

그 위치 계산에는 몇 가지 단계가 있습니다. Figma 디자인의 모든 레이어에는 오프셋, 크기 조정 및 회전을 추적하는 고정 크기 데이터 구조인 아핀 변환(affine transform)이 적용됩니다. 아핀 변환은 여러 변환을 하나의 변환으로 연결할 수 있기 때문에 컴퓨터 그래픽에서 강력한 도구입니다. Figma는 이러한 기능을 사용하여 회전이나 기울임까지 포함한 미러 DOM 내의 요소들을 CSS를 통해 배치합니다.

포커스와 선택을 일치시키기

위의 기능들을 통해, Figma는 스크린 리더로 프로토타입 및 다른 "게시된" 콘텐츠를 탐색하는 것을 지원할 수 있습니다. 다음 단계는 Figma에서 "편집" 애플리케이션 탐색을 지원하는 것이었습니다. 이를 위해, 보통 브라우저가 대신 처리하는 또 다른 것, 즉 보조 기술이 연결될 수 있는 선택 및 포커스 의미론을 다시 추가해야 했습니다.

Figma 캔버스를 탐색할 때, Tab 키를 누르면 시스템 키보드 포커스는 바꾸지 않으면서 선택된 노드를 변경합니다. 이는 스크린 리더에서 캔버스 전체가 하나의 커다란 탐색 대상처럼 보였다는 것을 의미했습니다. 사용자가 기대하는 대로 포커스가 캔버스 내부의 선택된 노드로 이동하도록 해야 했습니다.

그래서 우리는 미러 DOM 시스템에 캔버스 선택과 시스템 키보드 포커스 간의 양방향 동기화를 구축했습니다. 캔버스를 클릭하면 스크린 리더에 맞는 항목이 포커스가 맞춰지며, 스크린 리더 동작으로 포커스를 이동하면 표시되는 선택 하이라이트도 업데이트됩니다. 이 시스템 덕분에, VoiceOver 로터와 같은 스크린 리더 제어 기능도 Figma 캔버스에서 노드를 선택할 수 있게 되었습니다.

작업 및 변경 사항 알림

내부 접근성 트리와 미러 DOM 시스템은 Figma 파일의 콘텐츠를 보조 기술에 제공합니다. 그러나 애플리케이션이 사용자의 작업을 다시 확인해 주어야 하는 편집 과정에서는 이러한 도구만으로 충분하지 않습니다. 비시각장애인 사용자는 쉽게 알아차릴 수 있는 미세 이동과 같은 제스처도 음성으로 안내할 수 있는 텍스트 정보를 제공해야 합니다. 이 문제를 해결하는 방법은 한 가지뿐입니다. 웹 브라우저가 ARIA 표준의 일부로 제공하는 라이브 영역을 사용하는 것입니다.

Figma의 구현에서는 제품의 모든 토스트 알림에 라이브 영역 마크업을 추가하며, 비시각장애인 사용자에게는 불필요한 소음으로 인식될 수 있는 이벤트에 대해 보이지 않는 알림을 지원합니다. 예를 들어, 대부분의 사용자는 화살표 키 미세 조정 때마다 토스트 팝업이 뜨는 것을 유용하다고 생각하지 않겠지만, 이 알림들은 접근성을 위해서 매우 중요합니다. 또한 자동 "병합"도 처리합니다. 만약 동일한 카테고리의 여러 이벤트가 짧은 시간 내에 발생하면, 이를 병합할 수 있습니다. 다시 화살표 키 미세 조정을 예로 들면, 1픽셀을 연속으로 다섯 번 이동하면 "1픽셀 이동함"을 다섯 번 반복하는 대신 "5픽셀 이동함"이라는 안내를 한 번만 보낼 수 있습니다.

현재 구현된 것과 앞으로 진행할 것

Figma의 접근성을 높이기 위한 우리의 노력은 몇 년에 걸쳐 성장해 왔으며, Fable과의 파트너십을 통해 보조 기술 사용자들의 피드백을 바탕으로 만들어졌습니다. 2022년에 프로토타입 뷰어로 시작하여 2023년 FigJam으로 이어졌으며, 마침내 2024년과 2025년에 걸쳐 중요한 진전을 이루어냈습니다. Design, Dev Mode, Slides에 스크린 리더에 맞게 콘텐츠 조정 설정을 적용했고, 캔버스 키보드 제어 기능의 첫 번째 버전을 출시했으며, 향상된 대비 모드를 추가하고 15가지가 넘는 접근성 중심 개선 사항을 만들어 냈습니다.

우리는 새로운 제품을 디자인하고 구축하며 및 출시하는 방식에 접근성을 통합하고 있습니다. 모든 새로운 기능은 접근성을 지원하는지 검토를 받으며, 또한 팀은 Figma 전용 컨텍스트와 디자인 시스템 팀 지침을 갖춘 AI 에이전트 등의 내부 도구에 투자하여 Figma 제품 개발 조직 전체에 걸쳐 접근성 관련 컨텍스트를 확대할 수 있도록 돕고 있습니다.

우리는 또한 사용자가 Figma에서 접근 가능한 제품을 더 쉽게 만들 수 있도록 지원하고자 합니다. 현재 여러분은 색상 선택기에서 어떤 색상 조합이 접근성 가이드라인을 충족하는지 파악할 수 있으며, 표시되는 레이어 이름을 변경하여 해당 이름을 스크린 리더에 전달할 수 있습니다. 그리고 최근에는 디자이너가 디자인 시스템과 비교하여 문제가 있는 부분을 파악하고 한 번의 클릭으로 수정할 수 있는, Figma Design의 새로운 기능인 디자인 확인을 출시했습니다. 여기에는 엔지니어링으로 핸드오프하기 전에 대비가 낮은 부분을 플래그 표시하고, WCAG 2.0 AA 또는 AAA를 준수하는 색상을 제안하는 것이 포함됩니다.

접근성 개선 작업은 결코 완전히 끝나지 않습니다. 각각의 개선은 또 다른 장벽을 제거하는 데 도움이 되며, 보다 많은 사람이 창작 과정에 참여하고, 자신의 아이디어를 공유하며, 우리 모두가 사용하는 제품을 만들 수 있도록 합니다. 우리는 더 접근성 높은 미래를 향해 계속해서 듣고, 배우며 구축해 나갈 것입니다.