4. 견고성

4. 견고성(Robust) 4.1. 문법준수 4.1.1. [검사항목 23] 마크업 오류 방지 4.2. 웹 애플리케이션 접근성 4.2.1. [검사항목 24] 웹 애플리케이션 접근성 준수

4. 견고성(Robust)

: 모든 사용자가 기술에 영향을 받지 않고 웹 콘텐츠를 이용할 수 있어야 한다.

4.1. 문법준수

4.1.1. [검사항목 23] 마크업 오류 방지

: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

웹 브라우저 내 모든 콘텐츠는 다양한 하드웨어 및 소프트웨어 환경에서 해석이 가능해야 합니다. 특히 장애인 및 고령자 등의 접근성을 높이기 위해 보조 기술(assistive technology)이 적용돼요. 보조 기술에는 스크린 리더, 대체 키보드, 대체 포인팅 장치 등이 포함됩니다. 중요한 것은 다양한 기술과 환경에서 오류 없이 호환이 가능해야 하고, 정확한 정보를 전달해야 한다는 것인데요. 정보 해석의 오류를 없앨 수 있는 방법으로 견고한 마크업이 요구됩니다. 그 기본은 문법을 준수하는 것이에요. 해당 마크업 언어의 문법을 최대한 준수하여 콘텐츠를 제공하는 것이 필요해요. 문법 준수의 주요 수칙에는 ① 요소의 열고 닫음 일치, ② 요소의 중첩 방지, ③ 중복된 속성 사용 금지, ③ id 속성값 중복 선언 금지 등이 있습니다. 순서대로 살펴볼게요.

요소의 열고 닫음 일치

시작이 있으면 끝이 있어야 해요. 콘텐츠를 포함하는 마크업은 표준에서 정한 특별한 경우를 제외하고 시작과 끝 요소를 지정해줘야 합니다.

요소의 열고 닫음 오류 예시


// div 요소
<div class="container"> //시작태그
    <h1>웹접근성에 접근하기</h1>
    <p>견고하게 마크업하세요!</p>
??? // (종료 태그 자리) 종료 태그가 없어요

위에 있는 코드는 <div> 요소가 전체 내용을 감싸고 있는 형태입니다. <div>의 자식 요소 <h1>과 <p> 요소는 종료 태그까지 잘 닫혔지만 부모 요소 <div>는 종료 태그가 없이 마무리 된 것을 볼 수 있어요.

요소의 열고 닫음 준수 예시


// div 요소
<div class="container"> //시작태그
    <h1>웹접근성에 접근하기</h1>
    <p>견고하게 마크업하세요!</p>
</div> // 종료 태그

앞서 입력하지 않았던 <div> 요소의 닫기 태그를 입력하여 오류를 수정했습니다. 위의 예시처럼 콘텐츠를 포함하고, 문서의 구조를 명시하는 요소는 반드시 종료 태그를 지정하여 열고 닫음의 오류가 생기지 않도록 해야 합니다.

참고사항

콘텐츠 혹은 자식 요소를 갖지 않는 태그는 닫기 태그가 없어도 됩니다. 셀프 클로징 태그(Self-Closing Tags) 라고 해요. 최신 웹 표준(HTML Living Standard)에서 셀프 클로징 태그는 다음과 같으며, MDN Web Docs에서 "Must have a start tag, and must not have an end tag."(시작 태그는 있어야 하지만 종료 태그는 없어야 한다.) 라고 명시하고 있습니다.

⚠️

<area>, <br>, <base>, <col>, <embed>, <hr>, <img>, <input>, <source>, <track>, <wbr>, <link>, <meta>

요소의 중첩 방지

시작과 끝 요소의 순서가 어긋나지 않도록 자리에 맞게 나열해야 합니다.

요소의 중첩 오류 예시 (1)


<p>견고한 마크업을 위해서 <strong>요소의 중첩을 피해야 합니다.</p></strong>

<p> 요소 안에 <strong> 요소가 위치한 것으로 보이지만 요소의 종료 부분에서 태그 순서가 서로 바뀌어 있어요.

요소의 중첩 준수 예시 (1)


<p>견고한 마크업을 위해서 <strong>요소의 중첩을 피해야 합니다.</strong></p>

요소의 종료 부분에서 </strong> 태그가 먼저 나오고 </p> 태그가 마지막으로 나오도록 수정한 요소의 중첩 방지 준수 사례입니다. 이처럼 콘텐츠를 포함하는 요소는 자식 요소의 태그와 순서가 어긋나지 않도록 처음과 마지막에 태그를 입력하여 전체를 감싸주어야 합니다.

요소의 중첩 오류 예시 (2)


<nav>
    <h1>
        <a href="#"><img src="logo.png" alt="로고입니다"></h1>
    </a>  // </h1>과 순서가 바뀌었습니다.

    <ul>
        <li>home</li>
        <li>sevice</li>
        <li>team</li>
    </nav>
</ul>  // </nav>와 순서가 바뀌었습니다.

<nav> 요소가 전체적으로 감싸고 있는 구조예요. 그 안에 첫 번째 단락으로 <h1>과 <ul> 요소가 있어요. 먼저 <h1>요소가 <a>요소를 감싸는 형태지만 </h1> 태그로 종료되지 않고 </a> 태그와 위치가 바뀌어 있어요. <nav> 요소 마지막은 </nav> 태그가 아닌 </ul> 태그의 등장으로 <nav> 요소를 완결시키지 못했어요.

요소의 중첩 준수 예시 (2)


<nav>
    <h1>
        <a href="#"><img src="logo.png" alt="로고입니다"></a>
    </h1>
    <ul>
        <li>home</li>
        <li>sevice</li>
        <li>team</li>
    </ul>
</nav>

다음 코드는 요소의 중첩 위반 사례를 개선한 예시입니다. 개선된 코드에서 <nav>요소 안에 <h1>과 <ul> 요소가 각자의 콘텐츠를 잘 감싸고 있는 형태를 보여주면서 요소의 중첩 방지를 준수했습니다.

중복된 속성 사용 금지

하나의 요소 안에서 동일한 속성을 중복 선언하지 않아야 합니다. 속성은 시작 태그에서 사용되며, 속성이름="값"의 형태로 구성돼요. 지정된 값에 따라 요소 전체의 성격을 나타냅니다.


<태그 속성이름="값">속성의 기본 구조입니다.</태그>

중복된 속성 사용 오류 예시


<div class="wrapper" class="container">속성을 중복해서 사용하지 마세요.</div>

위의 예시는 하나의 <div> 요소 안에 class 속성을 두 번 사용하여 중복된 속성 사용 금지 수칙을 위반했습니다. 해당 코드에서 style을 적용한다고 가정하면 앞에 있는 class 속성에만 style이 적용됩니다. 코드 작성 및 확인에 실수로 인해 오류가 생길 수 있습니다.

중복된 속성 사용 준수 예시


<div id="wrapper" class="container">속성을 중복해서 사용하지 마세요.</div>

<div> 요소 안에 class 속성을 중복 사용했던 위반 사례를 수정하여 id 속성과 class 속성으로 구분하여 사용했습니다.

id 속성 값 중복 선언 금지

동일한 마크업 문서 내에서 같은 id 값을 중복하여 선언하지 않습니다.

id 속성 값 중복 선언 오류 예시


<div id="myBox" class="fruit">
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>수박</li>
    </ul>
</div>
    
<div id="myBox" class="fruit">
    <ul>
        <li>자몽</li>
        <li>키위</li>
        <li>망고</li>
    </ul>
</div>

다음 코드에는 두 개의 <div> 요소가 존재합니다. 그러나 두 요소의 id 값은 myBox로 동일한 값이 중복되어 사용되었습니다.

id 속성 값 중복 선언 준수 예시


<div id="myBox1" class="fruit">
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>수박</li>
    </ul>
</div>
    
<div id="myBox2" class="fruit">
    <ul>
        <li>자몽</li>
        <li>키위</li>
        <li>망고</li>
    </ul>
</div>

첫 번째 <div> 요소의 id 값은 myBox1, 두 번째 <div> 요소의 id 값은 myBox2를 사용하여 id 값이 중복되지 않도록 했습니다.

주의할 점은 <label> 요소의 for 속성 값은 폼 서식(input, select)의 id 값과 일치해야 합니다. for 속성 값과 폼 서식의 id 값을 일치시키면 레이블만 선택해도 폼 서식을 선택할 수 있고, 스크린 리더가 인식하여 사용자에게 정확한 정보를 제공할 수 있습니다.

매칭된 <label> for 속성 값과 폼 서식의 id 값은 일치해야 하지만 구분된 매칭 요소 간에는 id값이 중복되지 않도록 주의해야 합니다.

for 와 id 중복 오류 예시


<body>
	<label for="city">서울</label>
	<input id="city" type="checkbox">
	
	<label for="city">경기도</label>
	<input id="city" type="checkbox">
</body>

첫 번째 <label> 요소의 for 값과 <input> 요소의 id 값은 일치하여 문법을 준수한 것처럼 보이지만 두 번째 <label> 요소의 for 값과 <input> 요소의 id 값도 모두 city라는 값을 갖고 있어 id 중복 위반 코드입니다.

for 와 id 중복 준수 예시


<body>
	<label for="seoul">서울</label>
	<input id="seoul" type="checkbox">
	
	<label for="gyeonggi-do">경기도</label>
	<input id="gyeonggi-do" type="checkbox">
</body>

같은 레이블에 속하는 for와 id는 동일하게 작성하고, 다른 레이블과 중복된 값을 갖지 않도록 했습니다.

4.2. 웹 애플리케이션 접근성

4.2.1. [검사항목 24] 웹 애플리케이션 접근성 준수

: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

웹 애플리케이션이란?

웹 애플리케이션은 브라우저 내 특정 기능을 수행하는 소프트웨어입니다. 필요한 소프트웨어를 로컬 환경에 설치할 필요 없이 웹 브라우저 내에서 동일한 기능을 수행할 수 있어요. 과거의 웹 사이트는 대부분 정적 콘텐츠로 구성되었던 반면, 웹 애플리케이션은 동적 기능을 구현한 프로그램이에요. 확장프로그램(플러그인), 정보 검색, 로그인, 영상 시청, 문서 작업 그리고 데이터 처리 등 우리가 경험하고 있는 현재의 웹 사이트는 대부분 웹 애플리케이션 형태라고 봐도 무방해요.

웹 애플리케이션 접근성 준수

그렇다면 당연히 웹 애플리케이션의 접근성이 필요하겠죠? 앞서 언급한 웹 접근성 기본 4원칙의 인식의 용이성, 운용의 용이성, 이해의 용이성 원칙을 모두 적용해서 만들어야 해요. 접근성 원칙을 준수하지 않거나 대체 콘텐츠를 제공하지 않는다면 웹 애플리케이션 접근성 오류로 판단합니다. 대체 수단을 통해 검색창에 접근할 수 있어야 하고, 로그인도 하고, 확장 프로그램에도 쉽게 접근할 수 있어야 해요. 과거에는 웹 제작 도구 중 하나인 어도비 플래시(Adobe Flash)로 만들어진 웹 애플리케이션이 많았어요. 접근성과 보안이 좋지 않다는 평가가 있었죠. 때문에 사용자가 HTML 버전의 콘텐츠를 이용할 수 있도록 대체 수단 혹은 대체 콘텐츠가 필요했습니다. 시간이 흐르면서 HTML5의 시장이 커지고, 플래시의 입지가 좁아지면서 2020년 어도비의 플래시 지원이 종료되었습니다. 플래시 이용률이 많이 줄었지만 레거시 브라우저 및 웹 사이트가 아직 남아있는 만큼 플래시 콘텐츠에도 접근성을 준수해야 한다는 점 잊지 말아야 합니다.

웹 애플리케이션 제작 시 주의사항

웹 애플리케이션을 지원하는 보조 기술은 필수이며, 보조 기술로 접근이 불가능한 웹 애플리케이션은 사용하지 않는 것이 좋아요. 웹 애플리케이션은 장애 유무를 떠나 모든 사용자를 대상으로 하죠. 보조 기술은 특정 장애가 있는 사용자를 대상으로 합니다. 스크린 리더, 텍스트 음성 변환 소프트웨어, 음성 인식 소프트웨어, 대체 키보드, 대체 포인팅 장치 등의 프로그램을 통해서 콘텐츠에 접근해요. 따라서 웹 애플리케이션 제작 시 보조 기술의 원활한 접근을 위해 대체 수단을 필수적으로 제공해야 합니다. 윈도우(Window), 맥(Mac) 등 특정 운영 체제에서 제공하는 접근성 API를 사용하여 애플리케이션이 다른 프로그램과 상호 작용할 수 있도록 웹 애플리케이션을 제작해야 합니다. 그러지 않을 경우 보조 기술이 애플리케이션을 지원하지 못하고 콘텐츠에 접근할 수 없습니다.

보조 기술을 비롯하여 웹 애플리케이션과 상호작용 할 수 있는 장치를 적절하게 마련하는 것이 중요해요. 모두가 쉽게 접근해야 합니다. 쉽게 접근하기 위해 견고성이 중요한 것입니다. 견고한 마크업이 이뤄진다면 콘텐츠의 기능이 제대로 구현되고, 웹 브라우저나 보조 기술의 제한 사항 없이 사용자에게 콘텐츠를 잘 전달할 수 있어요. 견고한 마크업과 웹 애플리케이션의 접근성을 높이는 개발이 장애인뿐 아니라 모든 사람이 최신 웹 서비스를 손쉽게 사용할 수 있는 방법이 될 것입니다.