0903

tailwind

border VS outline VS ring

• border
  • 테이블 셀이나 카드 모서리 같은 구조적 테두리가 필요할 때
  • 사용자와의 상호 작용이 아닌 디자인의 일부일 때
  • 요소가 더 많은 공간을 차지해도 괜찮을 때
• outline
  • rounded가 아닌 요소에 포커스 상태를 만들어야 할 때
  • 레이아웃 요소에 영향을 주지 않을 때
• ring
  • 사용자와의 상호 작용이 필요한 디자인의 일부 일 때
  • 여러 시각적 효과를 쌓아야 할 때
    • 왜? tailwind에서 box-shadow 문법을 이것저것 넣어서 외곽선을 만든 태그이기 때문

접근성

alt

• alt 태그는 seo에도 영향을 주기 때문에 의미 있는 값을 사용하는게 좋다.

키보드 포커스

• 만약 마우스 없이 키보드로만 웹사이트를 이용해야 되는 상황이 온다면?
  • 탭을 사용해서 웹의 폼 요소(a, button, select, input)를 왔다리 갔다리 할 수 있는데, 이를 키보드 포커스 라고 한다.
• 고로 키보드 포커스에 해당하는 엘리먼트는 대표적으로 input, select, button, a 태그가 있다.
  • 만약 이외에 다른 요소 태그를 쓰는데 키보드 포커스를 사용하고 싶다면 tabindex 속성을 사용하면 된다.
  • 근데 tabindex는 상호작용 요소에만 사용해야 된다. 만약 비상호작용 요소에 tabindex를 부여한다면 스크린 리더 사용자나 키보드 사용자에게 혼란을 줄 수도 있고, DOM의 포커스 순서에도 영향을 주기 때문이다.
  • 또한 tabindex의 값은 0이나 -1의 값만 사용해야한다. 1 이상의 값을 사용하면 포커스가 DOM 순서와 다르게 이동하여 동작을 예측하기가 어려워지기 때문이다.
• https://frontend-fundamentals.com/a11y/eslint/rules.html