본문 바로가기

전체 글383

[WAI-ARIA] button 요소 속성/상태 설명 버튼. 엔터키나 스페이스바로 선택 aria-disabled="true | false" 사용할 수 없는 버튼 상태는 true, 사용할 수 있으면 false aria-pressed="true | false" 버튼이 선택된 상태면 true, 해제되어 있으면 false aria-labelledby="" 그룹의 제목을 제공하기 위한 것으로 제목 요소의 id값과 연결 role=“button”은 해당 요소의 역할을 버튼으로 정의하고, 선택적으로 aria-describedby 속성을 사용하여 버튼에 추가 설명을 삽입할 수 있다. 버튼이 비 활성화 되었거나 더 이상 사용할 수 없을 때 aria-disabled 속성을 사용하여 현재의 상태 정보를 스크린리더에게 알려줄 수 있다. 토글 버튼은 눌려져 있.. 2020. 7. 21.
[WAI-ARIA] multi form 기본 컨트롤이 아닌 커스텀 컴포넌트 등을 사용하는 경우와 같이 과 요소를 사용하지 못하는 경우가 발생할 수 있는데, 이러한 경우 WAI-ARIA의 group 역할(role)을 사용하면 과 동등한 의미를 전달할 수 있고, 여기에 aria-labelledby 속성을 사용함으로 요소가 가지는 의미 또한 전달이 가능해진다. 물론 당연히 HTML의 기본 요소 과 를 사용하는 것이 항상 우선이다. WAI-ARIA의 적용은 이것이 불가할 경우에 대한 차선책으로 선택할 수 있는 보조 기술이다. 요소 역할 속성/상태 설명 div group 폼에 공통적인 레이블을 참조할 수 있는 필드의 논리적 집합을 그룹핑 div aria-labelledby 그룹의 레이블에 해당하는 요소의 ID를 설정 DOCTYPE html> multi.. 2020. 7. 20.
[WAI-ARIA] id/password input 아이디를 생성하는 입력상자에 어떻게 입력해야 하는지 알 수가 없고, 잘못 입력하고 발생하는 에러 메시지를 통해서만 "5~20자의 영문 소문자, 숫자와 특수기호만 사용가능합니다" 라는 것을 알 수 있게 된다. 또한 비밀번호도 오류가 발생한 후에 입력도움을 알 수 있기 때문에 스크린리더 사용자는 상당한 불편을 겪게 된다. 이렇게 입력 지침을 에러메시지를 통해서만 제공하는 방법을 스크린리더 사용자에게 좋지 않은 경험이 된다. "에러베시지"의 잘못된 예와 같이 스크린리더 사용자는 에러가 발생해도 에러가 발생 된 상황을 전혀 알 수 없기 때문에 "1111"이라고 아이디를 입력했지만, 그것이 입력 기준에 맞지 않는지는 알 수가 없다. 이때 입력 서식인 요소에 aria-label 또는 aria-labelledby와 .. 2020. 7. 17.
[WAI-ARIA] auto complete 예제 https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf=> 35p https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=ko 요소 역할 속성/상태 설명 combobox 콤보박스 역할을 정의 aria-haspopup 텍스트 필드와 연관된 하위 수준의 메뉴가 있으면 true, 그렇지 않으면 false aira-autocomplete 사용자 입력에 대한 자동완성 지원 여부를 설정 aira-activedescenda.. 2020. 7. 17.
[WAI-ARIA] 탭 예제 https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf 요소 역할 속성/상태 설명 tablist 탭 집합 presentation 요소의 리스트 의미를 삭제 tab aria-selected="true/false" 요소의 역할을 탭으로 정의하고, 선택되었을 때 true, 선택되지 않았을 때 false aria-controls="{}" tabpanel의 id명 id="{}" aria-labelleddby 속성의 함수명 tabpanel aria-expanded="true/false" 요소의 역할을 tabpanel로 정의하고, tabpanel이 열렸을 때 .. 2020. 7. 17.
다크 모드 코딩 방법 ( css : prefers-color-scheme ) https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme //light 모드@media( prefers-color-scheme: light ){ } //dark 모드@media( prefers-color-scheme: dark ){ } 2020. 3. 9.
싱가포르 여행 가볼만한 곳/ 먹어볼만한 곳 메모 [가볼만한 곳] 센토사섬 윙즈오브타임 유니버셜 스튜디오 나이트사파리 가든스 바이 더 베이 [먹어볼만한 것] 싱가폴 칠리크랩 야쿤가야 토스트 티챕터 2018. 4. 25.
크롬에서 filter blur 이슈 관련 https://stackoverflow.com/questions/47914821/image-moves-on-hover-when-changing-filter-in-chrome 2018. 3. 22.
[css] placeholder color 변경 ::-webkit-input-placeholder{font-size:17px;color:#666}::-moz-placeholder{font-size:17px;color:#666;opacity:1}::-ms-input-placeholder{font-size:17px;color:#666} 2017. 7. 21.
728x90
반응형

티스토리툴바