메뉴버튼
-
햄버거모양의 버튼이 꼭 필요하지는 않다. 메뉴가 4개 이하라면? 그냥 그대로 두는 편이 낫다.
-
아이콘을 렌더링 할때 많은 옵션이 있다.. 이미지, background url.. 등등, svg sprite, React에서는 svg 형태의 컴포넌트를 사용하는게 가장 좋은 렌더링 방식이다.
-
접근가능한 레이블 => aria-label속성이나, hidden span을 통해 구현 할 수 있다.
tabIndex
- tabIndex속성? => 키보드 탭을 통해 웹페이지를 제어할 때 사용하는 속성이다.
- 양수 값(tabIndex="1", tabIndex="2" 등):
양수 tabIndex 값을 가진 요소는 가장 작은 양수 값부터 시작하여 오름차순으로 초점을 받음
- 0(tabIndex="0"):
'tabIndex'가 0인 요소는 포커스를 받을 수 있으며 문서의 자연스러운 탭 순서를 따릅니다. 이는 자연스러운 탭 순서를 변경하지 않고 사용자 정의 대화형 요소에 초점을 맞추는 데 유용
- 음수 값(tabIndex="-1"):
음수 tabIndex 값이 있는 요소는 프로그래밍 방식으로(예: JavaScript를 통해) 초점을 맞출 수 있지만 키보드 탐색을 통해 초점을 맞출 수는 없습니다. 이는 탭 순서에 포함되어서는 안 되지만 특정 조건에서 포커스를 맞춰야 하는 요소에 유용
- tabIndex를 자연스럽게 사용하면 => 키보드를 탐색에 의존하는 사용자가 논리적으로 예측가능한 순서로 페이지를 이동 할 수 있게 해줌
<button tabIndex="1">First Button</button>
<input type="text" tabIndex="3" placeholder="Third in tab order">
<a href="#" tabIndex="2">Second Link</a>
<div tabIndex="-1">This div is not focusable via Tab key</div>
<button tabIndex="0">This button follows the natural tab order</button>- aria-expand : 요소의 현재상태(확장, 축소를 나타냄) true, false존재
제품목록
-
img태그
-
lazy loading 속성 사용할 것 + picture, figure태그 사용권장
-
picture : 뷰포트에 맞는 이미지를 사용 할 수 있게 해준다.
-
파란색 밑줄이 있는 링크 => 이동기능!
-
버튼은 이벤트 처리를 위해 ?
-
블록수준의 링크는 만들지 않는 것이 좋다. (텍스트 콘텐츠를 많이 담고 있는 블록 수준의 링크)
-
간결하게 제목만 써서 만들자!
필터위젯
-
loading => 시각장애인들을 위한 대체텍스트 만들어 줄것
-
aria-live = 'assertive'사용
-
무한스크롤은 잘못하면 더 안좋은 사용자 경험을 가져올 수 도 있음. 어떨 때는 더보기 버튼이 더 좋은 선택일수도
-
무한스크롤시 => 콘텐츠가 로딩되면 키보드 포커스가 load more button에서 새로 로딩된 첫번째 아이템으로 가는게 중요하다.
-
html의 기능이 있다면 일단 활용하자.
폼
-
label과 control 폼을 명시적으로 id, for 연결할 것.
-
fieldset태그는 연관된 폼 레이블인 legend아래 그룹화한다. 즉 폼 내에 여러 구분 분야들을 나눈다고 생각하면 쉽다.
-
html form태그에 required속성이나 validate속성은 사용하지 않는것을 추천
-
크로스 브라우징 이슈 존재
