Zombies of Web Dev Archives - The Undead Institute

Refreshingly Frustrating

The Zombie: While developing a site, forgetting to refresh the page after you make a change Always a Zombie? Yes Severity: Medium to High, Depends on how long it takes you to realize and how much troubleshooting you do before you realize Why is it a Zombie: You can’t see any of the updates you... Read More

Hovering Over Your Phone

The Zombie: Hover on a touch screen Always a Zombie? Yes Severity: High, if hover imparts information or is required for progress through the site. Why is it a Zombie: You can’t hover on a touch screen so any user who’s on a phone, tablet. etc cannot access that part of your website. Cure the... Read More

Get Out the Way

The Zombie: Moving the element you’re hovering over via hover Always a Zombie? Almost Always Severity: Varies Why is it a Zombie: If you move the element the mouse is over far enough that the mouse is no longer on top of it, the animation resets. Which puts the mouse back on top of the... Read More

Low Contrast like Reading Mud

The Zombie: Light text on a light background/dark text on a dark background Always a Zombie? Yes Severity: Varies. Medium to high Why is it a Zombie: It makes reading really difficult Cure the Zombie by: Ensure there’s enough contrast that everyone should be able to read your text. https://webaim.org/resources/contrastchecker/... Read More

Incorrect Selectors

The Zombie: Using .id, #class, .element, #element, id or class as selectors Always a Zombie? Yes Severity: High. Why is it a Zombie: Elements, classes, and ids are not selected by the selectors. Cure the Zombie by: Always use a # for ids, a . for classes and no identifying character for elements e.g. p... Read More

Unhelpful Alternatives

The Zombie: Alt attribute text repeats filename Always a Zombie? Yes Severity: Medium-High Why is it a Zombie: Prevents screen reader users and search engines from accessing content, unless filename is really descriptive (which presents other issues) Cure the Zombie by: Add concise description to each image you use and place it in the alt... Read More

Attributes of No Language

The Zombie: No lang attribute on the <html> element Always a Zombie? No Severity: Medium Why is it a Zombie: If the site’s language and the visitor’s language match it’s not an issue. If they don’t match (and you as a developer never know for sure whether they’ll match or not), the browser may have... Read More

Semi-Forgetful Colons

The Zombie: Forget a CSS semicolon Always a Zombie? No Severity: Varies from none to high depending on where semicolon is missing. Why is it a Zombie: If properties and values come after it in the declaration block, they will be ignored. If it’s the only or last declaration in the declaration block, the semicolon... Read More

Voiding the Pseudo

The Zombie: Using pseudo elements on a void tag Always a Zombie? Yes Severity: medium – never works, but won’t break things Why is it a Zombie: pseudo elements (::before and ::after) are slotted in after the opening tag and before the closing tag. Without those tags the pseudo-element cannot be slotted in. Cure the... Read More

Giant Website Zombies

The Zombie: So what if my site is the size of the zombie hoard, it’s pretty. Always a Zombie? No, if band width is sufficiently high some won’t notice Severity: Varies. More severe on low bandwidth connections. Why is it a Zombie: Average site visitors rarely wait for a page to load more than a... Read More

For a Zombie Time, Click Here

The Zombie: Click here language Always a Zombie? Yes Severity: medium – An annoyance for sighted users, but can be detrimental to a screen reader user’s experience. Can also inhibit your search engine optimization. Why is it a zombie: No one knows what’s behind the link without reading the context. Almost no one who uses the internet reads the full... Read More

Improper element nesting

The Zombie: Improper element nesting Always a Zombie? Yes, however, some browsers may interpret it the way it’s intended rather than the way it’s written, but you never know which browser might do it correctly or not Severity: Varies Why it’s a Zombie: Browsers are pretty good at interpreting what you intended, but they might get... Read More

Padding: none; & Margin: none;

The Zombie: padding: none; and margin: none; Always a Zombie? Yes (it doesn’t work) Severity: medium–low (a few margins/paddings that aren’t set to 0 probably won’t break your site, just make it look funky. That said, there are times when this kind of error could make a layout unusable and send users running for the post-apocalyptic hills.) Why it’s a zombie: None is... Read More

Underlining non-links

The Zombie: Underlining non-links Always a Zombie? Yes (except for a very specific case below) Severity: medium-high Why is it a zombie: Causes a large user experience issue where users try to click on something that isn’t clickable. That can frustrate visitors and send them running for post-apocalyptic cover. Cure the Zombie by: Only underline links. Never use underlines on... Read More

Margin: auto Challenges

The Zombie: Margin: auto without setting a width or display: block Always a Zombie? Yes Severity: medium-low Why is it a zombie: It won’t work, but it won’t break your site either. Cure the Zombie by: Ensure the element you’re centering with margin: auto; is set to display: block; and that a width has been set. If neither of those things... Read More

Empty headings

The Zombie: Empty headings i.e. headings (<h1> through <h6>) with no content or no useful content. Always a Zombie? Yes Severity: serious for screen readers; less serious for others Why it’s a Zombie: Just like sighted users screen reader users often scan through headings. If a heading is empty the screen reader will say there’s... Read More

Leaving off units

The Zombie: Leaving off unitsAlways a Zombie? No (some things shouldn’t have units)Severity: medium-high Why is it a zombie: It can prevent the property from workingCure the Zombie by: Add units to all dimensions unless they are 0 or you are using line-height. Line-height is at its most robust and flexible when used as a multiplier. A unit-less number is ideal for line-height.... Read More

Background-repeat: none

The Zombie: Background-repeat: none Always a Zombie? Yes Severity: medium-low (it doesn’t work, but a repeating background is unlikely to make or break your site Why is it a zombie: Does nothing. The background image continues to repeat Cure the Zombie by: Use background-repeat: no-repeat. I’m not sure the exact origin of why this goes against the typical CSS... Read More

Using the background-color property for a background gradient

The Zombie: Using the background-color property for a background gradientAlways a Zombie? YesSeverity: medium – (It doesn’t work, but its unlikely to break the site)Why is it a zombie: The gradient won’t show up at all.Cure the Zombie by: Despite gradients being literally colors, they are treated as images. Move the gradient to the background-image property and everything works.... Read More

No alt text attribute on images

The Zombie: No alt text attribute on images Always a Zombie? Yes Severity: medium – has accessibility and SEO implications Why is it a zombie: Search Engines and Screen Reader Users won’t be able to access/understand the content. Cure the Zombie by: Adding a blank alt attribute to decorative images and a short, clear description to all other images. No need... Read More