[🍞] html

img 태그의 alt 속성

• 내용을 알 수 없는 이미지
• 이미지를 볼 수 있는 특정인과의 사적인 문서(사이트, 이메일)에 사용된 이미지
• 장식 이미지에 alt="" 대신 role="presentation" 사용

위와 같은 특별한 경우를 제외하고 거의 모든 경우에 alt 속성을 사용한다.

출처 - img태그 alt 속성 써야할까?

Heading과 Sectioning elements

Heading elements <h1>-<h6>

• 폰트 사이즈를 이유로 태그를 사용하지 말고, 의미있는 태그로 사용할 것.
• <h1>, <h2>, <h3> ... 순차적으로 사용할 것.
• 페이지 당 하나의 h1만 사용할 것을 권장. 여러 <h1> 사용이 가능하긴 하지만 접근성과 SEO를 위해 되도록이면 <h1> 하나만 사용.

출처 : MDN) The HTML Section Heading elements

Sectioning elements

<header>, <footer>, <main>, <article>, <section>, <nav>, <aside>

위의 section 요소들에는 반드시 heading tag가 포함되어야 한다. 위치에 상관없이 section 요소 내에 포함하기만 하면 되는 것 같다.

출처 : MDN) section content

svg

SVG란?
: Scalable Vector Graphics. XML 기반의 2차원 벡터 그래픽으로 HTML 요소로 이뤄져 있어 CSS와 Javascript로 컨트롤이 가능하다. 벡터이기 때문에 확대하거나 크기를 키워도 이미지가 깨지지 않으며 용량도 늘어나지 않는다.

다만, 그래픽을 수학적 연산으로 그려낸 이미지이기 때문에 복잡한 형태일수록 사이즈가 커질 수 있다. 단순한 아이콘이나 로고, 도형을 구현할 때 사용된다.

svg 사용법

svg 코드를 직접 수정하여 이미지를 컨트롤 해야할 경우 - 3, 4번
이미지를 직접 컨트롤 하지 않을 경우 - 1, 2번

1. img 요소의 src에 이미지 경로로 작성하는 방법
2. css background 이미지로 넣는 방법
3. svg 코드를 복붙하여 HTML 안에 넣는 방법
4. object 요소 안에 넣는 방법

스크린 리더와 관련된 속성과 태그

aria-hidden

• 웹 접근성을 개선하기 위해 사용되는 속성으로, 해당 요소의 시각적인 표현 여부를 스크린 리더 등 보조 기술에 전달함.
• true/false의 속성값을 가짐.

aria-hidden="true" // 스크린 리더가 읽지 않음
aria-hidden="false"  // 스크린 리더가 읽음

true는 다음과 같은 경우 추가하면 안된다고 mdn 사이트에 나와있다.

• html hidden 속성이 존재하는 경우
• 요소 또는 요소의 조상이 display: none 으로 숨겨진 경우
• 요소 또는 요소의 조상이 visibility: hidden 으로 숨겨진 경우

출처 : MDN) aria-hidden

display: none

속성	화면	스크린 리더
display: none	X	O
aria-hidden="true"	O	X
display: none + aria-hidden="true"	X	X

i 태그

i 태그 자체는 스크린 리더에서 읽히지 않는다. i 태그는 주로 아이콘 같은 비의미적인 스타일을 적용하기 위해 사용되지만, 스크린 리더는 이런 스타일을 무시하고 의미 있는 컨텐츠만 읽는다.

<i class="icon">🔍</i>

위와 같이 유니코드 이모지를 사용하는 경우, 스크린 리더는 일반적으로 이모지의 유니코드를 읽지 않고, 대신에 브라우저에 내장된 기본 음성 표현을 사용해 해당 이모지를 설명한다.

따라서 🔍 는 스크린 리더에게 돋보기 또는 관련된 용어로 읽힌다고 한다.

만약 정확한 아이콘의 의미를 전달하고 싶다면, 적절한 대체 텍스트나 ARIA 속성을 사용하면 된다.

role 속성 사용:
<i class="ic-cart" role="img" aria-label="장바구니 아이콘"></i>

aria-label 속성 사용:
<i class="icon" aria-label="Search"></i>