HTML Tips & Tricks
Issue #2 - gifs and reduced motion
You can replace animated
jpgs if users prefer reduced motion, using the
pictureelement in combination with the
Continue reading Issue #2
<source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
<img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil."/>
Issue #1 - iframe accessibility
iframes should be named, if they contain meaningful content. You can define an accessible name for an
titleattribute. If it’s missing, screen readers might fall back to the value of the
srcattribute, which makes it hard or impossible for users to understand the purpose of the
Continue reading Issue #1
<iframe title="Bob Dylan - Visions Of Johanna (Live 1966) YouTube" width="560" height="315" src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>
Issue #0 - Download links
You can turn a hyperlink into a download link by adding the
downloadattribute. Instead of navigating to the document, browsers prompt users to save the file to their disc.
Continue reading Issue #0
<a href="myfile_hash5474n.pdf" download>
Annual Report (666 KB)
Do you like what you’re reading?
Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.