반응형



◎ <IMG> 태그

<img src="twitterlogo.jpg" alt="트위터">

▼ 내용이 없는 경우는 빈 대체 텍스트 제공 (alt 속성 이용)

alt의 대체 텍스트를 넣을경우 이미지를 있는그대로 표현할수 있는 텍스트를 넣는게 좋다. 예를들어 트위터 로고 img 파일을 너놓고 alt 속성에 새라고 넣으면 이건 잘못된 예시다. 이유는 시각장애인들의 접근성을 위해서이다.

<img src="연혁도.jpg" alt='수자원공사이력' longdesc='text.html' >

▼ 아래처럼 이미지내용이 길거나 복잡한 경우는 longdesc, 대체 콘텐츠 등으로 추가정보 제공

연혁도 같은 img파일의 텍스트가잇는 것 같은경우엔 longdesc='long.html' 같은걸 써서 텍스트를 따로남깁니다.

또한 다른방법으로는 보통 연혁도같은경우 ol li 태그등을 이용하여 텍스트로 표현해주는데 따로 html을 만드는게아니라 이미지 바로밑에 텍스트를 넣어준다 그리고 텍스트의 스타일을 position:absolute: left:-5000% 를 사용하여 넣어준다 이유는 일반사용자는 그림을보고 이해하지만 시각장애인들은 웹페이지를 대신 읽어주는 기계를 사용해서 듣기때문이다. 이미지파일은 못읽고 대체텍스트alt나 그밑에 숨긴텍스트를 읽어서 들려주기때문이다. 간혹 display none으로 하는경우도 있는데 이경우 시각장애인의 장비가 읽어주지 못하는 경우가생긴다. 그래서 position으로 위와같이 작성하는게 좋다



▼ longdescription 확인방법. (마우스 우측버튼 > 설명보기)


◎ <a> 태그

▼ <a> = Anchor (닻)

▼ href = Hypertext Reference

▼ 페이지와 페이지를 연결하는 link

▼ target 속성으로 페이지 열리는 방식 제공 (_blank 라는 속성을 넣어주면 새창열림)

<a href="url" target="_blank"> 텍스트 ></a>

▼ 다른 도메인 연결시 http:// 까지 제공해야함

▼ 파란색 텍스트에 밑줄로 기본제공됨

▼ href의 여러가지 이벤트 #을 주게되면 그뒤에 나오는 id값을 찾아서 스크롤이 이동된다.

1. <a href=""> 링크값에 내용이 없을경우</a> 2. <a href="#">#만 제공하는 경우 </a> 3. <a href="#content">내부링크를 제공하는 경우 </a> 4. <a href="#a">없는 아이디를 넣는경우 </a> 1: 내용이 없을경우 IE의 경우는 내컴퓨터가 열림 , Chrome 는 아무 변화없음 2: #만 제공하는경우엔 scroll이 맨위로 가게됩니다 3: #content는 #뒤에 이름을 써줄경우 내부링크로 작동되어 태그의 id='content' 인 태그를 찾아서 scroll 이 이동됩니다. 4: #a #뒤에 없는 id를 넣을경우 현재 scroll 고정, 현재scroll에서 새창이나 다른 이벤트를 줄경우 사용 #none를 쓰는사람도있는대 #a 로 쓰는게 바람직하다




반응형

+ Recent posts