// W3C ์์
<div role="tablist" aria-labelledby="tablist-1">
<button role="tab" aria-controls="tabpanel-1"></button>
</div>
<div role="tabpanel" id="tabpanel-1"></div>
// MUI ์์
<div role="tablist">
<button role="tab" aria-controls="tabpanel-id"></button>
</div>
<div role="tabpanel" id="tabpanel-id"></div>
// Web.dev
<snap-tabs>
<header>
<nav><a href="#tab1"></a></nav>
</header>
<section><article id="tab1"></article></section>
</snap-tabs>
// Ant Design
<div role="tablist">
<div role="tab" aria-controls="tabpanel-id"></div>
</div>
<div role="tabpanel" id="tabpanel-id"></div>
<div role="tablist">
<button role="tab" aria-controls="panel-1" aria-selected="true" id="tab-1">Tab 1</button>
<button role="tab" aria-controls="panel-2" aria-selected="false" id="tab-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content of Tab 1</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>Content of Tab 2</div>
๐ ์ปดํฌ๋ํธ ์ ๋ณด
๐ ์ฐธ์กฐ ๋ฐ ๋ ํผ๋ฐ์ค
๐ ์ ๊ทผ์ฑ ๋ฐ ARIA ์ ์ฉ ์ฌ๋ถ
role="tablist",role="tab",aria-selected,aria-controls,role="tabpanel"๋ฑ์ด ์ฌ์ฉ๋จ.role="tablist"๋ ํญ์ ๋ฆฌ์คํธ์์ ๋ช ์ํ๋ฉฐ, ๊ฐ๊ฐ์ ํญ์role="tab"์ ๊ฐ๊ณ ํด๋น ์ฝํ ์ธ ์์ญ๊ณผ ์ฐ๊ฒฐ๋จ.aria-selected์์ฑ์ ํตํด ํ์ฌ ์ ํ๋ ํญ์ ๋ช ์ํ๊ณ ,aria-controls๋ก ํญ๊ณผ ์ฝํ ์ธ ์์ญ์ ์ฐ๊ฒฐํจaria-labelledby์ ๊ฐ์ ์์ฑ์ ํ์ฉaria-selected="true"๋ก ์ค์ ํ๊ณ , ํด๋น ํจ๋์ด ๋ช ํํ ์ธ์๋ ์ ์๋๋กrole="tabpanel"์ ํตํด ์ ๊ทผ์ฑ ๊ฐํ๐๏ธ ๋งํฌ์ ๊ตฌ์กฐ ๋ถ์
<div>๋ด์role="tablist",role="tab",role="tabpanel"๋ฑ์ผ๋ก ์๋งจํฑํ ๊ตฌ์กฐ๋ฅผ ์ ๊ณต. ๊ฐ ํญ์aria-controls์์ฑ์ ํตํด ํน์ ํจ๋๊ณผ ์ฐ๊ฒฐ๋๊ณ , ํ์ฑํ ์ํ๋ฅผ ๋ํ๋ด๊ธฐ ์ํดaria-selected์์ฑ์ ์ฌ์ฉrole="tablist",role="tab",role="tabpanel"์ ์ฌ์ฉํ์ฌ ๋ช ํํ ๊ตฌ์กฐ ์ ๊ณต. ์ด๋ก์จ ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์์๊ฒ ๊ฐ ํญ๊ณผ ํจ๋ ๊ฐ์ ๊ด๊ณ๋ฅผ ๋ช ํํ ์ ๋ฌํ๊ณ , ์ฌ์ฉ์ ๊ฒฝํ ๋ฐ ์ ๊ทผ์ฑ์ ํฅ์์ํด<snap-tabs>๋ฅผ ์ฌ์ฉํ์ฌ ํญ ๊ฐ ์ ํ ์ ์คํฌ๋กค๊ณผ ๊ฐ์ ์ธํฐ๋์ ์ ๊ฐ์กฐ. ์คํฌ๋กค๋ก ์ ํํ๋ ๋ฐฉ์์ ๋ชจ๋ฐ์ผ ๋ฑ์์ ๋ณด๋ค ์์ฐ์ค๋ฝ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ํจ๐ก UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋น๊ต ๋ถ์
<button>์ ์ฌ์ฉํด ๊ฐ ํญ์ ์ ์ํ๋ฉฐ, ์๋งจํฑํ๊ณ ์ ๊ทผ์ฑ ๋์ ๊ตฌ์กฐ ์ ์ง.aria-selected์aria-controls์์ฑ์ ์ฌ์ฉํด ํญ๊ณผ ์ฝํ ์ธ ์์ญ์ ๋ช ํํ ์ฐ๊ฒฐrole="tab"์์ฑ์ ํตํด ํจ๋๊ณผ ์ฐ๊ฒฐ๋๊ณaria-labelledby์ ๊ฐ์ ์์ฑ์ผ๋ก ์ ๊ทผ์ฑ ๊ฐํ<snap-tabs>๋ฅผ ์ฌ์ฉํด ํญ ์ ํ ์ ์คํฌ๋กค๊ณผ ๊ฐ์ ์์ฐ์ค๋ฌ์ด UX๋ฅผ ์ ๊ณตํ๋ฉฐ, HTML ํ๊ทธ์ CSS ์คํฌ๋กค ๊ธฐ๋ฅ์ ๊ฒฐํฉํ์ฌ ๋ณด๋ค ์ธํฐ๋ํฐ๋ธํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตโ๏ธ ๊ตฌํ ๋ฐ ์ค๊ณ ๊ณ ๋ ค์ฌํญ
๐ ํ ์คํธ ๋ฐ ๊ฒํ
aria-selected์์ฑ์ ๋์์ ํตํด ํ์ฑํ๋ ํญ์ด ์ ๋๋ก ์๋ด๋๋์ง ๊ฒํ๐ ์ถ๊ฐ ์ฐธ๊ณ ์ฌํญ
๐ฏ ์ญํ , ์์ฑ, ์ํ ๋ฐ ํ๊ทธ ์์ฑ
role="tablist",role="tab",role="tabpanel"์ ํตํด ๊ฐ ์ญํ ์ ๋ช ์aria-controls,aria-labelledby๋ฅผ ์ฌ์ฉํด ํญ๊ณผ ํจ๋ ๊ฐ์ ๊ด๊ณ ๋ช ํํ ์ค์ aria-selected="true"๋ฅผ ์ค์ ํด ์๊ฐ์ ๋ฐ ํ๋ก๊ทธ๋จ์ ์ผ๋ก ํ์ฌ ์์น ํ์