라몽(●'◡'●)디자이너
Home
  • 분류 전체보기 (61)
    • 디자인 (1)
      • 실무 (0)
      • 공부 (0)
    • UIUX분석 (0)
    • 코딩스터디 (60)
      • Markup (0)
      • CSS (12)
      • Javascript (28)
      • jQuery (11)
      • .etc (7)
      • wordpress (2)
      • PHP (0)
Home
  • 분류 전체보기 (61)
    • 디자인 (1)
      • 실무 (0)
      • 공부 (0)
    • UIUX분석 (0)
    • 코딩스터디 (60)
      • Markup (0)
      • CSS (12)
      • Javascript (28)
      • jQuery (11)
      • .etc (7)
      • wordpress (2)
      • PHP (0)
블로그 내 검색

라몽(●'◡'●)디자이너

코딩/웹디자인에 대한 정보를 다룹니다.

  • 코딩스터디/.etc

    웹표준 & 웹접근성

    2021. 5. 4.

    by. 라몽(●'◡'●)디자이너

     

     

    웹표준이란?

    - 구글, 파이어폭스, 사파리 등 각 브라우저마다 다르게 보이지않게

    표준화 된 언어를 사용함으로써 동일한 결과물을 보여주는 것을 웹표준

     

    - 월드 와이드 웹(WWW)을 구현하기 위해서 따라야 할 표준 또는 규격

    - 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함(크로스 브라우징)

     

    validator.kldp.org/

    웹표준 검사사이트 - html

     

    jigsaw.w3.org/css-validator/

    웹표준 검사사이트 - css

     

     

     

    웹접근성이란?

    - 모두가 차별없이 웹에서 제공하는 정보를 이용할 수 있도록 하는 것(일반인, 장애인, 고령자 등)

     

     

     

    웹호환성이란?

    - OS, 브라우저에 상관없이 유사한 화면으로 동일한 정보에 접근이 가능해야한다.

    - 브라우저마다 코드를 표현하는 방식이 조금씩 다르기 때문에 100% 동일한 화면을 불가합니다.

    - 그러나 정보는 동일해야하죠.

    - 웹표준 기술을 지킨다고 해도 웹호환성을 100% 만족시키기는 어렵습니다.

     

     

     

     

     

     

    웹 접근성을 위한 서비스

    1. HTML 의 alt 속성

    강아지 이미지를 넣을 수 있는 HTML을 작성한 후 <img src="dog.png" alt="강아지 이미지">

    브라우저 호환 또는 코드 오류로 인해 이미지가 깨질 때 스크린리더를 통해

    alt에 작성된 설명(강아지 이미지)을 음성으로 이미지에 대한 설명을 제공받을 수 있습니다.

     

     

    2. 스크린리더

    시각장애인들에게 화면의 내용과 자신이 입력한 키보드 정보나 마우스 좌표 등을 음성으로 알려주어

    컴퓨터를 사용할 수 있도록 도와주는 화면 낭독 프로그램입니다.

     

     

    3. Skip menu

    몸이 불편하여 마우스를 사용하기가 어렵거나, 갑자기 마우스가 고장난 상황에서

    홈페이지를 이용할 때 tab(탭) 키를 사용하여 원하는 페이지로 이동합니다.

    Skip menu는 하나씩 콘텐츠를 거치며 지나가는 것이 아니라

    사용자가 가고 싶은 영역으로 바로 이동할 수 있게 해주는 메뉴입니다.

     

     

     

     

     

     

    blog.naver.com/soropromotion/222304201861

     

    웹표준 & 웹접근성 | 서로커뮤니케이션

    안녕하세요 서로이입니다 ( ⁎ ᵕᴗᵕ ⁎ ) 여러분 혹시 웹 표준 & 웹 접근성이라는 말을 들어보셨나요...

    blog.naver.com

     

     

    nax.naver.com/index

     

    [네이버 온라인 장애 체험]

    다양한 웹 상황에 공감하여 웹의 문턱을 낮춰주는 웹 접근성 체험

    nax.naver.com

     

    반응형

    '코딩스터디 > .etc' 카테고리의 다른 글

    깃허브(GitHub) 설치 및 사용법  (0) 2021.06.25
    SASS 사용하기  (0) 2021.05.04
    SASS 설치  (0) 2021.05.04
    [jQuery] swiper로 슬라이드 구현  (0) 2021.04.28
    제이쿼리 갤러리 플러그인::isotope  (0) 2021.04.27

    댓글

    관련글

    • SASS 사용하기 2021.05.04
    • SASS 설치 2021.05.04
    • [jQuery] swiper로 슬라이드 구현 2021.04.28
    • 제이쿼리 갤러리 플러그인::isotope 2021.04.27
    맨 위로
전체 글 보기
  • GitHub
Tistory 로그인
Tistory 로그아웃
로그아웃 글쓰기 관리

Today

Total

Powered by ⓒ Kakao Corp.

블로그 이미지
라몽(●'◡'●)디자이너

티스토리툴바