[접근성 aria] role
landmark란? 구역을 나타내는 요소(=시멘틱 태그)들을 landmark라고 한다. role role이라는 속성으로 landmark를 정의한다. role 속성 중에 role 값으로 landmark가 존재하기 때문이다. (그러므로 role을 사용한다고 무조건 landmark가 되는 것은 아님) role은 어떤 곳에 사용하느냐에 따라 aria속성이 추가 될 수 있으므로 MDN role를 보고 참고해서 사용하도록 하자. [주의] 내비게이션 내비게이션 혼용해서 사용해서는 안된다. 구역을 나타내는 요소를 사용할 수 있으면 사용하는게 좋다. [공부 좌표] WAI-ARIA Roles
이론/접근성
2021. 2. 17. 20:32
[인터랙션 CSS] 햄버거 메뉴 만들기
See the Pen [인터랙션 CSS] 햄버거 메뉴 만들기 by mill (@millfeel) on CodePen. 접근성 이슈 tab 사용시 포커스 되지 않는 이슈를 해결하기 위해서 "tabindex"를 사용해야 하고, role과 aria-label을 선언하여 해당 ‘div’ 영역에 대한 설명을 제공해야한다. label의 기본 속성은 포커스가 되지 않는다. input[id='menuicon'] {display: none;} input[id='menuicon'] + label { position: relative; display: block; width: 60px; height: 40px; cursor: pointer; /* 포인터가 label에 설정돼 있다. */ background-color: #d..
인터랙션 & 컴포넌트/CSS
2021. 2. 17. 18:22
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 불일치 연산자
- clinetTop
- 동등 연산자
- 점 표기법
- prototype 프로퍼티
- 부등 연산자
- scrollTop
- javascript class
- [[Prototype]]
- 일치 연산자
- 대괄포 표기법
- scrollHeight
- constructor
- offsetHeight
- property
- 객체의 프로퍼티
- outerHeight
- __proto__
- 프로퍼티
- innerHeight
- 동치 연산자
- clientHeight
- @font-face
- 링크막기 #a링크막기
- offsetTop
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
글 보관함