ux dev

접근성 준수를 위해 스크린리더용 텍스트 엘리먼트를 별도로 만드는 방법에 대해 소개하고자 합니다. 테일윈드 등 대부분 UI 프레임워크는 기본적으로 내장하고 있는 내용이지만, 별도의 코드를 통해 구현하고 싶은 경우 활용할 수 있습니다.HTML이 텍스트는 스크린 리더용입니다.CSS.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}설명position: absolute;: 요소를 절대 위치시켜 문서 흐름에서 제거합니다.width: 1px; 및 height: 1px;: 요소를 거의 눈에 띄지 않는 ..

웹 접근성 준수를 위해서는 동영상 컨텐츠에 대한 자막 제공이 필수적으로 이뤄져야 합니다. 수기로 자막을 쓰는 것도 방법일 수는 있지만, 시간이 많이 걸리는 작업이기에 자동으로 자막을 생성해 주는 방법을 알아 보고자 합니다.유튜브를 통해 한글 자막 자동으로 생성하기자막을 생성해 주는 프로그램은 여러가지 있지만, 대부분 영어 중심의 텍스트 추출에 초점을 두고, 한글과 같은 언어와는 호환성이 떨어지는 편입니다. 한글 언어에 대한 자동 자막 추출을 지원하는 프로그램 중 가장 좋은 것은 유튜브 스튜디오입니다. 다음은 유튜브 스튜디오를 통해 한글 영상의 자막을 추출하는 방법을 설명하고자 합니다.영상을 업로드한 후 자막 생성 후 다운로드방법은 간단합니다. 우선 당연하게도 유튜브 계정이 있어야 하며, 유튜브 프로필 버..

2. 자막 제공멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.1) 멀티미디어자막 또는 대본 또는 수화를 제공한다.2) 사용자가 업로드하는 멀티미디어대체 콘텐츠를 제공할 수 있도록 안내하고 툴을 제공한다.3) 음성이 나오지 않는 멀티미디어청각적으로도 인식이 가능하도록 원고 등의 대체 콘텐츠를 제공한다.

사용자 JavaScript 및 CSS 확장 프로그램으로 코드 커스텀웹 페이지에서 맞춤 JavaScript 및 CSS를 통해 브라우징 경험을 향상시키고 싶으신가요? "User JavaScript and CSS" Chrome 확장 프로그램은 광범위한 맞춤 설정 기능을 제공하는 매우 유용한 도구입니다. 이 다재다능한 확장 프로그램과 그 이점에 대해 소개합니다.UI 개발을 하다 보면 원본 소스가 없더라도 기존에 개발된 웹페이지의 JS와 CSS를 변경해야 하는 상황이 발생합니다. 관련하여 많은 크롬 확장 프로그램들이 있지만, 그 중에 User Javascript & CSS라는 프로그램을 소개 드립니다. 개인적으로 여지껏 나왔던 도구 중에 가장 높은 완성도와 활용도를 지니고 있다고 하며, 원한다면 클라우드 저장소 ..