How to Build an Inaccessible App

Inaccessible Components

Buttons


					Click me!

button

Keyboard Accessible
Clickable
Tabbable
Focusable

div

Keyboard Accessible
Clickable
Tabbable
Focusable

Inaccessible Components

Form Labels


					
						Full Name
						
						Email Address


					document.querySelectorAll("form input").forEach((i) => {
						i.addEventListener("input", (e) => {
							console.log(e.target.value);
					
							if (e.target.value && e.target.value !== "") {
								e.target.previousElementSibling.classList.add("active");
							}
						});
					});


					form label {
						pointer-events: none;
						position: relative;
						top: 30px;
						left: 10px;

						&.active {
							top: -5px;
							transition: all 0.01s;
						}
					}

Inaccessible Components

Icon Labels


					
						
							Codepen
						
						
							Twitter
						
						
							Website


					a span {
						position: absolute;
						right: -200vw;
					}

Inaccessible Components

Hover Effects

Inaccessible Components

Tab Index

0 : Can be navigated to via keyboard

-1 : Cannot be navigated to via keyboard

1 : Will be navigated to in order

aria

aria attributes

aria

Button, Checkbox, Link, Radio, Searchbox, Slider, Scrollbar, Tab, Textbox, Menu, Article, Heading, Img, List, Row, Tablet, Banner, Complementary, Form, Main, Navigation, Alert, Status...


					
						
							There is some text here
							Click here


					
						
							There is some text here
							Click here

aria

Semantic HTML 🎉

Many of these widgets were later incorporated into HTML5, and developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA


					Important content
					

					Name

Testing

Testing tools

Web Content Accessibility Guidelines
WCAG

https://www.w3.org/WAI/standards-guidelines/wcag

Demo time 🤞

Testing

Deciphering tests

https://github.com/hail2u/color-blindness-emulation


					.element {
						filter: url('filters.svg#protanopia');
						filter: url('filters.svg#protanomaly');
						filter: url('filters.svg#deuteranopia');
						filter: url('filters.svg#deuteranomaly');
						filter: url('filters.svg#tritanopia');
						filter: url('filters.svg#tritanomaly');
						filter: url('filters.svg#achromatopsia');
						filter: url('filters.svg#achromatomaly');
					}

https://24ways.org/2019/twelve-days-of-front-end-testing/

https://www.javascriptjanuary.com/blog/getting-started-with-front-end-testing

twitter.com/amys_kapers
amyskapers.dev
blog.amyskapers.dev
speaking.amyskapers.dev
github.com/amykapernick
twitch.tv/amyskapers

Thank You 👏