웹표준 실습 환경 설정



1. 에디트 플러스 (EditPlus)

- https://www.editplus.com/kr/ 에서 평가판 다운로드 가능. 

- 가격은 29700원. 이 나라의 개발자를 위해, IT 산업의 미래를 위해 양심을 갖고 모두 정품을 구매하자.


1) 도구모음 창에서 보여야 할 항목 지정


- [보기]-[도구모음/창]에서 보여야 할 항목 클릭

- 기본적으로 도구모음(T)상태표시줄(S)디렉토리창(Alt+Shift+3) 체크되어 있지만 체크가 꺼져있으면 켜둘 것.

- HTML 도구모음을 체크해서 켜둬야 한다.



2) 글꼴과 글자 크기 지정

[도구(T)]-[기본 설정(P)]-[일반]-[글꼴] : 맑은고딕, Regular, 12




3) XHTML 태그 사용, HTML 태그 자동 닫기

[도구(T)]-[기본 설정(P)]-[일반] : XHTML 태그 사용, HTML 태그 자동으로 닫기 체크





3) 문서 템플릿 지정

- [도구(T)]-[기본 설정(P)]-[파일]-[문서 템플릿] : HTML 문서 템플릿 사용. 열기를 누르면 template.html 파일을 불러온다.



- 그러면 아래와 같이 에디트 플러스에 템플릿 파일을 불러들여온다.

- HTML 템플릿은 새문서를 작성할 때마다 기본으로 입력될 내용을 지정하는 곳이다.




- 아래와 같이 수정한다.

- 1행 <!DOCTYPE html>은 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">으로 수정

- 2행 <html lang="en">은 <html>로 수정

- 4행 <meta charset="UTF=8">은 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">으로 수정.

- 5, 6, 7, 8행의 meta 태그는 삭제



- 다음 [새 이름으로 저장]을 선택하여 눌러 이 파일을 저장한다. 주의할 점은 인코딩을 UTF-8로 해야한다는 점이다.

- html의 charset=uft-8이면 파일 저장시 인코딩도 반드시 UTF-8로 통일해야 텍스트가 깨지지 않는다.




이후 새파일-HTML 페이지(Ctrl+Shift+N)를 열 때마다 위의 HTML 템플릿이 열려 편리하게 작업할 수 있다.





2. 크롬 (chrome)


1) 요소 검사 (F12)

- 선택한 부분의 HTML 소스 확인 가능

- 해당 요소에 적용된 CSS 속성 확인 가능

- 네트워크 속도 확인 가능


2) Web Developper

- [도구]-[확장프로그램]

- CSS, Javascript가 제거된 사이트 결과 확인 가능







3. 파이어폭스 (firefox)


1) 요소 검사 (Ctrl + Shift + I)

- 선택한 부분의 HTML 소스 확인

- 해당 요소에 적용된 CSS 속성 확인


2) Firebug

- [도구]-[부가기능] 

- 선택한 부분의 HTML 소스와 해당 요소에 적용된 CSS 속성 확인

- BOX MODEL 레이아웃 확인 가능




3) Web Developper

- [도구]-[부가기능]

- CSS, Javascript가 제거된 사이트 결과 확인 가능



4) Fangs

- 스크린리더의 기능을 비슷하게 제공




Posted by netyhobby
,

웹 접근성 향상을 위한 전략 : 웹표준


방법론 : 웹표준 준수

- 웹에서 표준적으로 사용되는 기술이나 규칙

- W3C와 같은 웹표준 기구에서 정리한 규칙



1. W3C(World Wide Web Consortium)란?


- 1994년 만들어진 국제적인 비영리 웹 기술 표준 기구


- W3C 공식 사이트(http://www.w3.org)에서 웹 기술의 공식적인 기술명세서 확인 가능


- WD > CR > PR > REC의 순서로 표준 확정

1) Working Draft (WD:초안)

2) Candidate Recommendation (CR:권고안후보)

3) Proposed Recommendation (PR:제안권고안)

4) Recommendation (REC:표준화)




2. 웹 표준 관련 기술


웹의 기술적 요소


- W3C(World Wide Web Consortium)가 문법 제정, 권고


- 사용자측 기술 : HTML, CSS, JAVASCRIPT, ...


- 서버측 기술 : JSP, PHP, ASP, DB,..


HTML(구조) + CSS(표현) + Javascript(동작)




3. 구조 언어


1) 구조 언어(마크업 언어)란?

- 콘텐츠의 가독성을 높이고 컴퓨터에게 구조를 이해시킴

- 화면에는 나타나지 않는 태그를 사용하여 콘텐츠가 갖는 특성을 정의

- 한 문서의 문자열을 웹 상의 다른 문서에 연결해 주는 하이퍼텍스트 기술을 사용한 무료 공개 표준

- HTML, XHTML, HTML5 등


2) HTML (HyperText Markup Language)

- SGML(Standard Generalized Markup Language)기반의 마크업 언어

- 느슨한 규칙

- HTML 4.01 : SGML 기반. 스탠다드.


3) XHTML (eXtensible Hypertext Markup Language)

- HTML을 XML(Extensible Markup Language)로 재구성한 마크업 언어

- 기계적 처리에 용이한 규격화된 구조

- XHTML 2.0 : xml로 재구성 마크업. 기계적 처리에 용이.


4) HTML5

- HTML5 : 자바스크립트 API 프로그램 포함




4. 표현 언어

CSS(Cascading Style Sheet)는 HTML 3.2부터 지원하기 시작


- 1996년 CSS1 Recommendation

- 1998년 CSS2 Recommendation

- 2011년 CSS2.1 Recommendation

- 2011년 CSS3 Recommendation




5. 동작 및 제어 언어


1) DOM(Document Object Model)

- W3C 권고안

- 웹문서의 각 요소들을 객체화해서 활용할 수 있도록 하는 방법


2) ECMA Script (에크마 스크랩트 ECAM 표준)    

모든 플랫폼, 개발언어에서 적용되는 스크립트의 표준안




6. 구조와 표현과 동작의 분리


- 제약이 있는 경우에도 기본 정보는 제공 가능

- 유지보수가 쉬움

- 파일 사이즈를 줄일 수 있음

- 웹 접근성 향상

- CSS ZEN GARDEN (http://www.csszengarden.com/)





www.csszengarden.com


- 동일한 구조의 HTML이 CSS에 따라 어떻게 바뀔 수 있는지 보여주는 사이트.

- 오른쪽 메뉴에 보이는 다양한 사람이 만든 다양한 스킨을 눌러 css의 변화를 확인해보자.

- 구글 크롬에서 요소검사(F12) 후 elements에서 마우스 오른쪽 edit attribute로 요소를 수정하여 수정한 화면 확인 가능.

- css를 로딩하는 <link rel="stylesheet" media="screen" href="/196/196.css?v=8may2013">에서 숫자만 변경해본다던지 하는 테스트를 해보자.









7. 웹 표준의 장점

- 웹 접근성 수준의 향상

- 검색로봇에 친화적인 웹사이트 구현

- 구조와 표현의 분리

- 비용 절감 효과

- 손쉬운 유지 보수

- 파일 사이즈 축소

- 하위, 상위 호환성 확보




8. 다양한 웹 브라우저


인터넷 익스플로러(Internet Explorer) : Window 운영체제의 기본 브라우저

사파리(safari) : Mac 운영체제의 기본 브라우저

파이어폭스(firefox) : 여러 운영체제에서 무료로 사용할 수 있는 브라우저 https://www.mozilla.org/ko/firefox/new/

구글 크롬(chrome) : 구글에서 만든 무료 브라우저 https://www.google.com/chrome/browser/desktop/index.html

오페라(opera) : 여러 운영체제에서 무료로 사용할 수 있는 브라우저

컹커러(conqueror) : 파일관리자 기능을 담고 있는 무료 브라우저



Posted by netyhobby
,

웹 접근성이란? 

어떠한 사용자, 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 - 웹 접근성 연구소 (http://wah.or.kr)



장애인 차별 금지법

■ 장애인 차별 금지 및 권리 구제에 관한 법률 (2007. 4. 11 제정)

제21조 (정보통신·의사소통에서의 정당한 편의제공의무)

① (중략) 행위자는 생산·배포하는 전자정보 및 비 전자정보에 대하여 장애인이 장애인 아닌 사람과 동등하게 접근·이용할 수 있도록 수화, 문자 등 필요한 수단을 제공하여야 한다.


 장애인 차별 금지 및 권리 구제에 관한 법률 시행령 (2008. 4. 11 발효)

14조 (정보 접근 의사소통에서의 정당한 편의 제공의 담계적 범위 및 편의의 내용)

② 누구든지 신체적, 기술적 여건과 관계없이 웹 사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장되는 웹사이트


 장애인 차별 금지법 단계적 적용 범위 (출처: 보건복지가족부)

2009년 : 공공기관, 특수학교, 특수학급이 설치된 학교, 종합병원, 사회복지시설, 장애복지시설

2010년 : 국립문화예술단체, 박물관, 미술관, 국립중앙도서관, 공공도서관

2011년 : 국공립 유치원, 초.중.고 대학교, 보육 시설(100인 이상), 일반병원, 치과, 한방병원

2012년 : 민간종합공연장

2013년 : 사립유치원, 모든 보육시설, 평생교육시설, 연수기관, 직업훈련기관(1000㎡이상), 모든 병원, 모든 법인 회사

2015년 : 민간종합공연장 및 소공연장, 영화관, 사립박물관.미술관


 장차법 처벌 규정 : 3년이하의 징역 혹은 3천만원 이하의 벌금




2. 해외 웹 접근성 법·규정 및 제도


미국 : 1990년 미국 장애인법, 1998년 재활법 508조, 2001년 웹접근성 지침 508조 1194.22

영국 : 1995년 장애인 차별 금지법

일본 : 2003년 웹 접근성 표준 제정(JIS X 8341-3)

호주 : 1992년 장애인 차별 금지법 (DDA)


1) 2000년부터 2011년까지 40건이 넘는 관련 소송 사례 존재

2) 2000년 시드니 올림픽 웹사이트 사례 : 2002년 시드니 유지보수 업체인 IBM에 $20,000의 벌금 부과

3) 미국 대형 유통 업체 Target사(2006년~2008년 8월 미국)

   NFB(미국 시각장애인 연합회)로 부터 집단 소송을 받아 소송 참가자 1인당 7천불, 총 액 6백만달러를 지불하게 됨

4) Priceline.com, Ramada.com 2004년 미국 뉴욕 웹 접근성 준수 의무 있다고 판결

5) 서울도시철도공사, 대한항공, 한전병원, 서울장애인복지관 대상의 소송

   2012년 11월 장애인 10명이 한 명당 500만원의 손해배상 청구 소송

   상세 내역 : 이미지의 대체 텍스트 비제공, 키보드 사용이 어려운 컨텐츠 제공, 동영상 재생 정지 기능 미지원



3. 웹 접근성 인증마크



인증마크 부여기관 : 한국정보문화진흥원, (사)한국신체장애인복지회, 한국웹접근성인증평가원

- 접근성 인증에 대한 법률이나 규정 없음



4. 한국형 웹 접근성 지침 KWCAG 2.0

- 4개 원칙, 13개 지침, 22개 검사항목으로 구성

- WAI(Web Accessibility Initiative)의 웹 콘텐츠 접근성 지침을 바탕으로 한국적 특수성을 고려한 KWCAG 1.0 2005년 12월 21일 제정

- 2009년 12월 23일 KWCAG 2.0이 확정되어 현재 TTA 표준(정보통신 단체표준)으로 채택

- 2010년 말 KWCAG 2.0 국가 표준 지침으로 사용


(1) 인식의 용이성 (Perceivable) : 대체 텍스트, 멀티미디어 대체 수단, 명료성

(2) 운용의 용이성 (Operable) : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 네비게이션

(3) 이해의 용이성 (Understandable) : 가독성, 예측 가능성. 컨텐츠의 논리성, 입력 도움

(4) 견고성 (Robust) : 문법 준수, 웹 애플리케이션 접근성


(1) 인식의 용이성 (Perceivable)

정보와 사용자 인터페이스 요소는 사용자가 인식할 수 있어야 한다.

1) 대체 텍스트 : 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.

- 적절한 대체 텍스트 제공 : 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

2) 멀티미디어 대체 수단 : 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다.

- 자막제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.

3) 명료성 : 콘텐츠는 명확하게 전달되어야 한다.

- 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.

- 명확한 지시 사항 제공 : 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

- 텍스트 콘텐츠의 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.

- 배경음 사용 금지 : 자동으로 생성되는 배경음을 사용하지 않아야 한다.


(2) 운용의 용이성 (Operable)

인터페이스 구성 요소는 조작 가능하고 네비게이션 할 수 있어야 한다.

1) 키보드 접근성 : 콘텐츠는 키보드로 접근할 수 있어야 한다.

- 키보드 사용 보장 : 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

- 초점 이동 : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

2) 충분한 시간 제공 : 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.

- 응답 시간 조절 : 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

- 정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

3) 광과민성 발작 예방 : 광과민성발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.

- 깜빡임과 번쩍임 사용 제한 : 초당 3 50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

4) 쉬운 내비게이션 : 콘텐츠는 쉽게 내비게이션 할 수 있어야 한다.

- 반복 영역 건너뛰기 : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

적절한 링크 텍스트 : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.


(3) 이해의 용이성 (Understandable)

컨텐츠와 사용자 인터페이스 운용은 이해할 수 있어야 한다.

1. 가독성 : 콘텐츠는 읽고 이해하기 쉬워야 한다.

- 기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다.

2. 예측 가능성 : 콘텐츠의 기능과 실행결과는 예측 가능해야 한다.

- 사용자 요구에 따른 실행 : 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.

3. 콘텐츠의 논리성 : 콘텐츠는 논리적으로 구성해야 한다

- 콘텐츠의 선형화 : 콘텐츠는 논리적인 순서로 제공해야 한다.

- 표의 구성 : 표는 이해하기 쉽게 구성해야 한다.

4. 입력 도움 : 입력 오류를 방지하거나 정정할 수 있어야 한다.

- 레이블 제공 : 입력 서식에는 대응하는 레이블을 제공 해야 한다.

- 오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공 해야 한다


(4) 견고성 (Robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

1. 문법 준수 : 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.

- 마크업 오류 방지 : 마크업 언어의 요소는 열고닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

2. 애플리케이션 접근성 : 웹 애플리케이션은 접근성이 있어야 한다.

- 웹 애플리케이션 접근성 준수 : 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.





5. 모바일 웹 접근성


■ 모바일 애플리케이션 접근성 지침 준수 (www.mopas.go.kr )

행정정보 > 법령정보 > 훈령·예규·고시


 준수 사항 (7항목)

- 대체 텍스트 : 텍스트 아닌 컨텐츠에 제공

- 초점 : 모든 객체에 focus 적용하고 순차적으로 이동되어야 함

- 운영체제 접근성 기능 지원

- 누르기 동작 지원

- 색에 무관한 인식

- 명도 대비

- 자막, 수화 등의 제공


 권고 사항 (8항목)
- 기본 사용자 인터페이스 컴포넌트
- 컨트롤간 충분한 간격
- 알림 기능 : 알림 방법을 선택할 수 있도록 제공
- 범용 폰트 이용 : 크기 조절, 확대 기능 제공
- 사용자 인터페이스의 일관성
- 깜박거림의 사용 제한
- 배경음 사용 금지 : 3초 미만의 배경음 예외
- 장애인 등 사용자 평가




Posted by netyhobby
,