HackerRank에서 접근 가능한 콘텐츠를 만드는 단계

개요

후보 사이트는 이제 WCAG 2.1(레벨 AA)에 따라 접근 가능합니다. 따라서 질문도 접근 가능해야 하며, 접근성에 영향을 미치지 않도록 하는 것이 중요합니다.

당신이 평가를 위해 질문을 만들려고 하는 채용 담당자라면, 아래 단계들이 접근 가능한 질문을 만드는 데 도움이 될 것입니다. 

• 평가를 만든 후, ‘Questions’ 탭으로 이동하여 질문을 보기 모드로 엽니다.

  

  질문 소유자인 경우, 질문을 편집 모드로 열고 엔드포인트를 보기 모드로 업데이트할 수 있습니다. 아래와 같이 보여집니다.

  

• 이 질문을 axe를 통해 실행하세요. 이 확장 프로그램을 설치하고 실행하여 위반 사항이 있으면 수정할 수 있습니다. 이 도구는 대부분의 위반 사항을 잡아냅니다.  아래 단계들은 이 도구를 사용하여 문제를 식별하고 수정하는 방법을 보여줍니다.

    axe 실행 단계:

1. Axe 확장 프로그램을 설치하세요.

2. 확장 프로그램을 설치한 후, 브라우저를 다시 시작해야 합니다.

3. 컨텍스트 메뉴에서 검사 항목을 클릭하여 개발자 도구를 엽니다. 오른쪽 클릭하여 컨텍스트 메뉴를 열 수 있습니다.

   

4. 이제 개발자 메뉴에서 axe dev tools를 볼 수 있어야 합니다.

   

5. 왼쪽 패널에서 ‘스캔’을 클릭하여 axe Dev tools를 실행하세요.  

   

• Axe는 제안된 수정 사항과 함께 모든 위반 사항을 보고합니다. 위반 사항이 수정되면 다시 스캔을 실행하고 질문에 접근할 수 있습니다.

  

이미지 처리

왜 대체 텍스트(alt 텍스트)가 필요합니까?

때때로 문제 설명에 이미지를 추가하고 싶을 수 있으며 이러한 이미지는 모든 사용자가 인식하지 못할 수 있습니다. 이러한 경우, 모든 사용자가 이러한 이미지를 접근할 수 있도록 하는 옵션이 매우 중요해집니다. 따라서 해당 이미지를 설명하는 대체 텍스트(alt 텍스트)가 필요합니다.

아래 경우에는 alt 텍스트(대체 텍스트)를 추가해야 합니다.

1. 스크린 리더 사용자에게 이미지는 정보를 전달하지 않습니다.

2. 인지 장애가 있는 사용자가 이미지를 이해하지 못하는 경우.

3. 때때로 사용자는 산만함을 방지하기 위해 이미지를 끌 수 있습니다.

따라서 위에 언급된 사용자에게 정보 손실이 없도록 alt 텍스트를 권장합니다.

alt 텍스트를 어떻게 추가합니까?

문제 생성 흐름에서 ‘이미지’ 아이콘(아래 스크린샷)을 클릭하여 문제 설명에 이미지를 추가할 수 있습니다. 그러면 텍스트 표시 필드가 있는 ‘이미지 속성’ 팝업이 열립니다. 적절한 값을 텍스트 표시 필드에 설정하면 이 값이 이미지에 대한 대체 텍스트로 사용됩니다.

모든 이미지에 대체 텍스트(alt 텍스트)가 필요합니까?

모든 이미지에 alt 텍스트가 필요하지는 않습니다. 대부분의 경우, 사용되는 이미지는 순전히 장식용이거나 문제 설명의 일부 텍스트가 이미 이미지의 목적을 전달할 수 있기 때문입니다. 이러한 경우, 설명에 이미지에 대한 정보가 포함되어 있으므로 빈 alt 텍스트를 추가하는 것도 전혀 문제가 되지 않습니다. 아래와 같이 보여집니다.

대체 텍스트(alt 텍스트)가 필수인 경우는 언제입니까?

아래 시나리오에서는 설명적인 alt 텍스트가 필요합니다

1. 이미지가 네비게이션 요소로 작용하는 경우 예를 들어 링크.

2. 이미지에 텍스트가 포함된 경우