5성급 등급 평가 시스템 - 실제로는 접근 가능합니다. JS가 없고 WAI-ARIA와 의미 HTML이 없습니다!⭐⭐⭐⭐⭐ [어떤 프레임으로든 쉽게 전환할 수 있습니다!]

본고에서 저는 어떻게 성급 시스템을 구축하는지 설명할 것입니다. 이 시스템은 실제적으로 접근할 수 있고 사용자의 요구에 따라 스타일을 디자인하기 쉬우며 의미를 사용하는 HTML 프레임워크에 집적하기 쉽습니다.
바쁘시면 건너뛰세요 straight to the first example

소개하다.

나는 최근에 몇 개의 공유된 성급 평가 시스템을 보았는데 스크린 리더(사람들이 큰 소리로 사이트를 읽거나 맹문으로 전환할 수 있는 장치)를 사용하거나 키보드에 의존하는 사람(운동장애/정확성 문제를 앓는 사람, 예를 들어 파킨슨병, 뇌마비 등)은 전혀 방문할 수 없다.
저자가 코드를 세계에 발표했을 때, 그들은 생각이 부족했고, 이로 인해 접근성이 부족해져서, 나는 이것에 대해 낙담했다.
그리고 사람들은 예시 코드를 아무런 생각 없이 복사하고 붙일 뿐이다(또는 그들은 개발 초보일 수도 있고 접근성을 모를 수도 있다). 접근성 문제는 영원히 존재할 것이다(그래서 왜...13년 전에 우리는 설계할 수 없었다<button>s.나쁜 습관을 죽이는 데 걸리는 시간이야!)
어쨌든 이것은 나의 분노의 포효가 아니다. 그래서 이것은 내가 이 문제를 해결하고자 하는 첫 번째 공헌이다. 진정으로 방문할 수 있는 스타 평가 시스템이다.

액세스 가능한 성급 평가 시스템

왜 이것은 네가 이전에 본 다른 예보다 낫니?

는 의미가 정확한 요소인 radio를 입력한다. 이것은 등급 평가 사이의 선택이기 때문이다.

그것이 가지고 있는 의미가 정확한 원소no need for WAI-ARIA which doesn't actually have as much support as people think를 사용한다.

는 몇 가지 작은 조정만 하면 work all the way back to IE9로 조정할 수 있다는 점still a lot of screen reader users (12.4%!) using IE9, 10 and 11과 마찬가지로 중요하다.

자바스크립트가 없기 때문에 저렴한 하드웨어에서도 속도가 매우 빠르다.

모든 프레임에 적용...라디오 그룹 값을 표준 라디오 그룹으로 연결하기만 하면 됩니다.

SVG의 선택, 선택 안 함 및 서스펜스 상태, 표시 크기만 변경하면 필요에 따라 스타일 설정을 할 수 있습니다.나는 당신이 더 좋은 SVG를 만들 수 있도록 격려합니다. 왜냐하면 그것들은 매우 거칠기 때문에 시범 목적으로 사용할 수 있습니다.

이것은 당신이 원하는 여러 개의 별을 지원할 것입니다. (어떤 것을 조정하고 CSS에 규칙을 추가해야 하지만)

CSS와 HTML을 안전하게 복사하고 접근할 수 있음을 알 수 있습니다!

액세스 가능한 별표 평가 시스템의 예

키보드, 마우스, 스크린 리더 등을 사용해 보세요. 완벽하게 작동할 수 있을 겁니다.

IE9, IE10 및 IE11 호환성

IE9에서 작동하지 않는 것은 두 가지뿐입니다. IE10과 IE11입니다.
첫 번째는 CSS 변수를 사용하기 때문에 이러한 변수를 실제 값으로 바꾸기만 하면 됩니다.
두 번째는 focus-within 상자 주위에 초점을 맞추는 것이다.IE에 대해 우리는 별을 포함하는 <span> 주위에 초점 표시기를 설치할 뿐이다.
두 번째 예의 묘미는 키보드를 사용하여 프로젝트에 초점을 맞추면 모든 것이 어떻게 작동하는지 볼 수 있다는 것이다.(라벨이 어떻게 쌓여 있는지, 서로 다른 너비가 우리의 성급 효과에 도달할 수 있는지 볼 수 있다).

무장애 성급 평가 시스템 IE9+

논리에 대한 해석.

<fieldset>는 의미가 정확한 컨트롤 그룹 방식이다."단추"는 모두 같은 항목 (당신의 성급) 과 관련이 있기 때문에, 화면 리더 사용자로 하여금 그들이 무엇을 대답하고 있는지 알게 한다.
이것은 논리에 가장 부합되는 HTML 폼 요소이기 때문에 <input type="radio"> 사용합니다.여러 옵션이 있지만 한 번에 하나만 선택할 수 있는 경우 radio 단추를 사용해야 합니다.
올바른 연관이 있는 태그를 입력했는지 확인하려면 태그for를 사용하여 해당 ID와 관련된 입력을 가리킵니다. 화면 판독기 사용자는 입력의 용도를 알 수 있도록 정확한 연관된 태그가 필요하기 때문입니다.그렇지 않으면 그들은 '입력' 만 들을 것이다. 이것은 매우 유용하지 않다.
참조용으로만 다음과 같은 방법으로 태그를 입력과 올바르게 연관시킬 수 있습니다.

<label>
   <input type="radio">
</label> 

그러나 분명히 Dragon Naturally Speaking struggles with implicit labels 그래서 나는 가장 큰 호환성을 추구한다.

라벨 중의 <span>s는 어떻게 된 일입니까?

<span> 화면 판독기 사용자에게 적합합니다.
나는 visually hidden text 라는 클래스로 텍스트를 직관적으로 숨겼다.
이 텍스트는 화면에 표시되지 않지만 화면 판독기 사용자는 읽을 수 있습니다.
이렇게 하면 그들이 성급 평점 시스템에 관심을 가지고 옵션을 선택하면'당신의 평점: 3','당신의 평점: 4'등 비슷한 소리를 들을 수 있다.
만약 이 점이 없다면, 그들은 내가 라벨을 제공했지만, 그 안에 텍스트가 없는 것처럼 '입력' 만 들을 것이다.
너는 내가 <input>에 똑같은 스타일을 적용해서 시각적으로 보이지 않지만, 화면 리더는 여전히 접근할 수 있다는 것을 알게 될 것이다.
이것은 대다수 스타의 등급 평가 시스템에 존재하는 가장 큰 문제이다. 그들은 <input>로 숨겼다display: none.
이것은 더 이상 탭을 사용해서 초점을 맞출 수 없다는 것을 의미하기 때문에 키보드만 사용하는 사람에게는 전혀 사용할 수 없다.

색깔도 중요해요.

여기에 매우 빠른 예가 하나 있다. 색깔의 대비가 매우 중요하다.
많은 성급 평가 시스템은 테두리가 없는 노란색 별을 사용한다.배경과 끔찍한 대비를 이룬 것으로, 대비도가 낮은 사람에게는 문제가 될 수 있다.
그래서 내 별 주위에는 짙은 회색의 테두리가 있기 때문에 대비도 감지 장애가 있는 사람(또는 햇빛이 직사하는 곳에서 이 사이트를 사용하려는 사람......낮은 대비도의 사이트에서 얼마나 짜증나는지 알 수 있을 거라고 믿는다!)
나는 또 항성의 현재 상태에 따라 그것들의 경계 크기를 다르게 하는 별도의 절차를 했다.이것은 시각적 차이를 색깔에 완전히 의존하지 않게 한다.만약 당신이 자신의SVG를 창설한다면, 나는 당신이 색깔뿐만 아니라 비슷한 일을 해서 시각적인 차이를 제공하도록 격려할 것입니다.

간단하게 자신의 요구에 적응하다

만약 당신이 다른 아주 간단한 아이콘을 사용하고 싶다면.
SVG, 충전된 버전, 충전되지 않은 버전, 정지된 버전 세 가지가 필요합니다.CSS를 변경해야 하는 경우가 없도록 사각형이어야 합니다.
그리고copy the SVG text into this converter press "convert" and then copy the result.
"background image:"이후의 CSS를 변수 --unchecked-image (별 없음), --checked-image (선택한 별), --hovered-image (정지 상태) 에 붙여넣습니다.
만약 네가 원한다면, 너도 10성 시스템을 사용할 수 있다. 이 예에서, 나는 --max-stars CSS 변수를 10으로 바꿀 것이다.
정확한 수량의 라디오 단추를 추가하고 --max-stars CSS 변수를 변경하여 일치시키면 2 ~ 10개의 별을 얻을 수 있습니다.
마지막으로, 나는 CSS를 설계해서, 이렇게 하면 너의 문서에 누설되지 않을 것이다. (공교롭게도 같은 CSS 변수 이름을 사용하지 않았다면!)따라서 종속 연결 문제가 발생하지 않도록 복사하고 붙여넣을 수 있어야 합니다.

마지막으로 이 모든 것을 성공시키는 비결

만약 네가 이 원소들을 검사한다면, 너는 내가 약간 부정행위를 한 것을 발견할 것이다.
내가 하는 일은 라벨을 한데 접는 것이지만, 라벨을 접을 때마다 라벨 하나하나를 조금 작게 (별의 너비는 조금 작게) 해야 한다.
그런 다음 배경(SVG)을 반복하고 레이블을 채웁니다.
따라서 4성 평가 시스템에 대해 우리는 4개의 라벨이 있다.별 4개의 폭은 100%, 별 3개의 폭은 75%다.이것은 네 번째 별을 멈추거나 눌렀을 때 밑에 있는 탭에 있고, 세 번째 별을 눌렀을 때 위에 있는 탭에 있다는 것을 의미한다.
우리는 별이 될 때까지 이 과정을 반복했다.
유일하게 짜증나는 것은 논리적 DOM 순서를 유지하기 위해서 (아래 화살표를 누르면 별 수를 늘릴 수 있도록) 마지막 옵션을 뒤에 놓아야 한다는 것이다. (물론 앞에 놓아야 한다.)

Mini bonus fiddle 도움말 JS 라이브러리 사용

만약 당신이 JS에서 성급 시스템의 현재 값을 얻고 싶다면, 그것은 매우 간단합니다. (선택기/원칙을 사용하여 당신이 사용하고 있는 모든 JS 프레임워크로 변환할 수 있습니다.)

var rating = 0;

document.querySelectorAll('.star-rating input[name="rating"]').forEach(function(radio){
   radio.addEventListener('change', function(){
      rating = document.querySelector('.star-rating input[name="rating"]:checked').value;
   });
});

여기서 보실 수 있습니다.
분명히 JS가 없는 상황에서 프로그램 전체가 실행될 수 있습니다. 일반적인 폼인 POST/Submit의 일부분으로 사용할 수 있지만, 변환이 얼마나 쉬운지 보여주기 위해 추가할 수 있을 것 같습니다.

총결산

나는 접근이 가능하고 브라우저의 범위가 높은 등급 평가 시스템에 대해 상술한 내용은 매우 간단하다고 생각한다.
지금, 내가 무장애성을 선전할 때, 만약 누군가가 잘못을 주의한다면, 반드시 나를 바보라고 부르고 그것을 지적해 주십시오!제가 실수하지 않았으면 좋겠어요.🤞.
그럼에도 불구하고, 나는 위의 내용을 정말 방문할 수 있을 것이라고 자신하고, 나도 네가 자신의 프로젝트에서 그것을 사용할 수 있다고 자신한다.

이 정보를 공유하고 전파하세요!

만약 충분한 사람이 이 글을 읽었다면, 이것은 인터넷상의 구성 요소가 될 것이며, 모든 사람이 그것을 방문할 수 있기를 바란다.
작업을 단순화하려면 아래의 공유 버튼을 클릭합니다.