html - 如何使之前/之后的图像滑块符合 WCAG？

Question

下面我提供了一个演示小提琴链接和代码片段到一个简单的前后图像滑块。它使用一个真正的“img”标签和一个带有背景图像属性的“div”，因为事实证明，这种设置更容易使其响应屏幕转换。它还使用屏幕外输入范围元素来允许键盘可访问性，但屏幕阅读器可访问性是我在网上查找资源时遇到困难的地方。我不知道该功能属于Image Concepts W3C 指南的哪个位置。它是否有资格作为一组图像、复杂图像或其他东西？

我是否只是在实际图像标签的替代文本中描述图像的差异？或者我是否在最外面的 div 容器中使用了一些特殊的标签来描述这个滑块的作用？这似乎令人困惑，因为这是一个纯粹的视觉特征。

小提琴演示：https ://jsfiddle.net/o3nyv1pf/34/

HTML：

<div class="slider-container">
  <input type="range" value="50" max="100">
  <div class="slider"></div>
  <img class="before" src="https://www.w3schools.com/css/lights600x400.jpg">
  <div class="after"></div>
</div>

CSS：

.slider-container {
  display: flex;
  position: relative;
  width: 500px;
}

.slider {
  position: absolute;
  z-index: 100;
  cursor: ew-resize;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
}

input {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input:focus + .slider {
  outline: -webkit-focus-ring-color auto 1px;
}

.before {
  position: relative;
  width: 100%;
  height: auto;
}

.after {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
}

JS：

let sliderContainer = document.querySelector(".slider-container");
let afterImage = sliderContainer.querySelector(".after");
let comparissonSlider = sliderContainer.querySelector(".slider");
let compInputRange = sliderContainer.querySelector("input");

comparissonSlider.addEventListener("mousedown", slideReady);
comparissonSlider.addEventListener("touchstart", slideReady);
compInputRange.addEventListener("input", inputToSlide);

function slideReady(e) {
  e.preventDefault();
  window.addEventListener("mousemove", slideMove);
  window.addEventListener("touchmove", slideMove);
  window.addEventListener("mouseup", slideFinish);
  window.addEventListener("touchend", slideFinish);
}
    
function slideFinish() {
  window.removeEventListener("mousemove", slideMove);
  window.removeEventListener("touchmove", slideMove);
  window.removeEventListener("mouseup", slideFinish);
  window.removeEventListener("touchend", slideFinish);
}

function slideMove(event) {
  let position = getCursorPos(event);
  if (position < 0) position = 0;
  if (position > sliderContainer.offsetWidth) position = sliderContainer.offsetWidth;
  slide(position);
}

function getCursorPos(event) {
  event = event || window.event;
  let boundingRect = afterImage.getBoundingClientRect();
  let positionX = event.pageX - boundingRect.left;
  positionX = positionX - window.pageXOffset;
  return positionX;
}

function slide(position) {
  afterImage.style.width = `${(position / sliderContainer.offsetWidth) * 100}%`;
  comparissonSlider.style.left = `${(afterImage.offsetWidth / sliderContainer.offsetWidth) * 100}%`;
  compInputRange.value = (position / sliderContainer.offsetWidth) * 100;
}

function inputToSlide() {
  afterImage.style.width = `${compInputRange.value}%`;
  comparissonSlider.style.left = `${compInputRange.value}%`;
}

标签： htmlimageaccessibilitywcag