출처 : https://ibrahimovic.tistory.com/30 Placeholder를 사용하지 마세요. 이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다. 자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다. 들어가면서 : placeholder 속성은 많 ibrahimovic.tistory.com 이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다. 자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다. 들어가면서 : placeholder 속성은 많은 이슈가 있다. 왜 이것을 사용하면 안되는지 알아보자. HTML5 사양의 일부로 ..

스크린리더 : 눈이 보이지 않거나 어두신분들을 위해 귀를 통해 사이트의 화면 구조를 파악할수 있는 화면 낭독 소프트웨어 (웹접근성 지원용) 위키피디아 설명 ---- 스크린 리더(영어: screen reader)는 컴퓨터의 화면 낭독 소프트웨어이다. 스크린리더 기술은 Jaws와 같은 PC형 스크린리더와 보이스몬, 웹톡스와 같은 웹스크린리더 방식의 두가지가 있으며, PC형 스크린리더는 전맹시각장애인이 주로 사용하며, 웹스크린리더는 저시력시각장애인과 난독증과 같은 학습장애, 인지장애인과 노인, 다문화가족 등의 웹접근성을 지원하기위해 사용된다. 최근 애플사의 아이폰에 적용된 보이스오버와 같은 스마트기기에 내장된 모바일 스크린리더도 다수 활용되고 있다. ---- 윈도우 내장은 저도 잘 모르겠습니다만, 제가 수업에..

https://youtu.be/VsWfNPvDgiA https://youtu.be/oPQWjNglt_Y 장점 : IR기법을 대체해서 사용 가능 단점 : p, i, u, del처럼 텍스트를 표현하기위한 요소나 span, div처럼 의미없는 태그의 경우 ex) 텍스트 라면 aria-label에 있는 속성이 아닌 "텍스트"라는 글씨를 읽어줌 aria-label에 있는 설명은 간결해야 한다. 길 경우엔 aria-describedby를 사용 해야 한다. 텍스트 ARIA는 요소에 레이블과 설명을 추가하기 위한 여러 가지... 내용이 간결할경우 텍스트가 시각적으로 보일경우 (aria-labelledby) 아이콘처럼 텍스트가 보이지 않을경우 (aria-label) 내용이 길경우 aria-describedby aria-..

출처 : https://webisfree.com/2016-04-11/[html]-table-%ED%83%9C%EA%B7%B8-summary-%EC%86%8D%EC%84%B1-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 [html] table 태그 summary 속성 알아보기 테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 webisfree.com 테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속..

출처 : https://marshall-ku.com/web/tips/focus-visible%EB%A1%9C-%EC%A0%91%EA%B7%BC%EC%84%B1-%EB%86%92%EC%9D%B4%EA%B8%B0 :focus-visible로 접근성 높이기 접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 "만" 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹 marshall-ku.com 접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 '만' 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 ..