웹 접근성에 대한 인터뷰 질문 - 2부

업데이트: 이미지를 삭제하고 코드 스니펫을 추가하라는 제안에 감사드립니다.

1. 모바일 및 데스크톱 웹사이트의 접근성 감사는 어떻게 수행합니까?

대답: 접근성 감사에는 수동 및 자동 작업이 필요했습니다. 어떤 장치나 플랫폼에 있는지는 중요하지 않습니다. 따라서 접근 방식은 다음과 같습니다.

이동하는:

모든 모바일에는 접근성 도구가 내장되어 있으며 이를 사용하여 모바일 접근성을 테스트할 수 있습니다. 예: 스크린 리더에는 Apple용 Voice Over, Android용 토크백 등이 있습니다.

데스크톱의 경우 Lighthouse, 키보드, 스크린 리더와 같은 테스트용 유료 소프트웨어는 물론 사전 설치된 무료 소프트웨어가 있습니다.

2. 아리아란? 탭 모듈을 생성하는 동안 ARIA 태그를 어떻게 결정할 것입니까?

답변: ARIA는 Accessible Rich Internet Application의 약자입니다. ARIA는 스크린리더 사용자에게 유용합니다. 시각적으로 어떤 차이도 만들지 않습니다. HTML 태그에서 누락된 많은 태그, 상태 및 속성이 있습니다. 또한 HTML에 정의되지 않은 캐러셀, 페이지 매김 등과 같이 우리가 만드는 많은 사용자 정의 모듈이 있습니다. 이것은 스크린리더 사용자가 이해하기 불가능합니다.

ARIA는 스크린 리더의 역할, 속성 및 상태를 정의하여 이러한 모듈에 대한 정보를 제공합니다.

즉, ARIA는 HTML에서 누락된 정보와 스크린리더 사이의 가교 역할을 합니다.

3. 랜드마크의 중요성은? 웹 페이지에 대한 코드를 작성하고 그 안에 랜드마크를 사용할 수 있습니까?

답변: 랜드마크는 키보드 및 보조 기술 사용자(스크린 리더)를 위해 웹 페이지 영역을 표시하는 방법입니다. 랜드마크를 사용하여 웹페이지의 구성과 구조를 식별합니다. 랜드마크는 시각적으로 제공하는 것과 동일한 웹 페이지 구조를 프로그래밍 방식으로 제공해야 합니다.

4. 아래 CSS 스니펫에 액세스할 수 있습니까? 왜요?

/* Is this CSS Code is Accessible? **/

h1{
  color: #fff;
  font-size: 24px;
}

h1::before{
   content: "Click here"
}

답변: 아니요, 위의 코드는 액세스할 수 없습니다. 문제 중 하나는 콘텐츠가 스크린 리더에서 선택되지 않는 CSS에서 제공된다는 것입니다.

5. 시니어 개발자로서 접근성이 지켜지고 있는지 어떻게 확인할 것입니까?

대답: 우선 - "접근성은 기능이 아니라 인권입니다."나는 이것을 강력히 믿습니다. 따라서 접근성에 대한 클라이언트 또는 제품 관리자의 요구 사항을 얻을 것이라는 팀의 기대치를 설정하는 대신 올바른 코드 작성에 집중하도록 요청합니다. 또한 모든 개발자가 코드 편집기, Lighthouse 테스트에서 ESA11y 플러그인을 사용하고 CI 파이프라인과 통합되도록 할 것입니다.

6. 아래에 액세스할 수 있습니까?

   <img alt="Header with Logo" src="backgroundHeader.png" />

아니요, 위 코드는 alt 태그 때문에 접근이 불가능합니다. 여기에서 이미지 이름을 기반으로 가정하지만 이것은 장식용 이미지일 뿐이며 화면 판독기의 경우 이 alt 태그는 전혀 가치를 추가하지 않습니다.

7. 접근성을 위해 em 또는 rem을 사용해야 합니까?

답변: 접근성을 위해 여백/패딩은 rem, 글꼴 크기는 em을 사용하는 것이 좋습니다. 여기서 할 수 있는 또 다른 방법은 다음과 같습니다.

 html{
    font-size: 100%;
}

위의 코드 조각은 사용자가 사용자 설정에 따라 글꼴 크기를 취하는 데 도움이 될 것입니다.

8. VPAT란 무엇입니까?

답변: 제품의 접근성 수준에 대한 정보를 공유하기 위해 제품에서 사용하는 비공식 문서입니다. 자세히 읽을 수 있습니다here .

9. 시각 장애인이 모바일을 사용하는 방법은?

답변: 모바일에는 기본적으로 스크린리더가 설치되어 있습니다. 장애인은 모바일을 사용하는 사람들을 사용합니다.

10. 입력에서 유형이 중요한 이유는 무엇입니까?

답변: HTML 유형 속성은 스크린리더 사용자에게 중요합니다. 유형은 암호 필드와 관련된 보안 이유뿐만 아니라 입력 유형을 이해하는 데 도움이 됩니다. 비밀번호 유형이 누락된 경우 스크린 리더는 사용자가 입력하는 비밀번호를 소리내어 말합니다.

11. 접근성 트리란 무엇입니까?

답변: DOM이 있는 것처럼 접근성 트리도 있습니다. Firefox 및 Chrome 디버거에서도 이 트리를 볼 수 있습니다. 이를 통해 개발자는 역할, 포커스 가능, 대체 태그, aria-labeldby 등과 같은 접근성 요소가 추가되는 방식을 확인할 수 있습니다.



질문? 다음 주소로 연락할 수 있습니다.

즐거운 배움!!