FDS12_Markup_Summary

Web Cafe main menu | CSS Animation | 한국형 웹 컨텐츠 접근성 가이드

header

<ul>.menu

<li>.menu-item 가로로 배치하기

1.<ul>.menu에 height 47px fix 시키고, <li>.menu-item에 float : left 8

  1. <li>가 너비 차지하지 않게 Layer화
    • position: absolute

image

  1. After를 활용해서 실제 text길이만큼만 border 넣기

image

<ul>.sub-menu design

image

WAI

WCAG : 가이드라인

KWCAG : 한국형 웹 컨텐츠 접근성 가이드 2.1

인식의 용이성

운용의 용이성

이해의 용이성

  1. 적절한 대체 텍스트 제공.

<img src="12345.jpg" alt="네이버">

<img src="12345.jpg" alt="배우 조인성">

> 내가 만든 content가 접근성이 좋아져야 함 : SEO

> img 내용과 동등해야함

  1. 자막 제공 < 수화

  1. 색에 무관한 콘텐츠 인식

  1. 명확한 지시사항 제공

    • 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
    • 좌측 상단, 위쪽 메뉴 등이 아니라 기능으로 명시해야한다.

  2. 텍스트 콘텐츠의 명도 대비

    • 텍스트 콘텐츠와 배경 간의 명도대비는 4.5대 1 이상이어야 한다. 확대/축소 가능하다면 3:1까지 가능. 비활성화는 활성화되며 바뀌기 때문에 OK

  3. 자동재생 금지

    • chrome에서 자동재생 금지. volume mute하면 됨 !

  4. 콘텐츠 간의 구분

    • 이웃한 콘텐츠는 구별될 수 있어야 한다.

  5. 키보드 사용 보장

    • 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

  6. 초점 이동

    • 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다. > 하위 메뉴를 다른 list에 넣으면 안 됨

  7. 조작 가능

    • 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
    • control 영역을 크게 해야함.

  8. 응답 시간 조절

    • 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

  9. 정지 기능 제공

    • 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. > 자동으로 넘어가버리는 배너 등 내가 정지시키고 마음대로 제어할 수 있어야함

  10. 반복 영역 건너뛰기

    • 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
    • 매번 키보드로 내비게이션 메뉴의 하위 리스트 다 이동해야하는 문제
    • 본문 바로가기 기능 제공해야함 : scheme navigation

  11. 제목 제공

    • 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
    • 수많은 콘텐츠에 제목을 줘야함. Section/article은 heading 요구하지만 div는 없음
    • iframe에도 title로 제목줘야함

  12. 적절한 링크 텍스트

    • 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야한다.
    • ‘여기’를 클릭하세요 같은 것 X
    • ‘배경음악 다운로드’ (OK)

  13. <lang> 속성은 <span> 등에도 적용할 수 있다. 더 나은 서비스 제공 가능

  14. Markup 선형화 순서

    • NEWS 다음 MORE 다음 기사들 (X)
    • NEWS 다음 기사들 다음 MORE 여야 다 보고 다음 기사 볼 수 있음!!!

  15. 레이블 제공

    • 사용자 입력에는 대응하는 레이블을 제공해야 한다.

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

  16. 오류 정정

    • 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
    • 틀린 곳 alert 주고 끝나는 게 아니고 정정해야하는 곳으로 focus가 이동해야한다.

  17. Markup 오류 방지

    • 열고 닫기 제대로
    • 태그 nesting 제대로
    • 중복 속성 <form name="form" name="post"> (X)

HTML Entities

Some characters are reserved in HTML.

Result Description Entity Name Entity Number
  non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
” double quotation mark &quot; &#34;
’ single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Visual영역 : animation

image

Animation sinario

  1. Animation 이름 : textAni
  2. 글자 크기가 커짐 : font-size
  3. 투명도 : opacity, color : rgba()
  4. 왼쪽상단에서 오른쪽하단으로 : margin, padding, position:absolute

Animation WSA Animation Keyframes

: @keyframes는 animation 속성에 적용할 키프레임을 생성하기 위한 규칙.

/* 비주얼 */
@keyframes textAni {
    0%{
        font-size : 12px;
        color: rgba(0,0,0,0);
        transform: translate(0, 0);
    }
    100%{
        font-size : 24px;
        color: rgba(0,0,0,1);
        transform: translate(400px, 75px);
    }
}


/* 텍스트 애니메이션 */
.visual-text {
    position: absolute;
    animation-name: textAni;
    animation-duration: 5000ms;
    animation-fill-mode: forwards;
    /* visual::after에 묻히지 않게 z-index 수정 */
    z-index: 10;
}


/* 배경 애니메이션 */
@keyframes flowerAni {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;

    }
}

.visual::before, .visual::after {
    /*
    animation-name: flowerAni;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    */

    /* 정지시킬 때
    animation-play-state: paused; */

    /* 통합속성 */
    animation: flowerAni 2s alternate infinite;

    content: "";
    position: absolute;
    /* 부모의 크기를 자식이 읽어들이게끔 100% 줌 */
    width: 100%;
    height: 100%;
    /* after는 visual-text 뒤에 들어가므로 위치 지정해줌 */
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}

Transform(변형)속성 : animation과 짝꿍

Animation의 timing-function 中 steps function

image [image width: 500px, 각 동작 당 50px]

@keyframes frame-animation{
    0% {
        background-position: 0px 0;
    }
    100% {
        background-position: -500px 0;
    }
}
#frame {
    width: 50px;
    height: 72px; 
    border: 1px solid transparent;
    background: url(http://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
    animation: frame-animation 1s steps(10) infinite;
}