Html Tips and Tricks
Issue #1 - Download links
You can turn a hyperlink into a download link by adding the?download?attribute. Instead of navigating to the document, browsers prompt users to save the file to their disc.
Ex:
<a href="myfile_hash5474n.pdf" download>
?Annual Report (666 KB)
</a>
For more info:
?
Issue #2 - iframe accessibility
iframes should be named, if they contain meaningful content. You can define an accessible name for an?iframe?using the?title?attribute. If it’s missing, screen readers might fall back to the value of the?name?or?src?attribute, which makes it hard or impossible for users to understand the purpose of the?iframe.
EX:?????
<iframe title="Bob Dylan - Visions Of Johanna (Live 1966) YouTube" width="560" height="315" src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>
For more info:
?
?
?
Issue #3 - gifs and reduced motion
You can show animated?gifs only if users don’t prefer reduced motion and fall back to?jpg, using the?picture?element in combination with the?prefers-reduced-motion?media feature.
EX:
<picture>
??<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.">
</picture>
For more info:
?
Issue #4- page descriptions
You can describe web pages using?meta?tags. This is important for 3rd party tools, websites, and apps. Search engines may use the description in their search results and social media sites in previews when users post a link.
EX:?????
<meta name="description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<meta property="og:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
For more info:
1.?Issue #5 - the current page
Use the?aria-current?attribute to highlight the current page in a navigation, both visually and semantically.
<nav>
??<ul>
?? ?<li><a href="/home">Home</a></li>
?? ?<li><a href="/about-us" aria-current="page">About us</a></li>
?? ?<li><a href="/contact">Contact</a></li>
??</ul>
</nav>
For more info:
Issue #6 - the section element
领英推荐
Use the?<section>?element to mark up a grouping of related content, typically introduced with a heading.
EX:?????
<h1>Welcome to GOV.UK</h1>
<section>
?<h2>Services and information</h2>
?…
</section>
<section>
?<h2>Departments and policy</h2>
?…
</section>
…
For more info:
Issue #7 - reversing ordered lists
You can reverse ordered lists by using the?reversed?attribute.
EX:?????
<ol reversed>
?<li>Curly Sue (1991)</li>
?<li>Uncle Buck (1989)</li>
?<li>She's Having a Baby (1988)</li>
?<li>Planes, Trains & Automobiles (1987)</li>
?<li>Ferris Bueller's Day Off (1986)</li>
?<li>Weird Science (1985)</li>
?<li>The Breakfast Club (1985)</li>
?<li>Sixteen Candles (1984)</li>
</ol>
The reversed attribute numbers items from high to low.
For more info:
1.?Issue # 8- print style sheets
Improve user experience by providing a print style sheet for your website.
EX:?????
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
For more info:
Mohamed Amr