Apple WebKit 2025 접근성 업데이트: 동적인 웹에서의 접근성 지원을 향한 발전
들어가며
안녕하세요. 엔비전스 입니다.
2025년 9월, Apple은 iOS 26, iPadOS 26, macOS 26 Tahoe, 그리고 visionOS 26을 정식 출시하며 WebKit 엔진의 접근성 기능을 강화했습니다. 이번 업데이트는 단순한 버그 수정을 넘어, 모바일 인터페이스 및 모던 웹에 대응해 접근성을 보장하는 주요한 수단들이 포함되어 있다고 할 수 있습니다.
글을 본격적으로 시작하기 전 변화된 Apple의 운영체지 등의 버전 번호 체계를 언급하고 넘어갈 필요가 있겠습니다. 전반적으로 애플의 접근성 업데이트 내용을 정리한 지난 글에서 언급했듯 WWDC 2025에서 Apple은 모든 운영체제의 버전을 연도 기반으로 통일했습니다. Safari는 기존 18.x 버전에서 26.x로 대폭 상승했고, 모든 OS 버전이 이제 2025-2026 릴리스 시즌을 나타내는 "26"으로 맞춰졌습니다. 이는 플랫폼을 기술적으로 더 긴밀하게 연계하는 동시에 개발자들이 플랫폼 간 호환성을 더 쉽게 파악할 수 있도록 돕는 전략적 변화입니다.
이번 글에서는 지난 번 다룬 애플 접근성 내용에서 한걸음 나아가 웹 콘텐츠를 렌더링하고 관리하는 Webkit에 초점을 맞추어 업데이트된 접근성 내역을 자세히 살펴보겠습니다. WebKit 접근성 업데이트의 주요 개선 사항은 다음과 같습니다:
- WAI-ARIA 명세 준수 강화: aria-expanded, aria-setsize, aria-posinset 등 핵심 ARIA 속성의 버그 수정 및 지원 확대
- 이미지 접근성 개선: 장식용 이미지 처리 방식 개선 및 figcaption 요소의 접근 가능한 이름 계산 로직 최적화
- VoiceOver 통합 향상: 동적 콘텐츠 인식, 줄바꿈 출력, CSS content 속성 대체 텍스트 안내 등
- 키보드 내비게이션 자동화: 오프스크린 라디오 버튼 자동 스크롤 및 Popover API 기본 키보드 지원
- 새로운 CSS 접근성 기능: contrast-color() 함수, text-wrap: pretty, 스크롤 기반 애니메이션의 prefers-reduced-motion 지원
그렇다면 지금부터 각 영역별로 어떤 구체적인 개선이 이루어졌는지 자세히 살펴보겠습니다.
WAI-ARIA
WebKit의 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 구현이 더욱 견고해졌습니다. 특히 동적 웹 애플리케이션에서 자주 사용되는 ARIA 속성들의 버그가 수정되고, 최신 ARIA 1.3 명세에 맞춰 안정화되었습니다
Note: 운영체제와 Webkit 엔진 업데이트 초기인 만큼 스크린 리더와 상호작용하는 데에 있어 아직까지 상당히 불안정한 모습을 보입니다. 이 점을 참고해 주십시오.
aria-setsize와 aria-posinset 지원 개선
이번 업데이트에서 주목할 만한 개선 중 하나는 aria-setsize와 aria-posinset 속성의 처리 방식입니다. #151113693 참조. 이 두 속성은 보조 기술 사용자가 목록이나 트리 구조에서 현재 위치를 파악하는 데 필수적입니다. 이 속성들이 올바르게 동작하도록 수정되었습니다.
aria-setsize는 전체 항목의 개수를 나타내고, aria-posinset는 현재 항목의 위치를 나타냅니다. 예를 들어, 무한 스크롤이나 가상화된 목록처럼 모든 항목이 DOM에 동시에 존재하지 않는 경우에 특히 유용합니다.
Noter: 현재 "aria-setsize"는 아직까지 Safari 26에서 올바르게 동작하지 않습니다. 버그 수정이 완료되면 별도의 채널을 통해 알려드리겠습니다.
<h2 id="search-results">검색 결과</h2>
<ul role="list" aria-labelledby="search-results">
<!-- 전체 1000개 중 1-10번째 항목만 렌더링 -->
<li role="listitem" aria-setsize="1000" aria-posinset="1">
첫 번째 검색 결과
</li>
<li role="listitem" aria-setsize="1000" aria-posinset="2">
두 번째 검색 결과
</li>
<!-- ... -->
<li role="listitem" aria-setsize="1000" aria-posinset="10">
열 번째 검색 결과
</li>
</ul>
이제 Safari 26에서는 잘못된 값(음수, 문자열, 범위 초과 등)이 입력되더라도 예측 가능한 방식으로 처리되어, Voiceover가 항상 안정적으로 목록 정보를 전달할 수 있습니다. 이는 특히 동적으로 콘텐츠가 추가되는 소셜 미디어 피드나 검색 결과 페이지에서 중요한 개선입니다.
aria-expanded 버그 수정
내비게이션 링크에서 aria-expanded 속성이 제대로 작동하지 않던 문제가 해결되었습니다Bug #141163086. 이 버그는 특히 메가 메뉴나 아코디언 형태의 내비게이션에서 문제를 일으켰습니다.
이전 버전에서는 다음과 같은 코드가 VoiceOver에서 제대로 인식되지 않는 경우가 있었습니다:
<nav>
<a href="#" aria-expanded="false" aria-controls="submenu-products">
제품 소개
</a>
<ul id="submenu-products" hidden>
<li><a href="/iphone">iPhone</a></li>
<li><a href="/ipad">iPad</a></li>
<li><a href="/mac">Mac</a></li>
</ul>
</nav>
이 문제가 수정되면서 Safari 26에서는 스크린 리더 사용자가 메뉴의 펼침/접힘 상태를 정확히 파악할 수 있어, 복잡한 웹사이트 탐색이 훨씬 수월해졌습니다. VoiceOver는 "제품 소개, 접힌 상태, 버튼"과 같이 명확하게 상태를 안내합니다.
이미지 접근성
이미지 관련 접근성 개선은 스크린 리더 사용자의 웹 브라우징 경험을 더욱 깔끔하고 효율적으로 만들어줍니다. 불필요한 정보는 제거하고, 필요한 정보는 더 논리적으로 전달하는 방향으로 개선되었습니다.
빈 alt 속성 처리 개선
장식용 이미지에 대한 처리가 웹 표준에 더욱 부합하도록 개선되었습니다(Bug #146429365). alt=""로 명시적으로 장식용임을 표시한 이미지는 다른 레이블 속성(aria-label, aria-labelledby, title 등)이 있더라도 보조 기술에서 완전히 무시됩니다.
<!-- 이전: title 속성 때문에 스크린 리더가 읽을 수 있었음 -->
<img src="decoration.png" alt="" title="장식 아이콘">
<!-- Safari 26: alt=""가 있으면 완전히 무시됨 -->
<img src="decoration.png" alt="" title="장식 아이콘" aria-label="아이콘">
<!-- 스크린 리더에서 읽지 않음 -->
이는 개발자의 의도를 더 명확히 반영합니다. 장식용 이미지를 alt=""로 표시했다면, 그것은 콘텐츠 이해에 필요하지 않다는 명시적인 선언이며, WebKit은 이제 이를 정확히 준수합니다.
figure와 figcaption의 접근 가능한 이름 계산
<figure> 요소 내의 <figcaption>이 이미지의 접근 가능한 이름으로 사용되는 조건이 명확해졌습니다(Bug #150597445). 이제 다음과 같은 우선순위가 적용됩니다:
- 이미지의
alt속성 - ARIA 레이블 속성 (
aria-label,aria-labelledby) title속성- 위 속성들이 모두 없을 때만
<figcaption>내용
<figure>
<!-- alt가 있으므로 figcaption은 보충 설명으로만 사용됨 -->
<img src="chart.png" alt="2025년 분기별 매출 차트">
<figcaption>
매출이 3분기에 급격히 상승했습니다.
</figcaption>
</figure>
<figure>
<!-- alt가 없으므로 figcaption이 접근 가능한 이름이 됨 -->
<img src="photo.jpg">
<figcaption>
WWDC 2025 키노트 현장
</figcaption>
</figure>
이러한 명확한 계층 구조는 중복된 정보 전달을 방지하고, 스크린 리더 사용자에게 더 논리적인 읽기 경험을 제공합니다.
CSS 변경 사항
CSS 영역에서는 접근성을 기본적으로 고려한 새로운 기능들이 추가되었습니다. 이들은 개발자가 더 적은 노력으로 접근 가능한 웹사이트를 만들 수 있도록 지원합니다.
contrast-color() 함수로 자동 대비 보장
새로운 contrast-color() 함수는 배경색에 따라 자동으로 최적의 전경색(텍스트 색상)을 선택합니다. WCAG 대비 기준을 자동으로 만족시킬 수 있어 접근성 구현이 한층 수월해졌습니다.
button {
background-color: var(--button-bg);
/* 배경색에 따라 자동으로 검은색 또는 흰색 선택 */
color: contrast-color(var(--button-bg));
}
.dynamic-card {
background-color: rgb(var(--r), var(--g), var(--b));
/* 동적으로 변하는 배경색에도 대응 */
color: contrast-color(rgb(var(--r), var(--g), var(--b)));
}
이 함수는 특히 다크 모드, 테마 변경, 사용자 정의 색상 등 동적인 색상 변화가 있는 인터페이스에서 유용합니다.
text-wrap: pretty로 가독성 향상
text-wrap: pretty 속성은 텍스트 줄바꿈을 최적화하여 가독성을 높입니다. 마지막 줄에 단어 하나만 남는 '외톨이 단어(orphan)' 현상을 방지하고, 더 균형 잡힌 텍스트 블록을 만들어냅니다.
article {
text-wrap: pretty;
}
h1, h2, h3 {
text-wrap: pretty;
/* 제목에서 특히 효과적 */
}
이는 난독증이나 읽기 장애가 있는 사용자뿐만 아니라 모든 사용자의 읽기 경험을 개선합니다.
스크롤 기반 애니메이션과 prefers-reduced-motion
새로운 스크롤 기반 애니메이션 기능은 처음부터 접근성을 고려하여 설계되었습니다. Apple은 WWDC 2025에서 prefers-reduced-motion 미디어 쿼리 사용을 필수로 강조했습니다.
/* 기본: 모션 감소 설정 사용자를 위한 정적 스타일 */
.parallax-element {
transform: translateY(0);
}
/* 모션이 허용된 경우에만 애니메이션 적용 */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.parallax-element {
animation: parallax linear;
animation-timeline: scroll();
}
@keyframes parallax {
to {
transform: translateY(-100px);
}
}
}
}
이러한 접근 방식은 전정 기관 장애나 동작 민감성이 있는 사용자를 보호하면서도, 다른 사용자에게는 풍부한 시각적 경험을 제공합니다.
CSS 앵커 포지셔닝의 접근성 이점
CSS 앵커 포지셔닝은 툴팁, 드롭다운, 팝오버 등을 JavaScript 없이 구현할 수 있게 해줍니다. 이는 본질적으로 더 나은 접근성을 제공합니다.
/* 툴팁을 버튼에 앵커 */
.tooltip {
position: anchor(--button-anchor);
top: anchor(bottom);
left: anchor(center);
/* 포커스나 호버 시 표시 */
opacity: 0;
transition: opacity 0.2s;
}
button:hover + .tooltip,
button:focus + .tooltip {
opacity: 1;
}
CSS로 구현된 이러한 UI 요소들은 브라우저의 접근성 트리에 더 잘 통합되며, 키보드 내비게이션과 스크린 리더 지원이 자연스럽게 작동합니다.
글을 나가며
지금까지 살펴본 WebKit의 2025년 접근성 업데이트는 크게 세 가지 영역에서 의미 있는 진전을 보여줍니다. 무한 스크롤을과 동적 업데이트를 많이 사용하는 최근 웹 페이지 트렌드에 대응할 수 있는 WAI-ARIA 속성의 안정적인 지원으로 동적 웹 애플리케이션의 접근성이 향상되었고, 이미지 관련 시맨틱 처리 개선으로 스크린 리더 사용자의 경험이 더욱 깔끔해졌으며, 새로운 CSS 기능들은 접근성을 기본값으로 만들어가고 있습니다.
애플리케이션 개발 측면에서도 주목할 만한 변화가 있었습니다. 본문에서 자세히 다루지는 않았지만, SwiftUI용 새로운 WebView와 WebPage API는 기본적으로 완전한 키보드 지원과 VoiceOver 통합을 제공하며, Web Inspector의 Shadow DOM 슬롯 배지와 Service Worker 자동 검사 기능은 개발자가 접근성 문제를 더 쉽게 디버깅할 수 있도록 돕습니다. 특히 visionOS 26의 공간 오디오 접근성 수정과 시선 응시 영역 개선은 공간 컴퓨팅 시대의 새로운 접근성 과제에 대한 Apple의 앞선 대응을 보여준다고 할 수 있겠습니다.
무엇보다 고무적인 것은 Apple이 Interop 2025 프로젝트를 통해 보여준 크로스 브라우저 접근성 표준화 노력입니다. 2024년 Safari는 이미 98%의 접근성 테스트 통과율을 달성했고, Safari Technology Preview는 99%까지 도달했습니다. 1,100개 이상의 접근성 서브테스트를 통과하며 전체 브라우저 상호운용성 97%를 달성한 것은, 더 이상 "Safari에서 작동한다"와 "모든 브라우저에서 작동한다" 사이 간격을 극도로 좁혔다고 볼 수 잇습니다. 물론 앞서 언급했듯 이번 26 버전은 아직 안정화되지 않았기에 실제 사용 환경에서 아직 여러 가지 버그가 있다는 점을 염두에 두셔야 할 것입니다.
저희는 다음 달에 더 유용한 글로 찾아뵙겠습니다.