접근성 알아보기

장애인이 웹을 사용할 수 있도록 지원하는 데 일반적으로 사용되는 도구는 무엇인가요?

적절한 답변을 모두 선택합니다.

점자 출력 기기

스크린 리더

도킹 스테이션

운영체제 설정

웹에서 변화를 일으키는 효과적인 방법은 무엇인가요?

적절한 답변을 모두 선택합니다.

소셜 미디어에 불만을 제기합니다.

소송을 제기합니다.

회사의 개발자에게 직접 문의하세요.

가장 높은 수준의 WCAG 표준은 무엇인가요?

AAA 등급

A 등급

푸어

작동 가능한 예는 무엇인가요?

적절한 답변을 모두 선택합니다.

모든 동영상에는 컨트롤이 있습니다.

사용자가 양식을 작성할 충분한 시간이 있습니다.

모든 활성 요소는 키보드와 터치 스크린을 지원합니다.

간단한 언어를 사용합니다.

다음 중 접근성 있는 버튼을 만들기 위한 권장사항은 무엇인가요?

<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div>

<a id="saveChanges" aria-label="Some awesome article title">Go to shop</a>

<button id="saveChanges" type="button">Go to shop</button>

사이트가 한 페이지에 여러 언어가 표시되는 다국어 온라인 교과서입니다. 보조 기술에 복사본의 언어를 알려주는 가장 좋은 방법은 무엇인가요?

<html>의 기본 lang과 다른 언어로 된 콘텐츠가 포함된 요소의 추가 언어를 설정합니다.

걱정하지 마세요. AT는 각 언어를 자동으로 읽을 수 있습니다.

<html> 요소에 모든 언어를 포함합니다. 예를 들면 <html lang="en,lt,pl,pt">입니다.

`:focus` CSS 스타일 중 흰색 배경에서 가장 접근성이 높은 예는 무엇인가요?

outline: 0.5rem solid yellow;

background-color:black;

outline: none; text-decoration:none; background:none;

text-decoration: dotted underline 2px blue;

건너뛰기 링크의 목적은 무엇인가요?

키보드 사용자가 중복되거나 유용하지 않은 링크 그룹을 건너뛸 수 있도록 지원합니다.

키보드 사용자가 흥미롭지 않은 콘텐츠를 건너뛸 수 있도록 지원합니다.

JavaScript로 요소의 스타일을 변경하는 가장 좋은 방법은 무엇인가요?

JavaScript를 사용하여 요소의 클래스를 전환하고 CSS 스타일 시트에 스타일을 추가합니다.

JavaScript를 사용하여 HTML 요소 내에서 직접 동적 스타일을 적용합니다.

모든 JavaScript 작업이 키보드 사용자를 지원할 수 있나요?

예, 모든 작업은 키보드 사용자를 자동으로 지원합니다.

예, 하지만 추가 작업을 해야 할 수도 있습니다.

아니요. 시맨틱 HTML로만 키보드 사용자를 지원할 수 있습니다.

복잡한 이미지를 접근 가능하게 만드는 방법

적절한 답변을 모두 선택합니다.

나중에 도움말에 설명을 포함합니다.

자세한 설명이 포함된 긴 형식의 대체 텍스트를 추가합니다.

이미지에 aria-describedby 속성을 추가합니다.

긴 설명에는 링크를 사용하세요.

색상만으로는 문서를 식별하기에 충분하지 않습니다. 독자가 UI 요소를 식별하는 데 도움이 되는 다른 방법은 무엇인가요?

패턴

텍스트

아이콘

모두 정답입니다.

동작의 운영체제 설정을 반영하는 것은 무엇인가요?

@prefers-reduced-motion

JavaScript 전환

읽기 쉬운 카피를 위해 카피와 배경 간에 항상 고대비를 사용해야 합니다.

거짓

참

접근성에 가장 적합한 글꼴은 무엇인가요?

접근성 유형

Arial, Verdana와 같은 시스템 글꼴

괜찮습니다.

다음 중 가장 접근성이 높은 양식 입력은 무엇인가요?

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>

Email address: <input type="email" required>

<label>Email address: <input type="email" required></label>

<label>Email address: <input type="email" required autocomplete="email"></label>

접근성 구성요소는 항상 사용자에게 접근 가능해야 하나요?

아니요, 먼저 구성요소를 테스트해야 합니다.

예, 추가 작업 없이 이러한 구성요소를 사용할 수 있습니다.

사이트에 접근할 수 있는지 확인하려면 어떤 테스트를 해야 하나요?

적절한 답변을 모두 선택합니다.

자동 테스트

수동 테스트

사용자 테스트

보조 기술 테스트

평가 테스트

자동 테스트에서 어떤 오류가 포착되나요?

적절한 답변을 모두 선택합니다.

포용적인 표현

대체 텍스트 누락

색상 대비 문제

설명적인 양식 라벨

ARIA 오류

어떤 요소가 WCAG 색상 대비 표준을 충족해야 하나요?

아이콘

제목

본문 텍스트

위 항목 모두

접근성 테스트에 가장 적합한 스크린 리더는 무엇인가요?

없습니다.

JAWS

VoiceOver

Orca

보조 기술로 테스트하는 목적은 무엇인가요?

웹사이트 또는 앱의 결함을 테스트합니다.

보조 기술을 사용하는 사용자와 동일한 환경을 경험할 수 있습니다.

장애인이 웹을 사용할 수 있도록 지원하는 데 일반적으로 사용되는 도구는 무엇인가요?

웹에서 변화를 일으키는 효과적인 방법은 무엇인가요?

가장 높은 수준의 WCAG 표준은 무엇인가요?

작동 가능한 예는 무엇인가요?

다음 중 접근성 있는 버튼을 만들기 위한 권장사항은 무엇인가요?

사이트가 한 페이지에 여러 언어가 표시되는 다국어 온라인 교과서입니다. 보조 기술에 복사본의 언어를 알려주는 가장 좋은 방법은 무엇인가요?

:focus CSS 스타일 중 흰색 배경에서 가장 접근성이 높은 예는 무엇인가요?

건너뛰기 링크의 목적은 무엇인가요?

JavaScript로 요소의 스타일을 변경하는 가장 좋은 방법은 무엇인가요?

모든 JavaScript 작업이 키보드 사용자를 지원할 수 있나요?

복잡한 이미지를 접근 가능하게 만드는 방법

색상만으로는 문서를 식별하기에 충분하지 않습니다. 독자가 UI 요소를 식별하는 데 도움이 되는 다른 방법은 무엇인가요?

동작의 운영체제 설정을 반영하는 것은 무엇인가요?

읽기 쉬운 카피를 위해 카피와 배경 간에 항상 고대비를 사용해야 합니다.

접근성에 가장 적합한 글꼴은 무엇인가요?

다음 중 가장 접근성이 높은 양식 입력은 무엇인가요?

접근성 구성요소는 항상 사용자에게 접근 가능해야 하나요?

사이트에 접근할 수 있는지 확인하려면 어떤 테스트를 해야 하나요?

자동 테스트에서 어떤 오류가 포착되나요?

어떤 요소가 WCAG 색상 대비 표준을 충족해야 하나요?

접근성 테스트에 가장 적합한 스크린 리더는 무엇인가요?

보조 기술로 테스트하는 목적은 무엇인가요?

`:focus` CSS 스타일 중 흰색 배경에서 가장 접근성이 높은 예는 무엇인가요?