[사용자 친화 웹] - 웹표준&접근성(WAI-ARIA)

EC kim·2022년 11월 8일
0

  • 웹 표준?
    웹에서 표준적으로 사용되는 기술이나 규칙
    웹개발의 형식을 통일시킨 것이 웹표준

  • 장점
    1.유지보수의 용이성
    2.웹호환성 확보
    3.검색효율성증대
    4.웹 접근성 향상

  • Semantic HTML


    필요한 이유 : 개발자간 소통, 검색 효율성, 웹접근성
    ! 웹접근성은 나이, 성별, 장애여부, 사용환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야한다.
  • 자주 틀리는 마크업

  1. 인라인 요소 안에 블록요소 넣기 (블록요소 안에 인라인요소를 넣어야한다)
    블럭요소: 가로폭전체
    Article, aside, div, footer, h1~h6, header, group, ol, p, section, table, ul, video
    인라인요소: 컨텐츠끝나는지점
    A, br, button, em, I, ima, input, label, span, strong, textarea, var

  2. < b > , < i > 요소 사용하기 (stong과 em으로 바꿔서 사용)
    b -> strong //콘텐츠 강조
    i -> em // 글씨 기울이기

  3. < hgroup > 마구잡이 사용 (순서대로 사용한다)

< h1 >제목< /h1 >
< h2>큰 목차< /h2>
< h3>작은 목차< /h3>
< h3>작은 목차</ h3>

  1. < br > 연속으로 사용하기
    여백을 주고 싶을 땐 p태그를 사용하거나 class를 이용해 css속성으로 여백설정해야한다.

  2. 인라인 스타일링 사용하기 (html css코드 분리해서 작성하거나 styled사용)
    (O) < h1 >스타일링 속성은 CSS로 작성해주세요.< h1 >
    (O) < h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.< h2>
    (X) < h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.< /h3>

  • 크로스 브라우징
    웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
    초기 기획 -> 개발 -> 테스트/발견 -> 수정/반복
  • SEO (검색엔진최적화)
    검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 만든다.
  1. On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법입니다. !!
    (웹페이지를 작성할 때 사용할 수 있는 SEO방법)(진짜 검색량 많은걸 검색상단배치)
  2. Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없습니다. ( 광고비받고 검색창에 가장 상위에 노출시키도록 하는 방법)
  • On-page SEO에서 영향을 미치는 요소
  1. < title > 요소
    검색 결과창에서 제목에 해당하는 요소
    Head 요소의 자식 요소로 작성한다.
  • < title > 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있습니다.
    • 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어집니다.
  • < title > 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아집니다.
    • 그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있습니다. 제목에 핵심 키워드는 한 번만 포함시켜 주세요.

  1. < meta >요소
    메타데이터를 담는 요소
    메타데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
    < head >요소의 자식요소로 작성
    < meta > 두가지 속성 : name , property
    Name : SEO를 위해서 사용한다.
    Property : 다른 사람에게 공유하기 위한 목적

  2. 요소 검색 엔진은 요소의 내용을 중요하게 취급한다.

  3. 콘텐츠
    개성있는 브랜딩 , 복붙 금지 , 간결한 제목과 설명글 , 최대한 글자로 작성하기 =
    (O) < img src="코드스테이츠로고.png" alt="코드스테이츠 로고" />
    (X) < img src="코드스테이츠    로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />

  • 웹 접근성 지침

  1. 인식의 용이성 (모든 콘텐츠는 사용자가 인식할 수 있어야한다)
    적절한 대체 텍스트< img alt=‘’>
    자막 제공 < video track src=‘자막’ ></ video >
    색에 무관한 콘텐츠 인식 (콘텐츠에 테두리 설정 , 콘텐츠에 레이블달기)
    명확한 지시사항 제공 (모양,크기,위치,방향,색,소리 등에 상관없이 인식되게 한다)
    텍스트 콘텐츠 명도 대비 (텍스트콘텐츠와 배경간의 명도대비는 4.5대 1
    자동재생금지
    콘텐츠 간 구분 (테두리,구분선 등을 사용하여 시각적으로 구분한다)

  2. 운용의 용이성(사용자 인터페이스 구성요소는 조작가능하고 내비게이션할 수 있어야함)
    키보드 사용 보장
    초점 이동
    조작 가능
    응답 시간 조절
    정지 기능 제공 (자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야한다)
    깜빡임과 번쩍임 사용제한
    반복 영역 건너뛰기
    제목 제공
    적절한 링크 텍스트

  3. 이해의 용이성 (콘텐츠는 이해할 수 있어야 한다.)

  • 기본 언어 표시 ( < html lang=‘ki’ >)
  • 사용자 요구에 따른 실행(사용자가 의도하지않은 기능은 실행되지 않아야한다)
  • 콘텐츠 선형 구조 (논리적인 순서(순서대로)로 제공되야한다)
  • 표의 구성 (표는 이해하기 쉽게 구성해야한다)
  • 테이블 요소 안에 caption 요소를 사용해서 표에 제목을 제공하기
    1) 표의 제목을 제공하는 것만으로도 무엇을 말하고자하는 표인지 미리 파악할 수 있게 됩니다. 제목과 함께 표의 간단한 요약을 작성해도 좋습니다.
    2) 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 제목 셀은 < th >, 데이터 셀은 < td > 를 사용하면 됩니다.
    3) 표의 구조가 복잡할 경우, 최대한 간소화하거나 scope 혹은 id와 headers 속성을 사용하여 작성합니다.
  • 레이블 제공 (사용자 입력에는 대응하는 레이블을 제공해야한다.
    < input > 요소에 value 나 placeholder 속성만 설정하는 것은 적합하지 않습니다.
    < input > 요소에 id 를 설정하고 < label > 요소의 for 속성으로 연결해줍니다.
    title 속성을 사용합니다.
    < input id=‘123’> < label htmlFor=‘123’> 라벨누르면 인풋포커스
    < input type="text" aria-label="아이디" placeholder="아이디" />
  • 오류 정정
    견고성 (웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야한다)
    마크업 오류 방지
    웹 어플리케이션 접근성 준수 (갖추지 못하면 대체수단이나 대체텍스트)

    WAI-ARIA (wai에서 발표한 RIA환경에서의 웹접근성 기술규격)

WAI : 웹표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA : 장애가 있는 사람들이 더 쉽게 접근할 수 있도록 웹 접근성을 갖추기 위한 기술
RIA : 따로 프로그램을 설치하지 않아도 웹브라우저를 통해 설치하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 어플리케이션(SPA)

  • WAI-ARIA 필요성
    WAI-ARIA는 HTML요소에 추가적으로 의미를 부여하는 역할
  1. 시멘틱 요소만으로 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하여 더 원활하게 페이지를 탐색하게 도와준다. 시멘틱요소만으로 충분한 상황이면 사용하지 않는다.
  2. SPA처럼 AJAX를 사용 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹접근성을 향상시킨다.
  • WAI - ARIA 사용법

WAI-ARIA 는 HTML 태그 내부에 속성을 추가함으로써 의미를 부여
WAI-ARIA는 시멘틱한 HTML을 보조하는 역할

  • 역할(role) : HTML 요소의 역할을 정의하는 속성
  • 상태(state) : 요소의 현재 상태를 나타내는 속성
  • 속성(property) : 요소의 특징을 정의하는 속성(attribute)

  1. 역할
    < div role="button" >div이지만 button으로 사용되는 요소< /div >
    < div > 요소를 사용했을 때 이 요소가 버튼역할을 하고 있다.
    html요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해줄 필요없다.
    시맨틱 요소본연의 의미를 임의로 바꾸면 안된다.

  2. 상태
    현재 어떤 탭(상태)이 선택되어 있는지 알아야한다. 여러개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있는 aria-selected 라는 속성을 사용한다.

  • aria-selected
    < div role="tabList" >
    < li role="tab" aria-selected="true">Tab1</ li>
    < li role="tab" aria-selected="false">Tab2</ li>
    < li role="tab" aria-selected="false">Tab3< /li>
    < /div>
  1. 속성

  • aria-label
    요소에 대한 정보를 전혀 얻을 수 없는 경우 발생
    텍스트 콘텐츠 없이 이미지로만 만들어진 버튼이 대표적인 예시
    < button aria-label="닫기"/> < img src="X.png" /> </ button>
    < button aria-label="검색"/> < img src="돋보기.png" /> < /button>

  • Aria-live
    해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다.
    브라우징 도중에 내용을 띄우는 alert,modal,dialog 와 같은 역할을 하는 요소이거나 AJAX기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성
    시각 장애인들은 알아채기 어렵기 때문에 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려준다.
    속성값으로는 polite, assertive, off(default)

  1. polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달합니다.
  2. assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달합니다.
profile
EC kim
프론트엔드 개발자 일기
이전 포스트

Figma UI/UX 분석

다음 포스트

[HTML/CSS]-심화 (반응형 웹, CSS애니메이션)

0개의 댓글