CSS의 미디어 타입에는 aural (음성 출력), braille (점자 출력), handheld (포켓, 모바일), print (인쇄), projection (투사 장치), screen (스크린, 모니터), tty (전신 타자기, Tele Type Writer), tv (텔레비전, Television)이 있고 이 모든 장치를 정의할 경우에는 all(모든 출력 장치)을 사용한다. 기본적으로 미디어 타입이 지정되어 있지 않은 경우에는 모든 장치 media="all"을 지정한 것과 같다.
정찬명: CSS와 웹 접근성. 그리고 장치의 표준화

이 값은 양식화 구조 안의 박스에 엘레멘트를 생성하지 않는다(그 엘레멘트는 배열 효과가 없다). 하위(descendant) 엘레멘트들도 어떤 박스 생성하지 않는다; 이 작용은, 하위에 'display' 속성을 설정함으로서, 덮어씌워(override) 질 수 없다.
'none'의 디스플레이(display)는 보이지 않는 박스를 생성하지 않는다는 점에 유의하라; 이는 아무 박스도 생성하지 않는다. CSS 기능들을 엘레멘트가 양식화 구조 안에서, 그 자체는 보이지 않으나 양식화에 영향을 주는 박스를 생성할 수 있다. 세부사항 보임성(visibility)를 참조하라.
보이는 양식화 모델

• 앞 목록 예제는 번호없는 목록으로 <UL> 엘레멘트로 만들어진다.
  
• <OL> 엘레멘트로 만들어지는 번호있는 목록(ordered)은 번호가 강조되는 정보에 사용된다.
• 정의 목록(definition list)은 <dl> 엘레멘트로 만들어 지는데, 다른 것도 포함 할 수 있으나, 일반적으로 텀(term:작은제목)/정의(definition)의 짝들로 이루어진다.

목록 시작 개수 2
2009년도 제2회 고입·고졸 검정고시 시행 공고 링크
2009-05-29
목록 끝
목록 시작 개수 2
지방공무원 인사 발령(8급에의 승진) 링크
2009-05-29
목록 끝
목록 시작 개수 2
응시원서 및 OMR카드 작성 예시 자료 링크
2009-05-26
목록 끝

목록 시작 개수 4
영화 링크
증권 링크
책 링크
요리 링크
목록 끝
목록 시작 개수 4
공연 링크
부동산 링크
지식 링크
미즈넷 링크
목록 끝
목록 시작 개수 4
....

(WAT의 List item 보기 화면)

(WAT의 List item 보기 화면)

국민소통서비스 이미지
목록 시작 개수 3단계 1
민원서식 그래픽 링크
민원신청 그래픽 현재페이지 링크
전자공청회 그래픽 현재페이지 링크
목록 끝 단계 1
목록 시작 개수 3단계 1
국민제안 그래픽 현재페이지 링크
규제개혁 그래픽 링크
신고센터 그래픽 링크
신고센터 그래픽 링크
목록 끝 단계 1

펜류 헤딩3
목록 시작 개수 4
1.볼펜
2.플러스펜
3.형광펜
4.붓펜
목록 끝

정의목록 시작 개수 3
볼펜
펜 끝에 둥글고 작은 강철 알을 끼워 운필에 따라 회전하면서 오일 잉크를 내어 쓰게 된 필기구
만년필
펜대 속의 잉크가 끝에 꽂은 펜으로 알맞게 흘러나오도록 된 펜의 일종.
사인펜
나일론이나 폴리에스테르 섬유를 굳혀 만든 심에 수성 잉크를 넣은 필기도구
목록 끝

2.2: Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

웹페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다.
특히 웹페이지의 내용을 고대비(high contrast) 모드로 표시했을 때에도 충분히 명암 대비가 되도록 콘텐츠를 설계하여야 한다 고 정의하고 있다.

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;


• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.


• Logotypes: Text that is part of a logo or brand name has no minimum contrast require

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;


• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.


• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Foreground:#0B8174 Background:#FFFFFF
The contrast ratio is: 4.8:1
Text passed at Level AA
Text failed at Level AAA
Large text passed at Level AA
Large text passed at Level AAA
SC 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
SC 1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1
Note: 1. Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement. 2. Text that is part of a logo or brand name has no minimum contrast requirement.

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

• 소스: <img src="/images/main_top_img.jpg" alt="메인우측상단이미지" width="328" height="20" />


• 음성 출력: 메인우측상단이미지 이미지


• 의견: 우측 상단에 어떤 내용의 이미지가 있는지 모른다. 회사 로고가 있다면 alt="우리 회사 로고"라고만 제공하면 우리 회사 로고 이미지"라고 음성 출력한다. 아무 의미없는 이미지라면 alt=""라고 제공하면 스크린 리더는 이를 건너 뛴다.

• 소스: <a href="/Index.aspx"><img src="/Images/TopMenu/TopMenuNewsON.gif" alt="뉴스로 가기" width="58" height="31" border="0" /></a>

• 음성 출력: 뉴스로 가기 그래픽 링크


• 의견: alt="뉴스로 가기"를 alt="뉴스"라고만 하면 스크린 리더는 뉴스 그래픽 링크라고 음성 출력한다.

• 소스: <map name="Map1" id="Map"><area shape="rect" coords="1,8,20,73" href="http://..../" target="_blank" alt="이곳을 클릭하고 나타나는 좌측 이미지를 클릭하면 **시 뉴타운 페이지(새창)으로 이동합니다" onclick="hideshow(2);return false;" />


• 음성 출력: 이곳을 클릭하고 나타나는 좌측 이미지를 클릭하면 **시 뉴타운 페이지(새창)으로 이동합니다 새창 이미지맵 링크


• 의견: alt="**시 뉴타운"이라고만 입력하면 **시 뉴타운 새창 이미지맵 링크 라고 음성 출력한다. 간단 명료하게 입력해도 스크린 리더는 새창 이미지맵 링크라는 말을 추가로 음성 출력해준다는 점을 유의해야 한다.

• 소스: <a href="http://www.invil.org/chinese/index.html"><img src="/images/main2009/Main09y_header_language01.gif" alt="중국어로 보기" width="26" height="12" /></a>

• 음성 출력: 중국어로 보기 그래픽 링크


• 의견: alt="중국어"라고만 제공하면 중국어 그래픽 링크라고 음성 출력한다.

• 소스: <title>***** 홈페이지/CI/BI 제작전문 - 병원,학교,기업 홈페이지 제작업체, 쇼핑몰구축, 웹프로그램개발, CIP,디자인전문회사,브랜드개발,그룹웨어,카타로그디자인,웹사이트전문, 프리젠테이션디자인</title>


• 음성 출력: ***** 홈페이지/CI/BI 제작전문 - 병원,학교,기업 홈페이지 제작업체, 쇼핑몰구축, 웹프로그램개발, CIP,디자인전문회사,브랜드개발,그룹웨어,카타로그디자인,웹사이트전문, 프리젠테이션디자인


• 의견: 제목 표시줄은 광고를 하는 곳이 아니다. 그냥 <title>회사명</title>라고만 하면 회사명이라고 음성 출력한다. 위와 같이 길게 정의한 것이 파일명이나 즐겨찾기 명칭으로 저장된다면 생각만 해도 끔찍하다

• 소스: <title>▒▒▒ **** 홈페이지 ▒▒▒.
  
• 음성 출력: 점무늬사각형표 점무늬사각형표 점무늬사각형표 점무늬사각형표 **** 홈페이지 점무늬사각형표 점무늬사각형표 점무늬사각형표 점무늬사각형표 


• 의견: 무심코 사용하는 특수기호는 시각장애인이 이해할 수 없기 때문에 해당 기호에 맞는 명칭으로 음성 출력한다. 특수 기호는 가능한한 시각적 효과를 위해 사용하지 않으면 좋겠다.  참고로 특수 기호를 시각장애인은 어떻게 음성 으로 이해하는지 예를 들어본다.
  ■ 검정사각형표
  □ 흰사각형표
  ▣ 모알사각형표
  ▤ 가로줄무늬사각형표
  ▥ 세로줄무늬사각형표
  ▦ 그물무늬사각형표
  ▧ 왼쪽빗줄무늬사각형표
  ▨ 빗줄무늬사각형표
  ▩ 빗그물무늬사각형표
  
• 소스: <li><a href="http://.../site/mayor/photomovie/sketch/" target="_blank" title="포토갤러리 페이지로 이동합니다."><img src="/Images/index/bt_cj3.gif" width="106px" height="19px" /></a></li>


• 음성 출력: 포토갤러리 페이지로 이동합니다. 새창 그래픽 링크


• 의견: title="포토갤러리 페이지로 이동합니다"를 title="포토갤러리"라고만 해도 포토갤러리 새창 그래픽 링크라고 음성 출력한다.

• 소스: <div id="skipnav_topmenu"><a href="#leftMenus">상단메뉴 건너뛰기</a></div>


• 음성 출력: 상단메뉴 건너뛰기 방문한 현재페이지 링크


• 의견: 상단 메뉴라고만 제공하면 상단메뉴 현재 페이지 링크라고 음성 출력한다.

• 소스: <li><a href="#contents">좌측서브메뉴 건너뛰고 본문 바로가기</a></li>


• 음성 출력: 좌측서브메뉴 건너뛰고 본문 바로가기 현재페이지 링크


• 의견: 본문이라고만 제공해도 본문 현재 페이지 링크라고 음성 출력한다.

로그온할 인증서 선택 대화상자
인증서 암호는 대소문자를 구분합니다. 암호 편집창
확인 버튼
취소 버튼
인증서 보기 버튼
선택 인증서 위치 인증서 위치 1 / 5 라디오버튼
버튼
하드 디스크 버튼
이동식 디스크 버튼
저장 토큰 버튼
보안 토큰 버튼
버튼 버튼
버튼 버튼
휴대폰 버튼
인증서 찾기 버튼
인증서 삭제 버튼
목록상자
인증서 암호는 대소문자를 구분합니다. 암호 편집창
확인 버튼

선택 인증서 위치 인증서 위치 1 / 5 라디오버튼
버튼 버튼
하드 디스크 버튼
이동식 디스크 버튼
저장 토큰 버튼
보안 토큰 버튼
버튼 버튼
버튼 버튼
휴대폰 버튼

• 5개의 인증서 위치를 라디오 버튼으로 만들고
• 기본적으로 하드 디스크가 선택되어 있고,
• 하드 디스크에 위치한 후 아래 방향키를 누르면 이동식 디스크, 저장 토큰, 보안 토큰, 휴대폰이 자동적으로 선택이 되고
• 이동식 디스크, 저장 토큰, 휴대폰이 선택이 되면 자동적으로 해당 종류를 선택할 수 있는 콤보상자가 활성화 되면 해결될 것 같다.

이 인증서의....
확인 버튼
취소 버튼
일반 페이지 탭

• 구분 대화상자가 열리면 바로 일반 탭의 내용 부분이 나타나면서 이 인증서의 전자서명..... 부분에 위치하고,
• 탭 키를 누르면 사용자 알림 버튼, 확인 버튼, 취소 버튼

• 먼저 공인인증서 대화상자가 나오면 인증서 암호 편집창에 위치하고
• 이어 탭 키를 누르면 인증서 위치 라디오 버튼에 위치하고(기본값: 하드 디스크), 라디오 버튼에서 아래 방향키를 누르면 이동식 디스크, 저장 토큰, 보안토큰, 휴대폰이 자동 선택되고, 이동식 디스크, 저장토큰, 휴대폰이 선택되면 자동으로 종류를 선택할 수 있는 콤보상자가 열려야 한다.
• 이어 탭 키를 누르면 인증서 보기 버튼에 위치하고
• 이어 탭 키를 누르면 인증서 삭제 버튼에 위치하고
• 이어 탭 키를 누르면 인증서 찾기 버튼에 위치하면 좋을 것 같다.

Lynx를 활용하여 서핑을 해보면 완벽하지는 않지만 시각장애인이 인터넷을 하는 세계를 조금이라도 맛볼수 있다.

1. 설치
2. Lynx 옵션 설정하기
3. Lynx로 인터넷 서핑하기
3.1 이동
3.2 문서정보보기
3.3 History, 방문한 링크 보기
3.4 북마크 하기

원래 화면	) 로 반 페이지 이동 후 화면(원래 화면에서 마우스 있는 곳이 화면의 처음에 나타났다)