알아야 할 4가지 일반적인 웹 접근성 문제

명암비 문제

수년 동안 제가 본 가장 일반적인 접근성 문제는 다음과 같습니다. 대비 및 색상 접근성 문제대비 비율이 나쁘면 페이지의 콘텐츠를 보기 어렵고 시각 장애인을 포함한 사용자에게 매우 해로울 수 있습니다.

대비는 두 색상 간에 인지되는 '휘도' 또는 밝기의 차이를 측정하는 것으로, 예를 들어 페이지 콘텐츠의 배경색과 전경색 간의 차이를 나타냅니다. 이 탐색 모음을 살펴보겠습니다.

고객이 초록색을 정말 좋아하고 멋지다고 생각하지만 대비에 문제가 있다고 가정해 보겠습니다. 이 경우 #FFFF 배경을 가진 #83A94C 텍스트 색상을 사용하면 최소 대비 비율인 2.71:1보다 훨씬 낮은 2.71:1의 대비 비율이 생성됩니다. 4.5:1 가 필요합니다. 이 문제를 감지하기 위한 여러 가지 솔루션이 있습니다:

1. 다음과 같은 온라인 대비 검사기를 사용하세요. 위바임 대비 검사기를 누르면 명암비를 계산하여 패스 또는 실패 등급.
2. 다양한 브라우저 대비 검사기 확장 프로그램 중 하나를 사용하세요: WCAG 색상 대비 검사기.
3. 브라우저 통합 대비 검사기를 사용해 보세요. Google Chrome에서 사용하려면 개발 도구를 열고 대상 요소(예: 내비게이션 바의 홈 링크)를 검사한 다음 CSS 색상 속성으로 이동하여 색상 사각형을 클릭하여 색상 선택기를 열면 하단에 대비 비율 값이 표시되고 이를 확장하면 자세한 내용을 볼 수 있습니다. 이 과정은 Firefox에서도 동일하며 색상 선택기의 왼쪽 하단에 비율의 작은 차이만 표시됩니다.

대비에 대한 자세한 내용은 다음을 확인하세요. 대비 및 색상 접근성 문서.

링크 텍스트 문제

링크는 요즘 웹에서 큰 부분을 차지하므로 접근성을 높이는 것이 매우 중요합니다. 링크는 의미가 있어야 하고 사용자에게 맥락을 알려주어야 하므로 자세히 보기, 여기를 클릭, 세부 정보 확인과 같은 텍스트가 포함된 비정보성 링크는 그다지 도움이 되지 않으므로 '세부 정보 확인' 대신 제품 예를 들어 '만달로리안 헬멧'과 같은 제품명을 사용하는 것이 더 좋고 더 많은 정보를 제공합니다. 다음과 같은 단어 여기를 클릭하세요 또는 자세히 알아보기 링크는 기본적으로 클릭이 가능하므로 생략할 수 있으며 '오늘의 뉴스에 대해 자세히 알아보기'와 같은 문구는 '오늘의 뉴스'로 단축할 수 있습니다. 링크 길이에 대한 특별한 규칙이나 제한은 없습니다. 링크를 읽을 수 있어야 합니다. 그 목적을 잘 설명할 수 있을 만큼 충분히 길어야 합니다.

링크용 이미지는 널리 사용되는 패턴이므로 위에서 설명한 것과 동일한 규칙을 따라야 합니다. 이미지 alt 속성은 링크 텍스트의 역할을 하며 화면 리더에서 이를 알립니다. 이미지를 링크로 처리할 때 이미지가 링크의 유일한 콘텐츠인 경우에는 대체 속성이 있어야 하고, 링크에 일부 텍스트와 이미지가 포함되어 있는 경우에는 대체 속성을 생략할 수 있으며, 다음은 몇 가지 예시입니다:

<a href="/ko/notifications/">
  <img src="/img/notification.png" alt="알림">
</a>

링크 접근성에 대해 알아보려면 여기에서 몇 가지 링크를 확인하세요:링크 텍스트 및 모양, 기능적 이미지.

레이블이 누락된 양식 입력

레이블이 없고 입력의 목적을 설명하는 자리 표시자만 있는 양식 입력란을 본 적이 있을 것입니다. 사용자가 모든 입력을 채우고 플레이스홀더가 더 이상 보이지 않게 되면 입력 목적에 대한 시각적 컨텍스트가 사라지지만 여기서는 접근성에 초점을 맞춰 보겠습니다.

연결 레이블 을 입력에 추가하면 사용자가 양식 입력에 초점을 맞추고 있을 때 화면 리더가 레이블을 읽어주고, 레이블을 클릭하거나 터치/테이핑하면 브라우저가 관련 입력으로 초점을 전달한다는 두 가지 큰 이점을 얻을 수 있습니다. 이러한 상황을 쉽게 해결할 수 있는 방법은 다음과 같이 레이블을 추가하는 것입니다:

    이름

    
  

    성

    
  

    이메일

    
  

    제출하기
  

```

모든 입력에는 관련 레이블이 있어 모든 사람이 액세스할 수 있습니다. 입력 용도의 중복을 피하기 위해 자리 표시자를 제거할 수도 있지만, 실제 시나리오를 처리하기가 쉽지 않다는 것을 모두 알고 있습니다. 레이블이 없는 양식 입력이 있는 디자인을 받았는데 클라이언트가 그 부분을 변경하고 싶지 않다는 것이죠. 가장 먼저 떠오르는 해결 방법은 표시: 없음; 또는 가시성: 숨김; 를 레이블에 추가하면 숨겨지긴 하지만 여전히 존재하겠죠? 이러한 속성은 화면의 요소뿐만 아니라 화면 리더 사용자의 요소도 숨기므로 문제가 해결되지 않습니다.

우리는 클립 패턴 를 사용하여 이 문제를 해결했습니다. 이렇게 하면 시각적으로 콘텐츠를 숨기면서도 스크린 리더에 콘텐츠를 제공할 수 있습니다. 다음 CSS를 생성합니다. sr 전용 클래스를 만들어 모든 라벨에 적용합니다:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   높이: 1px;
   오버플로: 숨김;
   위치: 절대
   공백: nowrap;
   width: 1px;
 }

이렇게 하면 레이블이 숨겨지고 화면 리더에서 사용할 수 있으며 디자인과 일치합니다. 그리고 안(:포커스):안(:활성) 의사 클래스는 다음과 같은 포커스 가능한 요소를 방지합니다. a, 버튼, 입력 가 포커스를 받을 때 숨겨지지 않도록 합니다.

초점 표시기 없음

옛날 옛적에 글로벌 CSS 스타일시트에서 이 작업을 수행한 적이 있습니다:

* {
outline: none; /* 끔찍한 실수 */
}

2020년경에 Google 크롬 양식 입력란에 초점이 맞춰졌을 때나 탭을 눌렀을 때 버튼에 검은색 테두리가 나타나는 것을 발견했는데, 당시에는 이해가 되지 않아 정말 이상했지만 몇 가지 조사 끝에 아웃라인 CSS 속성 때문이라는 것을 알게 되어 제거하니 그 '문제'가 해결되었습니다.

그 당시에는 올바른 방법이 무엇인지 전혀 몰랐습니다. 새로운 기본값의 이유와 방법에 대해 몇 가지 조사를 한 후 윤곽선은 요소 초점 표시기이며 제거할 경우 명확한 초점 스타일을 제공해야 하므로 기본적으로 제가 하던 방식은 나쁜 관행으로 간주된다는 것을 알게 되었습니다. 초점 표시기를 원하는 대로 사용자 정의할 수는 있지만 웹사이트에서 완전히 제거하는 것은 접근성 측면에서 큰 문제입니다. 예를 들어 요소 포커스 스타일을 사용자 정의하는 것은 매우 쉽습니다:

 a:focus {
   윤곽선: 4px 단색 #ee7834;
   윤곽선 오프셋: 4px;
 }

접근성 도구

특히 접근성에 대해 다뤄야 할 내용이 더 많기 때문에 앞서 언급한 모든 문제를 확인하는 것은 많은 작업이 될 수 있으므로 접근성 문제를 해결하는 데 도움이 되는 두 가지 훌륭한 브라우저 확장 프로그램이 있습니다.

WAVE 평가 도구 는 웹 콘텐츠의 접근성을 높이는 데 도움이 되는 평가 도구 모음입니다. 구글 크롬과 파이어폭스에서 모두 사용할 수 있습니다.

탐색 모음과 레이블이 없는 입력이 포함된 작은 웹 페이지에서 확장 프로그램을 설치한 후 확장 프로그램 아이콘을 클릭하기만 하면 무엇이 반환되는지 확인해 보겠습니다.

요약 탭에는 오류 1개(양식 요소에 레이블이 없음), 대비 오류 2개, 경고 1개(제목 구조 누락)가 표시되어 매우 명확하고 상세한 결과를 볼 수 있습니다. 세부 정보 탭에는 모든 오류, 경고 및 기능의 목록이 렌더링됩니다. 또한 빨간색 사각형을 클릭하여 페이지에서 직접 상호작용하여 오류 설명과 유형을 확인할 수도 있습니다.

Axe 개발 도구 는 강력하고 정확한 접근성 툴킷입니다. 구글 크롬과 파이어폭스 모두에서 사용할 수 있습니다. 확장 프로그램을 설치한 후 브라우저 개발자 도구를 열고 도끼 개발자 도구 탭으로 이동하여 내 모든 페이지 스캔을 클릭해야 합니다.

Axe 개발 도구에서 대비 문제, 레이블이 누락된 양식 요소, 제목 요소가 누락된 WAVE 평가 도구와 동일한 문제를 보고한 것을 볼 수 있으며, 따라야 할 몇 가지 모범 사례도 알려주었습니다.

접근성을 테스트하는 또 다른 방법은 스크린 리더를 사용하여 웹사이트를 테스트하는 것입니다. 사용 가능한 스크린 리더는 여러 가지가 있습니다:

• NVDA
• 보이스오버 는 macOs 기기에서 사용할 수 있습니다.
• Orca 는 리눅스용 무료 오픈 소스 스크린 리더입니다.

요약

이 글에서는 몇 가지 일반적인 웹 접근성 문제와 이를 해결하는 방법, 웹 접근성을 테스트할 수 있는 유용한 도구에 대해 살펴보았습니다. 대화 상자, 아코디언, 캐러셀과 같은 요소의 접근성에 대해 다룰 내용이 아직 많이 남아 있지만 이 글에서 살펴본 것처럼 접근성 문제를 해결하는 데 도움이 되는 문서와 도구가 많이 있습니다.

기억해야 할 몇 가지 핵심 사항입니다:

• 항상 명암비를 확인하세요.
• 링크에는 항상 유익한 콘텐츠를 제공하세요.
• 양식 요소에는 레이블이 연결되어 있어야 합니다.
• 명확한 초점 스타일링이 제공되어야 합니다.