접근성을 고려하여 CSS 작성하기
✨접근성을 고려하여 CSS 작성하기
원글: https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
CSS를 사용하여 웹사이트와 앱의 접근성을 향상시키는 데 도움이 되는 팁에 대한 소개입니다.
📖목차
- 가독성 있는 텍스트에서 읽기 쉬운 텍스트로
- 가상 요소에 콘텐츠 신중하게 사용하기
- 화면만이 유일한 매체가 아니다
- 완전히 지원되지 않는 속성 값에 대한 대안
- 콘텐츠를 숨기는 여러 가지 방법
- 나쁜 대비는 신뢰할 수 없다
- 색상이 정보의 유일한 단서가 되어서는 안 된다
- 순서에 신경 쓰기
- 중요한 것에 집중하기: focus
- 그리드와 평평한 문서 구조
1. 가독성 있는 텍스트에서 읽기 쉬운 텍스트로
이미지, 아이콘, 동영상은 오늘날 웹 디자인에서 없어서는 안 될 요소지만, 여전히 대부분의 웹 사이트에서는 텍스트가 콘텐츠의 대부분을 차지합니다. 텍스트는 어떤 디바이스에서든 읽을 수 있어야 하므로 글꼴 속성을 스타일링하고 하고 미세한 조정을 하는데 많은 시간을 투자하는 것이 중요합니다.
✅글꼴 크기 키우기
 화면에서 사용자의 거리에 따라 글꼴 크기가 커져야합니다. (출처: https://blog.marvelapp.com/body-text-small/)
본문 텍스트의 크기가 12px이 표준이었던 적이 있지만, 해상도가 높은 디바이스들이 증가하면서 평균 글꼴 크기는 한동안 15px ~ 18px 사이로 고정되었습니다. 최근 몇년 동안 다시 20px 이상으로 증가했는데, 이는 좋은 현상입니다. 텍스트는 스마트폰에서 읽을 수 있을만큼 충분히 커야 하며, TV와 같은 큰 화면에서 멀리서도 읽을 수 있으려면 화면 크기에 따라 커져야합니다.
서체의 특성이 많이 다를 수 있으므로 표준 최소 크기를 정의하는 것은 의미가 없지만, 작은 화면 크기에서는 18px ~ 20px이 좋은 출발점이 될 수 있습니다.
물론 글꼴 크기에 대해 더 많은 이야기를 할 수 있지만, 이것은 너무 많은 양이 될 것입니다. 자세한 내용은 christian miller의 본문 텍스트가 너무 작습니다를 읽어보세요
✅줄 높이 설정(line height)
브라우저의 기본 줄 높이는 1.2입니다. 웹 콘텐츠 가이드라인에 따르면 텍스트 블록의 단락에서는 1.5이상이어야 합니다.
줄 높이가 조정된 단락 내의 텍스트는 가독성이 향상될 뿐만 아니라 시각적으로 더 매력적입니다.
✅텍스트를 왼쪽 또는 오른쪽으로 정렬하기
일부 사용자는 텍스트를 왼쪽이나 오른쪽으로 정렬하는 대신 맞춤을 선호할 수 있지만, 이는 좋지 않습니다. text-align: justify는 단어의 간격을 수정하여 동일한 길이의 줄을 만듭니다. 공백이 고르지 않으면 가독성이 떨어지고, 매우 산만해질 수 있습니다. 필요한 경우 단어를 구분하는 것도 해결책이 될 수 있지만 CSS 하이픈은 잘 지원되지 않으며, 예상대로 작동하지 않을 수 있습니다.
✅단락 너비 정의하기
여러 출처에 따르면 단락의 이상적인 너비는 65자로 알려져 있지만, 디자이너들은 한 줄당 45 ~ 85자를 사용해야한다고 합니다.
텍스트 블록의 너비를 정의할 때 1ch는 0 문자의 너비와 같으므로 ch 단위가 유용할 수 있습니다. 또한 font-family, font-size가 변경되면 변경됩니다.
1
2
3
4
p {
/* 최대 너비 65자 */
max-width: 65ch;
}
반응형 타이포그래피 기술을 사용하는 경우 매우 큰 화면에서 사이트를 테스트해야 합니다. 글꼴 크기에 제한이 없는 경우 특정 뷰포트 크기에서는 텍스트를 읽을 수 없게 됩니다. 제한을 설정하는 방법 또는 반응형 타이포그래피에 익숙하지 않을 경우 Mike Riethmullers의 글 Precise control over responsive typography을 읽어보세요.
2. 가상 요소에 콘텐츠 신중하게 사용하기
우리는 가상 요소 ::before, ::after를 사용하여 요소의 맨 처음이나 끝에 CSS를 추가할 수 있습니다. 이는 컴포넌트에 디자인 요소를 추가하는 매우 일반적이고 편리한 방법을 제공하지만, 콘텐츠 속성을 사용하여 콘텐츠를 추가할 수도 있습니다. 관심사를 분리한다는 관점에서 우리는 그렇게 해서는 안됩니다.
1
2
3
h2 {
content: "DON'T DO THIS";
}
콘텐츠는 HTML 파일, 데이터베이스 또는 API에서 가져온 것이어야 하며, CSS에는 포함되어서는 안됩니다. 때로는 글꼴 아이콘이나 특수 문자같은 텍스트가 아닌 콘텐츠를 추가하기 위해 콘텐츠 속성을 사용하기도 합니다. 이렇게 할 경우 일부 스크린 리더는 콘텐츠를 인식하고 사용자에게 알린다는 점을 기억해야합니다. 생성된 콘텐츠가 순전히 프레젠테이션용인 경우에는 보조 기술로부터 숨겨야 합니다. aria-hidden기능을 사용하면 됩니다.
1
<span class="icon icon-key" aria-hidden="true"></span>
3. 화면만이 유일한 매체가 아니다
디지털 시대에 살고 있지만 사람들은 여전히 인쇄물을 사용합니다. 페이지가 인쇄되거나 PDF로 저장되어도 접근 가능하고 사용 가능해야 합니다. CSS의 @media를 사용하거나 종이에 어울리지 않거나 보기 좋지 않은 요소의 스타일을 변경하세요.
1
2
3
4
5
6
7
8
@media print {
.header {
position: static;
}
nav {
display: none;
}
}
인쇄된 웹 페이지의 문제 중 하나는 링크가 어디로 연결되는지 모르기 때문에 쓸모없다는 것입니다. 다행히 CSS는 속성의 값을 스크린에 표시하는 방법을 제공합니다.
1
2
3
4
5
@media print {
a[href^="http"]:not([href*="mywebsite.com"])::after {
content: " (" attr(href) ")";
}
}
이 코드는 http로 시작하지만, “mywebsite.com”이 포함되지 않은 href 속성에 있는 모든 링크 옆에 href 속성 값이 표시됩니다.
Firefox와 Chrome은 인쇄 스타일시트를 테스트하고 디버깅할 수 있는 도구를 제공합니다.
조금 더 자세하게 알아보고 싶다면, 인쇄 스타일 작업에 대한 여러가지 팁을 작성해둔 글을 확인하세요.
4. 완전히 지원되지 않는 속성 값에 대한 대안
우리는 특정 속성 값을 사용하고 싶지만 일부 브라우저에서 지원이 되지 않아 사용할 수 없는 상황에 처할 때가 있습니다. 하지만 대안을 제공하는 한, 그것을 사용할 수 있습니다. 이를 위해 기능 쿼리나 다른 기능 감지가 필요하지 않은 경우도 많습니다.
IE 및 이전 버전 Edge에서 지원하지 않는 vmax 단위를 사용한다고 가정해보겠습니다.
1
2
3
div {
width: 50vmax; /* IE 및 이전 버전 Edge에서는 작동하지 않습니다. */
}
덜 이상적이지만 브라우저가 이해할 수 있는 값으로 설정하면 됩니다. (예 width: 50vw). 그리고 다음 줄에 원하는 값을 작성하면 됩니다.
1
2
3
4
div {
width: 50vw;
width: 50vmax;
}
vmax를 이해하지 못하는 브라우저는 너비를 50vw로 해석하고, 50vmax는 건너뜁니다. 반면 vmax를 이해하는 브라우저는 먼저 50vw를 해석하고, 그 다음 50vmax를 해석합니다. vmax가 vw 선언보다 뒤에 오므로 사용자는 vmax 버전을 보게됩니다.
5. 콘텐츠를 숨기는 여러 가지 방법
HTML의 제목 요소(headings)는 문서의 윤곽을 잡을 때 매우 유용합니다. <h1> ~ <h6>을 사용하면 브라우저 및 기타 소프트웨어에 문서의 구조와 문서의 각 부분이 어떻게 연관이 되어있는지 알려줍니다. 문서의 개요를 작성하는 것은 매우 중요하며, SEO(검색엔진)에도 좋고 스크린 리더 사용자가 사이트를 탐색하는데 도움이 됩니다. 제목이 있는 것이 합리적임에도 불구하고 제목이 없는 디자인을 구현해야하는 경우가 있을 수 있습니다. 디자인 자체가 구조를 전달하는 경우입니다. 이러한 경우 마크업에서 단순히 제목을 제거하는 것이 아니라 시각적으로 숨겨야 합니다. CSS가 있든 없든 문서는 명확히 구조화되어 있어야 합니다.
물론 이것은 하나의 방법일뿐이며 폼 양식에서 레이블을 시각적으로 숨기는 것은 또 다른 예입니다. (UX관점에서 레이블을 숨겨서는 안됩니다.)
CSS 콘텐츠를 숨기는 방법에는 여러가지가 있으며, 상황에 맞는 적절한 기술을 선택하는 것은 사용자의 역할입니다.
✅ 모든 사용자에게 콘텐츠 숨기기
hidden 속성을 사용하거나 visibility:hidden 으로 설정하거나 display:none을 사용하면 콘텐츠를 완벽히 숨길 수 있습니다. 사용자는 볼 수 없으며, 스크린 리더 또는 검색 엔진도 읽을 수 없습니다.
✅ 시각적으로 콘텐츠 숨기기
시각적으로만 콘텐츠를 숨기는 것은 쉬운 일이 아닙니다. 스크린 리더가 접근가능해야하며, 브라우저의 특이한 점을 다뤄야 하며 포커스가 될 때 무슨일이 발생하는지 결정해야 합니다. 물론 해결책은 준비되어 있고, 당신은 그냥 사용하면 됩니다.
몇 가지 조사를 해보니 다양한 접근 방식이 있다는 것을 알 수 있었습니다. 그래서 몇 명의 전문가에게 조언을 물었고 권장되는 기법을 분석하여 완전히 이해했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.visually-hidden {
/* 일반적인 흐름에서 제거 */
position: absolute;
/* 잘못 발음되거나 뭉개진 텍스트에 대한 해결방법 */
white-space: nowrap;
/* 가능한 가장 작은 크기로 설정(일부 스크린 리더는 높이와 너비가 0인 요소는 무시합니다) */
width: 1px;
height: 1px;
/* 크기 조정 후 넘치는 콘텐츠 숨기기 */
overflow: hidden;
/* 요소 크기 변경할 수 있는 모든 여백 속성 재설정 */
border: 0;
padding: 0;
/* 클리핑은 요소의 어던 부분을 표시할 지 정의합니다. */
/* 구형 브라우저에서는 지원되지 않는 속성 */
clip: rect(0 0 0 0);
/* 최신 브라우저용 클립 경로. inset(50%)은 요소를 사라지게 하는 삽입 사각형을 정의합니다. */
clip-path: inset(50%);
}
콘텐츠를 시각적으로 숨기면서도 보조 기술 및 검색 엔진에서 접근할 수 있도록 하는 경우 언제든지 사용하세요.
✅스킵 링크
이전의 클래스도 스킵 링크로 사용하기에 적합합니다. 스킵 링크는 처음에는 시각적으로 숨겨져있지만, focus되면 표시되는 링크입니다. 스크린 리더 및 키보드 사용자가 소개 콘텐츠를 즉시 건너 뛰고 주요 콘텐츠로 바로 이동할 수 있도록 페이지의 첫번 째 항목 중 하나에 배치해야 합니다. 기본적으로 사용자를 특정 부분으로 이동시키는 앵커 링크입니다.
코드펜에서 직접 시도해보세요, tab을 눌러 스킵 링크를 화면에 표시해보세요.
✅의미론적으로 콘텐츠 숨기기
때때로 화면에는 표시하지만, 스크린 리더에서는 숨겨야하는 경우가 있습니다. 예를 들면 아이콘을 사용하는 경우를 말합니다. aria-hidden 속성을 추가하고 값을 true로 설정하세요.
1
2
3
4
<button>
<span class="icon icon-hamburger" aria-hidden="true"></span>
<span class="text">Menu</span>
</button>
✅기타
text-indent를 음수의 값을 사용하거나 font-size 또는 height값을 0으로 설정하는 방법도 있습니다. 이 것은 몇 가지 주의사항이 있습니다. webaim.org의 텍스트 숨기기 기술를 참고하세요.
6. 나쁜 대비는 신뢰할 수 없다
가독성을 높이기 위해서는 텍스트와 배경의 대비를 충분히 제공해야 합니다. 시각 장애가 없는 사람뿐만 아니라 저시력자도 높은 대비의 혜택을 누릴 수 있습니다.
화창한 날 밖에서 스마트폰을 사용한다고 생각해보세요.
✅ 색상 대비는 무엇이며, 왜 중요한가요?
세계 보건기구에 따르면 인구의 약 4%가 시각 장애를 가지고 있다고 합니다. 남성은 7~12%, 여성은 1% 미만이 색각 결핍을 가지고 있습니다. 이러한 장애의 대부분은 대비에 대한 민감도가 떨어지고, 색을 구별하는 능력이 저하됩니다.
두 색이 색상휠에 다른 부분에 속할 때 두 색은 대비를 이룹니다. 일반적으로 두 색상의 차이가 클수록 대비가 높습니다. 웹 디자이너와 개발자에게 있어 대비는 그 자체로만 중요한 것이 아니라 텍스트에 적용했을 때 얼마나 잘 작동하는지가 중요합니다. 텍스트와 배경의 대비는 최소한 시력이 보통인 사람도 읽을 수 있을 정도로 높아야 합니다. 물론 이 기준을 충족하는지 추측할 필요는 없습니다. Web Accessibility Initiative에서 이를 측정하기 위한 비율을 정의했기때문입니다.
✅최소한의 대비 비율
대비 비율은 특정 배경에서 특정 크기와 너비의 텍스트에 대한 대비가 얼마나 높은지를 나타냅니다. 비율은 1:1에서 21:1까지 다양합니다. 비교되는 두 색상이 동일한 경우 1:1, 흑백이 서로 반대되는 경우 21:1이 됩니다.
웹 콘텐츠 접근성 지침2.0에 따르면 배경과 텍스트 사이에 최소 4.5:1의 대비 비율이 존재해야합니다. 이는 24px 미만(글꼴이 굵지 않은 경우) 및 19px 미만(글꼴이 굵을 경우)의 텍스트에 적용됩니다. 더 큰 텍스트의 경우 3:1의 비율이면 충분합니다. 이는 레벨 AA 기준을 충족하기 위한 최소 수치입니다. 레벨 AAA를 통과하려면 일반 텍스트의 최소 비율은 7:1, 굵은 텍스트의 경우 4.5:1입니다. 반드시 준수해야하는 것은 아니지만 아이콘을 사용하는 경우 텍스트의 대비 규정을 충족하는 아이콘을 사용하도록 노력해야 합니다.
나는 내 친구 다니엘에게 비율에 대해 말했고, 현재 작업중인 프로젝트에서 비율을 맞추는 것이 중요하다고 말했습니다. 여러 가지 조합을 시도해 본 후 그는 저에게 전화를 걸어 생각보다 어렵다고 말했습니다. 문제는 시각적으로 만족스러운 조합이 부족하다는 것이 아니라 지난 몇 년 동안 디자이너들이 저대비 조합을 사용하는 데 익숙해졌다는 것입니다. 소규모 에이전시뿐만 아니라 애플이나 구글과 같은 대기업도 이러한 트랜드를 따르고 있습니다.
✅ 대비 비율 측정
Chrome Canary에서는 대비 비율을 개발 도구에서 표시할 수 있습니다. Remy Sharp가 어떻게 하는지 블로그에 작성해두었습니다.
일반적으로 색상 대비와 접근성을 테스트할 수 있는 도구는 많습니다. 다음 목록은 방대하지 않지만 제가 선호하는 도구들을 모아놓은 것입니다.
온라인
- 대비 비율 by Lea Verou - 브라우저에서 빠르고 간편하게 대비를 검사할 수 있음 Quick and easy contrast checker in the browser
- 색상 대비 검사 by Jonathan Snook - 더 많은 옵션이 있는 브라우저 대비 검사기
- Wave tool - 대비를 확인하기 위한 브라우저 도구
- Accessible Color Spaces by Kevin Gutowski - 자동 대비 체크할 수 있는 색상 선택기
브라우저 확장 프로그램 & 개발도구
- Chrome DevTools Audits Panel - 크롬 60에서는 lighthouse가 제공하는 새로운 감사 패널이 함께 제공됩니다. 무엇보다 사이트 접근성 점수를 제공하고 문제를 나열합니다.
- tota11y - 대비, 문서 개요를 테스트할 수 있는 훌륭한 브라우저 확장 프로그램
- aXe - aXe 크롬 확장 프로그램을 사용하여 웹 사이트에서 접근성 결함을 찾아내는 자동화된 도구
기타
✅ 고대비 경험
대비가 높은 색상을 사용하는 것도 좋지만, 시력이 낮은 사람들은 웹 사이트에서 사용하는 색상을 변경하고 싶을 수 있습니다. 사용자의 요구는 매우 다양하며, 이에 따라 색상을 변경하는 방법도 다양합니다. 이러한 사실은 어느 정도 예측 불가능성을 수반하며 페이지가 항상 완정히 접근 가능한지 확인하기 어렵게 만듭니다. 그렇기 때문에 대비 수준을 AA 또는 AAA 기준을 충족하는 데에만 의존하는 것이 아니라 웹 사이트를 철저히 테스트하고 대비가 높은 대안을 제공하는 것도 고려해야합니다.
#윈도우에서의 고대비 모드
윈도우에서는 설정에 고대비 옵션이 있습니다. 사용자는 직접 색상을 설정하거나 미리 정의된 테마를 사용할 수 있습니다.
간단한 로그인 양식을 만들고, 대비가 높은 다양한 테마로 테스트를 해보았습니다. (영감 받은 곳: https://dribbble.com/shots/1687064-Simple-Login-Form)
Anika Henke는 사용자들이 웹사이트에서 색상을 어떻게 변경하는지에 대해 글을 작성했습니다. 그녀는 양식을 테스트하던 도중 입력 필드가 보이지 않고 버튼이 인식되지 않는 것을 발견했다고 설명합니다. 위의 스크린 샷에서도 같은 현상이 발생하고 있음을 확인할 수 있습니다. placehoder가 없었다면 사용자는 입력필드가 두 개 있다는 사실을 알지 못했을 것입니다. 빠른 해결 방법은 입력 및 버튼에 기본 테두리를 추가하는 것입니다.
미디어 쿼리를 사용하여 고대비 모드가 활성화되었는지 감지하고, 특정 스타일을 제공할 수 있습니다.
1
2
3
4
5
6
7
8
9
/* 고대비 모드 활성화 */
@media (-ms-high-contrast: active) {
}
/* 특정 검정색이 흰색테마로 표시되는 고대비 모드 */
@media (-ms-high-contrast: black-on-white) {
}
/* 검정색 테마에서 특정 흰색을 사용하는 고대비 모드 */
@media (-ms-high-contrast: white-on-black) {
}
Patrick H. Lauke은 윈도우 고대비 모드의 미디어 기능에 대한 자신의 생각과 우려, 의 제한된 유용성을 공유했습니다. 이에 대해 Greg Whitworth pointed out는 이 기능의 “유일한 목적은 대비 감도가 높은 사용자에게 더 나은 경험을 제공하는 데 도움이 되는 것”이라고 지적했습니다. 따라서 특정 색상이 무엇인지에 대해 반드시 신경 쓸 필요는 없습니다. 어느 정도는 사이트가 어떻게 보이는지 신경 쓰지 말고 고대비에서 어떻게 작동하는지에 신경 써야 합니다.
#고대비 크롬 확장 프로그램
텍스트를 더 쉽게 읽을 수 있도록 고안된 여러 가지 고대비 색상 필터를 사용하여 웹을 탐색할 수 있는 확장 프로그램도 있습니다.
#고대비 대안
디자인에 대비가 충분하지 않은 부분이 있는 경우에도 대체 버전을 사용하여 WCAG 기준을 충족할 수 있습니다. 이에 따라 사용자에게 페이지의 고대비 버전에 대한 링크를 제공하거나 페이지에서 모든 측면이 준수되도록 페이지를 변경할 수 있는 컨트롤을 제공해야합니다.
대안에 대한 몇 가지 기준
- 링크 또는 컨트롤은 페이지에서 눈에 잘 띄게 배치해야 합니다.
- 링크 또는 컨트롤 자체가 대비 요구 사항을 충족해야 합니다.
- 새 페이지에는 원본과 동일한 정보와 기능이 포함되어야 합니다.
- 새 페이지가 원하는 모든 기준을 충족해야 합니다.
#NoCoffee로 테스트하기
기준을 충족하는 것은 실제 사람을 대상으로 테스트하는 것과는 별개의 문제입니다. 우리 모두가 전문적인 테스트를 할 수 있는 수단을 가지고 있는 것은 아닙니다. 다행히도 노커피는 저시력, 색맹, 시야 차단을 빠르고 쉽게 시뮬레이션할 수 있는 방법을 제공합니다. 경미하거나 극심한 시력 문제가 있는 사람들이 직면한 문제를 이해하는데 도움이 될 수 있습니다.
7. 색상이 정보의 유일한 단서가 되어서는 안 된다
이미 언급했듯이 남성의 매우 높은 비율은 색각 결핍을 가지고 있습니다. 유형도 다양합니다. 가장 흔한 유형 중 하나인 중성 색맹은 빨간색과 녹색을 구분하기 어렵게 만듭니다. 색각 결핍이 있는 사람은 인터페이스를 사용할 수 없게 될 수도 있으므로 색상만을 시각적 신호로 사용하는 것은 피해야 합니다.
이전 예제에서 폼 양식을 가져와 입력 필드에 테두리를 추가하여 성공 및 오류 상태를 표시했습니다. 다음 스크린샷은 색상만으로는 사용자에게 피드백을 제공하는데 충분하지 않다는 것을 보여줍니다. 테두리 색상이 전혀 보이지 않거나 잘못되어 있습니다.
간단한 아이콘을 추가한다면 유저 경험을 향상시킬수 있습니다.
또 다른 예는 링크입니다. 링크도 색상만으로 일반 텍스트와 구분해서는 안됩니다. 링크에는 밑줄을 사용하는 것이 가장 좋습니다.
8. 순서에 신경 쓰기
항목이 배치되는 순서를 변경하는 방법에는 여러 가지 방법이 있습니다. 예를 들어 flexbox에는 order와 flex-direction이 있고, grid에는 order, flex-auto-flow 및 명시적 배치가 있습니다. 이러한 속성들은 매우 유용하지만, 콘텐츠의 DOM 순서와 시각적 표현 사이의 연결이 끊어질 수 있습니다.
다음 예제에서는 여러 그리드 속성을 사용하여 이미지가 배치된 갤러리를 볼 수 있습니다.
See the Pen Grid gallery with jumbled items by Manuel Matuzovic (@matuzo) on CodePen.
문제가 없어 보이지만 키보드를 사용하여 이미지에서 이미지로 이동하면 순서를 완전히 예측할 수 없다는 것을 알 수 있습니다. Tab키를 누르면 다음에 어떤 이미지가 강조 표시될지 알 수 없습니다. 여기에 focus 스타일도 누락이 되면 완벽한 최악의 시나리오가 만들어집니다.
예측할 수 없거나 잘못된 순서는 키보드 사용자에게만 해당되는 문제가 아닙니다. 스크린 리더는 콘텐츠를 DOM 순서대로 표시하기 때문에 소프트웨어는 CSS 순서에 영향을 받지 않지만 사용자는 영향을 받습니다. 스크린 리더 사용자는 콘텐츠 시각적 표현에 신경 쓰지 않는다고 생각할 수 있지만 모든 스크린 리더 사용자가 시각 장애가 있는 것은 아닙니다. 일부는 저시력 또는 학습 장애가 있어 스크린 리더를 사용하여 화면에 표시되는 내용을 보완합니다.
이러한 순서 문제는 flex또는 grid 항목뿐만 아니라 모든 종류의 위치 지정에 적용됩니다. 스타일 없이도 의미가 있는 방식으로 콘텐츠를 정렬하는 것이 중요하며, 디자인에 순서와 일치하는지 확인해야 합니다. 그렇지 않다면 디자인을 다시 생각해야할 수도 있습니다. 마크업의 요소를 CSS에서 올바르게 배치할 수 없다고 해서 순서를 바꾸지마세요.
Rob Dodson’s 콘텐츠 재정렬이 접근성에 영향을 주나요?를 시청하고, Adrian Roselli’s 소스 순서 문제에서 자세한 내용을 읽어보세요.
9. 중요한 것에 집중하기: focus
저는 이미 키보드 탐색 기초와 포커스 가능한 요소들에 대해 접근성을 고려하여 자바스크립트 작성하기라는 글을 썼습니다. 이 주제를 완전히 처음 접하는 경우 읽기 전에 해당 문서로 바로 이동하세요.
웹 사이트를 키보드로 탐색할 수 있는지 확인하는 것은 중요합니다. 많은 사용자가 웹 서핑을 할 때 키보드에 의존합니다. 그 중에는 운동 장애가 있는 사람, 시각 장애인, 손이 없거나 어떤 이유로든 마우스나 트랙 패드를 사용할 수 없는 사람들도 포함됩니다.
CSS에서 포커스 가능한 요소에 스타일을 제공하기 위해 할 수 있는 몇 가지 작업이 있습니다.
✅ 포커스된 아이템 선택
:focus 클래스를 사용하여 포커스 가능한 아이템들이 포커스 되었을 때 스타일을 적용할 수 있습니다.
1
2
3
4
a:focus {
background-color: #000000;
color: #ffffff;
}
기본 포커스 스타일은 브라우저마다 일관성이 떨어지고 보기 좋지 않은 경우가 많으며, 디자인에 잘 어울리지 않는 경우도 있습니다. 사용자 경험을 개선하고 디자인에 맞는 사용자 지정 포커스 스타일을 제공하는 것이 좋습니다.
어떤 작업을 하든 대체 스타일을 제공하지 않고 기본 윤곽선(점선, 파란색 또는 주황색 링)만 제거하지 마세요. 키보드를 주요 탐색 수단으로 사용하는 사용자는 초점이 어디에 있는지 모른다면 사이트를 사용할 수 없습니다.
✅ 키보드와 마우스 사용자 구분하기
이미 언급했듯이 디자이너를 실망시키는 것 중 하나는 브라우저 간 포커스 스타일의 일관성이 부족하다는 점입니다. 또한 사용자가 일부 포커스 가능한 요소에 마우스를 사용할 때도 포커스 스타일이 보여진다는 점입니다. 때로는 굳이 표시할 필요가 없는데도 마우스를 사용하는 사용자에게 방해가 되고 미적으로도 좋지 않을 수도 있습니다.
 콘텐츠 영역을 클릭하면 크롬에서 파란색 윤곽선을 표시하는 사용자 지정 탭 (출처: https://frend.co/components/tabs/)
웹 페이지의 특정 요소에 포커스되어 있을 때 outline속성을 제거해서는 안됩니다. 왜냐하면 컴포넌트가 더 이상 사용자에게 접근 불가능하기 때문입니다. 우리에게 필요한 것은 키보드와 마우스 사용을 구별하는 방법입니다. 이는 CSS Level 4 selectors의 :foucs-ring를 사용하면 가능합니다. “focus-ring 가상 클래스는 요소가 :focus 가상 클래스와 일치하고, 사용자 에이전트(브라우저)가 휴리스틱(규칙이나 패턴)을 통해 요소에 특별히 표시되어야함을 결정할 때 적용됩니다. (출처: CSS Selectors Level 4 Draft)
1
2
3
4
5
6
7
8
9
/* 기본 아웃라인 속성 제거 */
:focus {
outline: none;
}
/* 윤곽선이 표시되어야할 때만 윤곽선을 추가 */
:focus-ring {
outline: 2px solid blue;
}
안타깝게도 현재로서는 :focus-ring의 표준 구현을 지원하는 브라우저는 없지만, 적절한 경우 .focus-ring 클래스를 추가하는 경량 폴리필은 있습니다. (2024 기준 현재는 :focus-visible를 사용, 공식 문서)
1
2
3
4
/* 자바스크립트가 활성화되어 있고 작동하는 경우 .focus-ring 클래스가 없는 포커스 가능한 요소를 모두 선택하고 윤곽선을 제거합니다. */
.js-focus-ring :focus:not(.focus-ring) {
outline-width: 0;
}
자세한 내용은 Rob Dodson’s a11ycasts episode, Focus Ring!를 시청하세요.
✅ 포커스된 자식이 있는 요소에 대한 스타일링
:focus-within은 비교적 새로운 유사 클래스이며, 대부분 주요 브라우저에서 지원되고 있습니다. 이 클래스를 사용하면 현재 초점이 맞춰진 자식 요소를 가진 요소를 선택할 수 있습니다.
자식 항목 중 하나가 포커스되면 그림자가 표시되는 예시입니다.
1
2
3
form:focus-within {
box-shadow: 0 0 4px 6px rgba(80, 88, 156, 0.2);
}
이 기능을 Codepen에서 확인할 수 있습니다.
포커스에 대한 자세한 내용은 유튜브에서 What is Focus? 영상을 시청하세요
10. 그리드와 평평한 문서 구조
우리는 새로운 사이트를 만들 때 HTML을 작성하는 것부터 시작합니다. 올바른 마크업을 선택하고 요소를 논리적인 순서로 배치합니다. 문서가 유효하고 구조가 잘 잡혀있으며 순서가 합리적이라면 CSS를 추가합니다. CSS 그리드 레이아웃 이전에는 레이아웃을 만드는 것이 매우 까다로웠습니다. 그리고 우리는 float, position 때로는 Flexbox도 유효하지 않아서 DOM 순서를 변경하고 싶은 유혹을 받곤 했습니다. 그리드의 명시적 배치와 그 영역 덕분에 항목을 배치하는 데 필요한 모든 유연성을 확보할 수 있게 되었습니다. 하지만 그리드는 문서 구조를 구성할 수 있는 새로운 유혹을 불러일으키기도 합니다.
다음과 같은 디자인이 있고 해당 항목에 <h2>, <ul>을 사용하는 것이 가장 적합하다고 가정해 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
<h2>Heading</h2>
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
<li><a href="#">Element 5</a></li>
<li><a href="#">Element 6</a></li>
</ul>
</div>
이러한 요소를 열에 넣고 <h2>를 배치하는 것은 매우 쉽습니다… 적어도 그렇게 보이는 것 같습니다.
1
2
3
4
5
6
7
8
.wrapper {
display: grid;
grid-template-columns: 120px repeat(2, 1fr);
grid-gap: 20px;
}
h2 {
grid-column: 2 / -1;
}
 제목과 목록이 있는 레이아웃입니다. 그리드 컨테이너의 직계 자식만 그리드에 배치됩니다.
예상과 정확히 일치하지 않습니다. 문제는 그리드 컨테이너의 직계 자식만 그리드에 배치되지만 <li>가 그리드 항목으로 작동하기를 원한다는 것입니다. 이에 대한 최악의 해결책은 구조를 평평하게 하고 <ul>을 없애고 <li>를 <div>로 변환하여 그리드 컨테이너의 직접 자식이 되게 하는 것 입니다.
가장 좋은 해결책은 <ul>의 display속성을 subgrid로 설정하는 것이지만, 안타깝게도 subgrid는 사양의 레벨 1에 포함되지 않았으므로 출시될 때까지 좀 더 기다려야 합니다.
<ul>에 display:contents를 사용할 수 있지만, 현재 Firefox만 이를 지원합니다. display:contents는 요소의 자식들이 요소 자체를 무시하고 요소 부모의 직계 자식인 것처럼 표시되도록 합니다.
결국 <ul>에 대해 다른 그리드를 정의해야 합니다. 이 방법은 이상적이지는 않지만 문서 구조를 평평하게 만들고 의미를 손상시키는 것보다는 낫습니다. 이것은 매우 기본적인 예시이며 목록이 전체 그리드에 걸쳐있으므로 부모 그리드에서 일부 값을 상속받을 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
ul {
/* 전체 그리드에 걸쳐 */
grid-column: 1 / -1;
/* 다른 그리드를 생성하고 부모 그리드의 값을 상속 */
display: inherit;
grid-template-columns: inherit;
grid-gap: inherit;
/* display:contents를 이해하는 브라우저의 경우 디스플레이를 덮어씁니다 */
display: contents;
}
두 개의 해결책이 작동하는 모습을 Codepen에서 확인할 수 있습니다.