Skip to content

Instantly share code, notes, and snippets.

View chris-pearce's full-sized avatar
🤷‍♂️
FED'ing

Chris Pearce chris-pearce

🤷‍♂️
FED'ing
73 followers · 44 following
View GitHub Profile
@chris-pearce
chris-pearce / examples-of-incorrect-and-correct-use-of-html-elements.html
Last active March 18, 2016 22:59
<!-- No good -->
<i class="c-icon-edit"></i>
<!-- Good -->
<span class="c-icon-edit">
<span class="hide-visually">Edit draft</span>
</span>
<!-- No good -->
<ul class="c-user-data">
@chris-pearce
chris-pearce / incorrect-use-of-a-element.html
Last active February 22, 2016 01:06
<a role="button" class="c-drop-down-menu__trigger js-drop-down-menu-trigger"></a>
@chris-pearce
chris-pearce / a-more-semantic-button.html
Created February 22, 2016 01:05
<button type="button" class="c-drop-down-menu__trigger js-drop-down-menu-trigger">
<span class="h-hide-visually">Open menu options</span>
</button>
@chris-pearce
chris-pearce / examples-of-semantic-html--1.md
Last active May 14, 2016 13:40
Examples of semantic HTML 
<nav>
    <ul>
        <li>
            <a href="link1.html">Link 1</a>
        </li>
        <li>
            <a href="link2.html">Link 2</a>
        </li>
@chris-pearce
chris-pearce / examples-of-semantic-html--2.md
Created May 14, 2016 13:51 
<p>Chris Pearce commented <time datetime="2001-04-16T19:00">13 days ago</time>.</p>
@chris-pearce
chris-pearce / bad-examples-of-buttons-without-visual-text.html
Last active June 4, 2016 05:54
<nav class="galleryLightbox__controls">
<a data-gallery-action="prev" class="gallery__icons time-icons time-icons-previous-outline disabled"></a>
<a data-gallery-action="next" class="gallery__icons time-icons time-icons-next-outline"></a>
</nav>
<a class="header-nav-button time-icons time-icons-menu" title="Click to show site navigation"></a>
<a href="javascript:void 0;" class="main-nav-search-button">
<span class="time-icons time-icons-search main-nav-search-icon" title="Click to search Time.com"></span>
</a>
@chris-pearce
chris-pearce / google-using-a-link-instead-of-a-button.html
Last active June 4, 2016 06:53
@chris-pearce
chris-pearce / good-examples-of-non-text-buttons.html
Last active June 4, 2016 05:52
<!-- Tweet dialog close button. https://twitter.com/ -->
<button type="button" class="modal-btn modal-close js-close" aria-controls="global-tweet-dialog-dialog" aria-describedby="global-tweet-dialog-body">
<span class="Icon Icon--close Icon--medium">
<span class="visuallyhidden">Close</span>
</span>
</button>
<a href="/settings/account" class="btn js-tooltip settings dropdown-toggle js-dropdown-toggle" id="user-dropdown-toggle" data-placement="bottom" role="button" aria-haspopup="true" data-original-title="Profile and settings">
<img class="avatar size32" src="https://pbs.twimg.com/profile_images/728701766783500288/X-s29VYA_normal.jpg" alt="Profile and settings" data-user-id="16481805">
</a>
@chris-pearce
chris-pearce / amazon-prev-and-next-buttons.html
Last active June 4, 2016 22:31
<a class="feed-carousel-control feed-left" href="#" aria-hidden="true">
<span class="gw-icon feed-arrow"></span>
</a>
<a class="feed-carousel-control feed-right" href="#" aria-hidden="true">
<span class="gw-icon feed-arrow"></span>
</a>
@chris-pearce
chris-pearce / amazon-prev-and-next-buttons-improved.html
Last active June 4, 2016 08:17
<button class="feed-carousel-control feed-left" type="button">
<span class="h-hide-visually">View the previous lot of 4 items</span>
<span class="gw-icon feed-arrow" aria-hidden="true"></span>
</button>
<button class="feed-carousel-control feed-right" type="button">
<span class="h-hide-visually">View the next lot of 12 items</span>
<span class="gw-icon feed-arrow" aria-hidden="true"></span>
</button>