Web standards web accessibility

Page01.js

 

const Page01 = () => {

return (

<article>

<h1>문제 1 : Semantic HTML</h1>

<p>div 요소와 span 요소로도 화면을 구성할 수 있지만, 이 둘은 의미를 담고있지 않은 요소이기 때문에 각 요소가 어떤 기능을 하는지 요소의 이름만 보고서는 판단할 수 없습니다. 가능하다면 시맨틱 요소를 사용하여 웹 표준도 충족하고 의미있는 HTML을 구성하세요.<br/>

우측 문제 가이드와 유어클래스 콘텐츠를 참고하여 각 요소들을 시맨틱한 요소로 변경하세요.</p>

<ul>

<li>개발자 콘솔의 Element 탭을 열고 요소들을 확인해보세요.</li>

<li>시맨틱 요소가 아닌 div로 작성된 요소들을 확인하세요.</li>

<li>우측 가이드를 참고하여 div 요소를 적합한 시맨틱 요소로 바꿔주세요.

<li>각 컴포넌트들, 메인 페이지, 현재 페이지를 수정해주시면 됩니다.</li>

<li>class 속성에 힌트가 있습니다.</li>

<li>class 이름이 container인 요소는 정렬을 위한 요소이므로 바꾸지 않아도 됩니다.</li>

</li>

<li>각 요소에 작성되어있던 class 속성을 없애주고, CSS 파일에서 class와 연결되어있던 스타일 속성들도 바뀐 요소에 맞춰 수정해주세요.

<li>이 단계를 제대로 진행하지 않으면 이후 문제들의 화면이 제대로 표시되지 않습니다. 꼭 잘 수정해주세요.</li>

</li>

<li>요소 종류를 바꾸기 이전과 똑같은 화면이 나오면 완료입니다!</li>

</ul>

</article>)

}

export default Page01

 

Page02.js

const Page02 = () => {

return (

<article>

<h1>문제 2 : 자주 틀리는 마크업</h1>

<p>자주 틀리는 HTML 요소의 사용법들을 고쳐봅시다. 웹 표준을 저해하는 사용법이지만, 화면 상으로는 큰 문제가 없기 때문에 의외로 자주 발견할 수 있는 예시들 이기도 합니다.<br />

우측 문제 가이드와 유어클래스 콘텐츠를 참고하여 웹 표준에 맞는 마크업으로 바꾸세요.</p>

<li>아래 자주 틀리는 마크업 예시들을 웹 표준에 맞게 수정하세요.</li>

<li>예시 외에도 애플리케이션 내에 틀리게 사용한 마크업이 있습니다. 찾아서 수정해보세요.</li>

<section>

<h2>틀린 마크업 예시</h2>

<section>

<h3>예시 1</h3>

<li>

 

<div><a>어떻게 틀렸을까요?</a></div>

 

</li>

<li>

 

<p><em>모두 같은 종류의 실수를 하고 있습니다.</em></p>

 

</li>

<li>

 

<h4><strong>틀린 이유를 찾아서 수정해보세요.</strong></h4>

 

</li>

</section>

<section>

<h3>예시 2</h3>

<li>

<strong>화면만 보면 틀렸다는 사실을 인지하기 어렵습니다.</strong>

</li>

<li>

<em>

Element탭이나 Visual Studio Code에서 소스 코드를 확인하세요.

</em>

</li>

</section>

<section>

<h3>예시 3</h3>

<li>

<div className="c1">글씨 크기를 조절하고 싶을 땐</div>

</li>

<li>

<div className="c2">요소 종류를 사용하는 것이 아니라</div>

</li>

<li>

<div className="c3">CSS를 이용해주세요.</div>

</li>

<li>

<div className="c4">요소의 의미와 맞지 않습니다.</div>

</li>

</section>

<section>

<h3>예시 4</h3>

<li className="d1">요소 사이에 간격을 주고 싶을 때에도</li>

<li className="d2">CSS를 이용해주세요.</li>

<li className="d3">태그의 존재 의의와 맞지 않습니다.</li>

<li className="d4">요소 사이의 간격을 조절할 때가 아니라 줄 바꿈을 할 때 사용해주세요.

이렇게 사용해주시면 됩니다.</li>

</section>

<section>

<h3>예시 5</h3>

<li className="color">스타일 속성을 적용하고 싶을 때에는</li>

<li className="size">태그 안에 style 속성을 작성하는 방법인</li>

<li className="weight">인라인 스타일링을 사용하지 마세요.</li>

<li className="shadow">CSS 코드를 따로 작성하는 것이 웹 표준에 맞는 사용법입니다.</li>

</section>

<section>

<h3>종합 예시</h3>

 

<li className="list-style"><strong><a>위 예시를 종합적으로 섞어놓았습니다.</a></strong></li>

 

 

<div className="background-color"><strong>이 정도 되면 보기만해도 불편하실 것 같습니다.</strong></div>

 

 

<h1 className="h1-color"><em>틀린 곳을 찾아서 수정해보세요.</em></h1>

 

</section>

</section>

</article>)

}

export default Page02

 

Page03.js

const Page03 = () => {

return (

<article>

<h1>문제 3 : 대체 텍스트</h1>

<p>시각적 요소를 인지하지 못하는 사용자를 위해서 텍스트가 아닌 콘텐츠를 제공할 땐 해당 콘텐츠가 어떤 콘텐츠인지 설명하는 대체 텍스트를 작성해주어야 합니다.<br/>

우측 문제 가이드와 유어클래스 콘텐츠를 참고하여 아래 이미지들의 웹 접근성을 개선해보세요.</p>

<li>리팩토링 하기 전, 스크린 리더를 사용하여 아래 이미지들을 어떻게 인식하는지 확인해보세요.</li>

<li>리팩토링 후에 다시 한 번 스크린 리더를 사용하여 개선된 웹 접근성을 확인해보세요.</li>

<section>

<h2>귀여운 동물 사진들</h2>

<section>

<h3>예시 1</h3>

<li>적절한 대체 텍스트를 alt 속성을 사용해 작성해주세요.</li>

<img src={catImage} alt='윙크하는 고양이'/>

</section>

<section>

<h3>예시 2</h3>

<li>alt 속성으로 빈 문자열을 입력하면 요소를 인식하지 않습니다.</li>

<img src={dogImage} alt="웰시코기" />

</section>

<section>

<h3>예시 3</h3>

<li>너무 광범위하지 않은 설명을 입력해주세요.</li>

<img src={rabbitImage} alt="토끼"/>

</section>

<section>

<h3>예시 4</h3>

<li>지나치게 자세한 설명도 좋지 않습니다.</li>

<img src={otterImage} alt="수달" />

</section>

<section>

<h3>예시 5</h3>

<li>이미지를 충분히 설명해주는 인접 요소가 있다면 대체 텍스트로 빈 문자열을 작성하는 것이 좋습니다.

<li>내용을 중복해서 전달할 필요가 없기 때문입니다.</li>

</li>

<img src={redPandaImage} />

<p>래서 펜더가 대나무를 앞발로 잡고 혀를 내밀고 있다.</p>

</section>

</section>

</article>)

}

export default Page03

 

Page05.js

const Page05 = () => {

const [currentTab, setCurrentTab] = useState(0)

const { tab } = data

return (

<article>

<h1>문제 5 : WAI-ARIA</h1>

<p>시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와줍니다. <br />

‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 <strong>시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다</strong>는 의미입니다. WAI-ARIA는 보조적인 역할로만 사용해야 합니다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선입니다.<br />

우측 문제 가이드와 유어클래스 콘텐츠를 참고하여 WAI-ARIA를 사용해보세요.</p>

<section>

<h2>WAI-ARIA 사용하기</h2>

<section>

<h3>예시 1 : 역할(Role)</h3>

<li>요소의 이름이 요소의 역할을 충분히 설명하지 못할 때 사용할 수 있습니다.

<div role="button" className="button">요소는 div</div>

</li>

<li>요소의 이름으로 요소의 역할을 파악할 수 있을 때는 사용하지 마세요.

<button>요소는 button</button>

</li>

<li>요소 본연의 역할을 바꾸지 마세요.

<h3 role="h3" className="button">요소는 h3</h3>

</li>

<h3>예시 1 - 문제</h3>

<li>아래 예시는 문제 4에서 보았던 탭 컴포넌트입니다. 각 컴포넌트에 맞는 역할을 WAI-ARIA로 작성해보세요.</li>

<li>WAI-ARIA 작성 전후로 개별 요소를 지정했을 때 스크린 리더가 읽어주는 내용의 차이를 확인해보세요.</li>

<div class="tabContainer">

<div role="tabList" className="tabList">

<div role="tab"

className={currentTab === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab(0)}>{tab.tab1.title}</div>

<div role="tab"

classNmae={currentTab === 1 ? "tab selected" : "tab"} onClick={()=>setCurrentTab(1)}>{tab.tab2.title}</div>

<div role="tab"

className={currentTab === 2 ? "tab selected" : "tab"} onClick={()=>setCurrentTab(2)}>{tab.tab3.title}</div>

</div>

<div role="tabPanel"

className={currentTab === 0 ? "block" : "none"}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>

<div role="tabPanel"

className={currentTab === 1 ? "block" : "none"}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>

<div role="tabPanel"

className={currentTab === 2 ? "block" : "none"}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>

</div>

</section>

<section>

<h3>예시 2 : 속성(property)</h3>

<li>시맨틱 요소를 사용했음에도 요소의 역할에 대한 설명이 충분하지 않은 경우가 있습니다. 이럴 때 보조적 역할로 WAI-ARIA를 사용할 수 있습니다.</li>

<li>WAI-ARIA 작성 전후로 개별 요소를 지정했을 때 스크린 리더가 읽어주는 내용의 차이를 확인해보세요.</li>

<div className="iconButtonContainer">

<button aria-label="홈"

className="iconButton"><img src={home} /></button>

<button aria-label="웹"

className="iconButton"><img src={web} /></button>

<button aria-label="이메일"

className="iconButton"><img src={mail} /></button>

</div>

</section>

<li>WAI-ARIA에는 정말 많은 속성들이 있지만, role, aria-label 정도만 사용해도 HTML에 추가적인 의미를 부여할 수 있기 때문에 웹 접근성을 어느정도 향상시킬 수 있습니다. 하지만 웹 접근성을 확보할 때 가장 중요한 것은 시맨틱한 HTML을 작성하는 것임을 항상 기억하세요. 앞서 말했듯, WAI-ARIA는 보조적인 역할로만 사용해야 합니다.</li>

</section>

</article>

)

}

export default Page05

 

Page06.js

<section>

<h2>실습</h2>

<li>아래 이미지를 HTML 표로 바꿔서 작성해보세요.

<li>scope 속성을 사용해서 한 번, id, headers 속성을 사용해서 한 번 작성해보세요.</li>

<li>보고 이해하는 것을 넘어 직접 작성 해보면 사용법을 제대로 파악할 수 있습니다.</li>

<img src={tableExample} />

</li>

<li>

scope 속성 사용

<table>

<caption>바밤바 시리즈 정리</caption>

<thead>

<tr>

<th scope="col">이름</th>

<th scope="col">당류</th>

<th scope="col">내용량</th>

<th scope="col">칼로리</th>

</tr>

</thead>

<tbody>

<tr>

<td scope="row">바밤바</td>

<td scope="row">13g</td>

<td scope="row">70ml</td>

<td scope="row">100kcal</td>

</tr>

<tr>

<td scope="row">배뱀배</td>

<td scope="row">14g</td>

<td scope="row">70ml</td>

<td scope="row">75kcal</td>

</tr>

<tr>

<td scope="row">바밤바샌드</td>

<td scope="row">24g</td>

<td scope="row">180ml</td>

<td scope="row">240kcal</td>

</tr>

</tbody>

</table>

</li>

<li>

id, headers 속성 사용

<table>

<caption>바바바 시리즈 정리</caption>

<thead>

<tr>

<th id="A">이름</th>

<th id="B">당류</th>

<th id="C">내용량</th>

<th id="D">칼로리</th>

</tr>

</thead>

<tbody>

<tr>

<td id="a">바밤바</td>

<td headers="B a">13g</td>

<td headers="C a">70ml</td>

<td headers="D a">100kcal</td>

</tr>

<tr>

<td id="b">배뱀배</td>

<td headers="B b">14g</td>

<td headers="C b">70ml</td>

<td headers="D b">75kcal</td>

</tr>

<tr>

<td id="c">바밤바샌드</td>

<td headers="B c">24g</td>

<td headers="C c">180ml</td>

<td headers="D c">240kcal</td>

</tr>

</tbody>

</table>

</li>

</section>

 

Page07.js

<section>

<h2>예시 2</h2>

<li>{`<input>`}요소에 placeholder를 사용하더라도 레이블을 작성해주세요. placeholder는 레이블을 대체할 수 없습니다.

<li>placeholder는 내용을 입력하는 순간 사라지기 때문에 일부 스크린 리더는 읽지 못하게 됩니다.</li>

</li>

<div className="inputContainer">

<label for="id">아이디</label>

<input id="id" type="text" placeholder="아이디" />

<label for="password">비밀번호</label>

<input id="password" type="text" placeholder="비밀번호" />

</div>

</section>

<section>

<h2>예시 3</h2>

<li>{`<input>`}요소 밖에 무엇을 입력해야하는지 알려주는 요소가 있더라도, {`<label>`}요소로 레이블을 작성해 {`<input>`}요소와 연결해주세요.

<li>{`<input>`}요소에서 id를 작성하고,{`<label>`}요소의 for 속성으로 연결할 {`<input>`}요소의 id를 작성합니다.</li>

<li>작성 후 {`<label>`}요소를 클릭하면 어떻게 되는지 확인해보세요.</li>

</li>

<div className="inputContainer">

<label for="아이디">

<span>아이디</span>

</label>

<input id="아이디" type="text" />

 

<label for="비밀번호">

<span>비밀번호</span>

</label>

<input id="비밀번호" type="text" />

</div>

</section>

<section>

<h2>예시 4</h2>

<li>WAI-ARIA의 aria-label 속성을 사용할 수도 있습니다.

<li>단, WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋습니다. 다른 HTML 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용해주세요.</li>

</li>

<div className="inputContainer">

<input type="text" aria-label="텍스트"/>

</div>

</section>