웹접근성1탄

웹접근성(폭넓은)

· 장애우를 위한 사용 할 수 있게 하는 것

· hover를 사용하면 focus도 같이사용하는것이 좋다.

· tab키를 index로 줘야한다.

· alt태그 사용만해도 웹접근성을 지킬수있다.

▶ 이미지같은경우

alt값으로 처리해주거나 내용이 많을경우

ul,li로 만들어 blind처리해주고 alt="하단참고"라고 해준다.

★blind 처리방법은 css게시판을 참고하세요★

​

1)온라인 서식과 웹표준/웹접근성

▶ 온라인 서식 코딩시 웹표준 및 웹접근성을 준수하는 코딩은 각 서식에 label의 for와 name, title 속성을 부여하는 것이다.

▶ 또한 label for와 id로 연결되기에 둘의 값은 일치시켜야한다.

▶ 한편,온라인서식 코딩시 웹표준/웹접근성을 고려해야하는 서식의 종류는 아래와 같다.

· 텍스트상자(input type="text")

· 라디오버튼(input type=radio")

· 여러필드가 연결된 텍스트상자:전화번호 등(input type="text")

· 체크박스(input type="checkbox")

· 텍스트필드(textarea)

· 목록상자(select)

· 파일첨부(input type="file")

· 전송 및 취소버튼(input type="submit")

· 텍스트가 나오지않게 블라인드 처리 해준다(※하단내용참고)

​

ex)

첫번째.텍스트 상자(인풋text)

<p>
  <span>이름</span>:
  <label for="name" class="blind">이름</label>  //for: name 값을 넣는다.
  <input type="text" id="name" size="15" title="이름"/>
</p>

두번째.라디오버튼(radio)

<p>
  <input type="radio" name="radiobutton" value="실명입니다." id="realname" title="실명인경우 선택합니다." />
  <label for="realname" class="blind">실명</label>  //for: name 값을 넣는다.
</p>

​세번째.여러피드가 연결된 텍스트 상자(예: 전화번호,주소 등)

각각의 라벨(label)값을 넣어준다.

<p>
  //for: name 값을 넣는다.
  <span>전화번호</span>:
  <label for="phone1" class="blind">지역번호</label>  //for: name 값을 넣는다.//for-name으로 로 연결
  <input type="text" name="phone1" id="phone1" size="5" title="지역번호"/>
  -
  <label for="phone2" class="blind">국번</label>
  <input type="text" name="phone2" id="phone2" title="국번" size="7"/>

  -
  <label for="phone3" class="blind">전화번호 끝자리</label>
  <input type="text" id="phone3" title="전화번호 끝자리" size="7" />

</p>

네번째.체크박스(checkbox)

<p>
    <input type="checkbox" name="checkbox" value="핸드폰" id="cellphone" title="핸드폰인경우 체크" />
    <label for="cellphone" class="blind">핸드폰</label>
</p>

다섯번째. textarea

<p>
    <span>내용:</span>
    <label for="contents" class="blind">내용:<br /></label>
    <textarea name="contents" cols="40" rows="10" id="contents" title="내용을 입력합니다."></textarea>
 </p>

여섯번째. select box

<p>
   <span>직업:</span>
    <label for="job" classs="blind">직업</label>
    <select name="job" id="job">
         <option value="student" title="학생입니다.">학생</option>
         <option value="public servent" title="공무원입니다.">공무원</option>
         <option value="employee" title="회사원입니다.">회사원</option>
         <option value="owener" title="자영업입니다.">자영업</option>
    </select>
</p>

일곱번째.전송,취소 버튼

<p>
    <label for="submit" class="blind">전송</label>
    <input type="submit" name="submit" value="전송" id="submit" title="입력확인" />
    <label for="erase" class="blind">취소</label>
    <input type="submit" name="erase" value="취소" id="erase" title="다시입력" />
</p>