웹표준 편집하기

이동: 둘러보기, 검색

경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 아이디(ID)으로 기록되고, 다른 장점도 있습니다.

편집을 되돌릴 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 저장해주세요.
최신판 당신의 편집
29번째 줄: 29번째 줄:
  
 
== 웹접근성 ==
 
== 웹접근성 ==
모든 사용자가 신체적, 환경적 조건과 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 웹접근성이라 한다. 어떠한 사용자가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이 접근, 이용할 수 있게 하고 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미한다. 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해한다. 하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다. 예를 들어 '로그인'이라는 텍스트 대신 로그인 이미지를 사용할 경우 비 시각 장애인의 눈에는 로그인 메뉴로 인식할 수 있지만, 소프트웨어 입장에서는 그저 이미지일 뿐이다. 따라서, 되도록 이미지 대신 소스 코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 설명을 추가해야 한다.<ref name="갓대희"></ref>
+
모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 웹접근성이라 한다. 어떠한 사용자가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이 접근, 이용할 수 있게 하고 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미한다. 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해한다. 하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다. 예를들어 '로그인'이라는 텍스트 대신 로그인 이미지를 사용할 경우 비 시각 장애인의 눈에는 로그인 메뉴로 인식 가능하지만, 소프트웨어 입장에서는 그저 이미지일 뿐이다. 따라서, 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 설명을 추가 해야 한다.<ref name="갓대희"></ref>
  
 
=== 웹 콘텐츠 접근성 지침(WCAG) ===
 
=== 웹 콘텐츠 접근성 지침(WCAG) ===
 
* '''인식의 용이성(Perceivable)'''
 
* '''인식의 용이성(Perceivable)'''
: 인식의 용이성은 사용자가 장애 유무 등과 관계없이 웹사이트에서 제공하는 모든 [[콘텐츠]]를 동등하게 인식할 수 있도록 제공하는 것을 의미한다.
+
: 인식의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미한다.
: 이미지 등 텍스트 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공해야 한다. 또한 대체 텍스트는 간단명료하게 제공해야 한다. 멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 대본 또는 수화를 제공해야 한다. 대본 및 수화는 멀티미디어 콘텐츠에 포함된 음성의 문맥과 동등해야 한다. 콘텐츠에서 제공하는 모든 정보는 색에 관계없이 인식될 수 있어야 한다. 특정 요소를 가리키거나 지시 사항을 전달하는 콘텐츠에 한정해 적용하는 것으로, 지시 사항은 모양, 크기, 위치, 방향, 색 소리 등에 관계없이 인식될 수 있어야 한다. 텍스트 콘텐츠와 배경 간의 명도 대비는 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 4.5 대 1 이상이어야 한다. 자동으로 소리가 재생되지 않아야 한다. 웹 페이지를 구성하는 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다.
+
: 이미지 등 텍스트 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공해야 한다. 또한 대체 텍스트는 간단명료하게 제공해야 한다. 멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 대본 또는 수화를 제공해야 한다. 대본 및 수화는 멀티미디어 콘텐츠에 포함된 음성의 문맥과 동등해야 한다. 콘텐츠에서 제공하는 모든 정보는 색에 관계없이 인식될 수 있어야 한다. 특정 요소를 가리키거나 지시 사항을 전달하는 콘텐츠에 한정해 적용하는 것으로, 지시 사항은 모양, 크기, 위치, 방향, 색 소리 등에 관계 없이 인식될 수 있어야 한다. 텍스트 콘텐츠와 배경 간의 명도 대비는 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 4.5 대 1 이상이어야 한다. 자동으로 소리가 재생되지 않아야 한다. 웹 페이지를 구성하는 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다.
 
* '''운용의 용이성(Operable)'''
 
* '''운용의 용이성(Operable)'''
: 운용의 용이성은 사용자가 장애 유무 등으에 관계없이 웹사이트에서 제공하는 모든 기능들을 운용할 수 있도록 제공하는 것을 의미한다.
+
: 운용의 용이성은 사용자가 장애 유무 드으에 관계없이 웹 사이트에서 제공하는 모든 기능들을 운용할 수 있도록 제공하는 것을 의미한다.
: 웹페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다. 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다. 웹페이지에서 제공하는 모든 이웃한 컨트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기로 제공해야 한다. 웹콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.  페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 링크는 주변 맥락을 통하여 용도나 목적지를 명확하게 이해할 수 있는 링크 텍스트를 제공해야 한다.  
+
: 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다. 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다. 웹 페이지에서 제공하는 모든 이웃한 컨트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기로 제공해야 한다. 웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. 초당 3~50 회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.  페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 링크는 주변 맥락을 통하여 용도나 목적지를 명확하게 이해할 수 있는 링크 텍스트를 제공해야 한다.  
 
* '''이해의 용이성(Understandable)'''
 
* '''이해의 용이성(Understandable)'''
 
: 이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다.
 
: 이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다.
: 주로 사용하는 언어를 명시해야 한다. 컨트롤이나 사용자 입력은 초점을 받았을 때에 의도하지 않는 기능이 자동으로 실행되지 않도록 콘텐츠를 개발해야 한다. 콘텐츠는 보조 기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다. 표를 제공할 경우, 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다. 사용자 입력에는 대응하는 레이블을 제공해야 한다. 입력 서식 작성 시, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다.
+
: 주로 사용하는 언어를 명시해야 한다. 컨트롤이나 사용자 입력은 초점을 받았을 때에 의도하지 않는 기능이 자동적으로 실행되지 않도록 콘텐츠를 개발해야 한다. 콘텐츠는 보조 기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다. 표를 제공할 경우, 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다. 사용자 입력에는 대응하는 레이블을 제공해야 한다. 입력 서식 작성 시, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다.
 
* '''견고성(Robust)'''
 
* '''견고성(Robust)'''
 
: 견고성은 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미한다.
 
: 견고성은 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미한다.
46번째 줄: 46번째 줄:
  
 
==== 기대효과 ====
 
==== 기대효과 ====
웹접근성을 준수 시 기대효과는 장애인, 고령자 등과 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근하고 이용할 수 있게 해주며, 이러한 잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 활용할 수 있다. 또 2008년 4월 11일부터 시행된 '장애인 차별 금지 및 권리 구제 등에 관한 법률' 및 동법 시행령 등의 관련 규정을 준수할 수 있으며 사회 공헌 및 복지 기업으로 기업 이미지가 향상될 수 있다. 다양한 환경, 새로운 기기에서의 이용의 범위도 확대될 것이며 개발 및 운용의 효율성을 높일 수 있다.<ref>〈[https://seulbinim.github.io/WSA/accessibility.html#%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%98-%EA%B0%9C%EC%9A%94 웹접근성(Web Accessibility)]〉, 《깃허브》</ref>
+
웹접근성을 준수 시 기대효과는 장애인, 고령자 등과 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근하고 이용할 수 있게 해주며, 이러한 잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 활용할 수 있다. 또 2008년 4월 11일 부터 시행된 '장애인 차별 금지 및 권리 구제 등에 관한 법률'및 동법 시행령 등의 관련 규정을 준수할 수 있으며 사회 공헌 및 복지 기업으로 기업 이미지가 향상될 수 있다. 다양한 환경, 새로운 기기에서의 이용의 범위도 확대될 것이며 개발 및 운용의 효율성을 높일 수 있다.<ref>〈[https://seulbinim.github.io/WSA/accessibility.html#%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%98-%EA%B0%9C%EC%9A%94 웹접근성(Web Accessibility)]〉, 《깃허브》</ref>
  
 
=== 보조기기 ===
 
=== 보조기기 ===

해시넷에서의 모든 기여는 다른 기여자가 편집, 수정, 삭제할 수 있다는 점을 유의해 주세요. 만약 여기에 동의하지 않는다면, 문서를 저장하지 말아 주세요.
또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다 (자세한 사항은 해시넷:저작권 문서를 보세요). 저작권이 있는 내용을 허가 없이 저장하지 마세요!

취소 | 편집 도움말 (새 창에서 열림)