진보적인 보행기를 세우다

나는 앤디 벨의 전방 도전 클럽에서 매우 즐겁게 놀았다the latest challenge!나는 그가 어떻게 그것을 실현하는지 보고 싶지만, 나의 방법에 대한 주석도 보고 싶다.

시퀀스 테이블 사용
이 간단한 묘사는 매우 좋은 서열표 용례인 것 같다.

<ol class="progress"> <li>Your basket</li> <li> Your details and also some other stuff you probably skipped over </li> <li aria-current="step">Payment</li> <li>Order complete (no turning back now)</li> <li>Crushing regret</li></ol>

나는 긴 텍스트와 짧은 텍스트를 처리할 수 있도록 부본에 대해 약간의 조정을 했다.나는 또한 aria-current 속성을 사용하여 현재 절차를 표시하는 것을 선택했다.체크 표시 스타일은 시각적으로 이 점을 표시하지만, 이 속성은 화면 판독기에 현재 단계가 무엇인지 표시합니다.
나는 이전에 이 속성이 내비게이션 링크 목록에서 현재 페이지를 표시하는 데 사용되는 것만 보았지만, 이것도 좋은 용례인 것 같다.이 등록 정보를 추가하면 NVDA가 목록 항목을 탐색할 때 현재 단계 결제를 선언합니다.그러나, 같은 작업 방식인지 확인하기 위해 다른 화면 리더와 함께 테스트를 해야 한다.그렇지 않으면 시각적으로 숨겨진 텍스트를 사용해야 할 수도 있습니다.
이 점에서 어떤 스타일이나 스크립트도 없습니다. 우리는 튼튼한 HTML 기반을 가지고 있으며 기본적으로 접근할 수 있습니다.현재 단계에 대한 시각적 지시는 아직 없지만, 우리는 다음 단계에서 토론을 진행할 것이다.

JavaScript로 HTML 확장
기본이 완료되면 JavaScript를 사용하여 HTML을 강화하려면 단계 번호 텍스트와 체크 표시의 상태(예: 선택됨, 부분 선택됨, 선택하지 않음)를 사용합니다.이렇게 하면 이 구성 요소의 사용자는 클래스'progress'가 있는 서열표를 작성하고 aria-current 속성을 사용하여 현재 절차를 표시하면 보행기를 초기화할 수 있습니다.JavaScript가 실행되면 초기화된 목록 항목은 다음과 같습니다.

<li data-state="previous"> <div class="checkmark"> <svg aria-hidden="true"> [Truncated] </svg> </div> <span class="eyebrow"> <span class="counter" aria-hidden="true">01</span> Step one </span> <span class="title">Your basket</span></li>

화면 판독기에 무엇을 숨깁니까?
화면 판독기에 숨길 수 있도록 SVG와 카운터 텍스트에 체크 표시aria-hidden를 설정했습니다.나는 SVG 복선 표시가 불필요하다고 생각한다. 왜냐하면 나는 이미 aria-current로 현재 절차를 지시했기 때문에 계수기의 텍스트는 불필요하다. 왜냐하면 '첫 번째 단계'도 읽히기 때문이다.

데이터 속성을 사용하여 스타일 설정
나는 또한 data-state 에 <li> 속성을 설정하여 그것이 이전 단계, 현재 단계, 다음 단계인지 표시했다.This is taken from the CUBE CSS methodology도 앤디 벨의 작품이다.이것은 CSS와 자바스크립트에 사용할 수 있는 갈고리를 제공합니다.이 속성은 aria-current 속성의 존재를 바탕으로 설정된 것으로 이 속성을 잊지 않도록 합니다.
JavaScript 설정...

const listItems = document.querySelectorAll('.progress li');let hasCurrentBeenReached = false;listItems.forEach((item, idx) => { const current = item.getAttribute('aria-current'); if (current === 'step') { hasCurrentBeenReached = true; item.dataset.state = 'current'; } else if (!hasCurrentBeenReached) { item.dataset.state = 'previous'; } else { item.dataset.state = 'upcoming'; } item.innerHTML = getListItemContents(item.innerHTML, idx);});

CSS에서 사용합니다!

.progress li[data-state='previous'] svg { opacity: 1;}.progress li[data-state='current'] .checkmark { background: var(--color-primary-glare);}.progress li[data-state='upcoming'] .checkmark { border-color: var(--color-secondary); background: var(--color-secondary-glare);}

나는 CSS 클래스를 바꾸는 것이 아니라 이런 데이터 속성을 사용하는 것을 정말 좋아한다.자세한 내용은 위의 CUBE CSS 링크를 참조하십시오.

디지털 단어 생성
all sort of solutions on Stack Overflow개의 단어가 하나의 숫자를 나타낼 수 있다. 예를 들어'첫걸음','두번째 걸음'등이다. 나는 이렇게 번거로울 필요가 없다고 생각한다. 왜냐하면progress stepper는 몇 가지 항목만 있을 수 있기 때문이다.나는 마침내 하드코딩된 그룹을 사용했는데, 만약 그것을 잃어버리면 숫자 자체로 되돌아간다.

const numberWords = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen'];function getEyebrow(index) { const counter = (index + 1).toString().padStart(2, '0'); return ` <span class="eyebrow"> <span class="counter" aria-hidden="true">${counter}</span> ${numberWords[index] ? `Step ${numberWords[index]}` : `Step ${index + 1}`} </span> `;}

JavaScript 주의
JavaScript에서 숫자 텍스트를 설정하고 있으므로 CSS를 사용하여 기본 목록 숫자를 삭제합니다.

.progress[data-init] { list-style: none;}

단, 데이터 속성의 존재를 찾습니다.이런 방식을 통해 우리는 교체가 없는 상황에서 목록 스타일을 앞다투어 삭제하지 않을 것이다.속성을 설정하면 목록 스타일을 안전하게 삭제할 수 있는 디지털 텍스트가 생성됩니다.

progressList.dataset.init = true;

VoiceOver를 사용할 때 목록의 의미를 삭제할 수 있으므로 부모 목록as mentioned by Scott O'Hara에 role=list을 설정했습니다.

스타일링
progress stepper의 실제 스타일은 매우 간단합니다.대부분 각종 원소의 절대적 또는 상대적인 포지셔닝이다.나는 처음부터 모든 양식을 디자인하기 시작했기 때문에 약간의 여분의 양식이 있을 수 있고 더 좋은 기본 양식표로 해결할 수 있다.

생성된 카운터?
나는 확실히 CSS생성계수기('01','02'등)를 사용하고 위조원소를 사용해서 수동으로 <span class="counter">01</span>원소를 추가할 필요가 없다.그러나 나는 스크린 리더가 읽는 것을 막으려고 하기 때문에 불가능할 것 같다.부모 원소가 읽히면 위조 원소가 읽히기 때문에 나는 위조 원소를 숨길 수 없다.
나도 연구에서 @counter-style를 만났는데 이것은 CSS를 사용하여'첫걸음'텍스트를 만드는 방법인 것 같다.그러나 Firefox에서만 지원되기 때문에 나는 그것에 대해 너무 많은 실험을 하지 않았다.
나는 앤디의 해결 방안이 CSS에서 생성한 계수기를 사용했는지, 아니면 그가 나와 비슷한 방법을 사용했는지 보고 싶다.

대화형 프레젠테이션
마지막으로, 목록에 항목을 추가하는 것을 쉽게 하고, 현재 단계에서 이동해서, 프레젠테이션이 서로 다른 상태에서 하는 행동을 보고 싶습니다.페이지 맨 위에 작은 양식이 있으며 목록에 항목을 추가하고 현재 단계를 중심으로 이동합니다.나는 진도선에 매우 만족스러운 CSS 변환을 추가했다.
모든 것이 정확하게 표시되어 있기 때문에, 폼은 접근할 수 있지만, 단추를 눌렀을 때, 변경 내용을 발표하는 데 더 많은 것을 할 수 있습니다.나는 이 점을 철저히 테스트할 시간이 없다. 기술적으로는 도전의 일부분이 아니기 때문에 나는 잠시 그것을 뛰어넘었다.

마무리
시간을 내서 저의 댓글을 읽어 주셔서 감사합니다!나는 이 도전에 매우 흥미가 있어서, 지체없이 다음 도전을 시도하고 싶다.