HTMLㆍ웹표준ㆍ 웹접근성 검색 결과

해당 글 27건

접근성 테이블(scope, id & headers)

Table의 scope 지정하기 시각 장애인들은 눈으로 브라우저를 볼 수 없으므로, 스크린 리더기라는 프로그램을 통하여 표에 대한 정보를 귀로만 들어야 합니다. 이런 이유로 table의 각 셀에 대한 해당 영역(scope)을 지정하여 프로그램이 데이타를 읽어 내려가는 순서를 만들 수가 있습니다. 이것은 웹표준 및 접근성에 커다란 이점을 가져다 줄 수 있습니다. table의 scope=”col”과 scope=”row” 위 표그림의 경우, 스크린 리더기가 읽는 순서는 “면적195 → 매매가87,500 → 전세가38,500″ 입니다. 면적, 매매가, 전세가는 thead에 해당하는 라인으로 scolpe=”col(열↓)”로 해당 영역을 다음과 같이 지정할 수 있습니다. html 면적(㎡) 매매가(만원) 전세가(만..
HTMLㆍ웹표준ㆍ 웹접근성 2018. 11. 27. 11:06

HTML5의 구조적인 요소들 #2 - <section>,<article>

문서의 구조를 형성하는 블럭 요소 HTML5의 구조적인 마크업 요소를 위한 div, section, article 에 대해 알아봅니다. div, section, article 요소 소개 : 이미 너무나도 잘 알고 있고 가장 많이 이용하는 통상적인 컨텐츠 그릇입니다. 이 이상 어떠한 의미론적인 뜻도 내포하고 있지 않으며, 단지 컨텐츠의 흐름만 형성하는 요소일 뿐입니다. : 통상적인 문서 또는 어플리케이션의 섹션(구획)을 형성하는 요소로, 대부분 항상 heading 요소들과(가끔은 heading 요소들을 로 감싸기도 한다), 그리고 때때로 요소와도 함께 사용되기도 합니다. 홈페이지의 뉴스 부분처럼 페이지의 주요 부분인, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 29. 13:33

HTML5 Elements #1 - <nav>, <aside>, <figure>

HTML5의 구조적인 요소들 #1 HTML5 엘리먼트 중에서 와 에 대해 알아봅니다. 그리고 과 이것의 자식 요소인 도 함께 살펴 본 후, 와 비교하여 보도록 합니다. nav, aside, figure 소개 : 다른 페이지로의 이동(일반적으로 ‘사이트 네비게이션’이라 한다.) 또는 같은 페이지에서 섹션으로 이동(흔히, 긴 글에 사용되는 ‘컨텐츠 내용 목록’을 일컫는다.)을 위한 네비게이션 링크 목록을 담는 섹션입니다. 이것은 주요한 네비게이션 구역이지, 단지 링크만 포함하는 의미없는 그룹을 말하는 것이 아닙니다. 그리고 대개 “skip navigation” 링크를 사용하고 있을 것입니다. : 주위의 내용과 분리는 되지만 아주 약간의 관련성이 있는 컨텐츠를 구성하는 페이지의 섹션을 말합니다. 인쇄본에서는 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 29. 13:33

HTML5과 크로스브라우징 - shiv

HTML5 & 크로스 브라우징 HTML5의 새로운 시멘틱 요소들을 구 버전 IE를 포함하여 모든 브라우저에 걸쳐 제대로 작동시키기 위해서 어떤 기술을 이용해야 하는지에 대해 알아봅니다 먼저, 새로운 요소를 지원하지 않는 브라우저는 그것들을 어떻게 처리하는지 살펴보겠습니다. HTML은 관대한 언어이면서 꽤 오랫동안, 대부분의 브라우저는 인식하지 못하는 요소와 속성들을 익명의 인라인 요소로 취급하고, 그러나 그 익명의 요소들에 스타일을 줄 수 있도록 허용하며 적절하게 처리해 왔습니다. 모든 브라우저들은 자체 지원하는 요소들을 목록화하여 가지고 있습니다. 예를 들어, 파이어폭스의 목록은 nsElementTable.cpp라 불리우는 파일에 저장되어 있고 이 파일은 브라우저가 맞닥드릴 요소들에게 어떻게 스타일을 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 29. 13:32

HTML5와 접근성

HTML5 & Accessibility 일반적인 HTML5 접근성에 대해 간단히 알아봅니다. 안타깝게도, 접근성은 열악한 지원, 엉망으로 만들어진 어플리케이션, ‘상호 공격’으로 이어지는 격정적인 정책들 속에서 화제로 떠오르곤 합니다. 하지만 다행스럽게도, W3C의 HTML Design Principles은 접근성에 적합하면서 실용적인 두 가지면을 모두 가지고 있습니다. ‘보편적인 접근(Universal Access)’이라는 원칙은 미디어의 독립과 능력에 구애받지 않는 모든 사람들에 의한 접근을 언급하고 있습니다. 미디어 독립이라는 의미는 HTML5의 기능들이 시각적인 브라우저에서 뿐만 아니라, 다양한 플래폼에서도 작동이 되어야 한다 라는 뜻입니다. 그러나, 모든 사람들에 의한 접근은 HTML5가 어떻게..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 29. 13:32

HTML Tags

실무에서 주로 사용하는 HTML Elements body 태그 안에 HTML Elements 를 작성하게 되며, 본문 영역에 사용되는 태그들이 웹 서비스를 나타내는 구조에 해당합니다. HTML 태그의 종류는 다음과 같은 것이 있습니다. Headings h1~h6 Paragraphs p Lists dl, ul, ol Links a, image-map Images img Tables table, tr, th, td, caption, col Forms input, select, textarea address address structure div Headings – h1~h6 헤딩 태그는 문서의 주요 타이틀에 사용하며, 중요도가 높은 제목일 수록 낮은 hx 값을 갖습니다. 다시 말해, 대제목, 중제목, 소제목..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 15. 07:00

HTML(Hyper Text Markup Language)

HTML 에 대하여 HTML 은 웹 페이지를 위한 마크업 언어를 의미합니다. 그렇다면 웹 페이지는 무엇일까? 웹 페이지(web page)는 월드 와이드 웹 상에 있는 개개의 문서를 가리킨다. 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. W3C(World Wide Web Consortium)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 W3C는 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄이다. 간단히 웹(Web)이라 부르는 경우가 많다. 이 문서도 역시 엄연한 웹 페이지이며, 따라서 현재 이 문서를 읽고 있다면 '웹 페이지를 보고 있다'고도 할 수 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 14. 09:58

HTML5란 무엇인가?

HTML5의 등장과 그 배경 대부분 알고 있듯이 웹을 지탱하는 핵심 기술은 HTML 입니다. 그리고 모바일 웹에서 핵심 기술을 뽑으라면 단연 HTML5 입니다. 흔히 HTML5 에 폭발적인 관심을 불러일으킨 데에는 플래시(Flach)와 관련된 스티브 잡스의 발언이 그 출발이라는 것에 공통된 의견을 모읍니다. HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다. 가장 특징적인 것은 기존의 웹 문서에서는 HTML 만으로 웹 서비스를 구성하는 것이 불가능하였지만 HTML5 로 넘어오면서 클라이언트와 서버와의 통신이 가능하며 이에 대한 부가 기능을 제공함으로써 다른 외부 Active-X와 같은 plug-ins 를 사용하지 않고도 웹 서비스를 제공..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 9. 6. 15:35

[WAI-ARIA] Aria-describedby

Aria-describedby 활용하기 이번 글에서는 웹페이지 개발 시 스크린리더 사용자들에게 매우 유용한 WAI-ARIA속성 하나를 간략하게 소개하려 합니다. 스크린리더사용자들이 복잡한 구조의 페이지를 탐색할 때 또는 어떤 요소에 대한 상세 설명을 제공해야 할 필요가 있을 때가 있습니다. 복잡한 구조의 캘린더로 예를 들자면, 화면을 시각적으로 인지하는 사용자는 구조를 한 눈에 확인하고 전체적인 내용와 기능을 쉽게 파악할 수 있습니다. 하지만 음성출력으로만 웹페이지를 활용하는 스크린리더 사용자가 복잡한 콘텐츠의 전체적인 내용과 기능을 파악하는 것은 퍽 어려운 일입니다. 또한 암호입력과 같은 폼 요소에서 특정 입력 양식(예를 들어, 최소 한 자리 이상의 문자와 숫자 그리고 대문자가 반드시 포함된 8-16자..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 6. 23. 07:00

NVDA를 활용한 WAI-ARIA 살펴보기 #2

WAI-ARIA 살펴보기 이번 글에서는 NVDA를 활용한 WAI-ARIA 살펴보기 #1 에 이어서 사용자의 입장에서 꼭 필요한 WAI-ARIA의 Role과 Property 몇 가지를 더 살펴보도록 하겠습니다. 탭 컨트롤 웹페이지가 점점 다이나믹해지고 복잡해짐에 따라 보다 사용자들이 편리하게 해당 페이지를 이용할 수 있도록 하는 많은 방법들이 고안되어 있습니다. 그 중 하나가 여러 개의 콘텐츠 그룹을 탭으로 분류하여 사용성을 높히는 방법이 있습니다. 그러나 스크린리더 사용자의 입장에서 보았을 때 어떤 웹페이지의 콘텐츠들이 탭으로 분류되어 있을 경우 오히려 사용성에 있어 문제가 되는 경우가 종종 있습니다. 그 이유는 다음과 같습니다. 일반적으로 웹페이지에서 콘텐츠를 탭메뉴로 그룹화하여 제공할 때 탭을 선택할..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 6. 22. 07:00

Semantic markup - onclick·href=”#”에 관하여

onclick·href=”#” 이번 포스팅에서는 요소가 가진 의미와 onclick event의 적절한 사용법에 대해 알아보도록 합니다. 링크와 버튼의 의미 스크린리더 사용자는 각 요소가 가리키는 속성에 따라 동작을 예측하고, 해당 요소를 실행하는 데에 맞는 키 조작을 염두에 두고 웹 페이지를 사용합니다. 이를테면 체크박스이면 해제/선택할 수 있는 요소이므로 엔터 키가 아닌 스페이스를 사용하고 콤보 상자 면 alt + 아래쪽 화살표를 눌러 리스트를 확장하여 요소를 선택합니다. 그러면 스크린리더 사용자는 링크와 버튼의 의미는 어떻게 받아들이고 조작할까요? 링크는 아시다시피 일반적으로 목적지로 이동, 버튼은 제출·로그인 등과 같이 기능을 수행하는 트리거로 이해됩니다. 예를 들어 로그인이라는 텍스트가 링크인지 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 6. 21. 16:49

NVDA를 활용한 WAI-ARIA 살펴보기 #1

WAI-ARIA 이번 글에서는 지난번 NVDA 에 대한 소개에 이어 NVDA를 통해 웹 접근성 기술 WAI-ARIA가 실제로 적용된 웹 페이지를 살펴 봄으로써 스크린리더 사용자들에게 어떻게 ARIA가 웹페이지 탐색에 있어 도움이 되고 있는지를 알아 보도록 하겠습니다. 이 글이 웹 접근성에 대해 고민하시고 계신 개발자 분들에게 조금이나마 도움이 되었으면 좋겠습니다. 이 글에서 사용하는 NVDA의 버전은 2014.2 입니다. 또한 아래 글에서 예시로 하는 테스트 절차에서 사용되는 브라우저 환경은 특별한 언급이 없는 이상 Internet Explorer11과 Mozilla Firefox의 최신 버전 모두 사용 가능합니다. 다만 이 글에서 언급한 부분 외에 NVDA는 기본적으로 Firefox에서 더 나은 사용자..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 6. 21. 07:00

NVDA(스크린리더) 소개

스크린리더 소개 이 글에서는 접근성 테스트를 위해 스크린리더를 사용하시는 개발자 분들을 위한 한 가지 ‘팁’을 드리려 합니다. 접근성을 염두에 두고 홈페이지를 개발하시는 많은 분들이 스크린리더로 테스트를 원하시는 것으로 알고 있고 현재 우리나라에서는 센스리더를 주로 사용하기 때문에 센스리더로 많이 테스트를 하고 있는 실정입니다. 센스리더는 정품을 보유하고 있지 않을 경우 시간 혹은 사용에 제한이 있습니다. 그래서 자유롭게 테스트를 하시기 조금 번거로우실 수도 있으리라 판단됩니다. 이러한 부분을 해결하기 위하여 Nvda 스크린리더라는 다른 프로그램으로 특정 요소 혹은 페이지에 대해 테스트 하는 방법에 대해 소개해 드리고자 합니다. 꼭 숙지해야할 점 Nvda와 센스리더는 인터넷 문서를 처리하여 읽어줄 때 비..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 6. 20. 07:00

placeholder line break (플레이스홀더 줄바꿈하기)

Placeholder line break character 이 글에서는 플레이스 홀더에서 줄바꿈하는 방법에 대해 알아봅니다. placehloder mark-up 플레이스 홀더에서 줄바꿈을 하려면 다음과 같습니다. html See the Pen &amp;lt;a href='http://codepen.io/jaehee/pen/XdvMKV/'&amp;gt;플레이스홀더 줄바꿈&amp;lt;/a&amp;gt; by jaeheekim (&amp;lt;a href='http://codepen.io/jaehee'&amp;gt;@jaehee&amp;lt;/a&amp;gt;) on &amp;lt;a href='http://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;. Jaehee's W..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 5. 23. 12:31

웹 표준(Web Standard) 및 용어 정리

웹 표준(Web Standard)과 용어 정리 이 글에서는 간략하게 웹 표준에 관한 용어 정리를 설명합니다. 웹 표준 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식입니다. CSS 와 HTML(XHTML)로 웹 문서를 작성하는 것의 명확한 용어는 권고(recommend)라고 하며 버전과 상관없이 HTML, XHTML은 그 자체로 표준이라고 합니다. DTD(Document Type Definition) 브라우저에 어떤 문서형 정의을 적용할 것인가를 선언합니다. 접근성 사용자의 신체적 특성이나 지역, 지식의 정도, 기술, 기술적 환경, 체험 등과 같은 사항에 제한되지 않고 가능..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 5. 13. 10:16