HTML / CSS

배운 것들

native focusable 요소들: a 태그, form 관련 interactive 요소들(button, input 등), img에서 map과 area로 정의된 영역
tabindex로 키보드 탐색 시 focus 받을 수 있게 만들 수 있다.
- tabindex 속성 값으로 0을 주면 마크업 흐름을 깨뜨리지 않고 focus 가능
- 그러나 keypress 이벤트를 줬을 때 포커스 외의 별도 동작을 수행하게 하려면 자바스크립트로 처리해줘야 한다.

heading 요소 안에 a나 button을 마크업하는 것은 추천하지 않는다.
- 굳이 제목에 기능적 요소를 넣을 필요가 있을까? 그냥 헤딩을 숨김콘텐츠 처리하고 버튼이나 링크는 따로 만들자.
폰텔로나 폰트어썸의 가상요소선택자에서 content: '\e382d'; 등으로 아이콘을 넣는 경우, 역슬래쉬 이후는 스크린리더가 읽지 않기 때문에 굳이 aria-hidden 처리할 필요는 없다.
!important는 동적인 변화가 일어나 강제적으로 우선순위를 받아야 하는 경우(display: none;`이었다가 등장해야 하는 경우 등)에 안전하게 높은 우선순위를 주기 위해 사용. 그러나 남발하면 안된다.

요즘은 각 메뉴마다 엄청나게 많은 하위메뉴를 가진 네비게이션, 즉 mega-navigation이 일반적이다.
- 키보드 탐색을 통해서만 접근할 수 있는 유저에게는 마지막 메뉴 가고 싶을 때 앞의 메뉴들의 하위메뉴를 다 훑어아먄 하는 인고의 시간...
이를 빨리 skip할 수 있도록 메인 메뉴를 따로 리스트로 만들어주는 마크업을 role과 몇몇 aria- 속성들을 통해 구현해보자.
- 메인메뉴의 각 tab으로 기능하는 메뉴를 포함하는 영역을 role="tablist"로, 각자의 tab은 role="tab"으로 마크업한다. 보통은 ul 속 li로.
- 각 tab이 나타낼 하위 메뉴를 포함하는 영역을 role="tabpanel"로 마크업한다.
- 각 tab은 자기가 가리키는 tabpanel의 id를 aria-controls 속성값으로 마크업하여 연결시켜준다.
- 각 tab panel 또한 자신이 어떤 메인 메뉴에 속해있는지 나타내주기 위해 해당하는 tab 요소의 id를 aria-labelledby로 연결해준다.
이 때 ul 속 li들은 tab focus를 따로 받도록 tabindex와 별도 js 처리를 해줘야.

image, map, area로 이미지에 링크달기
- <image> 태그에 usemap 속성으로 연결한 <map> 요소와 그 안의 <area> 요소들을 통해 이미지 속의 특정 영역을 키보드 focus 받게 할 수 있다.
- <area>는 이미지 안의 clickable한 영역을 정의하며, href 속성을 통해 다른 곳으로 이동시킬 수도 있다. -참고: HTML Image Maps - W3Schools