Skip to content

Instantly share code, notes, and snippets.

@nadchif

nadchif/a11y_tests.html

Created May 17, 2020 08:30
Show Gist options
  • Save nadchif/211ecfab904d53880fb8e021c44c7f0b to your computer and use it in GitHub Desktop.
Save nadchif/211ecfab904d53880fb8e021c44c7f0b to your computer and use it in GitHub Desktop.
Download ZIP
Just a dummy page for testing some a11y scenarios
Raw
a11y_tests.html
<!DOCTYPE html>
<head>
<title>Image a11y Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img id="appleImg" src="https://s.alicdn.com/@sc01/kf/HTB1CDyMJpXXXXa3XFXXq6xXFXXXz.jpg" />
<div id="lazyLoadPlaceHolder">Lazy Loading Area</div>
<p>
<button id="switchImgBtn">Switch Image</button>
<button id="loadImgBtn">Load Image</button>
</p>
<script>
const switchImage = () =>{
document.getElementById('appleImg')
.setAttribute('src', 'https://s.alicdn.com/@sc01/kf/UTB8SmmSmv2JXKJkSanrq6y3lVXa5.jpg')
}
const loadImage = () => {
const img = document.createElement('img');
img.setAttribute('src', 'https://s.alicdn.com/@sc01/kf/UTB87sIiGarFXKJk43Ovq6ybnpXa3.jpg_300x300.jpg')
document.getElementById('lazyLoadPlaceHolder')
.appendChild(img);
}
document.getElementById("switchImgBtn").addEventListener('click', switchImage);
document.getElementById("loadImgBtn").addEventListener('click', loadImage);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment