RAMP 접근성 문제

기여 UX
1

안녕하세요,

저는 RAMP COVID-19 이니셔티브에 참여하고 있습니다. 포럼 플랫폼으로 Discourse를 선택했고, 현재 매우 만족하고 있습니다.

동료와 함께 접근성 문제를 검토하고 있습니다. 관리자 CSS 기능을 통해 대비도가 낮은 문제를 해결했다고 생각합니다. 하지만 WAVE에서 보고하는 몇 가지 문제를 저희가 직접 해결할 수 있을지 확신이 서지 않습니다. 구체적인 내용은 다음과 같습니다:

  • 링크된 이미지에 대체 텍스트가 누락되어 있습니다: 이는 아바타 사진과 관련이 있습니다. 설명적인 제목은 있지만 alt 속성은 비어 있습니다.

  • 모든 페이지에서 라벨이 누락되어 있습니다:

    <div><input type="text"></div>

  • 모든 페이지에서 빈 헤딩이 존재합니다:

    <div class="title"><h3></h3><!-- --></div>

  • svg와 연관된 빈 버튼이 다수 보고되었습니다.

  • 빈 링크가 존재합니다. 예를 들어:
    <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
    그리고
    <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.

  • 빈 테이블 헤더가 존재합니다: <th data-sort-order="posters" class="posters"></th>

저희만이 이러한 문제를 겪고 있을 것이라고는 생각하기 어렵습니다. 따라서 WAVE가 과도하게 문제를 지적하고 있는 것인지, 혹은 저희가 놓치고 있는 부분이 있는 것인지 궁금합니다. 도움이 되신다면 감사하겠습니다.

사전 감사드립니다.
Kostas

8개의 좋아요
2

이 모든 것이 브라우저의 F12 인스펙터를 통해 렌더링된 페이지의 HTML에서 확인됩니까?

1개의 좋아요
3

관심 가져주셔서 감사합니다. 하나를 찾지 못할 것 같은데(빈 제목), 나머지는 WAVE의 “코드” 기능을 통해 찾아낼 수 있고, F12 인스펙터로도(약간의 노력이 필요하지만) 찾을 수 있습니다.

타임존이 우리에게 유리할지는 모르겠습니다(저는 영국에 있으며, UTC+01:00을 사용합니다) 하지만 도움이 된다면 Teams나 유사한 통화를 통해 시연해 드릴 수 있습니다.

1개의 좋아요
4

aria-hidden 속성이 이 링크를 접근성 도구에서 올바르게 숨겨야 합니다.

4개의 좋아요
5

이 중 비교적 쉽게 해결할 수 있는 항목이 있다면, @awesomerobot이 처리해 주실 수 있을까요?

3개의 좋아요
6

네, 이 중 적어도 두 가지는 쉽게 수정할 수 있다고 생각합니다. 더 자세히 살펴보겠습니다.

3개의 좋아요
8

빈 alt 속성 자체는 괜찮습니다… 이는 스크린리더에게 이미지가 장식용일 뿐이므로 무시해도 된다는 신호를 보내기 위한 것이기 때문입니다… 하지만 동시에 title 속성도 포함하고 있습니다… 따라서 `img` with null `alt `and non-null `title` attributes - Screen reader compatibility 에 따르면 이것이 때때로 문제가 될 수 있습니다.

일부 스크린리더는 아바타를 올바르게 무시하지만, 다른 스크린리더는 이로 인해 이름/사용자명을 두 번 읽는 경우가 있습니다.

게시물 아바타에서 title 속성을 제거하기 위해 PR을 만들었습니다:

이는 복사 및 공유할 URL을 표시하는 입력 필드입니다. 여기에 aria 라벨을 추가하기 위한 PR:

이것은 찾지 못했습니다… 사이트 설정에 기반한 것일까요? 더 자세히 살펴봐야 할 것 같습니다.

시각적인 사용자의 경우, 열을 한눈에 보고 그 내용을 추측할 수 있으므로 라벨을 붙이지 않습니다… 하지만 볼 수 없는 경우 그렇게 하는 것이 훨씬 어렵습니다… 스크린리더를 위해 라벨을 추가하는 것이 합리적입니다:

다루지 않은 나머지 문제는 버튼과 관련되어 있으며, 여전히 조사해야 합니다…

8개의 좋아요
9

안녕하세요,

당시에 신속한 응답과 조치에 진심으로 감사드립니다. 병합된 요청사항이 특정 버전부터 코드에 반영되었는지 확인이 가능할까요?

또한, WAVE 접근성 테스트를 통과하도록 수정한 테마를 정리하여 공유해 드리는 것이 도움이 될까요?

감사합니다.
Kostas

1개의 좋아요
10

네, 최신 discourse에는 해당 수정 사항이 포함되어 있습니다.

테마를 공유해 주시면 감사하겠습니다.

2개의 좋아요
11

나중에 (기대하기로는) 용기를 내어 모든 업데이트를 진행하고 다시 보고하겠습니다.

테마에 관해서는 상황이 다소 복잡해졌습니다. 우리는 Light 테마를 사용(및 수정)하고 있습니다. 색상에 대해 다음과 같은 고수준의 변경 사항을 적용했습니다:

Tertiary:   #0088cc → #006498
Quaternary: #e45735 → #C93C1B
Danger:     #e45735 → #C93C1B
Success:    #009900 → #007A00

늦게 떠올린 영리한 방법은 색상 페이지의 접근성을 테스트하는 것입니다. :-

그 후 CSS 편집기(admin/customize/themes/3/common/scss/edit)를 사용하여 대량의 변경 사항을 수행했는데, 이를 어떻게 전달해야 할지 잘 모르겠습니다(복사-붙여넣기는 가능하지만, 이것이 원하시는 방식인지, 그리고 이 스레드에서 공유하는 것이 적절한지 확실하지 않습니다). var(–primary-medium)와 같이 언급된 다른 색상들을 고수준 인터페이스에서 볼 수 있다면 상황이 더 쉬워질 수 있다고 생각합니다. 예를 들어, 전형적인 경우로 #919191 → #595959가 있었는데, 제 방식은 페이지를 탐색하면서 제가 어렴풋이 발견하는 증상만 처리하는 수준입니다(그리고 "사이트"의 동적인 특성상 오늘 통과한 것이 내일에도 통과할지는 장담할 수 없습니다).

다른 방식으로 시도해 볼 수도 있으니 알려주세요. 다만, 데모 서비스를 실행하거나 코드를 확인하는 등의 작업은 어떤 경우에도 수행할 수 없습니다.

또한 admin/upgrade를 전혀 수정할 수 없었음을 언급해야 합니다(여기에는 수많은 대비 문제가 있습니다). CSS를 따르지 않는 것인지, 아니면 그 이유가 무엇인지 확실하지 않습니다.

3개의 좋아요
12

styleguide 플러그인은 모든 색상을 보여줍니다 :slight_smile:

https://theme-creator.discourse.org/styleguide/atoms/colors

13

제 기억으로는 Discourse의 관리자 측에는 CSS 변경으로 인해 사용 가능한 관리자 인터페이스에 접근할 수 없게 되는 사고를 방지하기 위해 별도의(수정하기 더 어려운) 스타일 시트가 있습니다.

14

이 부분은 좀 늦게 답장하게 되었지만, 포럼은 업그레이드했습니다. 이 스레드를 확인해 주신 분들에게(감사합니다!) 답장을 남기고자 합니다.

감사합니다. 링크를 클릭하면 Wave에서 13개의 접근성(낮은 대비) 문제가 발견되지만, 색상 자체에는 문제가 없습니다. 이는 색상 페이지와 달리 배경색 또는 텍스트와 함께 사용될 때의 상태(배경 또는 전경)를 보여주지 않기 때문입니다.

어떻게 도와드릴 수 있는지 알려주세요. 많은 대비 오류가 있습니다.

15

다시 인사드립니다.

다시 한번 확인해 보니 오류 수가 크게 줄었습니다. 도움을 주신 @awesomerobot 님과 다른 분들께 진심으로 감사드립니다!

아직도 다음과 같은 오류가 발생합니다:

  • 카테고리 방문 시: 다음 코드에서 빈 버튼:
    • <button name="Filter by: [missing %{name} value]" role="combobox" data-name="regular" data-value="1" aria-expanded="false" aria-haspopup="menu" aria-owns="ember41-body" tabindex="0" id="ember41-header" class="select-kit-header single-select-header btn-default dropdown-select-box-header btn no-text btn-icon ember-view" type="button">
    • ember 뒤에 다른 숫자가 오는 다른 페이지에서도 마찬가지입니다.
  • 카테고리 방문 시: 빈 테이블 헤더:
    • <th data-sort-order="posters" class="posters" aria-label="Posters"></th>
  • “system” 사용자의 게시물: 링크된 이미지에 대체 텍스트가 없습니다:
    • <img alt="" src="/user_avatar/ramp-forums.epcc.ed.ac.uk/system/90/1_2.png" class="avatar" width="45" height="45">
  • 모든 게시물: 빈 링크
    • <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
    • 그리고 위 선언문의 요소 순서 변경 사례들
  • 유효한 결과가 있는 검색: 빈 제목
    • <h3 class="search-footer"><!----></h3> (여기서는 포맷을 편집하여 공백과 줄바꿈을 삭제했습니다)
  • 유효한 결과가 있는 검색: 고급 검색에서 5개의 폼 라벨 누락 (필요하다면 더 많은 정보를 제공할 수 있습니다)

도움을 주시면 매우 감사하겠습니다.

16

그리고 또 하나:

  • 평가가 있는 게시물에서 (Discourse 전체에서 이 기능이 얼마나 널리 채택되었는지 확실하지 않음, @angus가 우리를 위해 친절하게 개발한 확장 기능임): 누락된 폼 라벨
    • 제가 보고 있는 페이지에는 두 명의 사용자가 평가를 한 상태인데, 다음과 같이 보이는 인스턴스가 무려 40개나 있습니다: <input class=" disabled" type="radio" value="1" checked="" disabled="">. 이는 <span class="star-rating"> 아래에 있습니다.
1개의 좋아요
17

안녕하세요 @KKavoussanakis :slight_smile:

@fzngagan 그 건 바로 확인해볼게요.

1개의 좋아요
18

@fzngagan 님도 언급했어야 했는데, 죄송합니다. 관심을 가져주셔서 감사드리고, 다시 연락을 주시니 반갑습니다.

2개의 좋아요