📕 복습하기

개인 과제를 하며 잘 몰랐고 헷갈렸던 부분에 대해 다시 한번 복습하기 위해 작성하였습니다.

✅ WAI-ARIA

웹 접근성을 높히기 위해 사용됩니다.

• aria-label

  • 모든 HTML 태그에서 사용 가능
  • 이미지로 따지자면 alt속성과 동일하지만, aria-label은 시각적으로 확인할 수 없는 사람을 위해 음성으로 알려줍니다.(스크린 리더)
  • role 과 달리 값이 정해져 있지 않아 스크린 리더 사용자에게 전달하고 싶은 내용을 상황에 따라 전달할 수 있습니다.

• role

  • 태그의 역할을 알려주는 속성
  • 정해진 값을 사용해야 합니다.(MDN에서 값 확인하기)

✅ IR 기법

이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 음성으로 들을 수 있게 제공합니다.
또한, 검색 엔진에서 효과적으로 내용을 수집하게 도와줍니다.

.ir {
   position: absolute;
   clip: rect(0 0 0 0);
   width: 1px;
   height: 1px;
   margin: -1px;
   overflow: hidden;
}

width 와 height를 1px로 잡아 스크린 리더가 읽을 수 있게 하고, 1px을 넘는 텍스트를 overflow: hidden으로 숨깁니다.
레이아웃에 영향이 끼지치 않도록 position: absolute로 작성합니다.

✅ 절대경로와 상대경로

• 절대경로
  • 웹페이지나 파일이 가지고 있는 고유한 경로
  • C:\users\document\untitled.jpg
• 상대경로
  • 현재 위치한 곳 기준
  • / : 루트
  • ./ : 현재 위치
  • ../ : 현재 위치의 상단 폴더