Publish/accessibility10 접근성 Tag Skip navigation다수의 건너뛰기를 제공할 경우, 핵심 콘텐츠인 본문으로 이동하기를 우선으로 제공. Content / GNB / Footer 순으로 스킵네비게이션을 구현한다.GNB의 경우 IE11에서 요소 등에 접근하지 못하는 버그가 있으므로, ul이전에 div와 id, 크기값을 지정하여 주메뉴 영역으로 이동할 수있게 한다.Title tag저시력자를 위해 해당 페이지의 내용을 쉽게 파악할 수 있도록 순서를 아래와 같이한다. 작은순에서 큰순으로 작성.faq Img tag의미없는 이미지에는 alt를 "" 비게 한다.Label tag레이블의 내용을 형태로 제공할 경우, 일부 스크린리더는 인지못하는 경우 발생한다.그렇기 때문에 해당 Input에 title 속성을 주거나, label태그로 텍스트로 제.. 2024. 10. 18. WAI-ARIA (웹접근성) 참고 : https://jangkunblog.com/assets/file/2016.12.14-WAI-ARIA.pdf1. 속성aria-haspopup (팝업 유/무)값 : true / false다른 속성은 지원하지않는 브라우저 많다. 그렇기때문에 위 값 위주로 써줄것을 추천한다.aria-current (현재 위치)선택된 메뉴와 같은 경우에 적용값: page(paging), *step(preocess), location, date, time, *true(tab), false(default)aria-expanded (확장)값 : true(확장) / false(축소)아코디언이나 레이어팝업 열기/닫기 버튼aria-controls="id" (제어하는 요소)현재 버튼이 제어하는 요소를 넣어주기레이어팝업 열기닫기 버튼.. 2024. 10. 18. WAI-ARIA UI - 아코디언 메뉴 널리에서 올려준 아코디언 메뉴 사용시 aria 쓰임 정리 페이지 이동이 아닌, 아코디언 헤더부분을 클릭 하면 내용을 보여주는가 안보여주는가이기 때문에 a 태그보단 button 태그를 추천한다. 아래와 같이 작성한다. 1. button을 쓸 경우 각 아코디언의 타이틀부분의 헤더와 내용부분에 id값 부여. aria-expanded 값은 열렸을 경우 true, 닫혔을경우 false 2. a를 쓸 경우 페이지이동이 아닌 버튼으로 인식되기 위해 role 부여. js로 스페이스 키를 통한 컨텐츠영역 확장/축소 가능하게 할 것. 그 외의 공통 정리 부분. 아코디언의 헤더 헤딩태그를 사용 할 것 헤딩태그를 사용 못할 경우 button에 role="heading" aria-level="3"의 속성을 사용. 아코디언의 컨.. 2021. 6. 29. 실전에 쓰이는 WAI-ARIA WAI-ARIA에 대해 정리하기에 앞서 중요한 것은, ARIA를 통해 웹접근성을 높일 수 있으나 컨텐츠에 맞는 의미의 엘리먼트를 더욱 중점으로 쓰는 것이 중요하다는 것이다. 웹에서 ARIA가 접근성을 더욱 높여줄 수는 있으나, 가장 기본은 시멘틱한 마크업이 더욱 중요하다는 것이다. 적재적소의 엘리먼트 사용에 대해 더욱 고민해보자. * 이 포스팅은 알아가는 것들을 추후에 꾸준히 업데이트 할 예정입니다. 보시다가 모자른 설명이나, 해석이 있다면 댓글 부탁드립니다. 1. font Awesome(폰트 아이콘)의 경우 //안에 내용은 읽지 않고, 스크린리더에서만 읽을 수 있는 아이콘 설명이 들어간다. (title / aria-hidden 속성 중요) 2. 컴포넌트를 숨긴 상태라면 (탭의 컨텐츠) aria\-hid.. 2021. 6. 29. 웹접근성 검수 시 주의 (웹접근성 마크를 위한) 1. skipnavigation 다수의 건너뛰기를 제공할 경우, 핵심 콘텐츠인 본문으로 이동하기를 우선으로 제공. Content / GNB / Footer 순으로 스킵네비게이션을 구현한다. GNB의 경우 IE11에서 요소 등에 접근하지 못하는 버그가 있으므로, ul이전에 div와 id,크기값을 지정하여 주메뉴 영역으로 이동할 수있게 한다. 2. 저시력자를 위해 해당 페이지의 내용을 쉽게 파악할 수 있도록 순서를 아래와 같이한다. 작은순에서 큰순으로 작성. ex) faq < 고객라운지 < JEONst Home 3. 의미없는 이미지에는 alt를 "" 비게 한다. 4. label (레이블) 레이블의 내용을 형태로 제공할 경우, 일부 스크린리더는 인지못하는 경우 발생하여 해당 input에 title로 주거나, .. 2021. 6. 29. 단계를 나타내는 UI - 프로세스 이미지화 디자인상으로는 컬러나 텍스트로 변화를 줘서, 해당 단계임을 나타내보일 수 있지만, 보이지 않을 경우, 현재 단계가 어디인지를 나타내주어야한다. 그런경우 아래와 같이 써본다. ol > li > span.hidden 위와 같은 구조로 봤을 때, hidden 처리 된 span 엘리먼트 안에 "현재 페이지" 또는 "현재 단계"의 텍스트를 넣어주면 보이지 않는 경우에도 현재 단계가 어디인지 나타내 줄 수 있다. 응용적으로 hidden 처리 시킨 span 을 그림에서와 같이 아래 화살표 모양의 디자인을 넣어줘서 디자인도 만족시키고, 추가적인 태그 추가 등을 막을 수 있다. HTML5 에 WAI-ARIA 속성이 적용되면서 해당 UI에 WAI-ARIA 를 추가한 구조를 아래처럼 나타낼 수 있다. 1단계 2단계 3단계 .. 2021. 6. 29. 탭 메뉴의 접근성 위와 같은 경우의 아웃풋을 어떻게 구성할 것 인가. 여러가지 구조 중 내가 가장 많이 쓰는 것은, ul.tabmenu > li > a ^^ div.content ul > li > h2 > a ^+ div.content 위 두가지를 많이 쓴다. 이 두가지의 접근성 측면을 생각해보았을 경우.. 첫번째의 경우 해당 div.content 에 탭이자, 타이틀로 쓰여지는 내용을 blind or hidden 시켜, 어떠한 내용인지 나타내준다. 그러나 이 경우는 접근성을 고려한 논리적 순서에 위배된다 생각된다. 두번째의 경우 나같은 경우는, 위의 타입을 많이 썼었는데, 논리적순서를 생각해 이와같은 방법으로 한페이지내에 컨텐츠가 탭으로 나눠져 뿌려지는 경우엔, 이 방법을 쓴다. 사용자는 제목과 버튼 격인 탭을 읽고, 그.. 2021. 6. 29. 가독성을 위한 폰트사이즈 웹접근성 프로젝트를 진행하다보니, 가독성을 위한 폰트사이즈가 몇 픽셀인지 찾게된다. 그렇게 웹접근성연구소에서 찾다가 정리하게됐다. 웹접근성 의견은 아래와 같다. 기존에는 인증심사에서는 서체 크기를 12px(9pt)을 기본으로 봤었는데, 최근의 브라우저들의 성능 향상으로, 크기를 자유롭게 조절할 수 있기 때문에, 인증심사에서 이 기준이 빠지게 되었다. 그러나, ie6 에서는 문제가 되며, 영문과는 달리 11px 미만은 서체 깨짐이 발생하기 때문에 가독이 어렵다. 한글의 경우 최소 기준을 11px이다. 그러므로, 위 기준에 맞춰서 가독성을 높이는 방향으로 작업을 진행하는 것이 좋을 것으로 보인다. 2021. 6. 29. alt 는 몇글자 까지 지원할까? W3C Specification 상 alternate text에 대한 length limit 는 존재하지 않음. WCAG 2.0 문서상에는 영문 100자, 한글 90자 이내로 제한 SEO 상으로는 2015년 기준 16자 이내를 권장 SEO(검색엔진최적화)가 화두로 오르는 현 시점에서 3번이 가장 현답인듯하나, 융통성있게 긴 문장의 경우 logdesc(롱데스크)를 이용하여 별도의 파일이나, 부분을 만들거나, IR(이미지 대체기법)을 통해 좀더 알맞은 형태로 반영해줘야 할 듯 하다. longdesc 관련하여 자료를 찾다가 글을 보았는데. 접근성상 긴 문장의 이미지에 longdesc를 달아주는게 접근성상 맞는 답인듯 하였지만, 실제 국내에서 시각장애인이 longdesc를 사용하는 경우의 수가 적다하니, 실상 .. 2021. 6. 29. 이전 1 2 다음
