progress
max, value 값을 설정해서 max 대비 몇 퍼센트인지 진척사항을 나타낸다.value
- 값은 0~1 사이 값.
- 값을 설정하지 않으면 무한 로딩으로 표현됨.
접근성
스크린 리더를 위해서 무엇에 대한 프로그레스인지 표시 해야한다.
화면에 라벨링이 보이지 않아야 하는 경우
aria-label, aria-labelledby 속성으로 스크린리더를 위한 텍스트를 지정한다.// 다른 요소도 없고 라벨도 추가하지 않을 거다. 하는 경우에는 스크린리더를 위한 텍스트를 설정하면 됨. // 화면에는 보이지 않지만 스크린 리더가 읽습니다. <button aria-label="Close">X</button>
// 다른 요소를 참조하여 라벨로 사용하는 경우 <h2 id="heading">Download progress</h2> 블라블라 뭔가 많음 <progress aria-labelledby="heading" value="50" max="100"> 70% </progress>
라벨 텍스트가 화면에 보여도 되는 경우
label 태그로 연관지으면 된다.<label for="email">Email:</label> <input id="email" type="text">