웹접근성지침(WCAG2.0)
-
[웹접근성 지침-일반기술 G183] 링크 텍스트는 주변 텍스트와 명도 대비율이 3:1이어야 하고 초점이 가면 추가적인 시각적 단서가 제공되어야 합니다.
텍스트 링크는 다른 텍스트보다 명도 대비율 3:1이상 달라야 하며, 초점을 맞췄을 때 추가적인 시각적 단서를 제공해야 한다.기술설명이 기술의 목적은 텍스트의 색상만으로는 차이를 구별하지 못하는 사용자에게 시각적 단서를 추가적으로 제공하는 것입니다.대부분 문단 안에 링크가 적용된 단어에 색상이 적용되어 있습니다. 예를 들어 여러 단어 중에 다른 색으로 구분된 텍스트는 링크가 걸려 있는 경우입니다.이 기술은 색상 차이를 인식하는데 어려움이 있는 사용자나 시력이 약한 사용자들도 텍스트 링크에 초점이 가거나 마우스가 올라가 있을 때 추가적인 단서를 제공하는 방법을 설명합니다. 이 기술을 사용하면 사용자가 마우스로 텍스트 링크를 가리키거나 탭으로 초점을 맞출 때 때 추가적인 시각적 단서를 제공할 뿐만 아니라. 주..
더보기
-
[웹접근성 지침-일반기술 G182] 텍스트에 색상으로 정보를 전달하는 경우, 사용자에게 추가적인 시각적 단서를 주어야 합니다.
텍스트에 색상 말고도 스타일을 다르게 하여 사용자가 구분할 수 있게 만들어야 합니다. 기술설명이 기술의 목적은 텍스트 색상의 차이를 구별하지 못하는 사용자에게 또 다른 시각적 단서를 제공하는 것입니다.대부분 문단이나 문장 내에 있는 일부 단어가 특정한 기능을 가지고 있을 때, 이를 특수 문자나 그래픽 등으로 표시하지 못하는 경우 색상을 사용하여 표시를 합니다.예를 들어 문장에서 한 단어에만 색상이 들어가 있습니다. 이는 해당 단어에 링크가 걸려있다는 의미입니다.이 기술은 색상 외에도 다른 단서를 제공하여 색상 차이를 구별하지 못하는 사용자가 식별할 수 있게 하는 방법을 설명합니다. 예시[예시1] 페이지에 두 개의 텍스트 링크가 있습니다. 각각 텍스트의 색상은 다릅니다. 그리고 색상이 없어도 식별할 수..
더보기
-
[웹접근성 지침-일반기술 G181] 재인증 페이지에서 사용자가 입력한 데이터는 숨기거나 암호화된 데이터로 인코딩되어야 한다.
재인증을 해야 한다면, 이전에 작성했던 내용들은 서버에 저장하지 않고 재인증 페이지로 전달하는 방식을 사용해야 합니다.기술설명사용자가 인증을 해야 하는 페이지에서, 간혹 사용자가 일정한 시간 동안 활동을 하지 않아 세션이 자동으로 종료되는 경우가 있습니다. 사용자가 제한시간 이내에 데이터를 입력하지 못하고 제한 시간 이후에 제출한 경우, 서버는 사용자가 입력한 내용을 서버로 전속하기 전에 재인증을 요구하게 됩니다. 이 경우 서버는 재인증하는 페이지에 사용자가 입력했던 데이터를 숨져서 전달합니다. 그 다음, 사용자가 재인증을 하면 서버는 재인증 페이지에서 숨겨서 전달했던 (사용자가 입력했던)데이터를 서버에 전달하거나, 사용자가 검토 할 수 있게 데이터가 표시된 페이지를 보여줍니다. 이 기술은 사용자가 제출..
더보기
-
[웹접근성 지침-일반기술 G180] 사용자에게 제한시간의 10배를 사용할 수 있는 기능을 제공해야 한다.
제한시간이 있는 작업을 할 때, 장애가 있는 사용자를 위해 제한시간을 조절할 수 있는 기능이 제공되어야 합니다. 기술설명이 기술의 목적은 장애가 있는 사람들이 일반 사람보다 오래 걸릴 수 있는 작업을 완수 할 수 있도록, 충분한 시간을 제공해 주는 것입니다.페이지에 있는 제어기나 기본 설정을 이용하여, 주어진 제한 시간보다 최소 10배 더 사용할 수 있어야 합니다.사용자가 모든 페이지의 제한시간을 한 번에 조절할 수도 있지만, 부분만 변경할 수 있는 방법도 제공하면 좋습니다.사용자가 제한 시간이 있는 활동을 시작하기 전에 제한시간을 먼저 변경할 수 있게 해야 합니다. 예시[예시] 항공권 구매 앱이 있습니다. 이 앱은 몇 단계를의 절차를 통해 항공권을 구매 하며, 각 단계별로 1분의 제한시간을 두고 있습..
더보기
-
[웹접근성 지침-일반기술 G179] 텍스트 영역의 너비가 변경되지 않고 텍스트의 크기만 조정된 경우, 콘텐츠나 기능에는 손실이 없어야 합니다.
텍스트 크기가 늘어나서 콘텐츠가 밀리면, '줄 바꿈'을 주어 밑으로 계속 볼 수 있게 만들어야 합니다. 기술설명일부 브라우저(user agents)는 텍스트 영역의 너비를 변경하지 않고 텍스트의 크기만 변경하는 기술을 지원합니다.지정된 텍스트의 역역을 벗어나면 콘텐츠가 기능이 손실 될 수도 있습니다.하지만 레이아웃 속성을 이용하여 콘텐츠를 효과적으로 계속 보이게 할 수 있습니다.블록크기를 200% 늘려도 텍스트가 넘치지 않게 정의하면 됩니다.텍스트가 영역을 벗어나면 줄 바꿈을 주면 됩니다. 모든 텍스트가 들어갈 수 있을 만큼 높이를 제공하면 됩니다.크기가 조정된 텍스트가 주어진 영역을 벗어나면 스크롤을 제공하면 됩니다. 예시[예제1] 2열 레이아웃을 만들기 위해 CSS의 'white-space'를 사..
더보기
-
[웹접근성 지침-일반기술 G178] 사용자가 모든 텍스트의 크기를 최대 두 배까지 변경할 수 있는 기술을 제공하자.
글씨의 크기를 사용자가 옵션으로 선택할 수 있게 하면, 사용자는 별다른 설정 없이도 원하는 크기로 글자를 볼 수 있게 됩니다.기술설명이 기술의 목적은 웹 페이지 내에 있는 텍스트의 크기를 점차적으로 키울 수 있는 기술을 제공하는 것입니다.시력이 좋지 못한 사용자들 중에 '확대하여 보여주는 소프트웨어'를 사용하지 않으면서 '브라우저의 텍스트 크기 조정'도 익숙하지 않은 사용자가 있을 수도 있습니다. 특히 노안으로 시력이 저하되고 컴퓨터를 늦게 배운 노인 분들이 이에 해당됩니다. 또한 장애가 있어 글자 크기를 크게 키워야 인지할 수 있는 사용자도 있습니다. 이 기술은 이런 일부 사용자 분들이 쉽게 사용할 수 있는 기술을 제공하는 것입니다. CSS 전환 효과나 스크립트를 사용하여 링크나 버튼으로 글자 크기를 ..
더보기
-
[웹접근성 지침-일반기술 G177] 수정이 필요한 부분에 제안하는 설명을 제공하자.
입력 필드에 잘못된 내용을 입력한 경우, 이를 바로 잡아줄 메시지나 링크가 제공되어야 합니다.기술설명이 기술의 목적은 사용자가 잘못된 값을 입력한 경우 이를 수락하지 않고 올바른 값을 입력할 수 있도록 '제안'을 제공하는 것입니다. '제안'은 올바른 맞춤법을 알려주거나, 올바른 입력 값에 대한 예시를 제공하는 것입니다. 양식에서 오류가 발생한 위치에 따라 '제안'이 필드 옆에 제공되거나 링크를 통해 다른 페이지로 이동할 수도 있습니다. 사용자가 입력을 잘못하여 제출 했다면, 사용자가 쉽게 수정할 수 있도록 간편하게 제공되어야 합니다.'제안'이나 '제안'에 대한 링크는 해당 필드의 양식 근처에 제공되어야 합니다. 양식의 상단이나, 필드의 앞, 또는 해당 필드 옆에 제공되는 것이 좋습니다. 예시 [예시1]..
더보기
-
[웹접근성 지침-일반기술 G176] 반짝이는 영역을 최대한 작게 만들자.
깜빡임의 사용 면적을 최소화 하여 사용자에게 피해를 주지 않아야 합니다.기술설명이 기술의 목적은 '인지 할 수 있을 만큼의 최소한의 영역'으로 '성공 기준을 통과 하는 방법'을 알려주는 것입니다. 1초 동안 3번 이상 깜빡임 또는 번쩍이는 것이 '시야 10도(시야의 중앙 영역)'에서 25% 미만을 차지하는 경우, 성공 기준을 통과 할 수 있습니다. '시야 10도'는 시야의 중앙 영역을 말하는 것입니다. 이 영역은 시각과 관련된 감각기관으로 가득 차 있습니다.이 영역에서 반짝이는 빛은 특히 전달이 잘 됩니다. 그래서 광과민증이 있는 사용자의 경우 반짝이는 빛으로 인해 발작을 일으킬 수 있습니다.하지만 '시야 10도'외 부분에서는 시각 감각이 적기 때문에 영향이 적습니다. 그래서 '시야 10도'에서만 중점..
더보기
-
[웹접근성 지침-일반기술 G175] 글자색과 배경색을 선택할 수 있는 기술을 제공하자.
각 페이지마다 '색상을 변경할 수 있는 제어기'를 쉽고 빠르게 찾을 수 있도록 페이지 상단에 배치하여 쉽게 사용할 수 있도록 UI를 제공해야 합니다.기술설명이 기술의 목적은 사용자가 콘텐츠에 자신이 원하는 전경색과 배경색을 지정하게 하는 제어기를 웹 페이지에 포함시키는 것입니다.이 기술은 홈페이지 내에 있는 여러 페이지에 적용할 수 있도록, 사용자가 선택한 설정 값이 저장 되어야 합니다. 모든 페이지에 사용자가 설정한 전경색과 배경색을 저장하는 제어기가 사이트에 포함되어야 합니다.제어기는 기본 설정 값을 가지고 있다가 저장된 설정이 발견되면 해당 값을 적용하도록 설계되어야 합니다. 인지 장애가 있는 사용자의 경우, 흰색 배경에 검은색 텍스트를 보는 것이 힘들 수 있습니다.그래서 다른 색상이 필요할 수 있..
더보기
-
[웹접근성 지침-일반기술 G174] 텍스트 색과 배경색을 사용자가 인지 할 수 있는 대비로 전환 할 수 있는 기능을 제공하자.
사용자가 확실하게 인지 할 수 있는 대비로 만들어진 '대체 페이지'를 제공한다면 다수의 사용자가 텍스트를 읽는데 어려움이 없을 것입니다. 기술설명웹 페이지 일부에 텍스트와 배경 간의 대비 좋지 않아 텍스트가 잘 보이지 않는 경우가 있습니다. 그래서 텍스트와 배경 간의 대비를 개선시킬 수 있는 링크나 제어기를 제공해야 합니다. 이 기술로 사용자는 원하는 대비로 페이지를 볼 수 있게 됩니다. 이런 링크와 제어기는 사용자가 쉽고 빠르게 찾을 수 있도록 배치되어야 합니다. 이 기술을 성공적으로 사용하려면 아래 세 가지 사항을 충족시켜야 합니다. 1. 페이지 내에 있는 링크나 버튼이 잘 보여야 합니다. 그래야 사용자가 그것을 이용하여 다음 페이지로 이동할 수 있습니다. 2. 새 페이지로 이동했다면 원본 페이지에서..
더보기
-
[웹접근성 지침-일반기술 G173] 영상을 설명하는 오디오를 제공하자.
'시각장애를 가진 사용자'를 위해 '시청각 미디어'에 상황을 설명해 주는 사운드가 포함된 '두 번째 미디어'를 제공해 주자 기술설명이 기술의 목적은 시각 장애인도 시청각 자료를 이해 할 수 있도록 '영상을 설명하는 오디오'를 비디오 콘텐츠의 두번째 버전으로 제공하는 것입니다. 지금의 '브라우저(= user agents)' 기술로는 여러 사운드 트랙을 하나로 합칠 수 없습니다.그래서 '원본 사운드 트랙'과 '영상을 설명하는 사운드'를 하나의 영상에 결합한 미디어를 추가로 제공하는 것입니다. ‘영상을 설명하는 사운드’는 콘텐츠의 이해를 위해 동작, 캐릭터, 장면전환, 화면안의 텍스트 등의 정보를 제공해야 합니다. 추가된 '영상을 설명하는 사운드'는 '원본 사운드'를 가려서는 안 됩니다.추가된 정보는 원본 ..
더보기
-
[웹접근성 지침-일반기술 G172] 모든 텍스트의 '양쪽 정렬'을 제거하는 기술을 제공하자.
화이트 리버가 생기지 않도록 '양쪽 정렬'을 해지하는 버튼을 페이지 가장 상단에 배치하자. 기술설명이 기술의 목적은 '양쪽 정렬(justified both left and right)'이 적용되지 않은 버전을 제공하는 것입니다.제작자는 레이아웃 때문에 '양쪽 정렬'을 주는 경우가 있습니다. 이런 경우에는 '양쪽 정렬'을 제거하는 기능을 제공해 주어야 합니다. '양쪽 정렬'을 제거 하게 해주는 제어기는 쉽고 빠르게 찾을 수 잇도록 페이지 시작 위치에 두어야 합니다. 자세한 내용은 경로의 내용들을 참고해주세요.https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C29https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance..
더보기
