본문 바로가기
반응형

Spec UP - Frontend/부스트코스_UI 개발83

웹 접근성_텍스트 콘텐츠의 명도 대비 페이지 글씨가 작아도 알아보기 힘들지만 명도 대비가 낮은 경우 역시 가독성이 떨어져 내용을 인식하기 어렵습니다. 노안, 저시력, 색약, 색맹 등의 사용자들도 불편함이 없도록 콘텐츠를 제공해야 하며, 비장애인들도 명도 대비가 높다면 콘텐츠를 더 잘 인식할 수 있습니다. 텍스트 명도 대비 페이지에 존재하는 모든 텍스트에 대해 명도 대비를 준수해야 하는 것은 물론이고, 텍스트가 이미지로 된 경우에도 명도 대비를 준수해야 합니다. 텍스트와 배경색 간의 명도 대비는 4.5:1 이상이 되도록 구현해야 합니다. 의미 있는 이미지 명도 대비 텍스트뿐만 아니라 의미 있는 이미지의 경우에도 이미지를 인식할 수 있도록 명도 대비를 준수해야 합니다. 확대 가능한 브라우저에서 명도 대비 명도 대비가 4.5:1 이상 이어야 한다.. 2020. 3. 31.
웹 접근성_명확한 지시사항 제공 지시 사항은 모양, 크기 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 합니다. 지시 사항을 특정한 단일 감각에만 의존하는 방법으로 제공해서는 안 된다는 것입니다. 즉, 여러 가지 다른 감각을 통해서도 지시 사항을 인식하는 데 문제가 없도록 콘텐츠를 제공해야 합니다. 명확한 지시 사항 제공에 대한 사례들을 살펴보도록 하겠습니다. 모양으로만 정보 제공 회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류 사례입니다. 따로 "*표시는 필수 입력 사항입니다."라는 설명을 제공하거나, '*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나, '*'영역에 "필수"라는 정보를 숨김 텍스트로 제공하면 됩니다. 위치나 방향으로만 정보 제공 왼쪽의.. 2020. 3. 31.
웹 접근성_색에 무관한 콘텐츠 인식 콘텐츠는 색에 관계없이 인식될 수 있어야 합니다. 즉, 색을 구분하지 못하더라도 콘텐츠를 인식하는데 문제가 없어야 한다는 말입니다. 색에 무관한 콘텐츠에 대한 사례들을 살펴보도록 하겠습니다. EX:) 색으로만 구분한 사례 차트 슬라이드 버튼 선택 여부 페이지내이션 탭 버튼 선택 여부 색으로만 구분한 경우 색을 구분하기 힘든 사용자는 인식하기 어렵기 때문에 패턴, 굵기, 모양, 테두리 등의 다양한 방법으로 구분하는 것이 좋습니다. 2020. 3. 31.
웹 접근성_자막 제공 멀티미디어 콘텐츠에는 이에 대한 대체 수단을 제공해야 합니다. 대체 수단으로는 자막, 대본, 수화 등이 있으며 이 중 하나를 제공하면 됩니다. 멀티미디어 대체 수단 제공 예를 들어 동영상을 볼 때 청각적으로 내용을 인식할 수 없는 사용자는 동영상에서 나오는 음성을 들을 수 없습니다. 따라서 시각적으로도 인식할 수 있도록 멀티미디어 콘텐츠에 포함된 음성 및 대사와 동등하게 대체 수단을 제공해야 합니다. 대체 수단은 자막, 대본, 원고, 수화 중 하나로 제공해주시면 됩니다. 사용자가 업로드하는 멀티미디어 제3자가 영상을 업로드하는 경우 사용자가 대체 콘텐츠를 제공할 수 있도록 툴을 제공해야 합니다. 음성이 나오지 않는 영상 멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우는 시각적으로만 인식이 가능.. 2020. 3. 31.
웹 접근성_적절한 대체 텍스트 제공(alt) 적절한 대체 텍스트 제공 : 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공하여야 한다. alt로 대체 텍스트 제공 텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative속성인 'alt'에 적용해주시면 됩니다. ex: 비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공해야 합니다. 스크린 리더로 들으면 alt 값을 읽어줍니다. img 요소뿐만 아니라 추가적으로 input type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해 주시면 됩니다... 2020. 3. 31.
웹 접근성 지침 소개 WCAG (Web Content Accessibility Guidelines) W3C에서 발표한 웹 콘텐츠 접근성 지침. 1990년대부터 영국 · 호주 · 미국 · 일본 등이 장애인 차별 금지 관련법에 따라 모든 이의 웹 접근성을 높였으며, 1997년 5월 W3C가 '웹 콘텐츠 접근성 지침(WCAG)'를 내놓아 제도 확산에 속도를 더했습니다. KWCAG (Korean Web Content Accessibility Guidelines) 해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침. 원칙 4개, 지침 13개, 항목 24개로 구성. 한국도 2009년 5월 '국가 정보화 기본법'을 개정해 '장애인 · 고령자 등의 정보 접근 및 이용 보장'을 명시했으며, 2015년까지.. 2020. 3. 31.
웹 접근성_장애환경 팀 버너스리 " 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든사람이 접근할 수 있도록 하는 것이 웹의 필수 요소이다. " 장애란? 어떤 사물의 진행을 가로막아 거치적거리게 하거나 충분한 기능을 하지 못하게 함. 또는 그런 일 두 번째 신체 기관이 본래의 제 기능을 하지 못하거나 정신 능력에 결함이 있는 상태. 즉, 신체적 또는 정신적 결함이 있는 것 뿐만 아니라 정보를 얻지 못하도록 방해하는 것도 장애가 된다는 말입니다.이런 장애 환경에는 여러 장애들과 노안, 운전 중일 때 소음이 심할 때 스피커가 없어서 소리를 듣지 못할 때 소프트웨어가 지원되지 않거나 네트워크가 접속되지 않는 경우들도 있습니다. 장애 환경 1. 전맹 시각 장애 시력이 전혀, 거의 없어 앞을 볼 수 없습니다. 이분들은 더욱 발달된 .. 2020. 3. 31.
웹 접근성이란? 우리는 웹 페이지를 통해 유용하고 필요한 정보들을 얻습니다. 이런 웹 페이지에 잘 접근할 수 있는지 없는지의 정도를 웹 접근성이라고 합니다. 웹 접근성이란 무엇이고 이를 지켜야 하는 법적인 이유를 자세히 살펴보도록 하겠습니다. 접근성이란? 사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻합니다. 웹 접근성이란? 어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것. 간단히 정리하면 '모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것'입니다. 웹 접근성을 지켜야 하는 첫 번째 이유 장애인 차별 금지법(장차법) 장애인 차별을 금지하는 법으로 장차법에서는 2013년 4월 11일부터 장.. 2020. 3. 31.
Viewport의 이해 스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면서 모바일 웹 제작에 대한 이해가 아주 중요해졌습니다. 뷰포트는 미디어 쿼리 수업의 범위에서 벗어나기에 수업 영상에서 다루지 않았지만, 모바일 웹 사이트를 제작하기 위해 반드시 이해하고 있어야 하는 개념입니다. 스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에 모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었습니다. 그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했습니다. (기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px 입니다.) 여기에서 실제 우리가.. 2020. 3. 31.
미디어쿼리 실습예제 (Media Queries) 실습 1. 디스플레이 크기에 따른 body요소의 background-color 변경 세부 조건 - width 0~767px 이면(주로 mobile) : gold 768px~1024px 이면(주로 tablet) : lightblue 1025px~ 이면(주로 desktop) : lightpink width 미디어 특성을 이용해서 뷰포트 가로 크기에 따라 배경 색상이 변경되는 예제를 만들어봅니다. ex: @media scrreen and (min-width:768px) and (max-width:1024px) { body { background-color : blue; } } 위 코드의 경우, 3개의 조건을 만족하기 위해 3개의 미디어 쿼리를 작성했습니다. 위 코드도 우리가 의도한 대로 정상적으로 잘 동작하지.. 2020. 3. 31.
반응형

티스토리툴바