대체 텍스트
이미지를 대체할 수 있는 적절한 텍스트를 alt속성을 이용해 작성하기
<h3>예시 2</h3>
<li>alt 속성으로 빈 문자열을 입력하면 요소를 인식하지 않습니다.</li>
<img src={dogImage} alt="잔디밭에서 웃고있는 강아지 웰시코기" />- 이미지를 설명해주는 인접요소가 있다면 대체 텍스트를 작성하지 않는 것이 오히려 좋음
<img src={redPandaImage} alt="레서 팬더" />
<p>래서 펜더가 대나무를 앞발로 잡고 혀를 내밀고 있다.</p> // <p>태그가 이미 이미지를 설명해주고 있다 - 배경이미지인 경우
alt속성을 작성하지 않는다 => 배경이미지를 클릭할때마다 alt 텍스트를 읽어주면 번거로우니까
콘텐츠 선형구조
tab메뉴를 먼저 다 쓴후 그 다음에 하위메뉴를 쓰는 경우 (비효율적)
- tab메뉴를 다 읽은 후 하위메뉴를 읽기때문에 하위메뉴가 어느 tab메뉴에 해당하는지 모름
<div class="tabContainer">
<div className="tabList">
<div className={currentTab1 === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(0)}>{tab.tab1.title}</div>
<div className={currentTab1 === 1 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(1)}>{tab.tab2.title}</div>
<div className={currentTab1 === 2 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(2)}>{tab.tab3.title}</div>
</div>
<div className={currentTab1 === 0 ? "block" : "none"}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
<div className={currentTab1 === 1 ? "block" : "none"}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
<div className={currentTab1 === 2 ? "block" : "none"}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>tab과 하위메뉴를 쓴 후 다음 tab으로 넘어가는 경우(더 효율적)
- tab과 그에 해당하는 하위메뉴를 순서대로 읽어주므로 연관관계가 더 잘 보인다
<div class="tabContainer">
<div className="tabList">
<div>
<div className={currentTab2 === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab2(0)}>{tab.tab1.title}</div>
<div className={`tabPanel${currentTab2 === 0 ? " block" : " none"}`}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>
<div>
<div className={currentTab2 === 1 ? "tab selected" : "tab"} onClick={()=>setCurrentTab2(1)}>{tab.tab2.title}</div>
<div className={`tabPanel${currentTab2 === 1 ? " block one" : " none"}`}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>
<div>
<div className={currentTab2 === 2 ? "tab selected" : "tab"} onClick={()=>setCurrentTab2(2)}>{tab.tab3.title}</div>
<div className={`tabPanel${currentTab2 === 2 ? " block two" : " none"}`}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
</div>
</div>
</div>WAI-ARIA
시맨틱 요소만으로 충분히 의미부여할 수 없을때 WAI-ARIA 사용하면 추가적인 의미부여가 가능해짐
역할
- 요소 이름이 요소의 역할을 명확하게 설명하지 못할 때
<div role="button" className="button">
요소는 div </div>- 요소의 이름으로 역할을 이미 파악할 수 있는 경우에는 쓰지 말것
<button role="button">요소는 button</button> // role 불필요!!!- 요소 본연의 역할 바꾸지 않기
<h3 role="button" className="button">
// <h3>태그를 버튼용도로 사용하지 않기 속성
예) aria-label="검색 버튼", aria-label="닫기 버튼", aria-label="뒤로 가기", ...
<button className="iconButton">
<img aria-label="홈버튼" src={home} />
</button> // 버튼을 클릭했을 때 이미지만 선택되는 경우가 있는데, img에 aria-label을 붙였으므로 어느 곳을 클릭하든 "홈버튼"이라고 읽어준다
<button aria-label="홈버튼" className="iconButton">
<img src={home} />
</button>
<button aria-label="웹버튼" className="iconButton">
<img src={web} /></button> // 이미지만 클릭된 경우에는 "이미지"이라고만 읽고, 버튼을 제대로 눌렀을 경우에만 "웹버튼"을 읽어준다표의 구성
테이블 요소의 종류
| 요소 | 역할 |
|---|---|
<table> | 표를 생성 |
<caption> | 표의 제목 |
<thead> | (optional) 열의 제목을 묶음 |
<tbody> | (optional) 표의 내용을 묶음 |
<th> | 열의 제목 |
<tr> | table row의 약자. 행을 생성 |
<td> | table data의 약자. 열을 생성 |
scope 속성 사용하여 행과 열의 제목이 무엇인지 표시하기
<table>
<caption>바밤바 시리즈 정리</caption>
<thead>
<tr>
<th scope="col">
(col)
<br />
이름
</th>
<th scope="col">
(col)
<br />
당류
</th>
<th scope="col">
(col)
<br />
내용량
</th>
<th scope="col">
(col)
<br />
칼로리
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">
(row)
<br />
바밤바
</td>
<td>13g</td>
<td>70ml</td>
<td>100kcal</td>
</tr>
</tbody>
</table>id와 headers를 사용해 데이터 구조 표시하기
<table>
<caption>바밤바 시리즈 정리</caption>
<thead>
<tr>
<th id="A">
이름
<br />
(A)
</th>
<th id="B">
당류
<br />
(B)
</th>
<th id="C">
내용량
<br />
(C)
</th>
<th id="D">
칼로리
<br />
(D)
</th>
</tr>
</thead>
<tbody>
<tr>
<td id="a">
바밤바
<br />
(a)
</td>
<td headers="B a">
13g
<br />
(B a)
</td>
<td headers="C a">
70ml
<br />
(C a)
</td>
<td headers="D a">
100kcal
<br />
(D a)
</td>
</tr>
</tbody>
</table>레이블 제공
<input>요소에id를 설정하고<label>요소의for속성으로 연결하기title속성 사용하기
<input title="아이디" type="text" />- WAI-ARIA의
aria-label속성 사용하기
<div className="inputContainer">
{/* <label for="id">아이디</label> */}
<span>아이디</span>
<input id="비밀번호" type="text" />
<label for="비밀번호">비밀번호</label>
{/*input id명과 for문을 통일시켜야함*/}
<input id="비밀번호" type="text" />
</div>
// OR
//<label>태그로 <input> 태그를 싸면 for문을 쓰지 않아도 됨
<label><input id="아이디" type="text" /></label>
oneThing