-
2020.10.06 #TILTIL(today I learned) 2020. 10. 7. 00:30
이번주 부터 학원에서 html 진도를 나간다 미리 공부해놓길 잘했다는 생각을 여러번 했다 나는 이번주부터는 계속 공부하던 콘텐츠 영역별 따라만들기와 새롭게 웹접근성을 공부하기 시작했다 이번 주 중으로 접근성 기초를 마무리하는 것이 목표다.
1. 웹 접근성(Web Accessibility)
한국형 웹콘텐츠 접근성 지침 2.1
1) 적절한 대체 텍스트 제공(인식의 용이성 부분)
- 대체 텍스트는 img 요소 등 장애인 혹은 비장애인이 정보를 획득할 때 용이하도록 제공하는 텍스트임
(명료하게 작성해야함)
- 이미지의 내용을 충분히 설명할 수 있도록 제공해야함
(리플릿 이미지 경우 일시, 장소 등이 나와있으면 대체텍스트에 일시:~~~, 장소:~~~~라고 작성하는 것이 좋음)
- 특히 오타가 없이 제공해야함
- 이미지로 된 버튼의 대체 텍스트를 제공해야함
(기능을 명확하게)
- 블릿 이미지는 굳이 대체 텍스트 값을 작성하지 않아도 됨
(대체 텍스트 생략은 안됨, alt=""와 같이 빈 값으로 제공하면 화면 낭독기가 읽지 않음)
(블릿은 대체로 단순 디자인만을 나타내기 때문에 내포한 의미가 없어서 그럼)
- 의미 없는 이미지에 대체 텍스츠를 제공하면 사용자에게 불필요한 정보를 제공하는 것과 같음
(픽토그램같은 이미지 경우 텍스트를 꾸미는 용도이기 때문에 빈 alt로 제공해야함)
- <longdesc>의 파일이 없거나 연결되지 않으면 안됨
- <longdesc> 내용이 이미지의 의미나 기능이 잘 파악되도록 작성해야함
(연결만 되면 되는 것이 아니라 내용이 충실히 표현되있어야함)
- 이미지맵을 사용한 img요소마다 대체 텍스트를 제공해야함
- 대체 텍스트를 title로만 제공하면 안됨
(title은 단순 부수적 설명만 가능하며 alt를 대체할 수 없음)
- QR코드의 이동주소 정보를 대체 텍스트나 설명, 링크 등으로 제공해야함
(QR코드 이미지는 하나의 링크로 봐야함. alt="스타벅스 리워드 페이지 바로가기 QR코드"
- 의미있는 배경 이미지의 경우에는 대체 텍스트를 제공해야함
(대체 텍스트는 넣되 화면에 표시되지 않기 위해서 position으로 날리던가 해야함)
- 의미있는 색상 배경 이미지에 대체 텍스트를 제공해야함
(달력에 색상 배경 이미지로 휴관일을 표현한 경우 해당 부분에 <span>휴관일</span>넣고 css로 날려야함)
- 실시간 영상이나 CAPTCHA의 대체 텍스트는 용도만 제공해도 준수
- 이미지의 텍스트 정보와 대체 텍스트가 달라도 인식가능하면 인정함
(고용노동부 로고의 영문 부분까지 alt에 넣으면 중복 의미가 되기 때문에 고용노동부만 넣어도 무방함)
- 이미지의 설명이 본문에 있으면 대체 콘텐츠로 인정함
2) 자막제공(인식의 용이성 부분)
- 주로 청각장애인을 위한 지침
- 영상, 음성 콘텐츠에 자막, 원고, 수화 중 하나 이상의 대체 수단을 제공해야함
- 멀티미디어 콘텐츠(영상, 음성)에 대한 대체 수단의 내용을 충분하게 또는 적절하게 제공해야함
- 사용자가 등록한 멀티미디어 콘텐츠에 대해 관리자가 대체 수단 입력 기능을 제공해야함
(유튜브에 영상 업로드시 자막 등록하는 기능을 제공하는 것)
- 텍스트만 제공하는 영상 콘텐츠에서 동등한 음성을 제공해야함
(주로 온라인 강의 경우)
- 파일로 제공되는 영상, 음성 콘텐츠도 평가대상에 포함
(일반 첨부파일로 제공하는 경우 자막도 같이 제공해야함)
- 자막으로 인해 수화가 가려지는 경우는 올바르지 못함
(대체 수단 모두 정상적으로 제공되어야함, 중도 청각 장애의 경우 자막을 통해서 정보를 얻을 수 있음)
- 원고가 페이지를 벗어나선 안됨
(뉴스 영상을 포함한 기사일때 영상과 원고는 한 페이지에서 동시 시청이 가능해야함, 원고는 스크롤로 제공함)
- 모바일 웹에서 파일로 제공되는 영상, 음성 콘텐츠를 지양함
(모바일 환경이 각자 다르기 때문에 스트리밍으로 제공하는 것이 좋음)
* 주의사항
(1) 모바일 기기에서 대체 수단을 이용할 수 있도록 제공하는 것을 권장
(2) 원고를 제공할 경우 모바일 기기에서 화면과 우너고를 함께 볼 수 있도록 권장
(3) 모바일 기기는 디바이스마다 화면의 크기가 다르므로 원고 제공보다 닫힌 자막을 제공하는 것을 권장
2. 콘텐츠 따라만들기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="default.css">
<title>LOGIN</title>
</head>
<body>
<section class="login">
<h2>로그인</h2>
<ul>
<li>
<input type="text" placeholder="아이디" title="아이디 입력">
</li>
<li>
<input type="password" placeholder="비밀번호" title="비밀번호 입력">
</li>
<li>
<input type="checkbox" id="save" title="아이디 저장"><label for="save">아이디 저장</label>
</li>
<li>
<button>로그인</button>
</li>
</ul>
<div>
<ul>
<li>
<a href="#a">회원가입</a>
</li>
<li>
<a href="#a">아이디 찾기</a>
</li>
<li>
<a href="#a">비밀번호 찾기</a>
</li>
</ul>
</div>
<a href="#a" class="clear">비회원 주문조회</a>
</section>
</body>
</html>
CSS
.login{
width: 410px;
height:435px;
margin: 50% 50%;
transform: translate(-50%, -50%);
}
.login h2{
margin: 0 0 15px;
padding: 0 0 21px;
border-bottom: 2px solid #111;
font-size: 26px;
color: #111;
text-align: center;
}
.login> ul> li {
padding: 12px 0 0;
}
.login> ul> li:nth-child(3){
padding: 20px 0 8px;
}
.login input{
width: 100%;
height: 46px;
box-sizing: border-box;
}
.login input[type="text"],
.login input[type="password"]{
padding-left:17px;
}
.login> ul li label{
padding: 0 0 0 32px;
font-size: 13px;
color: #111;
position: relative;
}
.login> ul li label:before{
content:"";
display: block;
position: absolute; left:0; top:0;
width: 20px;
height: 20px;
background: #ccc;
}
.login> ul li input[type="checkbox"]:checked label:before{
background: url(ico_check_on.png) no-repeat center #333;
border-color:#333;
}
.login button{
width: 100%;
height: 57px;
background: #ed1c24;
font-size: 16px;
color: #fff;
}
.login div{
width: 270px;
box-sizing: border-box;
}
.login div> ul> li{
float: left;
}
.login div> ul> li a{
padding: 0 38px 0 0;
position: relative;
}
.login div> ul> li a:after{
content: "/";
display: block;
position: absolute; right: 16px; top: 0;
}
.clear:before{
content:"";
display: block;
clear: both;
}
* display: flex;로 정렬하는 것으로 수정해야함
* 체크박스 이미지 수정필요
* div 영역 css추가해야함
결과
<진행중>
<목표>
'TIL(today I learned)' 카테고리의 다른 글
2020.10.12 #TIL (0) 2020.10.13 2020.10.07 #TIL (0) 2020.10.08 2020.09.29 #TIL (0) 2020.09.29 2020.09.28 #TIL (0) 2020.09.28 2020.09.27 #TIL (0) 2020.09.27