김무훈 @iamuhun@hackers.pub
Public

<section> 버리고 <article> 써야 하는 이유

〈section〉 태그 안의 글에 헤딩(제목)을 포함하면 화면상에서는 그 헤딩들이 논리적인 순차 구조를 가지고 있는 것처럼 보인다. 하지만 이는 순전히 시각적인 것일 뿐 보조 기술과 연동된 구조 정보가 아니다. 〈section〉 태그의 용도는 무엇이고, 헤딩을 어떻게 코딩해야 보조 기술 사용자에게 정말 중요한 구조 정보를 전달할 수 있을까?

<section>을 버리고 HTML5의 <article>을 써야 하는 이유

각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 <h1>, <h2>··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 <h> 태그에 <section>을 둘러싸서 제목 크기를 조절하는 방법은 겉모양만 달라질 뿐입니다. <section>은 구획을 나눌 때 쓰세요. <main>, <header>, <footer>, <nav> 등은 스크린리더 사용자에게 매우 유용한 태그입니다. 보조 기술을 사용하지 않는 사용자에게는 아무 영향을 주지 않으니 적극적으로 활용하셔도 됩니다. <article>은 여러모로 유용합니다. 블로그 기사를 만들 수 있을 뿐만 아니라 스스로 독자적인 페이지가 될 수도 있습니다. 유튜브 홈페이지에서는 동영상을 <article> 태그에 넣어 나열하는 식으로 이용할 수도 있습니다. 다른 요소를 추가하기보다 태그의 기본 기능을 올바르게 적용한 웹 페이지를 만들 수 있기를 바랍니다.

webactually.com · Webactually

3
2
0

If you have a fediverse account, you can reply to this note from your own instance. Search https://hackers.pub/ap/notes/01969f52-cf1c-7dbf-9d49-1ae9fab2c7b2 on your instance and reply to it.

김무훈 @iamuhun@hackers.pub
Public

section 의 깊이에 따라 헤딩의 글꼴 크기가 달라지는 기본 CSS Rules 스펙이 접근성 트리를 챙기지 않아 아무 의미가 없다고 위 글에 적혀 있는데요,

최근에 이 글꼴 크기 지정에 관한 스펙이 제거된다는 글이 문득 다시 생각나서 같이 공유합니다. https://news.hada.io/topic?id=20275

h1 태그의 기본 스타일이 변경됩니다 | GeekNews

주요 브라우저들이 <h1> 태그의 기본 스타일(UA 스타일)을 변경하는 업데이트를 진행 중임특히 중첩된 section, article, nav, aside 등의 내부에서 사용된 <h1>에 영향을 줌개발자들은 이 변경으로 인해 사이트에 예기치 않은 스타일 변화나 Lighthouse 경고가 발생할 수 있으므로 주의가 필요함어떤 점이 바뀌는가HTML 명세에는 한

news.hada.io · GeekNews

1
0
0
1
0
0