본문 바로가기
728x90
반응형

공부하기49

접근성 준수 FAQ 이미지의 대체텍스트로 alt 속성값 입력 시 특수 기호는 사용가능한가요? 더보기 .(마침표)와 ,(콤마)를 제외하고 특수 기호는 사용 불가합니다. 링크 텍스트로 ‘Click here’ 문구를 사용한 경우 위배인가요? 더보기 목적지를 명확하게 확인할 수 없게 사용한 경우 목적지를 알 수 있는 내용으로 변경하거나 숨김텍스트를 추가합니다. (’Click here’만 사용하는 경우 위배) 소리가 없는 동영상이나 음소거 상태의 동영상인 경우 자동 재생이 가능한가요? 더보기 접근성에 위배되는 전제 조건은 소리가 발생하는 동영상이기 때문에, 소리가 없는 동영상이나 음소거 상태의 동영상이 자동 재생되는 경우에는 접근성 위배되지 않습니다. 동영상에 열린 자막(Open Caption)만 제공한 경우 접근성 위배인가요? 더.. 2024. 2. 7.
퍼블리셔가 체크해야 할 접근성 준수 항목 레이블 또는 지시문 제공 모든 양식 필드(,, 등)에 시각적인 레이블을 제공하고 있는가? 특정 규칙이 있는 양식 필드의 경우 사용자가 규칙을 확인할 수 있도록 지시문을 제공하고 있는가? 오류 수정 제안 입력 방식에 대한 오류가 발생하였을 때 방식을 수정할 수 있는 오류 문구를 제시하고 있는가? 특정 형식이 요구되는 경우 입력 오류 발생 시 입력해야 하는 예시를 구체적으로 제공하고 있는가? 오류 방지 매커니즘 제공 구매와 같은 제출의 경우, 거래를 수정하거나 취소할 수 있는 기능 또는 제출 전에 사용자가 검토할 수 있는 수단이나 절차를 제공하고 있는가? 데이터 삭제를 일으키는 제출의 경우, 삭제된 정보를 복구하거나 제출 전에 사용자의 삭제 의도를 확인할 수 있는 수단이나 절차를 제공하고 있는가? 데이터 작.. 2024. 2. 3.
퍼블리셔가 체크해야 할 접근성 준수 항목 포커스를 받을 때 컨텍스트 변경 금지 포커스를 받는 순간 페이지가 이동되거나 열리지 않는가? 포커스를 받는 순간 새 창이 열리지 않는가? 포커스를 받는 순간 다른 컴포넌트로 포커스가 이동되지 않는가? 포커스를 받는 순간 자동으로 양식이 제출되지 않는가? 입력 시 컨텍스트 변경 금지 체크박스, 입력 필드 등 컴포넌트의 값 또는 상태 등의 설정 변경만으로 포커스가 자동으로 이동되지 않는가? 체크박스, 입력 필드 등 컴포넌트의 값 또는 상태 등의 설정 변경 중 양식이 자동으로 제출되지 않는가?v 체크박스, 입력 필드 등 컴포넌트의 값 또는 상태 등의 설정 변경만으로 자동으로 새창이 열리지 않는가? 체크박스, 입력 필드 등 컴포넌트의 값 또는 상태 등의 설정 변경만으로 페이지가 이동되지 않는가? 일관된 네비게이.. 2024. 2. 2.
퍼블리셔가 체크해야 할 접근성 준수 항목 헤딩과 레이블 각 섹션의 제목은 헤딩태그로 사용하였는가? 각 헤딩태그는 구조화되어 목적에 맞게 사용하고 있는가? 페이지 본문 내 제목이 최상위 레벨 헤딩(h1)으로 지정되었는가? 식별 가능한 포커스 포커스 또는 키보드의 위치를 나타내는 요소가 시각적으로 표시되고 있는가? 포커스는 시각적으로 잘리는 부분 없이 보여지고 있는가? 포커스가 변경되는 배경 이미지와 결합한 경우 포커스와 배경 사이에 3:1 이상의 명도 대비를 준수하고 있는가? 단일 포인터 입력 지원 멀티 포인트(두 손가락으로 제어해야 하는 기능)는 한 손가락 터치 기능으로 대체가 가능한가? 경로기반 제스처(스와이프나 슬라이드 등)은 단순 터치 기능으로 대체가 가능한가? 우발적 포인터 입력 작동 방지 버튼 기능은 마우스로 누른 상태에서 실행되지 않.. 2024. 2. 1.
퍼블리셔가 체크해야 할 접근성 준수 항목 시간 제한 조정 가능 시간 제한이 있는 콘텐츠를 해제할 수 있거나 연장할 수 있는 방법이 있는가? 시간 제한의 간단한 방법(스페이스바 누르기)으로 20초 이상으로 10회 이상 연장할 수 있는가? 일시정지, 중지, 숨김 5초 이상 시간에 따라 자동으로 변경되는 콘텐츠를 정지할 수 있는 방법이 있는가? 5초 이상 깜빡이는 요소를 사용한 경우 정지할 수 있는 방법이 있는가? 번쩍임을 3회 또는 임계값 이하로 설정 빠르게 깜빡이는 콘텐츠를 제공하는 경우 1초 동안 3번 이상 깜빡이지 않게 하거나, 임계값 이하로 설정하고 있는가? 반복되는 콘텐츠 건너뛰기 웹페이지의 반복되는 영역(GNB 등)을 건너뛸 수 있는 링크를 제공하고 있는가? 반복영역을 건너뛰는 링크는 정상적으로 동작하고 있는가? 페이지 제목 지정 웹페이.. 2024. 1. 31.
퍼블리셔 접근성 준수 체크 항목 텍스트 간격 텍스트는 행간 1.5배, 단락 간 2배, 자간 0.12배, 단어 간 0.16배 간격으로 사용하고 있는가? 마우스 호버 또는 키보드 포커스로 나타나는 콘텐츠 마우스 호버 또는 키보드 포커스 이동 시 나타나는 추가 콘텐츠는 ESC 키를 눌러 닫을 수 있는 방법을 제공하고 있는가? 추가 콘텐츠 위로 포인터가 이동하여도 사라지지 않는가? 포커스가 밖으로 이동하거나 사용자가 닫을 때까지 추가 콘텐츠가 노출되도록 유지되고 있는가? 텍스트 콘텐츠의 명도 대비 텍스트와 배경 간의 명도대비는 4.5:1 이상을 준수하고 있는가? 링크 텍스트가 방문 링크인 경우 마우스 호버나 키보드 포커스 상태에서도 명도대비를 준수하고 있는가? 키보드 웹 페이지의 모든 기능이 키보드만으로 사용이 가능한가? UI 컴포넌트, 폼.. 2024. 1. 30.
퍼블리셔가 체크해야할 접근성 준수 항목 자동 재생 금지 소리가 나는 콘텐츠를 제공할 경우 자동으로 재생되지 않도록 설정되어 있는가? 소리가 나는 콘텐츠를 자동으로 재생해야 한다면, 3초 이내에 자동으로 소리가 꺼지도록 제공하거나 소리를 끌 수 있는 컨트롤 요소가 있는가? 페이지 진입 시에 자동으로 재생되는 오디오 콘텐츠가 있다면, 웹 페이지 시작 부분에 오디오를 끌 수 있는 컨트롤 요소가 제공되고 있는가? 텍스트 콘텐츠의 명도 대비 텍스트와 배경 간의 명도대비는 4.5:1 이상을 준수하고 있는가? 링크 텍스트가 방문 링크인 경우 마우스 호버나 키보드 포커스 상태에서도 명도대비를 준수하고 있는가? 텍스트 크기 조정 브라우저 확대 기능으로 200% 확대 시 텍스트나 이미지가 잘려 보이는 곳은 없는가? 브라우저 확대 기능으로 200% 확대 시 사용.. 2024. 1. 29.
퍼블리싱을 위한 접근성 체크항목 콘텐츠 선형 구조 HTML 마크업 순서가 논리적으로 선형화되어 있는가? tabindex 속성을 양수값(1 이상)으로 사용하여 임의로 포커스 순서를 지정하고 있지 않은가? 명확한 지시 사항 제공 색, 크기, 모양, 방향, 소리 등 특정 감각에 의존하여 컨트롤 요소 또는 특정 영역을 가르키고 있지 않은가? 콘텐츠 보기 방향 제한 금지 화면을 가로나 세로 단일 방향으로 제한하지 않는가? 명확한 입력 목적 사용자가 입력해야 하는 에 이름, First name, Last name, 생일, 이메일, 전화번호, 도시, 주소, 우편 주소에 autocomplete 속성을 사용하고 있는가? 색에 무관한 콘텐츠 인식 그래프 및 차트가 정보를 전달하는데 색상이 사용된 경우, 색상에 의존하지 않는 다른 수단을 제공하고 있는가?.. 2024. 1. 29.
퍼블리싱을 위한 접근성 체크항목 자막 제공 비디오 콘텐츠에 삽입된 오디오(나래이션 등)에 대한 동기화된 자막을 제공하고 있는가? 동영상에 대한 대체 정보 제공 비디오 콘텐츠에 오디오 설명을 제공하지 않는 경우 모든 정보를 텍스트로 제공하고 있는가? 비디오 콘텐츠에서 오디오로 화면에 대한 설명을 제공하고 있는가? 마크업 구조 및 관계 정보 데이터 테이블에서 과 와 scope를 사용하고, 병합 데이터 테이블에서 id와 headers를 사용하여 데이터셀과 제목셀 간의 관계를 제공하고 있는가? 양식 컨트롤 그룹은 role=group나 으로 그루핑하고 그룹레이블을 aria-labelledby나 로 제공하고 있는가? 콘텐츠의 목적에 맞게 시맨틱한 태그를 활용하여 마크업되어 있는가? 레이아웃 테이블에 role=presentation을 삽입하고 이나.. 2024. 1. 27.
텍스트가 아닌 콘텐츠 접근성 체크항목 텍스트가 아닌 콘텐츠 더보기 로 구성된 이미지 요소에 대해 대체 저어보를 이미지와 동일하게 제공하고 있는가? 더보기 조직의 관계나 프로세스 등 복잡한 이미지 제공 시 조직 간의 관계를 대체 텍스트로 제공하고 있는가? 더보기 의미가 없는 기호는 aria-hidden=true 속성을 삽입하여 스크린리더에서 들리지 않게 처리하고 있는가? 더보기 배너 또는 스토어 상품 등 이미지를 등록하는 경우 동등한 정보가 입력되어 있는가? 더보기 지도나 그래프 등의 접근성 준수가 어려운 경우 동등한 대체 텍스트를 제공하고 있는가? 2024. 1. 26.
스텐실 stencil 반응형 이벤트 처리 스텐실 stencil 반응형 이벤트 처리하기 너무도 쉽죠 이제 stencil이 아니면 개발하기 어려울 정도에요 다음의 코드 하나로 쉽게 반응형을 완성하세요!! @Listen('resize', { target: 'window' }) onResize() { forceUpdate(this); } import {Component, Host, h, Prop,forceUpdate, Listen } from '@stencil/core'; 임포트는 필수인거 아시죠? 2024. 1. 25.
stencil web component에서 iscroll 만들어보자 마우스다운이벤트를 발생시켜 드래그시작 지점을 할당합니다. @Listen('mousedown') mousedown(ev) { this.dragStart = ev.pageX; } 그리고 마우스업 이벤트를 발생시켜 드래그끝 지점을 할당합니다. @Listen('mouseup') mouseup(ev) { this.dragEnd = ev.pageX; } 시작값과 끝값을 계산하여 변수에 할당 합니다. let screenMove = this.dragStart - this.dragEnd; 그 값을 아래의 두 값과 함께 스크롤 이벤트에 할당합니다. this.positionValue = this.el.shadowRoot.querySelector('.iscroll__container').scrollLeft; 가로스크롤을 싸고.. 2024. 1. 24.
728x90
반응형

티스토리툴바