웹표준

웹 표준
모든 운영체제, 모든 브라우저에서 같은 결과를 볼 수 있도록 만든 표준언어
웹 접근성의 이해
웹 접근성이란

• 정의 : 웹 콘텐츠라는 대상에 접근할 수 있는 능력
• 웹 접근성의 중요성
  1. 누구나 어떤 환경에 구애받지 않음
  2. 전문적은 능력 없이 웹 사이트에서 제공하는 모든 정보
     웹 접근성의 범위
• 웹 접근성의 좁은 의미 : 다양한 사용자 환경에서 장애인,보조기기, 보조기술 =장애인 접근성
  웹 접근성 관련 용어
• 웹 접근성의 넓은 의미: 기본적인 정의나 기대효과
  1. "장애인 접근성" 중심으로 현재까지 ActiveX 사용
  2. 시각장애인등 다양한 장애유형별 사용자가 이를 키보드로 이용 가능함
  3. 대체수단을 통하여 음성 지원 등 다양한 방법으로 설피 및 이용할 수 있다면 웹 접근성을 준수한 것으로 인정
• 웹 표준, 웹 호환성, 오픈 웹
  정지 기능 제공
• 웹 표준: 월드 와이드 웹의 축면을 서술하고 정의하는 공식 표준이나 다른 기술 규격으 ㄹ가리키는 일반적인 용어
• 웹 호환성
  1. 행정기관이 국민을 대상으로 함-전자정부 서비스 등의 웹사이트를 사용자인 국내외 거주하고 있는 국민
  2. 어떤 브라우저를 사용하든지 웹 사이트에 접속하여 정상적인 서비스를 받을 수 있어야함
• 다.오픈웹
  1. 윈도와 인터넷 익스플로러를 통해서만 이용할 수 있는 대한민국의 전자정부와 온라인 뱅킹 서비스를 대상으로 함

장애인의 웹 사용과 장애인차별금지법
장애인과 인터넷 이용환경

• 인터넷은 이동이 불편하거나 소통이 어려운 장애인 사용자에게는 웹 접근성을 높여 이용 가능하도록 하는 것이 중요한 요소가 됨
• 정보통신 장애 환경의 이해
  1. 고정키
  2. 필터키
  3. 토글키
  4. 고대비모드
  5. 마우스키
     장애인차별금지법
• 정의
  1. 장애인 차별금지 및 관리구체 등에 관한 법률의 줄임말
  2. 모든 생활 영역에서 장애를 이유로 차별을 금지하고, 장애를 이유로 차별받은 사람의 권익을 효과적으로 구제하기 위한 법
• 적용시기(2007.04제정후2008.04시행)
  웹 접근성 의무적용 시기
• 웹접근성 의무적용 대상
  1. 현제 시점에서 모든 웹 접근성을 의무 적용
  2. 민간 일반 공연장및 소공연장과 300석 이상의 영화상영관, 사립박물관과 미술관 제외
  3. 웹 접근성 개선 및 장치법 적용 프로젝트들이 2010년부터 지속적으로 이루어짐
• 장애인차별금지법 미준수시
  1. 구제절차: 국가인권위원회-법무부-민사상 손해에 대한 손해배상청구- 형사소송
  2. 진정 가능한 대상: 누구나
  3. 업종책임: 소명
• 장애인차별 금지법: 악의적인지 고의적인지 판단필요

인식의 용의성1
대체 텍스트

• 제공방법
  1. 텍스트 이미지에 대체 텍스트를 미 제공한 경우
  2. 불충분한 대체 텍스트를 제공한 경우
  3. 오타로 표기한 경우
  4. <input type="image> 에 대체 텍스트를 미 제공한 경우
  5. 게시판 내용 중 이미지의 대체 텍스트를 미 제공한 경우
  6. 블릿 이미지에 대한 대체 텍스트를 미 제공한 경우
  7. 의미없는 이미지에 대한 대체 텍스트를 제공한 경우
  8. 여러 개로 분리한 이미지 조각의 대체 텍스트 제공
• 대체텍스트는 이미지의 alt속성 값을 이용해서 제공함
• 이미지의 내용이 복잡하거나 길어질 경우에는 lingdesc 속성을 이용하여 별도의 파일로 제공
  멀티미디어 대체 수단
• 멀티미디어 대체수단의 검사항목 해설
  1. 정보의 정확성과 한 화면에서 볼 수 있도록 제공
  2. 정보의 차별이 생기지 않도로 주의 : 청각 장애인
  3. 파일로 제공되는 동영상과 음성 및 자막도 평가대상에 포함
  4. 닫힌 자막(Closed Caption)을 오디오와 동기화 시켜 제공
  5. 즉시성이 필요한 경우, 실시간 수화를 제공하거나 자막을 제공
• 멀티미디어 대체수단의 제공 방법
  • 제공방법
    • 멀티미디어 콘텐츠를 동등하게 인식할 수 있도록 제작하기 위해서 자막, 대본 또는 수화를 제공한 경우 준수한 것으로 인정
  • 오류유형
    • 영상 음성콘텐츠에 자막, 대본,수화 중 하나 이상 대체수단을 제공하지 않은경우
    • 내용 전체를 충분히 설명하지않고, 요약정보나 제목만 제공하는 경우
    • 텍스트만 제공하는 영상 콘텐츠에서 동등한 음성을 미 제공시
• 동영상의 내용과 동일한 자막, 수화 또는 원고등을 제공
• 실시간으로 제공하는 CCTV같은 영상은 제공하지 않음
  인식의 용의성2
  색에 무관한 콘텐프 인식
• 그랴프의 경우 색이 아닌 패턴또는 인출선등을 이요하여 알려줌
• 필수입력 항목을 색으로만 표현하지않고, 블릿이나 텍스트의 형태ㅐ를 수분하여 제공함
  명확한 지시사항 제공
• '여기를 클릭하시오','검정색을 클릭하새요' 등 모양,색,방향 등으로만 구분지면 안되며, 다양한 감각을 통해 용도나 목적을 이해할 수 있도록 해야함
  텍스트 콘텐텐츠의 명도 대비
• 굵은14px이상 굵은 18px미만의 텍스트 명도 대비:3:1
• 보통형태의 18px 미만의 텍스트 명도 대비4:5:1
• 보통형채의 18px이상의 텍스트 명도대비
• 화면 확대가 가능하도록 구현한 콘텐츠의 명도대비
  콘텐츠 간의 구분
• 이웃한 콘텐츠가 테두리, 기분선 서로 다른 무늬 등을 이용하여 시각적으로 구분되도록 제공한 경우 준수한 것으로 인정
  운용의 용이성
  키보드 사용 보장
• 키보드 사용 보장의 개념: 모든 기능은 키보드만으로도 사용 할 수 있어야한다
• 키보드 사용 보장의 필요성
  • 마우스를 이용하기 어려운 사용자의 어려움 해소
• 키보드 사용 보장의 검사항목 해설
  • 마우스로 이용 가능한 기능 키보드로도 이용 할 수 있도록 구현
• 키보드 사용 보장의 제공 방법
  • 모든 기능을 키보드로 접근, 사용 가능하도록 제공
    초점이동
• 초점이동의 개념: 키보드에 의한 초점이 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야함
• 초점이동의 필요성
  • 키보드로만 웹 사이트를 이용하는 사용자 어려움 해소
• 초점이동의 검사항목 해설
  • 초점을 받았을 때ㅐ 시각적으로 구분, 사용자가 현재 키보드 위치를 이해할 수 있도록 함
• 초점이동의 제공 방법
  • 키보드 초점을 받은 링크,컨트롤 및 입력 서식 초점점을 받지 않은 객체들로부터 구분될 수 있게 제공
• 조작기능
  • 조작기능의 개념: 사용자의 입력 및 컨트롤을 조작할 수 있도록 하는 것
  • 조작 기능의 필요성
    • 손 떨림이 있는 사용자와 시각 장애인의 용이한 조작
  • 조작 기능의 검사항목 해설
    • 링크, 사용자 입력, 기타 컨트롤 등의 안쪽 여백을 두고 이곳에서는 위치 지정 도구가 조작에 미반응
  • 조작 기능의 제공 방법
    • 모든 컨트롤들은 대각선 길이가 6.0mm이상
    • 컨트롤의 안쪽 여백: 1px이상
• 응답시간 조절
  • 응답 시간 조절의 개념: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야함
  • 원천적으로 콘텐츠의 이용에 따르는 시간 조절을 허용할 수 없는 콘텐츠는 예외로 인정
  • 응답시간 조절의 필요성
    • 감각 장애가 있는 사용자의 어려움 해소
  • 응답사건 조절의 검사항목 해설
    • 시간제한이 이쓴ㄴ 콘텐츠 정지, 시간 연장할 수 있는 기능 제공
    • 제한된 시간이 일반적인 사용자를 위해 제시된 경우 응답시간 조절 예외 인정
  • 응답시간 조절의 제공방법
    • 시간제한이 있는 콘텐츠 응답시간 조절 가능하게 제공
    • 페이지 재 이동시 회피할 수 있는 수단을 제공하지 않은 경우
• 정지 기능 제공
  • 정지 기능 제공의 개념: 자동 변경되는 콘텐츠 움직임을 제어할 수 있어야함
  • 정지 기능 제공의 필요성
    • 콘텐츠에 대한 인식이 느린 사용자 어려움 해소
  • 정지 기능 제공의 검사항목 해설
    • 정보 제공하는 콘텐츠가 자동 변경되는 경우 반드시 이전, 다음, 정지 기능을 제공
  • 정지 기능 제공의 제공방법]
    • 자동 병경되는 콘텐츠의 움직임 제어 할 수 있도록 제공
• 운용의 용이성2
깜빡임과 번쩍임 사용 제한
  • 초당3~50회 깜빡임이 반복되는 콘텐츠를 제공하면 안됨
    1. 유의 점: 광과민성 발작 일으킬 수 있음
    2. 대안: 사전에 경고, 제작하지 않아야한다
  • 깜빡임이 3초 이하인 경우 문제가 되지 않음
• 반복 영역 건너뛰기
  • 특별한 경우가 없다면요소 다음으러 제공해야 함
  • 3게 이하의 반복영역은 건너뛰기 링크를 제공해야함
    • 스킵 네비게이션: 자주반복되는 영역은 본문이나 타 메뉴로 바로 건너뛸 수 있도록 한것
    • 필요성: 시각 상지 장애인들이 마우스 사용자와 같이 원하는 콘텐츠로 쉽게 접근할 수 있게 함
• 제목제공
  • 필요성: 각각 해당 콘텐프가 어떤 내용을 담고 있는지 미리 짐작할 수 있게 해야함
  • 페이지 제목이 콘텐츠 내용을 나타내야 함
  • 콘텐츠 구분은<h1~6>요소를 활용하여 제공해 하며,,
• 적절한 링크 텍스트
  • 링크의 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 하며 텍스트를 URL로만 제공하지 않음
  • 목적: 정보를 통해 목적이나 용도를 잘 제공-해당 내용을 잘못 이해해 생긴 사용자 실수, 번거로움을 줄여줄 수 있음
  • 오류 유형 분석
    1. 목적이나 용도를 알기 어려운 링크 텍스트를 제공한 경우
    2. 링크 텍스트를 단순히 URL경로로만 제공하지 않는 것을 권장
• 이해의 용의성1
기본언어 표시
  • 기본언어 표시 개념
    • 주로 사용하는 언어를 명시해야 한다.
  • 기본언어 표시 제공 방법
    • 웹 페이지에서 주로 사용하는 언어를에 lang속성을 사용하여 제공한 경우 준수한 것으로 인정한다.
  • 주의 사항 분석
    • 공식 언어 코드(ISO 639)
      • 언어 • 언어코드 • 언어 • 언어코드
      • 중국어(Chinese) • 독일(German) • 영어(English) • 불어(French)
      • zh • de • en • fr
      • 일본어(Japanese) • 한국어(Korean) • 러시아어(Russian) • 스페인어(Spanish)
      • ja • ko • ru • es
      • 사용자 요구에 따른 실행
    • 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
    • 사용자가 의도하지 않은 기능이 자동 실행되지 않도록 제공한 경우 준수한 것으로 인정한다.
• 웹 접근성 관련 용어
  • 웹 접근성의 넓은 의미
    • 기본적인 정의나 기대효과
  • 웹 접근성의 지침
    • 장애인 접근성 중심으로 현재까지 Active-X 사용
    • 시각장애인이등 다양한 장애유형별 사용자가 이를 키보드로 이용 가능하다.
    • 대체수단을 통하여 음성 지원 등 다양한 방법으로 설치 및 이용할 수 있다면 웹 접근성을 준수한 것으로 인정한다.
  • 웹 표준, 웹 호환성, 오픈 웹
• 이해의 용의성2
콘텐츠 선형 구조
  • 개념: 웹 문서르 제작할 때 뼈대가 되는 HTML 마크업 언어
  • 제공방법: 콘텐츠 순서가 논리적으로 선형화되어 제공시 인정
  • 오류유형
    1. 계층 구조가 명백하게 필요한 콘텐츠를 충첩 마크업을 이용하여 표현하지 않은경우
    2. '제목-내용'으로 구성된 콘텐츠 목록의 배치가 분리되어 내용을 직관적으로 이해할 수 없는 경우
  • 주의 사항: 논리적으로 구성
    1. 키보드로 접근할 떄
    2. 마우스를 탭 메뉴에 올렸을때
  • 제목과 내용이 연속되어 있는 구조인 경우, 제 목에 해당하는 내용임을 인식할 수 있도록 순서대로 구성
    • 구조 : 제목+내용
  • 반드시 제목과 내용 순이 아니라, 직관적으로 내용을 이해할 수 있는 형태로 구성되어 콘텐프를 선형화하였을 때 이해가 용이하도록 제공
• 표의 구성
  • 데이터 간의 상관관계를 요약하여 제공하는 정보
  • 제공방법
    • 표를 이해할수 있도록 정리한 경우
  • 오류 유형
    1. caption 요소,summary 속성을 제공하지 않거나 용도 또는 설명이 부적절한 경우
    2. 데이터 태이블에 제목 셀과 내용 셀을 th,td요소로 구분하지 않은경우
    3. 복잡한 표 제공시 id,headers,scope로 제공하지 않은경우
  • 데이터 테이블과 레이아웃용 테이블
    1. 데이터 레이블:제목,요약과 함계 제목 셀, 내용 셀을 구분
    2. 레이아웃용 테이블: 표의 제목,요약 및 제목 셀과 내용 셀을 구분하지 않아 데이터가 들있는 표가 아님을 알 수 있도록 제공
  • 표의 형식을 제거하고 내용을 선형화 시켜 내용을 이해하는데 문제가 있으면 데이터 테이블, 없으면 레이아웃용 테이블
• 레이블 제공
  • 개념 : 입력서식이나 편집창과 같은 폼의 요소에 대한 목적이나용도(=꼬리표,라벨)
  • 목적: 운동장애가 있는분들은 입력폼으로 진입 할 수 있도록 하며, 화면낭독기 사용자들에게는 입력 서식의 이해를 용이하도록함
  • 입력서식에는 반드시 레이블을 제공하여 입력 창에 대한 설명을 제공
    • 레이블과 입력서식이 1:1로 대응하는 경우-label for 값과 input값을 연결
    • 레이블로 연결할 입력서식이 여러 개 인 경우-title 속성값으로 입력서식 요소에 대한 용도나 목적을 제공
• 오류 정정
  • 개념: 오류들에 대하여 정정할 수 있도록 오류의 내용을 알려주고, 오류의 위치에서 수정할 수 있도록 하는것
  • 목적: 문제의 원인을 파악하기위함
  • 오류 유형
    1. 입력 서식을 잘못 작성한 경우 해당 서식 필드로 초점을 이동할 수 있는 수단을 제공하지 않거나 해당 서식의 전송버튼을 눌렀을 때, 입력 내용이 모두 사라지는경우
    2. 오류 발생 시, 정정할 수있는 수단을 제공하지 않은 경우
    3. 입력 정정방식 또는 내용을 잘못 제공한 경우
  • 오류가 있는 곳에만 오류 표시를 하지 않고, 오류의 내용을 먼저 텍스트로 설명해 주거나, 프로그램을 통해 오류가 난 위치에 도달하도록 하여 오류의 내용으 ㄹ설며앻 주어야 한다.
  • 오류를 정정할 수 있도록 오류 내용을 알주고, 이를 정정할수 있도록 오류 위치로 이동
• 견고성
마크업 오류 방지
  • 개념: 웹 페이지의 기본이 되는 언어 HTML이나XHTML과 같은 마크업 언어에서 정한 문법에 맞지 않게 구현한 경우 발생되는 것
  • 주의 사항 분석
    1. ID값 중복 선언은 오류 유형 23-3에서 심사
    2. 위에 언급된 항목 이외의 표준문법 오류는 포함하지 않음
       • 현재 웹 접근성 품질 인증 심사에서는 표준 문법에서 태그의 열고 닫음, 중첩 오류, 중복 선언된 속성의 3가지에 대해서만 오류로 보겠다는 내용
  • 태그를 열었다면 반드시 닫아주어서 오류를 방지함
  • 태그를 중첩되도록 제공하지 않음
  • 태그의 중복
    • 속성의 중복으로 기능의 오류를 일으키지 않음
  • 열고 닫음,충첩 오류, 속성 중복에 대한 주요 오류 메세지
    1. end tag for
    2. duplicate specification of attribute
    3. already defined
• 웹 애플리케이션 접근성
  • 개념 : 웹 애플리케이션은 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 애플리케이션을 말한다.
  • 오류유형
    1. 21-1.웹 애플리케이션이 자체적인 접근성이 없으며 대체 콘텐츠가 존재하지 않은 경우
    2. 24-1.대체 콘텐츠를 제공했지만 핵심기능을 동등하게 제공하지 못한 경우
  • 주의사항 분석
    1. 자바 스크립트 미지원 환경에서는 평가하지 않음
       1. 18번 항목. 마크업으로 구현 가능한 기능을 자바스크립트로만 구현하지 말아야 한다
       2. 자바스크립트가 미작동 될 경우, 기능적 문제 유발(웹 접근성 저해 요소)
       3. 자바스크립트의 지원환경으로 고의로 미지원시켜 평가하는 형태로 잘못이해
    2. 웹 애플리케이션에 대한 자체 접근성은 각 검사항목에서 평가
       1. 웹 애플리케이션에 대한 자체 접근성은 웹 애플리케이션 영역에 대해 1~21번 검사항목을 준수하는지를 판단
       2. 22번 검사항목에서는 자동적으로 해당사항이 없음
  • 플래시, 실버라이트, 자바 애플릿 등 웹 애플리케이션에 대해서 자체 접근성 필요
    • 자체 접근성 : 한국형 웹 콘텐츠 접근성 지침 2.1의 1~23번 항목 준수
  • 기술적 제약 등 웹 애플리케이션의 자체 접근성 준수가 어려운 경우
    • 대체 콘텐츠 및 대체 수단 제공
• 접근성의 미래
웹 접근성의 올바른 발전 방향
  • 웹 접근성은 잠시의 유행으로 끝나는 것이 아니라 전세계적인 흐름이자 반드시 필요한 영역
  • 웹 접근성이 마크업 영역에 머무르지 않고, 신기술과 새로운 영역까지 발전
  • 웹 접근성이 신기술을 규제하는 것이 아니라 연구를 통한 접근성 적용이 가능
  • 웹 접근성 국제 표준 WCAG1.0 - wcag2.0
  • KWCAG2.1 : 동적인 문서나 애플리케이션 영역에 대한 접근성 영역까지 확장
• 새로운 기술의 방향
  • HTML5와 ARIA등 새로운 기술은 웹 접근성을 향상하는 방향으로 발전
  • 화면 낭독기 중심으로 적용하는 접근성 구현 방식이 프로그래밍을 통해 해결
  • 접근성은 UX와 함께 연계하여 발전할 때 공감할 수 있는 방향으로 전환
• 모바일 접근성
  • 스마트 워크 : 이동이 불편한 장애인들을 위한 업무 시설
  • 모바일 서비스 : 실제 장애인들을 위한 접근성은 실생활에서 필요한 정보 표현
  • 국내의 모바일 애플리케이션 접근성 지침은 7개의 준수항목과 8개의 권고항목으로 구성
  • 모바일 애플리케이션 접근성 지침의 업데이트가 필요하며, 한국형 웹 콘텐츠 접근성 지침 10<과 비교했을 떄 콘텐츠의 이해를 높일수 있는 항목은 포함하여 적용
  • 모바일 웹 역시 한국형 웹 콘텐프 접근성 지침 2.0에서 인지되지 못한 접근성 문제가 있으므로 새로운 지침을 제정하거나 타 지침에 푸가하여 보완
• 소프트웨어 접근성
  • 다양한 유형의 사용자가 컴퓨터에서 작동하는 운영체제 및 소프트웨어를 사용하는데 불편함이 없도록 보장
  • 소프트웨어 접근성 지침 1.0의 기준으로 총12 개의 검사항목으로 구성
  • 21세기 통신 및 비디오법에 의거하여 2013년 10월 9일 이후로 미국에 수출하는 국내의 모든 스맡토폰은 접근성을 준수
• 제품 접근성
  • 2012년 12월 12일에 가전접근성포럼이 발족하여 제품 접근성에 대한 법제화 및 가이드라인을 준비중에 있으며, 가전제품을 중심으로 실 생활에서 접근성을 높여주기 위해 노력
• 서비스 접근성
  • 건물, 공간, 웹, 모바일, 소프트웨어, 제품, 서비스까지 하나의 서비스 단위에 접근성을 준수할 수 있도록 하는 것이 으로 매우 큰 의미가 있으며, 종합적인 접근성을 적용
• 접근성 책임자
  • 웹, 소프트웨어, 문서, 제품, 서비스 등 다양한 영역에 있어 접근성을 기본으로하고, 사용성과 사용자 경험을 포함하는 전체적인 관리자 역할로 접근성 책임자라느느 제도를 고려
• 전문가 평가 도구의 이해
  • 평가도구는 HTML 코드를 분석하여 기계적으로 추출 가능한 항목만을 점검
  • 웹 접근성에 관한 정밀한 평가를 위해서는 도구에 의한 자동평가와 사람에 의한 수동평가가 병행되어야 함
  • 평가도구의 종류로는 K-WAH, OpenWAX CCA, WAT, 웹 브라우저 개발자 도구 등이 있음
  • K-WAH 점검 항목으로는 대체 텍스트 제공 유무, 제목 제공 유무, 기본언어 명시, 사용자 따른 새창 열기, 레이블 제공유무, 마크업 오류 방지등이 있음
  • K-WAH 4.0 이란?
    1. K-WAH 4.0은 한국형 웹 콘텐츠 접근성 지침에 2.0에 따라 웹 사이트 (웹 페이지)가 접근성 지침의 6개 세부지침을 준수하는지를 자동 점검하도록 지원해주는 소프트웨어 입니다.
    2. 대체 텍스트 제공
    3. 제목제공
    4. 기본언어 명시
    5. 사용자 요구에 따른 새창 열기
    6. 레이블 제공
    7. 마크업 오류 방지
  • 평가도구 사용 방법
    1. 오픈왁스 창이 실행
    2. 현재 페이지 검사 버튼을 클릭하면 검사가 진행됩니다.
    3. 실행창에서는 한국형 웹 콘텐츠 접근성 지침 2.0에서 자동검사가 가능한 항목과 점수를 보여 줍니다
    4. 붉은색: 오류 초록색: 수동평가를 해야하는 경우 입니다.
• 사용자 평가 도구의 이해
  • 화면낭독기, 스크린리더와 같은 명칭의 프로그램은 윈도우 컨트롤, 응용프로그램, 웹에 제공된 정보를 시각장애인이 귀로 들을 수 있도록 음성으로 전환
  • 스크린 리더는 웹페이지에 없는 정보를 스스로 판단해서 음성으로 생산하는 것이 아니라 웹 개발자에 의해 제공된 정보만 음성정보로 제공
  • 가상커서는 스크린리더에서 인터넷 브라우저를 지우너하기 위해 사용하는 개념으로 화면에 표시되지 않는 가상의UI
  • 스크린리더는 제품마다 최신기술 지원 여부와 동작방식에 일부 차이가 있으므로 2개 정도의 제품으로 중복 테스트를 하는 것을 권장
• 센스리더 설치와 활용
센스리더 활용
  • 센스리더에서 이미지 요소에 alt속성으로 대체텍스트를 제공하지 않은 경우 이미지 경로를 단어 또는 자음, 모음 조합으로 음성을 출력
  • 이미지가 구조적인 정보를 담고 있거나 많은 정보를 담고 있어 단순한 단어나 짧은 문장으로 설명할 수 없는 경우 longdesc 속성을 사용
  • target="_blank"속성을 사용하여 링크를 새 창으로 열리게 할 경우 "새 창 링크" 로 음성을 출력
  • label 요소를 암묵적으로 제공한 경우 센스리더에서 정상적으로 음성으로 출력하지 못하는 문제가 있으니 가급적이면 명시적으로 사용하는 것을 권장
  • 내용이 없는 프레임의 경우 간혹 title="빈프레임"으로 제목을 제공하는 경우에 '빈 프레임 프레임'과 같이 "프레임"을 두 번 음성을 출력하는 문제가 발생할 수 있으므로"내용없음"정도의 수준이 적절하다
  • 목록 요소룰 사용 할 경우 ul 등의 목록 요소 시작을 불필요하게 사용하지 않아야 사용자가 쉽게 인지 할 수 있음
  • 데이터 테이블에 제목과 셀과내용 셀을 짝지어 주는 방식으로는 복잡한 표의 경우 headers,id 간단한 표의 경우 th요소와 scope속성을 활용하는 방법이 있음
  • 이미지의 대체 텍스트
    1. 센스리더로 롱데스크 속성에 연결된 설명파일을 보기위해서는 alt enter를 누르면 됩니다.
    2. alt 값이 정의되지 않았을 경우 파일명을 보여줌
  • 링크와 title, targe
    1. 타겟블랭크 속성을 사용 했을 때는 이벤트 페이지로 새창링크라고 음성이 출력
    2. 겟 블랭크와 타이틀로 새창열림 이렇게 두 가지 속성을 모두 사용한 경우에는 이벤트 페이지로 새창 열림,
  • 입력 서식의 레이블 제공
    1. 이미지를 라벨을 사용해서 포와 아이디로 묶어줬을때 화면상에는 체크상자에 포커스가 이동되는 것을 볼수있다
    2. 옵션상품 2에서는 화면에는 타이틀 정보가 표시되지 않았지만 음성으로는 해제 옵션상품 2체크상자에 되어있음
  • 목록 태그
    1. 복잡한 계층 구조는 사용을 피하는게 좋다
    2. ulm을 여러번 사용하기 보다는 li를활용하는 것이 활용하기 편리하다
    3. 개발 상의 특별한 이슈가 없다면 사용자 입장에서는 li 하나에 항목이름과 항목명이 같이 표시되는 것이 더 사용성이 더 높다고 할 수 있다.
  • 테이블의 활용
    1. 아이디와 헤더스를 사용하게 되면 시각장애인 사용자가, 센스리더 사용자가 테이블의 구조를 이해하고 데이터를 이해하는데 크게 도움이 된다고 볼 수 있다.
• 검사항목 1,2,3평가 방법
적절한 텍스트 제공
  • 구분 • 설명 • 평가 방법
  • 전경이미지 • 의미를 포함한 이미지 • 의미가 있는 텍스트 이미지,그래프,사진 등에 적절한 대체 텍스트를 제공해야 한다 • alt="웹 접근성 연구소" 와 같이 alt 속성으로 이미지를 이해 할 수 있는 대체 텍스트를 제공하는지 평가
  • 의미가 없는 이미지 • 의미가 없는 글머리표, 기호, 테두리 등 장식용 이미지에 빈 문자로 대체 텍스트를 제공해야한다 • alt="" 와 같이 alt 속성으로 빈 문자로 텍스트를 제공하는지 평가
  • 배경이미지 • 의미를 포함한 이미지 • 의미가 있는 이미지에 절절한 대체 콘텐츠를 제공해야 한다. • 배경으로 처리한 이미지 정보 상용하는 텍스트를 제공하는지 평가
  • 자막 제공
  • 주요 평가 요소: 멀티미디어 콘텐츠와 동등한 내용 대체 수단으로 제공하는가?
  • 평가방법
    1. 동기화된 자막과 수화 제공
    2. 원고 또는 대본 제공
    3. 텍스트 영상에 대체 수단제공
    4. 음성 콘텐츠 대체 수단 제공
  • 동기화된 자막 또는 수화, 원고 중 한가지를 제공한 경우 준수
  • 음향 정보가 없는 텍스트 영상의 경우 시각장애인이 인식할 수 없으므로 원고와 같은 대체 수단을 제공해야함
• 색에 무관한 콘텐츠 인식
  • 평가방법
    1. 적색맹 시각에서 바라본 그래프
    2. 패턴으로 구분한 사례
    3. 색을 배제하였을 때 콘텐츠
    4. 무늬로 구분한 콘텐츠
    5. 문자로 필수 사항을 제공
  • 범례가 그래프가 대표적인 사례이며 흑백으로 출력하였을 때 콭첸프 인식이 가능한지 확인
  • OpenWAX에서 [3.색에 무관한 콘텐츠 인식] 점검결과에서 [흑백 토글]기능을 활용
•  
• 검사항목 4,5,6,7,8평가 방법

•  
• 명확한 지시사항 제공

  • 평가요소: 특정 요소를 가르키거나 지시사항을 전달하는 콘텐츠는 색, 크기, 모양, 위치 또는 소리 등을 무관하게 인식할 수 있는 수단을 제공하는가
  • 오류유형:
    1. 좌측 메뉴를 클릭해 주세요’, ‘하단의 링크를 클릭해 주세요.’ 등과 같이 위치 정보만을 제공하는 콘텐츠는 시각장애인이 사용할 수 없으므로 잘못된 콘텐츠로 평가하면 됩니다.
    2. 초록색 글자를 클릭하면 상세 내용을 볼 수 있습니다.’와 같이 색으로 제공하는 경우에 오류로 평가하면 됩니다.
  • 올바르게 제공하는 방법
    • 메일 세부분류 메뉴에서 ~’와 같이 콘텐츠의 레이블을 이용하여 지시하도록 해야 합니다.
• 텍스트 콘텐츠의 명도 대비

  • 평가 요소
    • 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대1 이상 이어야 한다
    • 텍스트가 18pt 이상 또는 굵은 14p 의 텍스트는 3:1
    • 화면 확대가 가능하도록 구현한 콘텐츠의 모든 텍스트 콘텐프는 명도를 3:1로 낮출 수 있다
  • 평가 방법
    • color contrast analyzer, openwax 평가도구 중 자신의 사용하기 편리한 도구로 평가를 하면 됩니다.
    • 전경색과 배경색을 선택하여 명도 대비 기준을 준수 하는지 평가 하도록 합니다.
    • 웹 브라우저 100% 상태로 검사
  • 평가 제외 대상 콘텐츠
    • 단순히 장식 목적으로만 사용한 텍스트
    • 로고 또는 상호
    • 마우스나 키보드 사용 시 명도 대비가 변화하는 콘텐츠
    • 의도적으로 명도 대비를 낮춘 회색의 컨트롤
    • 입력서식
• 배경음 사용 금지

  • 평가 요소: 자동으로 재생되는 배경음을 사용하지 않아야 한다.
  • 배경음을 올바르게 제공한 경우
    • 웹 페이지를 로딩하면 자동적으로 팡파르가 들린 후 종료된다
    • 웹 페이지를 로딩하면 대표이사가"세상을 바꾸는 기업..."라는 멘트가 한번 재생된
    • 웹 페이지를 로딩하면 "시작하려면 엔터키를 누르세요" 라는 멘트가 한번 제공된다
    • 웹 페이지를 로딩하면 자동으로 재생되는 경고 음성을 한번만 제공한다
• 키보드 사용 보장

  • 평가 요소: 이웃한 콘텐츠는 구분될 수 있어야 한다.
  • 구분 방법
    • 테두리를 이용하여 구분함
    • 색을 이용하여 구분함
    • 콘텐프 사이에 시각적인 구분선을 삽입하여 구분함
    • 서로 다른 무늬를 이용하여 구분함
    • 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분함
    • 줄 간격 및 글자 간격을 조절하여 구분함
    • 기타 콘텐츠를 시각적으로 구분 할 수 있는 방법 등
  • 오류 유형:콘텐츠 간의 명도대비가 뚜렷하지 않는 경우
• 초점 이동

  • 평가 방법
    1. 키보드에 위치나 처점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
    2. Tab키와 shift+Tab키에 의한 초점 이동 순서가 논리적이며, 일관성 있는지 평가
    3. a, area,button,input,textarea 콘텐츠 요소에 초점이 논리적으로 이동되는지를 평가
  • outline:none을 사용하여 테두리가 보이지 않는 경우가 있습니다
  • 오른쪽에서 왼쪽 순으로 초점이동 해야 한다
• 검사항목 (9,10,11,12,13)평가 방법
응답시간 조절
  • 시간제한이 있는 콘텐츠는 인식이나 컨트롤을 손운동장애나 시각 장애인과 같은 사용자도 놓치는 정보가 없게 정지하거나 시간을 연장하는 방법을 제공하는 것 입니다.
  • 경매나 실시간 게임, 듣기평가용 콘텐츠는 예외입니다.
  • 시각장애인 처럼 화면낭독기를 사용하여 콘텐츠를 음성으로 듣고 탐색할 때 많은 시간이 소요됩니다.
  • 손에 움직임이 어려운 운동장애사용자나 문장을 읽고 이해하는데 오래걸리는 지적장애 사용자처럼 많은 시간을 필요로 하는 경우, 시간제한이 있는 콘텐츠가 있으면 전체 내용을 파악하지 못한 상태에서 콘텐츠가 변경되어 이용하지 못하는 문제가 있습니다.이러한 시간제한이 있는 콘텐츠 제공 시 접근성 이슈가 있는지 확인이 필요합니다.
• 응답시간 조절의 준수 기준
  • 시간제한이 있는 콘텐의 응답시간을 조절 할 수 있도록 제공한 경우 준수한 것으로 인정합니다.
• 응답시간 조절의 오류유형
  • 화면내에서 페이지 재 이동시, 회피할 수 있는 수단을 제공하지 않은 경우
  • 제한 시간을 연장하는 방법에 제한시간이 있는 경우
• 응답시간 조절의 검사내용
  • 시간에 따라 변동하는 콘텐츠의 유 - 무
  • 응답시간 조절 기능을 제공 - 동작여부
  • 보안상의 문제로 시간제한이 필요한 경우, "연장 기능"을 제공합니다.
• 정지기능 제공
  • 자동으로 변경되는 콘텐츠의 움직임을 제어 할 수 있는 기능입니다.
  • 시간을 제어할 수 있는 기능이 제공되었는지 확인합니다.
  • 자동으로 변경되는 콘텐츠의 움직임을 제어할 수 있도록 제공한 경우 준수합니다.
• 정지기능 제공의 오류유형
  • 시간에 따라 변화하는 콘텐츠에 정지, 이전, 다음 기능이 없는 경우
  • 시간에 따라 변화하는 콘텐츠가 마우스와 기보드로 제어 불가능한 경우
• 깜빡임과 번쩍임 사용 제한
  • 초당 3 ~ 50회 깜빡임이 반복되는 콘텐츠를 제공하면 안됩니다.
    • 광과민성 발작과 관련됩니다.
    • PEAT를 사용하여 진단합니다.
• 깜빡임과 번쩍임 사용 제한의 오류유형
  • 페이지 내, 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠 제공(동영상 콘텐츠)
  • 사전에 경고하고 깜빡임이나 번쩍임을 회피 할 수 있는 수단 제공
  •  
• 반복영역 건너뛰기
  • 매 페이지마다 공통적으로 반복되는 콘텐츠를 반복영역을 건너뛰는 링크를 제공해 본문 콘텐츠에 빠르게 접근 할 수 있게합니다.
• 반복영역 건너뛰기의 오류유형
  • 건너뛰기를 제공하지 않은 경우
  • 건너뛰기 링크는 제공하고 있으나 동장이 안되는 경우
• 제목 제공
  • 페이지, 프라임, 콘텐츠 블록에 적절한 제목을 제공하는 것입니다.
• 제목 제공 준수 기준
  • 페이지 제목에 title 속성 미 제공, 내용과 다른 의미의 제목을 사용한 경우
  • 페이지 제목에 반복되는 특수문자를 제공한 경우
  • 페이지 제목의 분류가 더 가능하나, 상위 범주로 제목을 제공한 경우
  • fram;,iframet,frameset 요소의 title 속성이 없거나, 속성 값을 비워 둔 경우 또는 내용이 부적절한 경우
  • 내용 또는 기능이 없는 프레임에 을 비워두거나, 제공하지 않은 경우
  • 콘텐츠 블록에 h1 ~ 6;을 사용하여 제목을 제공하지 않은 경우
• 검사항목 14,15,16,17,18
적절한 링크 텍스트
  • 오류유형 : 목적이나 용도를 알기 어려운 링크 텍스트를 제공한 경우
  • 검사 내용 : 링크 텍스트만으로도 링크의 목적이나 목표를 이해할 수 있는지 확인
  • 준수기준 : 링크 텍스트의 용도나 목적을 이해할 수 있도록 제공한 경우 준수
  • 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공
    1. 의미있는 링크 텍스트를 사용하는지 확인
    2. title 속성을 사용하여 보조정보를 추가로 제공한 경우 주의
    3. 링크이 목적을 카보드의 순서나 문맥을 통해 이해 가능하면 인정
    4. 링크 텍스트를 URL로만 제공하지 않았는지 확인
• 기본언어 표시
  • 주로 사용하는 언어를 명시
    1. lang 속성을 사용하여 제공한 경우
    2. lang 속성 값에는 IOS 639-1에서 지정한 두 글자로 된 언어코드를 사용, 한국어ko, 영어en, 일본어ja등
• 사용자 요구에 따른 실행
  • 준수기준 :링크나 버튼등으로 연결된 콘텐츠가 새창으로 제공될경우 사전에 안내
  • 사용자가 의도하지 않은 기능은 실행되지 않아야함
    • 초점에 따른 변화나 입력에 따른 변화 확인
    • 새 창 및 팝업이 경고없이 열리는지 확인
    • 온라인 서식 선택만으로 자동실행 및 자동 콘텐츠 재생 등 확인
• 콘텐츠의 선형 구조
  • 콘텐츠는 논리적인 순서로 제공
    • CSS를 제거하여 규칙적인 순서의 논리적 구성인지 확인
    • 2단 이상의 메뉴일 경우 상위 메뉴에 따른 하위메뉴 이동후 다음 차 순위 상위메뉴로 이동하는 지 확인
    • 제목과 내용이 연속된 구조일 경우 연관관계확인
• 표의 구성
  • 표는 이해하기 쉽게 구성해야 한다
    • 제목 또는 요약정보를caption요소와 summary속성으로 제공하였는지 확인
    • 복잡한 표를 제공시 headers 속성으로 td에서 th의 id를 참조또는 scope속성으로 th 요소에 td요소의 범위를 지정하여 제공하였는지 확인
    • 배치용 테이블에 caption요소, summart속성 th 요소를 이용하지 않았는지 확인
• 콘텐츠의 선형구조(검사항목19)
콘텐츠는 논리적인 순서로 제공한다.
  • CSS를 제거하여 규칙적인 순서의 논리적 구성인지 확인
  • 2단 이상의 메뉴일 경우 상위 메뉴에 따른 하위메뉴 이동 후 다음차 순위 상위메뉴로 이동하는 지 확인
  • 제목과 내요이 연속된 구조일 경우 연관관계 확인
• 표의 구성(검사항목20)
표는 이해하기 쉽게 구성해야 한다.
  • 제목 또는 요약정보를요소와 summary 속성으로 제공하였는지 확인
  • 복잡한 표를 제공 시 headers속성으로에서의 id를 참조 또는 scope속성으로요소에요소의 범위를 지정하여 제공하였는지 확인
  • 배치용 테이블에요소, summary 속성,요소를 이용하지는 않았는지 확인
•  
• 검사 항목(21,22,23,24) 평가 방법
레이블 제공
  • 입력서식에는 반드시 레이블을 제공한 경우 준수한 것으로 인정
    • 각 입력서식에 요소나 title 속성으로 레이블 제공 확인
    • label for ="값"과 입력 서식의 id="값"확인
    • 오류유형
    • 레이블을 제공해야 하는 대표적인 유형
• 오류 정정
  • 입력서식에 대응하는 레이블을 제공한 경우 준수한 것으로 인정한다.
오류 발생시 정정할 수 있도록 오류 위치로 포커스 이동
    • 입력값을 잘못 기재하였을 경우, 오류 내용과 수정방법 제공
    • 다시 입력할 수 있도록 오류 입력 서식으로 포커스 이동 확인
    • 오류내용 확인 후 기재하였던 입력 내용이 삭제되는 지 확인
    • 오류 유형
• 마크업 오류 방지
  • 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없이 제공한 경우 준수한 것으로 인정한다.
    • 마크업 언어의 열고 닫음에 대한 오류가 없는 지 확인
    • 마크업 언어의 중첩관계에 대한 오류가 없는 지 확인
    • 마크업 언어의 속성 선언에 대한 오류가 없는 지 확인
    • 오류 유형
• 웹 애플리케이션 접근성 준수
  • 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
    • 부가 애플리케이션 기능을 찾아 자체적인 접근성 혹은 대체 수단 제공 여부 확인
    • 자체적인 접근성에 동등한 대체 콘텐츠를 제공하였는지 확인
  • 오류 유형
  • 주의사항
    • 자바 스크립트를 지원하지 않는 환경에서는 평가하지 않음
    • 직접적으로 접근성을 구현하기 어려운 경우 대체 수단을 제공해서 우회할 수 있는 경로를 제공하여야 한다.(단, 접근성 구현과 동등한 수준으로 제공)
    • 플래시 버전은 그대로 두고, 플래시를 애용하지 못하는 사용자에게 일반 HTML로 제공된 대체 수단을 제공하여 이용할 수 있다면 준수로 인정한다.
• 보고서 작성
보고서 작성을 위한 평가 요령
  • 페이지는 각 검사항목을 평가 할 수 있도록 다양하게 선정해야 함
  • 배경 이미지는 CSS활성화한 페이지와 비활성화 한 페이지를 비교하여 확인하는 것이 좀 더 쉽게 평가할 수 있음
  • 키보드 사용 보장 평가시 초점이동, 반복영역 건너 뛰기, 사용자 요구에 따른 실행 검사 항목을 동시에 평가 할 수 있음
  • 동영상이 Windows MEdia Player로 제공된 경우 인터넷 익스플로러 에서 확인
  • 실습 및 보고서 작성
• 웹사이트 접근성 차단
웹사이트 접근성 진단
  • 게시물의 경우 입력 서식에 내용을 입력하지 않고 등록 버튼을 실행하여 오류 정정을 제공하는 확인
  • 페이지 제목은 특성에 맞도록 적절하게 제공하였는지 다른 페이지와 동일하게 제목을 제공하지 않았는지 확인
  • 평가도구로 오류로 점건된 항목은 소스 분석을 통해 어떠한 요소와 속성에서 오류가 발생하였는지 확인
  • 다양한 사이트를 평가하여 각 검사항목 평가를 연습하여 익히도록함