게시일: 2026년 5월 27일
Baseline 월간 요약에 오신 것을 환영합니다. 2026년 4월에는 일부 CSS 기능과 정밀 수학 유틸리티가 새로 제공되었으며, 구조적 시맨틱 요소와 기타 웹 API 추가 기능이 개발자 커뮤니티의 소식과 함께 널리 제공되었습니다.
2026년 기준 및 접근성
웹을 위해 빌드한다는 것은 누구나 사용할 수 있는 환경을 빌드한다는 의미이며, A11y Up의 최근 기사에서는 개발자가 웹 표준을 따를 때 접근성 요구사항을 고려하는 것이 더 효과적이라고 주장합니다. 한동안 엔지니어는 이제 웹 플랫폼의 일부가 된 접근성 패턴을 다시 만들기 위해 맞춤설정되고 종종 무거운 JavaScript 솔루션을 제공했습니다. 이러한 맞춤형 솔루션은 때때로 취약하고, 지원 기술에서 작동하지 않으며, 유지보수가 어렵습니다.
이 도움말에서는 웹 플랫폼 기능이 교차 브라우저 상호 운용성을 달성함에 따라 접근성을 고려한 개발이 더 효과적인 작업이 된다고 강조합니다. 웹 기능을 사용하여 일반적인 목표와 사용자 인터페이스 패턴을 달성하면 많은 작업을 처리할 수 있으며, 올바른 시맨틱을 스크린 리더와 키보드 탐색 유틸리티에 직접 원활하게 노출할 수 있습니다. 여기서 기준선은 웹 기능이 프로젝트에서 평가하고 사용할 수 있을 만큼 성숙한 시점을 나타내는 가이드 역할을 합니다.
새로 제공되는 기준 기능
이 섹션의 기능은 2026년 4월부터 핵심 브라우저 세트에서 지원되며 이제 새로 사용할 수 있는 Baseline입니다.
CSS contrast-color() 함수
동적 테마 엔진과 맞춤설정 가능한 구성요소로 인해 개발자는 고대비에 대한 사용자 환경설정을 수용하기 위해 여러 색상 시스템을 유지해야 했습니다. CSS contrast-color() 함수는 이러한 유지관리 부담을 브라우저로 완전히 이동합니다. 기본 입력 색상을 함수에 전달하면 엔진이 대비가 높은 동반 색상을 평가하고 반환합니다. 일반적으로 가독성 점수가 가장 높은 색상에 따라 검은색 또는 흰색으로 매핑됩니다.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
이를 통해 유지보수가 어려운 맞춤 솔루션이나 CSS 없이 가독성을 위한 접근성 표준을 충족할 수 있습니다. 미드톤 색상 선택에 계속 주의를 기울여야 하지만 이 기능을 사용하면 사용자 지원을 처리하는 데 필요한 상용구 CSS가 줄어듭니다. 자세한 내용은 contrast-color()의 MDN 참조 페이지를 참고하세요.
Math.sumPrecise()
표준 루프나 Array.prototype.reduce()와 같은 메서드를 사용하여 숫자 시퀀스를 합산하면 부동 소수점 정밀도가 손실될 수 있습니다. 이는 중요한 재무 계산 또는 원격 분석 합계에 영향을 줄 수 있습니다.
Math.sumPrecise() 메서드는 이 문제를 해결합니다. 숫자의 반복 가능 객체를 허용하고 정확한 합계를 제공하기 위해 정밀도 안전 루틴을 실행합니다. Math.sumPrecise()에 관한 MDN 문서에서 메커니즘을 살펴보세요.
널리 사용 가능한 기준 기능
다음 기능은 Baseline에서 널리 지원되므로 이제 프로젝트에서 광범위하게 호환되고 사용할 수 있습니다.
<search> 요소
HTML <search> 요소는 웹 애플리케이션의 검색 환경을 집합적으로 나타내는 양식 컨트롤, 필터링 메커니즘, 제출 유틸리티의 명시적 래퍼 역할을 합니다.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
포함 요소를 <search> 태그로 전환하면 사용자에게 접근성 이점을 제공할 수 있습니다. 브라우저가 요소에 search의 암시적 ARIA 랜드마크 역할을 자동으로 할당하므로 <form> 요소에 role="search"을 지정할 필요가 없습니다. 이를 통해 스크린 리더가 검색 인터페이스를 식별하고 사용자가 검색 인터페이스로 이동하도록 도울 수 있습니다. <search> 요소의 MDN 페이지에서 구현 세부정보를 읽어보세요.
웹 인증 공개 키 액세스
이제 AuthenticatorAttestationResponse 인터페이스에서 직접 속성 추출기를 광범위하게 지원하므로 웹 인증 (WebAuthn) API를 사용하여 비밀번호 없이 로그인하는 것이 덜 복잡해졌습니다. getPublicKey() 및 getPublicKeyAlgorithm()과 같은 메서드를 사용하면 원시 바이너리 데이터를 사용하지 않고도 브라우저에서 공개 키 세부정보를 추출합니다. 이러한 속성과 사용 방법에 대한 자세한 내용은 AuthenticatorAttestationResponse의 MDN 페이지를 참고하세요.
String.prototype.isWellFormed() 및 String.prototype.toWellFormed()
JavaScript 문자열은 UTF-16으로 인코딩되며, 유니코드 쌍의 복잡한 문자와 그림 이모티콘을 매핑합니다. 이를 고려하지 않고 문자열을 슬라이스하면 서러게이트 쌍의 절반이 고립되어(단독 서러게이트라고 함) 텍스트가 잘못된 형식으로 남게 됩니다.
isWellFormed()를 사용하면 개발자가 문자열에 단독 대리자가 포함되어 있는지 확인하고 불리언을 반환할 수 있습니다. 문자열의 유효성 검사에 실패하면 toWellFormed()를 호출하여 잘못된 서러게이트를 표준 유니코드 대체 문자 (U+FFFD)로 바꿀 수 있습니다. 이는 형식이 잘못된 입력이 발생할 때 URIError를 발생시키는 encodeURI()와 같은 함수를 호출하기 전에 유용합니다. 이러한 메서드의 작동 방식은 String.prototype.isWellFormed()의 MDN 문서를 참고하세요.
ARIA 속성 반영
상호작용 요소의 접근성 상태를 업데이트하려면 표준 DOM 속성 메서드(예: element.setAttribute('aria-expanded', 'true'))를 통해 왕복해야 했습니다. ARIA 속성 반영은 접근성 속성을 객체 속성으로 미러링하여 이를 간소화합니다.
Element 인터페이스는 ARIA 속성을 element.ariaExpanded, element.ariaChecked, element.ariaHidden과 같은 인스턴스 속성에 바로 반영합니다. 이를 통해 점 표기법 구문을 사용하여 접근성 상태를 수정할 수 있습니다.
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
ARIA 타겟을 JavaScript 속성으로 처리하면 UI 프레임워크와 상태 관리 도구가 보조 컨텍스트를 더 안정적으로 조정할 수 있으며, 스크린 리더 컨텍스트를 실제 애플리케이션 상태와 일치시킬 수 있습니다. 반영된 속성의 전체 목록은 Element 인스턴스 속성에 관한 MDN 가이드를 확인하세요.
마무리
기준선과 관련된 내용 중 빠진 부분이 있으면 알려주세요. 향후 버전에서 반영하도록 하겠습니다. Baseline에 관해 궁금한 점이 있거나 의견을 제공하고 싶다면 Issue Tracker에서 문제를 신고해 주세요.