css의 background 속성 사용 { background-image: url("bg.gif"); } 태그에 alt 속성을 빈 값으로 사용 태그에 aria-hidden 사용 태그에 role="presentation" 사용 이외의 것들 .visually-hidden { /* 일반적인 흐름에서 항목을 제거 */ position: absolute; /* 잘못 발음되거나 뭉개지는 텍스트를 위한 해결책 */ white-space: nowrap; /* 가능한 가장 작은 크기로 설정 (일부 화면 낭독기는 높이와 너비가 0인 요소를 무시함) */ width: 1px; height: 1px; /* 크기 조정 후 넘치는 콘텐츠 숨기기 */ overflow: hidden; /* 요소의 크기를 변경할 수 있는 모든 속성 ..
target의 주의점 MDN 문서를 확인해보면 window.opener API의 악의적인 사용을 방지하는걸 고려하라고 권장하고 있습니다. 이를 막기위해 rel="noopener" 와 rel="noreferrer" 를 사용하면 됩니다. noopener target="_blank" 사용 시 새 창으로 브라우저를 열게 되면 새로운 창에서 연결 페이지에 부분적으로 액세스할 수 있는 보안 취약점이 생기게 됩니다. 즉, window.opener 객체를 통해 연결된 페이지에서 이전 페이지를 제어할 수 있는 권한이 주어진다는 것입니다. 하지만 rel=”noopener”를 주게되면 새로 열린 페이지에서 window.opener 객체가 존재하지 않게 됩니다. noreferrer noopener와 유사한 기능으로 새로 열리..
form 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만듭니다. form 동작 방식 입력도니 데이터를 한 번에 서버로 전송합니다. 전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 보여줍니다. form 내용을 작성한다 form 안에 있는 모든 데이터를 웹 서버로 보낸다 웹 서버는 받은 form 데이터를 처리하기 위해 웹 프로그램으로 넘긴다 웹 프로그램은 폼 데이터를 처리한다 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다 웹 서버는 받은 html 페이지를 브라우저에 보낸다 브라우저는 받는 html 페이지를 보여준다 form 태그 사용시 주의점 form 요소를 사용할 때 주의할 사항으로는 태그 사이에는 다른 태그가 삽입이 안되며, 의 이름 속성은 한 페이지에서 중복하여..
ARIA role(역할) 특정 요소에 역할 정의, 사용자에게 정보제공, 부여한 역할 동적 변경 불가 ARIA role 속성 role="application" 동일요소x, div요소와같이 그룹역할을하는 요소로 대체 role="banner" 비슷한 의미로 사용가능👉🏻 로 사용시 1페이지에서 1개만 사용하기를 권장 role="navigation" 와 동일 role="main" 과 동일 👉🏻 1페이지 내에 1개만 사용가능하다. 본문의 주요 컨텐츠 영역 role="aside" 와 동일, 주요컨텐츠와 연관이 적은 의미를 가진 영역 role="form" 와 동일, 서버에 전송될 수 있는 콘텐츠, 폼관련 요소 모임 role="search" 검색 역할을 담당하는 서식영역, 또는 에 사용권장. role="contentin..
사용 이유 숨김 제목과 같이 일부 콘텐츠를 숨길 필요가 있다. 콘텐츠를 숨기는 방법으로는 CSS활용해 display : none, visibility:hidden 을 활용할 수 있습니다. 이러한 기술은 웹 페이지에서 보이지 않을 뿐만 아니라 스크린 리더와같은 보조 기술로도 탐색이 불가능합니다. 가. 스크린 리더 사용자에게 정보 오버로드 방지: 스크린 리더 사용자는 시각적 콘텐츠를 음성으로 변환하여 이해합니다. 따라서 너무 많은 노이즈 요소가 읽히면 콘텐츠를 이해하는 데 어려움을 겪을 수 있습니다. aria-hidden을 사용하여 불필요한 정보를 제거함으로써 사용자의 이해를 돕습니다. 나. 숨겨진 콘텐츠 제공: 일부 콘텐츠는 초기에는 보이지 않지만, 특정 상황에서 스크린 리더 사용자에게 제공되어야 할 수도..
대표적인 속성 2가지 1. float 속성 2. position 속성 float 정렬하기 위한 속성으로, 보통의 흐름(normal flow)를 벗어나 텍스트 및 인라인 요소가 그 주위를감싸는 자기 컨테이너(부모 요소)의 좌우측을 따라 배치되는 것을 지정합니다. 예를 들어 left나 rigth를 주게되면 해당 요소는 부모 요소의 왼쪽 또는 오른쪽에 배치되게 됩니다. 이처럼 float는 다른 요소의 배치에 영향을 주는 속성값입니다. float는 화면에 떠있는 블록이기 때문에 블록이 지정되어 있는 넓이와 높이가 반드시 지정되어 있어야 합니다. 이 중 하나의 속성이 빠져도 float 속성을 사용할 수 없습니다. inherit 부모 요소에서 상속함 left 요소가 자신의 포함(containing) 블록의 좌측에 ..
제목 요소 종류 h1 ~ h6로 총 여섯 가지 사용 가능하다. 숫자가 높아질 수록 하위제목이다. 사용 방식 제목 레벨 1 제목 레벨 2 제목 레벨 3 제목 레벨 4 제목 레벨 5 제목 레벨 6 [결과] 제목 요소는 블록 요소를 포함할 수 없으며 인라인 요소와 텍스트만 사용가능!! 사용 이유 잘 구성된 제목 요소는 기기에서의 정보 인식성을 높일 수 있다. 즉, SEO관점에서 좋다. 스크린 리더 사용 시 웹 페이지의 제목구조를 파악해 제목 사이의 이동 기능을 제공해주기때문에 빠르게 탐색이 가능하다. 따라서, 제목 요소는 순서대로 사용해주는 것이 바람직하다. 제목 요소가 순차적으로 사용되어야지 정보의 순서를 파악할 수 있고 구조를 파악할 수 있다. 추후 유지 보수를 위해서도 순서를 지켜주는 것이 좋다. 제목 ..
웹 표준 📜 웹에서 표준적으로 사용되는 기술이나 규칙 🔉 W3C의 토론을 통해 나온 권고안을 말함 🔉 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정 웹 표준 관련 기술 구조 : (X)HTML 표현 : CSS 동작 : Script 구조 언어 (X)HTML & XML HTML ‘HyperText Markup Language’의 약자로, 하이퍼텍스트를 표현하기 위한 마크업 언어라고 정의할 수 있다. HTML은 SGM(Standard Generalizes Markup Language)을 모체로 하여 국제 표준 기구인 ISO가 1986년에 채택한, 웹에서 사용하는 표준 마크업 언어이다. HTML은 매우 느슨한 언어이기 때문에 코드의 일관성이 떨어졌다. 태그의 운용법이나 오류..
정의 WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미 ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공함. 등장 배경 1. 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족함 2. Ajax를 통한 실시간 변경 콘텐츠와 SPA 방식의 콘텐츠 변경이 일어나는 데 스크린리더를 사용자들은 실시간으로 갱신되는 정보를 알 수 없음 3. 화면 확대 시 화면 밖으로 콘텐츠가 변경되어도 이를 파악하기가 힘듦 웹 접근성이란? 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것 웹 접근성 기대 효과 1. 장애인, 고령자 등 다양한 사용..
