baalajimaestro/ptr.moe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Accessibility Updates

Browse source 
Buttons now include a `role="button"` to aid with assistive technologies like screen readers.

`alt="[Description]"` has been nullified and set to `alt=""` on buttons to reduce duplicative screen reader announcements since the button text gives the context to the button and imagery is purely decorative.
This commit is contained in:
Seth Cottle 2023-05-01 20:47:14 -04:00
parent ae5e73d51e
commit 11b820b0ce
1 changed files with 111 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
index.html
View file

@ -63,13 +63,13 @@
-->
<!-- Your Image Here -->
<img src="images/littlelink.svg" class="avatar" srcset="images/littlelink.svg 2x" alt="LittleLink Logo">
<img src="images/littlelink.svg" class="avatar" srcset="images/littlelink.svg 2x" alt="">
<!-- Title -->
<h1>LittleLink</h1>
<h1 role="heading">LittleLink</h1>
<!-- Short Bio -->
<p>An open source DIY <a href="https://linktr.ee" target="_blank" rel="noopener">Linktree</a> alternative.</p>
<p>An open source DIY <a href="https://linktr.ee" target="_blank" rel="noopener" role="link">Linktree</a> alternative.</p>
<!--
@ -86,6 +86,8 @@
4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
5.) role="button" | The button role identifies an element as a button to assistive technology such as screen readers.
## Breaking down the <img> attributes:
1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
@ -93,318 +95,319 @@
2.) src="images/icons/[icon-name].svg" | This defines the icon you would like to display from the 'images/icons/' folder. For example, you can change this to src="images/icons/discord.svg" to use the Discord icon.
Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
3.) alt="" | Since the text at the end of the snippet, "..>[Button Text]</a><br>", explains what the button is, we use "alt=""" to nullify the icon annoucement from the accessibility tree.
This can improve the experience for assistive technology users by hiding what is essentially duplicated
-->
<!-- Default LittleLink -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/littlelink.svg" alt="">LittleLink</a><br>
<!-- Amazon -->
<a class="button button-amazon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/amazon.svg" alt="Amazon Logo">Amazon Wishlist</a><br>
<a class="button button-amazon" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/amazon.svg" alt="">Amazon Wishlist</a><br>
<!-- Amazon Music -->
<a class="button button-amazon-music" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/amazon-music.svg" alt="Amazon Music Logo">Listen on Amazon Music</a><br>
<a class="button button-amazon-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/amazon-music.svg" alt="">Listen on Amazon Music</a><br>
<!-- Apple App Store -->
<a class="button button-appstore" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple.svg" alt="Apple Logo">Apple App Store</a><br>
<a class="button button-appstore" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/apple.svg" alt="">Apple App Store</a><br>
<!-- Apple Music -->
<a class="button button-apple-music" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-music.svg" alt="Apple Music Logo">Listen on Apple Music</a><br>
<a class="button button-apple-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/apple-music.svg" alt="">Listen on Apple Music</a><br>
<!-- Apple Music Alternate -->
<a class="button button-apple-music-alt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-music-alt.svg" alt="Apple Music Logo">Listen on Apple Music</a><br>
<a class="button button-apple-music-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/apple-music-alt.svg" alt="">Listen on Apple Music</a><br>
<!-- Apple Podcasts -->
<a class="button button-apple-podcasts" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-podcasts.svg" alt="Apple Prodcasts Logo">Listen on Apple Podcasts</a><br>
<a class="button button-apple-podcasts" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/apple-podcasts.svg" alt="">Listen on Apple Podcasts</a><br>
<!-- Apple Podcasts Alternate -->
<a class="button button-apple-podcasts-alt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-podcasts-alt.svg" alt="Apple Prodcasts Logo">Listen on Apple Podcasts</a><br>
<a class="button button-apple-podcasts-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/apple-podcasts-alt.svg" alt="">Listen on Apple Podcasts</a><br>
<!-- Bandcamp -->
<a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a><br>
<a class="button button-bandcamp" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/bandcamp.svg" alt="">Bandcamp</a><br>
<!-- Behance -->
<a class="button button-behance" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/behance.svg" alt="Behance Logo">Behance</a><br>
<a class="button button-behance" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/behance.svg" alt="">Behance</a><br>
<!-- Bluesky -->
<a class="button button-bluesky" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</a><br>
<a class="button button-bluesky" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/bluesky.svg" alt="">Bluesky</a><br>
<!-- Buy Me A Coffee -->
<a class="button button-coffee" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/buy-me-a-coffee.svg" alt="Buy Me A Coffee Logo">Buy Me A Coffee</a><br>
<a class="button button-coffee" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/buy-me-a-coffee.svg" alt="">Buy Me A Coffee</a><br>
<!-- Cal.com -->
<a class="button button-cal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/cal.svg" alt="Cal.com Logo">Schedule with Cal.com</a><br>
<a class="button button-cal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/cal.svg" alt="">Schedule with Cal.com</a><br>
<!-- Calendly -->
<a class="button button-calendly" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/calendly.svg" alt="Calendly Logo">Schedule with Calendly</a><br>
<a class="button button-calendly" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/calendly.svg" alt="">Schedule with Calendly</a><br>
<!-- Cash App -->
<a class="button button-cash-app" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/cash-app-dollar.svg" alt="Cash App Logo">Cash App</a><br>
<a class="button button-cash-app" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/cash-app-dollar.svg" alt="">Cash App</a><br>
<!-- Clubhouse -->
<a class="button button-clubhouse" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/clubhouse.svg" alt="Clubhouse Logo">Clubhouse</a><br>
<a class="button button-clubhouse" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/clubhouse.svg" alt="">Clubhouse</a><br>
<!-- Dev.to -->
<a class="button button-dev-to" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/dev-to.svg" alt="Dev.to Logo">Dev.to</a><br>
<a class="button button-dev-to" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/dev-to.svg" alt="">Dev.to</a><br>
<!-- Discord -->
<a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a><br>
<a class="button button-discord" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/discord.svg" alt="">Discord</a><br>
<!-- Dribbble -->
<a class="button button-dribbble" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/dribbble.svg" alt="Dribbble Logo">Dribbble</a><br>
<a class="button button-dribbble" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/dribbble.svg" alt="">Dribbble</a><br>
<!-- Etsy -->
<a class="button button-etsy" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/etsy.svg" alt="Etsy Logo">Shop on Etsy</a><br>
<a class="button button-etsy" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/etsy.svg" alt="">Shop on Etsy</a><br>
<!-- Facebook -->
<a class="button button-faceb" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a><br>
<a class="button button-faceb" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/facebook.svg" alt="">Find us on Facebook</a><br>
<!-- Facebook Messenger -->
<a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a><br>
<a class="button button-messenger" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/messenger.svg" alt="">Chat on Messenger</a><br>
<!-- Figma -->
<a class="button button-figma" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/figma.svg" alt="Figma Logo">Figma Community</a><br>
<a class="button button-figma" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/figma.svg" alt="">Figma Community</a><br>
<!-- Fiverr -->
<a class="button button-fiverr" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/fiverr.svg" alt="Fiverr Logo">Fiverr Gig</a><br>
<a class="button button-fiverr" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/fiverr.svg" alt="">Fiverr Gig</a><br>
<!-- Flickr -->
<a class="button button-flickr" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/flickr.svg" alt="Flickr Logo">Flickr</a><br>
<a class="button button-flickr" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/flickr.svg" alt="">Flickr</a><br>
<!-- GitHub -->
<a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a><br>
<a class="button button-github" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/github.svg" alt="">GitHub</a><br>
<!-- GitLab -->
<a class="button button-gitlab" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a><br>
<a class="button button-gitlab" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/gitlab.svg" alt="">GitLab</a><br>
<!-- Goodreads -->
<a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a><br>
<a class="button button-goodreads" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/goodreads.svg" alt="">Goodreads</a><br>
<!-- Google Drive -->
<a class="button button-google-black" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-drive.svg" alt="Google Drive Logo">View in Google Drive</a><br>
<a class="button button-google-black" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/google-drive.svg" alt="">View in Google Drive</a><br>
<!-- Google Play Store -->
<a class="button button-playstore" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-play.svg" alt="Google Play Store Logo">Google Play Store</a><br>
<a class="button button-playstore" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/google-play.svg" alt="">Google Play Store</a><br>
<!-- Google Podcasts -->
<a class="button button-google-podcasts" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-podcasts.svg" alt="Google Podcasts Logo">Listen on Google Podcasts</a><br>
<a class="button button-google-podcasts" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/google-podcasts.svg" alt="">Listen on Google Podcasts</a><br>
<!-- Google Scholar -->
<a class="button button-google-scholar" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-scholar.svg" alt="Google Scholar Logo">Google Scholar</a><br>
<a class="button button-google-scholar" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/google-scholar.svg" alt="">Google Scholar</a><br>
<!-- Guilded -->
<a class="button button-guilded" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/guilded.svg" alt="Guilded Logo">Guilded</a><br>
<a class="button button-guilded" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/guilded.svg" alt="">Guilded</a><br>
<!-- Hashnode -->
<a class="button button-hashnode" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/hashnode.svg" alt="Hashnode Logo">Hashnode</a><br>
<a class="button button-hashnode" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/hashnode.svg" alt="">Hashnode</a><br>
<!-- Instagram -->
<a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a><br>
<a class="button button-instagram" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/instagram.svg" alt="">Instagram</a><br>
<!-- Kickstarter -->
<a class="button button-kickstarter" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/kickstarter.svg" alt="Kickstarter Logo">Kickstarter</a><br>
<a class="button button-kickstarter" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/kickstarter.svg" alt="">Kickstarter</a><br>
<!-- Kit -->
<a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/kit.svg" alt="Kit Logo">Kit</a><br>
<a class="button button-kit" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/kit.svg" alt="">Kit</a><br>
<!-- Ko-fi -->
<a class="button button-ko-fi" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/ko-fi.svg" alt="Ko-fi Logo">Ko-fi</a><br>
<a class="button button-ko-fi" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/ko-fi.svg" alt="">Ko-fi</a><br>
<!-- Last.fm -->
<a class="button button-last-fm" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/last-fm.svg" alt="Last.fm Logo">Last.fm</a><br>
<a class="button button-last-fm" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/last-fm.svg" alt="">Last.fm</a><br>
<!-- Letterboxd -->
<a class="button button-letterboxd" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/letterboxd.svg" alt="Letterboxd Logo">Letterboxd</a><br>
<a class="button button-letterboxd" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/letterboxd.svg" alt="">Letterboxd</a><br>
<!-- Line -->
<a class="button button-line" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/line.svg" alt="Line Logo">Line</a><br>
<a class="button button-line" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/line.svg" alt="">Line</a><br>
<!-- LinkedIn -->
<a class="button button-linked" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a><br>
<a class="button button-linked" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/linkedin.svg" alt="">LinkedIn</a><br>
<!-- Mailchimp -->
<a class="button button-mailchimp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/mailchimp.svg" alt="Mailchimp Logo">Mailchimp</a><br>
<a class="button button-mailchimp" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/mailchimp.svg" alt="">Mailchimp</a><br>
<!-- Mastodon -->
<a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a><br>
<a class="button button-mastodon" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/mastodon.svg" alt="">Mastodon</a><br>
<!-- Medium -->
<a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/medium.svg" alt="Medium Logo">Medium</a><br>
<a class="button button-medium" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/medium.svg" alt="">Medium</a><br>
<!-- Notion -->
<a class="button button-notion" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/notion.svg" alt="Notion Logo">Notion</a><br>
<a class="button button-notion" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/notion.svg" alt="">Notion</a><br>
<!-- OnlyFans -->
<a class="button button-onlyfans" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/onlyfans.svg" alt="OnlyFans Logo">OnlyFans (18+)</a><br>
<a class="button button-onlyfans" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/onlyfans.svg" alt="">OnlyFans (18+)</a><br>
<!-- Patreon -->
<a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/patreon.svg" alt="Patreon Logo">Patreon</a><br>
<a class="button button-patreon" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/patreon.svg" alt="">Patreon</a><br>
<!-- PayPal -->
<a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a><br>
<a class="button button-paypal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/paypal.svg" alt="">PayPal</a><br>
<!-- Pinterest -->
<a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/pinterest.svg" alt="Pinterest Logo">Pinterest</a><br>
<a class="button button-pinterest" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/pinterest.svg" alt="">Pinterest</a><br>
<!-- Post.news -->
<a class="button button-post-news" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/post-news.svg" alt="Post.news Logo">Post.news</a><br>
<a class="button button-post-news" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/post-news.svg" alt="">Post.news</a><br>
<!-- Product Hunt -->
<a class="button button-product-hunt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/product-hunt.svg" alt="Product Hunt Logo">Product Hunt</a><br>
<a class="button button-product-hunt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/product-hunt.svg" alt="">Product Hunt</a><br>
<!-- Read.cv -->
<a class="button button-read-cv" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/read-cv.svg" alt="Read.cv Logo">Read.cv</a><br>
<a class="button button-read-cv" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/read-cv.svg" alt="">Read.cv</a><br>
<!-- Redbubble -->
<a class="button button-redbubble" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/redbubble.svg" alt="Redbubble Logo">Redbubble</a><br>
<a class="button button-redbubble" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/redbubble.svg" alt="">Redbubble</a><br>
<!-- Reddit -->
<a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a><br>
<a class="button button-reddit" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/reddit.svg" alt="">Reddit</a><br>
<!-- Shop -->
<a class="button button-shop" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/shop.svg" alt="Shop Logo">Buy with Shop</a><br>
<a class="button button-shop" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/shop.svg" alt="">Buy with Shop</a><br>
<!-- Signal -->
<a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/signal.svg" alt="Signal Logo">Signal</a><br>
<a class="button button-signal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/signal.svg" alt="">Signal</a><br>
<!-- Skoob -->
<a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a><br>
<a class="button button-skoob" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/skoob.svg" alt="">Skoob</a><br>
<!-- Slack -->
<a class="button button-slack" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/slack.svg" alt="Slack Logo">Join Slack</a><br>
<a class="button button-slack" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/slack.svg" alt="">Join Slack</a><br>
<!-- Snapchat -->
<a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a><br>
<a class="button button-snapchat" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/snapchat.svg" alt="">Snapchat</a><br>
<!-- SoundCloud -->
<a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a><br>
<a class="button button-soundcloud" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/soundcloud.svg" alt="">SoundCloud</a><br>
<!-- Spotify -->
<a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/spotify.svg" alt="Spotify Logo">Listen on Spotify</a><br>
<a class="button button-spotify" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/spotify.svg" alt="">Listen on Spotify</a><br>
<!-- Spotify Alt -->
<a class="button button-spotify-alt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/spotify-alt.svg" alt="Spotify Logo">Listen on Spotify</a><br>
<a class="button button-spotify-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/spotify-alt.svg" alt="">Listen on Spotify</a><br>
<!-- Square -->
<a class="button button-square" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/square.svg" alt="Square Logo">Buy with Square</a><br>
<a class="button button-square" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/square.svg" alt="">Buy with Square</a><br>
<!-- Steam -->
<a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/steam.svg" alt="Steam Logo">Steam</a><br>
<a class="button button-steam" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
<!-- Strava -->
<a class="button button-strava" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/strava.svg" alt="Strava Logo">Strava</a><br>
<a class="button button-strava" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/strava.svg" alt="">Strava</a><br>
<!-- Substack -->
<a class="button button-substack" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/substack.svg" alt="Substack Logo">Substack</a><br>
<a class="button button-substack" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/substack.svg" alt="">Substack</a><br>
<!-- Telegram -->
<a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a><br>
<a class="button button-telegram" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/telegram.svg" alt="">Telegram</a><br>
<!-- Threema -->
<a class="button button-threema" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/threema.svg" alt="Threema Logo">Threema</a><br>
<a class="button button-threema" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/threema.svg" alt="">Threema</a><br>
<!-- TikTok -->
<a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a><br>
<a class="button button-tiktok" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/tiktok.svg" alt="">TikTok</a><br>
<!-- Trello -->
<a class="button button-trello" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/trello.svg" alt="Trello Logo">Trello</a><br>
<a class="button button-trello" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/trello.svg" alt="">Trello</a><br>
<!-- Tumblr -->
<a class="button button-tumb" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a><br>
<a class="button button-tumb" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/tumblr.svg" alt="">Tumblr</a><br>
<!-- Twitch -->
<a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a><br>
<a class="button button-twitch" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/twitch.svg" alt="">Twitch</a><br>
<!-- Twitter -->
<a class="button button-twit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a><br>
<a class="button button-twit" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/twitter.svg" alt="">Twitter</a><br>
<!-- Unsplash -->
<a class="button button-unsplash" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/unsplash.svg" alt="Unsplash Logo">Unsplash</a><br>
<a class="button button-unsplash" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/unsplash.svg" alt="">Unsplash</a><br>
<!-- Untappd -->
<a class="button button-untappd" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/untappd.svg" alt="Untapped Logo">Untappd</a><br>
<a class="button button-untappd" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/untappd.svg" alt="">Untappd</a><br>
<!-- Upwork -->
<a class="button button-upwork" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/upwork.svg" alt="Upwork Logo">Upwork</a><br>
<a class="button button-upwork" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/upwork.svg" alt="">Upwork</a><br>
<!-- Venmo -->
<a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/venmo.svg" alt="Venmo Logo">Venmo</a><br>
<a class="button button-venmo" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/venmo.svg" alt="">Venmo</a><br>
<!-- Vimeo -->
<a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vimeo.svg" alt="Clubhouse Logo">Vimeo</a><br>
<a class="button button-vimeo" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/vimeo.svg" alt="">Vimeo</a><br>
<!-- VRChat -->
<a class="button button-vrchat" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vrchat.svg" alt="VR Chat Logo">VRChat</a><br>
<a class="button button-vrchat" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/vrchat.svg" alt="">VRChat</a><br>
<!-- VSCO -->
<a class="button button-vsco" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vsco.svg" alt="VR Chat Logo">VSCO</a><br>
<a class="button button-vsco" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/vsco.svg" alt="">VSCO</a><br>
<!-- WhatsApp -->
<a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a><br>
<a class="button button-whatsapp" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/whatsapp.svg" alt="">WhatsApp</a><br>
<!-- WordPress -->
<a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/wordpress.svg" alt="WordPress Logo">WordPress</a><br>
<a class="button button-wordpress" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/wordpress.svg" alt="">WordPress</a><br>
<!-- Xing -->
<a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/xing.svg" alt="Xing Logo">Xing</a><br>
<a class="button button-xing" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/xing.svg" alt="">Xing</a><br>
<!-- YouTube -->
<a class="button button-yt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a><br>
<a class="button button-yt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/youtube.svg" alt="">YouTube</a><br>
<!-- YouTube Music -->
<a class="button button-yt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/youtube-music.svg" alt="YouTube Music Logo">Listen on YouTube Music</a><br>
<a class="button button-yt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/youtube-music.svg" alt="">Listen on YouTube Music</a><br>
<!-- Zoom -->
<a class="button button-zoom" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/zoom.svg" alt="Zoom Logo">Join Zoom Webinar</a><br>
<a class="button button-zoom" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/zoom.svg" alt="">Join Zoom Webinar</a><br>
<!-- Generic Blog -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-blog.svg" alt="Blog Icon">Read our blog</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-blog.svg" alt="">Read our blog</a><br>
<!-- Generic Calendar -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-calendar.svg" alt="Calendar Icon">Event RSVP</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-calendar.svg" alt="">Event RSVP</a><br>
<!-- Generic Cloud -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-cloud.svg" alt="Cloud Icon">Download File</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-cloud.svg" alt="">Download File</a><br>
<!-- Generic Code -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-code.svg" alt="Code Icon">View the code</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-code.svg" alt="">View the code</a><br>
<!-- Generic Computer -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-computer.svg" alt="Computer Icon">Homelab Setup</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-computer.svg" alt="">Homelab Setup</a><br>
<!-- Generic Email -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-email.svg" alt="Email Icon">Email Us</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-email.svg" alt="">Email Us</a><br>
<!-- Generic Email Alt -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-email-alt.svg" alt="Email Alt Icon">Email Us</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-email-alt.svg" alt="">Email Us</a><br>
<!-- Generic Homepage -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-homepage.svg" alt="Homepage Icon">Visit Homepage</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-homepage.svg" alt="">Visit Homepage</a><br>
<!-- Generic Map -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-map.svg" alt="Map Icon">Get Directions</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-map.svg" alt="">Get Directions</a><br>
<!-- Generic Phone -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-phone.svg" alt="Phone Icon">Call Us</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-phone.svg" alt="">Call Us</a><br>
<!-- Generic Review -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-review.svg" alt="Review Icon">Leave us a review</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-review.svg" alt="">Leave us a review</a><br>
<!-- Generic RSS -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-rss.svg" alt="RSS Icon">RSS Subscribe</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-rss.svg" alt="">RSS Subscribe</a><br>
<!-- Generic Shopping Bag -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-shopping-bag.svg" alt="Shopping Bag Icon">Visit Our Shop</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-shopping-bag.svg" alt="">Visit Our Shop</a><br>
<!-- Generic Shopping Tag -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-shopping-tag.svg" alt="Shopping Tag Icon">10% Discount</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-shopping-tag.svg" alt="">10% Discount</a><br>
<!-- Generic SMS -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-sms.svg" alt="SMS Icon">Send us a message</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-sms.svg" alt="">Send us a message</a><br>
<!-- Generic Website -->
<a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-website.svg" alt="Website Icon">Visit Website</a><br>
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-website.svg" alt="">Visit Website</a><br>
<br>
<!--
@ -413,7 +416,7 @@
This also includes a link to the LittleLink repository to make forking LittleLink easier.
You can edit or remove anything here to make your own footer.
-->
<p><a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
<p><a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener" role="button">LittleLink</a>.</p>
</div>
</div>