Vui lòng gắn dấu sao cho lỗi Chrome để tăng mức độ ưu tiên của lỗi
Đây là một lỗi trong Chrome. Vui lòng thêm một ngôi sao cho vấn đề này để tăng mức độ ưu tiên cần khắc phục:
https://bugs.chromium.org/p/chromium/issues/detail?id=375693
Đồng thời, tôi đã tạo ra ba ví dụ về Code Pen này để chỉ ra cách khắc phục vấn đề. Chúng được xây dựng bằng CSS Grid cho các ví dụ nhưng các kỹ thuật tương tự có thể được sử dụng cho flexbox.
Sử dụng aria-labellingby thay vì truyền thuyết
Đây là cách propper hơn để giải quyết vấn đề. Nhược điểm là bạn phải đối phó với việc tạo ID duy nhất được áp dụng cho mọi yếu tố huyền thoại giả.
https://codepen.io/daniel-tonon/pen/vaaGzZ
<style>
.flex-container {
display: flex;
}
</style>
<fieldset aria-labelledby="fake-legend">
<div class="flex-container">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
</fieldset>
Sử dụng vai trò = "nhóm" và aria-labellingby thay vì fieldset và huyền thoại
Nếu bạn cần hộp chứa flex để có thể kéo dài theo chiều cao của phần tử anh chị em và sau đó truyền lại phần đó cho con của nó, bạn sẽ cần sử dụng role="group"thay vì<fieldset>
https://codepen.io/daniel-tonon/pen/BayRjGz
<style>
.flex-container {
display: flex;
}
</style>
<div role="group" class="flex-container" aria-labelledby="fake-legend">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
Tạo một huyền thoại trùng lặp giả cho mục đích tạo kiểu
Đây là một cách khó khăn hơn nhiều để làm điều đó. Nó vẫn có thể truy cập được nhưng bạn không phải đối phó với ID khi thực hiện theo cách này. Mặt trái chính là sẽ có nội dung trùng lặp giữa yếu tố truyền thuyết thực và yếu tố huyền thoại giả.
https://codepen.io/daniel-tonon/pen/zLLqjY
<style>
.screen-reader-only {
position: absolute;
opacity: 0;
pointer-events: none;
}
.flex-container {
display: flex;
}
</style>
<fieldset>
<legend class="screen-reader-only">
I am a real screen-reader accessible legend element
</legend>
<div class="flex-container">
<div class="flex-child" aria-hidden="true">
I am a fake legend purely for styling purposes
</div>
...
</div>
</fieldset>
Truyền thuyết PHẢI là người phụ thuộc trực tiếp
Khi bạn lần đầu tiên cố gắng tự sửa lỗi này, có lẽ bạn sẽ thử làm điều này:
<!-- DO NOT DO THIS! -->
<fieldset>
<div class="flex-container">
<legend class="flex-child">
Broken semantics legend text
</legend>
...
</div>
</fieldset>
Bạn sẽ khám phá ra nó hoạt động, và sau đó bạn có thể sẽ tiếp tục mà không cho nó một ý nghĩ thứ hai.
Vấn đề là việc đặt một trình bao bọc div giữa trường và huyền thoại phá vỡ mối quan hệ giữa hai yếu tố. Điều này phá vỡ ngữ nghĩa của lĩnh vực / huyền thoại.
Vì vậy, bằng cách này, bạn đã đánh bại toàn bộ mục đích sử dụng fieldset / huyền thoại ngay từ đầu.
Ngoài ra, không có nhiều điểm trong việc sử dụng một bộ trường nếu bạn không cho huyền thoại đó.