HTML

웹 접근성을 고려하여 콘텐츠 숨기기 - sr-only / off-screen / a11yHidden

sr-only 스크린리더에서는 읽을 수 있지만 화면에서는 보이지 않게 하는 방법이다. 주로 부트스트랩 클래스명으로 사용된다. 왜 사용할까? sr-only는 screen reader-only라는 뜻으로 주로 부트스트랩 클래스명으로 사용된다 부트스트랩 공식문서에 따르면, 스크린 리더는 우리가 모든 input 요소에 label을 포함하지 않는다면 어려움을 겪을 것이다. 이러한 인라인 폼들을 위해 우리는 .sr-only 클래스를 사용함으로써 label을 감출 수 있다. 우리는 항상 스크린 리더를 고려하여 웹 접근성을 신경써야하기 때문에 label을 아예 지우는 것보다 이러한 클래스를 사용하여 label을 감추는 방법을 사용해야한다. 즉, 우리는 접근성을 위해 스크린리더가 읽을 수 있도록 콘텐츠를 숨겨야한다 어떻..

[Javascript] input에서 커서 맨 뒤로 위치 시키기

input.focus() input.focus()로 input에 focus를 하면 커서가 맨 앞에 위치하게 된다 input에서 커서 마지막으로 위치시키기 커서를 맨 뒤로 보내기 위해서는 input에 있던 값을 변수에 저장한 다음 input에 focus 해주고 input의 value 값을 비워준 다음에 다시 value값을 채워준다 코드 const changeEditMode = (e) => { const $item = e.target.closest('.item') const $editInput = $item.querySelector('input[type="text"]') const value = $editInput.value $editInput.focus() $editInput.value = '' $edit..