Accessibility: docs code examples/link styling is very confusing and has insufficient contrast

Đang mở
#6,111 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ

Hướng nghiên cứu

Bắt đầu bằng cách xem lại trang tài liệu createContext ở cả chế độ sáng và tối, sau đó chạy trình kiểm tra khả năng truy cập trên các styles đã được báo cáo. Hoàn thành khi các liên kết, giá trị mã và khái niệm có thể được phân biệt bằng mắt, đồng thời các vấn đề về độ tương phản văn bản được báo cáo đáp ứng các yêu cầu của WCAG.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

In the documentation, the styling is really confusing.

Here's an example, taken from the docs for createContext in dark mode, although the issue is present in light mode as well:

image

Here you can see:

  • a text link ("pass information deep down") which is blue and not underlined and has no background color
  • variables in source code, which are a similar shade of blue on a darker blue background, with a bottom box border, and aren't clickable
  • string values in source code, same as above but purple on purple
  • a concept in text ("context object"), variable width text, same colorations as source variables, not clickable
  • another concept ("default values") same as above but purple
  • a text link which is a function name (useContext()), blue monospaced text on a gray background

This assortment of similar-but-different color combinations is making it hard for me to read. Everything with a box bottom border looks like a link and I keep trying to click them out of habit that they're a crossreference. The use of blue and purple for "context object" and "default values" also add to the problem because they look like unvisited/visited links. At the very least, could you please consider changing either your source code highlights or your link color to be something drastically other than blue?

Running an accessibility checker on the pages also shows that many of the styles fail WCAG accessibility standards for text contrast.

image
Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
16 giờ 6 phút
Pull request đã merge (30 ngày)
7

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của reactjs/react.dev

Tất cả issue của reactjs/react.dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.