dev.to accessibility [제1부분] - 4개의 복구, 10분도 안 걸려요!

요약

Dev.to는 매우 쉽게 접근할 수 있지만, 그들은 약간의 작은 일을 해서 개선할 수 있다.
이 시리즈의 일부분으로서, 나는 dev.to가 접근성을 높이는 데 할 수 있는 일을 천천히 제시할 것이다.이것은 dev.to에 대한 공격이 아니다. 나는 Ben, Jess 등이 이 점을 보고 누가 무장애성을 위해 건의를 하든지 간에 매우 간단한 것과 빠른 승리가 부족하다는 것을 알아차리기를 바란다.이런 일에 있어서 두 번째 눈을 가지는 것은 항상 좋은 것이기 때문에 나는 두 번째 눈이 되고 싶다!
첫 번째 문장에서 내가 일컫는'10분 복원'또는'분류'4가지 복원부터 시작하자!

1. 사이드바 탐색 아이콘

첫 번째는 간단한 해결 방안입니다. 저는 처음부터 매우 간단하다고 생각합니다!20초 복구입니다.
홈 SVG 아이콘에는 제목이 있습니다. 좋습니다. (보통)
그러나 여기에는 이미 텍스트'홈'이 있는 닻에 위치하기 때문에 링크 텍스트는 일부 화면 리더에서'link 홈 graphic 홈'을 읽습니다.

1. 솔루션

SVG에서 제거<title>!
완전성을 위해서, 나는 role="presentation"와 focusable="false"를 사용하여 IE의 오류를 복구하는 것을 권장한다. IE에서 SVG가 페이지의 초점 순서에 추가된다. (인터넷 Explorer의 사이트 기능을 가정하면... 아직 검사하지 않았다.)

새로운 html:

<a href="/" class="crayons-link crayons-link--block">
    <!-- add role="presentation" and focusable="false" -->
    <svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24" role="img" aria-labelledby="aofnu596u25u51zk4lid8elbrz1m351y" class="crayons-icon crayons-icon--default">
!<--remove the title -->
<title id="aofnu596u25u51zk4lid8elbrz1m351y">Home</title>
<!-- rest of SVG as normal -->
    <g class="nc-icon-wrapper">
        [SVG paths]
    </g>
</svg>
    Home
  </a>

간단하다

2. 제목

이 사이트는 제목 단계를 건너뜁니다.
사실 페이지의 첫 번째 제목은'나의 라벨'이라는 제목<h3>이다.
페이지의 다음 제목<h2>은'다시 데이브의 재킷을 입는다'는 뜻이다.
그리고 우리는 페이지에 있는 <h1>에 들어갔고 모든 다른 제목은 <h3>의 댓글이었다.
제목은 화면 판독기 사용자가 페이지의 제목 순서를 잘 아는 가장 일반적인 방식 중 하나이기 때문에 이 점은 매우 중요하다.
우리는 위의 모든 내용을 사라지게 할 수 있다. 왜냐하면 나는 이러한 용법의 배후 원인을 이해할 수 있기 때문이다. 그러나 가장 중요한 것은 아나운서가 a<h2>를 사용했기 때문이다.

나는 이것이 아나운서를 제목 구조에서 더욱 돋보이게 하려는 의식적인 결정인지 모르겠지만, 아나운서 아래의 모든 다른 게시물이 아나운서의 하위 제목인 것 같아서 페이지의 논리적 구조를 완전히 파괴했다.

왜 그것이 중요합니까?

화면 리더 사용자는 1-6키를 사용하여 제목을 순환적으로 조회한다(각각 h1-h6). 이것은 사이트를 조회하는 주요한 방식 중의 하나이다.
만약 화면 리더를 사용하는 사람들이 <h3>s를 사용하여 dev.to에서 글을 조회하는 것에 습관이 된다면 그들은 팟캐스트를 완전히 놓칠 수 있습니다!
이 밖에 앞에서 논의한 제목 단계의 오류는 중요한 항목을 빠뜨렸다는 것을 의미할 수 있다.

2. 솔루션

제목 레벨과 DOM 순서를 조금만 조정하면 모든 것이 완벽할 것이다.
첫 번째 문제를 해결하려면 소스 코드의 <h1>를 DOM의 첫 번째 항목으로 이동하면 됩니다.이것은 내가 이 점이 실현되었는지 이해할 수 있도록 시각적 기교를 사용하거나 페이지를 가볍게 재구성해야 할 수도 있다.
그러나 나머지 항목에 대한 복구는 간단합니다!
'나의 라벨'이라는 제목을 하나<h2>로 바꾸는 것이 더 의미가 있기 때문이다.
리스트, 뉴스 등(오른쪽 내비게이션)도 마찬가지다.화면 판독기 사용자가 그것들을 쉽게 발견하고 이동할 수 있기 때문에 더욱 의미가 있다.
마지막으로 팟캐스트 a<h2>를 제작하면 그들이 페이지의 관계를 파괴하지 않을 것이다.

3. <h3> 속성 없음

이제 나는 네가 무슨 생각을 하고 있는지 알고 있다. 너는 사용자의 내용을 통제할 수 없다. (물론 우리는 할 수 있지만, 이것은 간단한 해결 방안이 아니다. 미래의 기사에 더 많은 내용이 있을 것이다.)
하지만 DEV merch 왼쪽의 광고는 DEV.to가 통제하는 것이 틀림없다.

3. 솔루션

그림에 alt 속성 추가!
그림이 닻 라벨에 포장되어 있는 것도 또 다른 문제를 해결했다.현재 앵커 표시는 식별할 수 있는 텍스트가 없습니다.alt 속성을 추가하면 이 문제를 해결할 수 있습니다. 접근 가능한 트리를 구축할 수 있기 때문에 alt 속성을 하이퍼링크의 텍스트로 사용할 수 있습니다.
2 대 1로 승리!(비록 내가 다시 이 점을'재조정'할 수 있지만 두 개의 닻이 같은 위치를 가리키기 때문이다. 이상적인 상황에서 이미지와 텍스트는 한 닻에 있어야 한다. 이런 상황에서 우리는 alt 등 숨겨진 이미지를 사용할 것이다.)

4. 화면 판독기가 아닌 사용자의 키보드 사용

너는 매 문장마다 몇 개의 표 제작 위치가 있는지 아니?8에서 12 사이, 추가된 탭의 수량에 따라 달라집니다!
그래서 만약에 제요 중의 10번째 문장을 보고 싶다면, 80에서 100개의 표위 사이...너무 힘들어!

4. 솔루션

매 문장의 구조가 나를 곤혹스럽게 한다.
우선, 전체 글은 하이퍼링크이다. 이것은 하이퍼링크가 끼워져 있다는 것을 의미한다. 따라서 이것은 HTML standards에 대한 것이다. 이 상태는 다음과 같다.

Anchor Content model:
Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

그리고 사용자 프로필 이미지는 그들의 프로필에 대한 링크입니다. 그러나 그들의 이름도 그렇지만 단독 링크로서!
그럼 날짜를 링크로 할까요?그러나 이것이 바로 이 문장을 끌어냈다.그리고 우리는 문장 텍스트가 있다...이것도 문장의 도입부다.
그리고 우리는 라벨이 있는데, 각 라벨은 단독 라벨을 가리킨다. (이것은 매우 좋다.)
그리고 우리는 반응과 평론을 했다. 이 모든 것이 문장을 만들었고, 마지막은 저장 단추였다.
그들은 어떻게 해야 합니까?
우선, 전체 문장 주위의 하이퍼링크를 삭제하는 것은 특별히 유용하지 않다. 화면 독자에게 모든 내용을 링크 텍스트로 읽을 수 있다는 것을 의미한다. (명확하게 보기 위해 그들이 사용한 것alt=""은 무시될 수 있다. 왜냐하면 문장 링크에 활동 요소가 있기 때문이다).
그 다음에 우리는 개인 자료 사진과 링크 텍스트를 단독 링크로 처리해야 한다.
자동 테스트 도구를 흐트러뜨릴 수 있는 조언을 드리겠습니다. aria-labelledby 프로필 그림에 추가하십시오.이것은 마우스로 클릭할 수 있기 때문에 가장 간단한 복구 방법이다.더 좋은 해결 방안이 있지만, 이것들은 모두 간단한 해결 방안이다!
다음 단계에서 날짜의 하이퍼링크를 삭제하면 글을 만들 수 있기 때문에 의미가 없습니다. 왜냐하면 글 제목도 글을 만들 수 있기 때문입니다.
그리고 글 제목 ((tabindex="-1" 의 링크와 탭의 링크를 변하지 않게 유지합니다. (개인적으로는 탭 위치를 저장하기 위해 삭제하지만, 아기 단계는 저장하지 않습니다.)
다음은 반응과 댓글의 하이퍼링크를 삭제합니다. 여기서는 쓸모가 없습니다.
한 문장의 꼬리표 순서는 모두

Focus Article            >     link to article
Focus profile picture    >     link to profile
Focus author name        >     link to profile
Focus date               >     link to article
Focus H3 title           >     link to article
Focus tags (1-4)         >     link to tag(s) (1-4)
Focus reactions          >     link to article
Focus comments           >     link to article comments*
Focus "save"             >     save the article

* (leave link to comments maybe?) However I would argue that a skip to comments within the article is more usable as who comments without reading an article anyway?

다음을 수행합니다.

Focus author name        >     link to profile
Focus H3 title           >     link to article
Focus tags (1-4)         >     link to tag(s) (1-4)
Focus "save"             >     save the article

5개의 탭 위치를 절약한다는 것은 10번째 문장에 도달하려면 현재 50번의 버튼을 줄여야 한다는 것을 의미한다!
* 주의: * 이것은 내가 여기서 할 유일한 일이 아니지만, 이것들은 모두 간단한 복구입니다. 화살표 키 컨트롤을 추가해서 위아래로 누르면 문장 사이를 전환할 수 있습니다.저는 DOM 순서나 글의 항목을 바꾸어 제목<h3>을 글의 첫 번째 항목으로 만들 것입니다. 그러나 이것은 약간의 사고와 가능한 재설계가 필요합니다. 그리고 이것들은 모두 간단한 개선입니다!

결론

상술한 복구는 시간이 거의 걸리지 않을 뿐만 아니라 접근성도 크게 개선될 것이다.
이 시리즈의 다음 부분에서, 나는 키보드 기능에 더욱 관심을 기울일 것이다. 초점 표시기 고장, 추가 컨트롤 (예를 들어 화살표 키를 사용하여 글을 더 빨리 볼 수 있음), 그리고 모든 키보드 사용자의 재난 - 무한 스크롤!
이 글은 매우 온화한 소개이며, 다음 글에서는 내가 언급한 모든 부분에 영향을 미치는 WCAG 안내서에 연결하기 시작할 것이다.
이 글의 영감은 최신 개발자에게서 왔다. 팟캐스트에 대해 들어보자!

A11yship은 다차원적입니다. 크리스탈 프레스톤 왓슨과 Marcy Sutton이 있습니다.

개발팀의 벤 할버른・ 3월 24일 21일・ 2분 읽기

#discuss #podcast #a11y

벤, 제시 - 무장애 지침이 필요하시면 저에게 연락 주세요. 제가 설립한 지역사회에 보답을 드릴 수 있기를 바랍니다.😋 ❤

초과의

"또한""적절한""복구를 구현하는 동시에 접근성을 단기적으로 분류하는""액세스 용이성 향상""시리즈에 대한 보완 방안도 제공했습니다."
시리즈의 첫 번째 부분을 보려면 다음과 같이 하십시오.

dev.to에서 GIF 애니메이션을 일시 중지하여 "단순화된 동작을 좋아하는 사용자를 만족시키십시오.[hack 1]

비공식적・ 3월 25일 21일・ 6 분 읽기

#javascript #a11y #inclusion #webdev