ARIA role = "main"을 추가 할 위치와 하위 섹션을 올바르게 표시하는 방법은 무엇입니까?

내 홈페이지에 ARIA 역할 "main"을 추가하고 싶습니다.ARIA role = "main"을 추가 할 위치와 하위 섹션을 올바르게 표시하는 방법은 무엇입니까?

나는 페이지의 주요 내용에 대한 세 부분이 있습니다

페이지 소개 (비디오 & 페이지 제목)
서비스 summmary
서비스 요약 B를

어디해야 "기본"역할을 추가합니까?

전체 그룹에 역할을 추가하기 위해 세 섹션을 포함하는 <div role="main">을 추가해야합니까? 이것은 나에게 초과 마크 업처럼 보인다!
또는 주요 콘텐츠의 첫 번째 섹션에 역할을 추가해야합니까?

또는 세 섹션을 하나의 <section role="main">으로 그룹화하고 세 섹션을 하위 섹션으로 사용해야합니까?

<body> 
    <header class="site_header" role="banner">...</header> 
    <section class="page_intro"> 
     <h1>Bold Introductory Statement Here</h1> 
     <a href="#">Play Video</a> 
    </section> 
    <section class="service_summary"> 
     <h1>Section A Title</h1> 
     <p>Section A content</p> 
    </section> 
    <section class="service_summary"> 
     <h1>Section B Title</h1> 
     <p>Section B content</p> 
    </section> 
    <footer class="site_footer" role="contentinfo">...</footer> 
</body>

출처

2014-12-19 jasonbradberry

당신은 여분의 마크 업에 대해 걱정할 필요가 없습니다. div 요소는 의미 론적 요소가 적절한 곳에서 사용하지 않는 한 나쁜 습관이 아닙니다. 귀하의 경우에는 페이지의 주요 내용으로 세 가지 다른 요소를 지정하려고합니다. 다른 옵션은 제외하고 <div role="main">으로 묶는 것이 전적으로 허용됩니다.

<div role="main">의 대체품으로 사용되는 main이라는 새로운 의미 요소가 있다는 것이 좋은 소식입니다. 당신은 main 요소에 세 부분으로 포장 할 수 있으며, <section role="main">는 것처럼 당신의 윤곽에 영향을 미치지 않습니다 :

이

<header class="site_header" role="banner">...</header> 
<main> 
    <section class="page_intro"> 
    <h1>Bold Introductory Statement Here</h1> 
    <a href="#">Play Video</a> 
    </section> 
    <section class="service_summary"> 
    <h1>Section A Title</h1> 
    <p>Section A content</p> 
    </section> 
    <section class="service_summary"> 
    <h1>Section B Title</h1> 
    <p>Section B content</p> 
    </section> 
</main> 
<footer class="site_footer" role="contentinfo">...</footer>

(당신은 여전히 main에 role="main" 속성을 추가 할 수 있습니다, 사실 the spec recommends this에 당신이 염려되는 경우 main 요소가 아직 비교적 새로운 브라우저 지원에 대해.

출처

2014-12-19 08:29:18 BoltClock

덕분에, 나는 방금

요소에 대한 내용을 읽었으며 정확히 필요한 부분입니다. – jasonbradberry

ARIA role = "main"을 추가 할 위치와 하위 섹션을 올바르게 표시하는 방법은 무엇입니까?

답변

관련 문제