<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<h1>15 tips to improve web accessibility</h1>
<div id="demo">
<div id="page">
<div id="flip">
<div id="front">
<div class="link" id="skip-link"></div>
<div class="image" id="logo"></div>
<div id="menu"></div>
<div id="page-title"></div>
<div class="paragraph" id="paragraph-1"></div>
<div class="paragraph" id="paragraph-2"></div>
<div id="page-image"></div>
</div>
<div id="back">
<div class="meta"><!doctype html></div>
<div><html <span class="attr">lang</span><span class="symb">=</span><span class="value">"en"</span>></div>
<div> <head></div>
<div> <title><span class="text">My Page</span></title></div>
<div> <meta <span class="attr">name</span><span class="symb">=</span><span class="value">"author"</span> <span class="attr">content</span><span class="symb">=</span><span class="value">"Al Montoro"</span> /></div>
<div> </head></div>
<div> <body></div>
<div> <header></div>
<div> <h1><span class="text">Page Title</span></h1></div>
<div> <ul <span class="attr">role</span><span class="symb">=</span><span class="value">"navigation"</span>></div>
<div> <li><a <span class="attr">href</span><span class="symb">=</span><span class="value">"home.html"</span>><span class="text">Home</span></a></li></div>
<div> <li><a <span class="attr">href</span><span class="symb">=</span><span class="value">"sec.html"</span> <span class="attr">aria-current</span><span class="symb">=</span><span class="value">"page"</span>><span class="text">Section</span></a></li></div>
<div> <li><a <span class="attr">href</span><span class="symb">=</span><span class="value">"contact.html"</span>><span class="text">Contact</span></a></li></div>
<div> </ul></div>
<div> </header></div>
<div> <main></div>
<div> <section></div>
<div> <h2><span class="text">Lorem Ipsum</span></h2></div>
<div> <p></div>
<div> <img <span class="attr">src</span><span class="symb">=</span><span class="value">"pic.jpg"</span> <span class="attr">alt</span><span class="symb">=</span><span class="value">"Detailed description of picture"</span>/></div>
<div> <span class="text">Lorem ipsum dolor sit amet</></div>
<div> </p></div>
<div> <span class="comment">...</span></div>
<div> </section></div>
<div> </main></div>
<div> </body></div>
<div></html></div>
</div>
</div>
</div>
</div>
<button id="turn-page" tabindex="1">
<i class="fa fa-undo" aria-hidden="true"></i>
See more tips
</button>
<div id="advices">
<section class="advice front right" id="advice-logo" tabindex="0">
<h2>Logo/Site name redirects to home</h2>
<span>
Users need easy access to the home page, and the logo is expected to be a link to it.
</span>
</section>
<section class="advice front" id="advice-skip" tabindex="0">
<h2>Link skips directly to the content</h2>
<span>
Make it easy for users to jump the header, menu, etc. and jump to the page main content by adding a skip link.
</span>
</section>
<section class="advice front" id="advice-menu" tabindex="0">
<h2>Menus should also be usable via keyboard</h2>
<span>
A way to control and navigate the menu via keyboard should be available for users that don't use a mouse.
</span>
</section>
<section class="advice front right" id="advice-contrast" tabindex="0">
<h2>Good color contrast</h2>
<span>
The color of the text and elements on the foreground should contrast enough with the color of the background.
</span>
</section>
<section class="advice front" id="advice-font-color" tabindex="0">
<h2>Text must always<br> be readable</h2>
<span>
Pick a font that is easy to read, avoid small font sizes, and adapt the size to fit different screens.
</span>
</section>
<section class="advice front right" id="advice-abbr" tabindex="0">
<h2>Give meaning to abbreviations</h2>
<span>
Screen readers don't recognize acronyms or abbreviations. Use titles and the abbr tag to add meaning to them.
</span>
</section>
<section class="advice front right" id="advice-form" tabindex="0">
<h2>Descriptive and<br> easy to use forms</h2>
<span>
Use placeholders and labels to describe the fields. Organize fields in order. If there are errors, make it easy to jump and fix them.
</span>
</section>
<section class="advice front" id="advice-img-type" tabindex="0">
<h2>The right image for the right place</h2>
<span>
Consider type and sizes. Use SVG for vectorial graphics and icons (leverage its accessibility features).
</span>
</section>
<section class="advice back right" id="advice-lang" tabindex="0">
<h2>Specify the language of document/elements</h2>
<span>
It will help with Braille translation software, and with the pronounciation and definitions in screen readers.
</span>
</section>
<section class="advice back" id="advice-meta" tabindex="0">
<h2>Use metadata and social media tags</h2>
<span>
Well-crafted metadata provides orientation to users, screen readers, and external sites.
</span>
</section>
<section class="advice back right" id="advice-links" tabindex="0">
<h2>Have meaningful<br> and usefull links</h2>
<span>
Don't have empty links, or links with just images and no description... or many similar links (e.g. "Read more").
</span>
</section>
<section class="advice back" id="advice-aria" tabindex="0">
<h2>Use ARIA attributes and roles</h2>
<span>
They provide useful properties and make the web more accessible for people with disabilities.
</span>
</section>
<section class="advice back right" id="advice-html5" tabindex="0">
<h2>Use semantic tags</h2>
<span>
Not only good for accessibility, but html5 tags improve performance and SEO.
</span>
</section>
<section class="advice back right" id="advice-struct" tabindex="0">
<h2>Structure content logically</h2>
<span>
Headings and content must be structured in an orderly way. Don't skip headings, have valid HTML.
</span>
</section>
<section class="advice back" id="advice-img-alt" tabindex="0">
<h2>Always have <br> alternative text</h2>
<span>
First principle of web accessibility... and sometimes easier said than done.
</span>
</section>
</div>
</div>
html, body {
background: #ddd;
font-family: Monaco, "Courier New", Courier, sans-serif;
}
h1 {
text-align: center;
font-size: 1.5em;
}
h2 {
font-size: 1.6vmin;
margin-top: 0;
margin-bottom: 0;
}
#page {
width: 60vmin;
height: 60vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
perspective: 1000px;
perspective: 1000px;
z-index: 2;
}
#flip {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 1vmin 1vmin 0 rgba(0,0,0,0.1)
}
body.active #flip {
transform: rotateY(-180deg);
}
#front, #back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
backface-visibility: hidden;
transform: rotateY(0deg);
overflow: hidden;
}
#front div {
height: 2vmin;
background: #ccc;
position: absolute;
}
#front .link {
background-color: #3040d0;
}
#front .image {
background-color: #90aafe;
}
#skip-link {
top: 2vmin;
right: 2vmin;
width: 10vmin;
}
#front #logo {
top: 2vmin;
left: 2vmin;
width: 15vmin;
height: 5vmin;
}
#front #logo::before {
content: "LOGO";
position: absolute;
top: 50%;
left: 50%;
font-size: 2vmin;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgba(0,0,0,0.6);
}
#front #menu {
top: 9vmin;
left: 2vmin;
width: 56vmin;
height: 4vmin;
background: #dd2020;
z-index: 2;
}
#front #menu::before {
content:"";
position: absolute;
left: 23.4vmin;
width: 11.2vmin;
height: 12vmin;
top: 0;
background: #aa1010;
}
#front #page-title {
top: 16vmin;
left: 2vmin;
width: 20vmin;
height: 2vmin;
background-color: #333;
}
#front .paragraph {
border-top: 2vmin solid #ccc;
width: 56vmin;
left: 2vmin;
background: white;
}
#front .paragraph::before,
#front .paragraph::after {
content:"";
display: block;
width: 100%;
border-top: 2vmin solid #ccc;
border-bottom: 2vmin solid #ccc;
margin-bottom: 2vmin;
padding-bottom: 2vmin;
margin-top: 2vmin;
}
#paragraph-1 {
top: 20vmin;
}
#front #paragraph-2 {
top: 43vmin;
width: 33vmin;
}
#front #paragraph-2::after {
width: 56vmin;
border-bottom: 0;
}
#front #page-image {
top: 43vmin;
left: 37vmin;
width: 21vmin;
height: 10vmin;
background-color: turquoise;
}
#back {
background: #191619;
color: #eee;
transform: rotateY(180deg);
font-size: 2vmin;
box-sizing: border-box;
padding: 1vmin;
color: #a7925a;
font-weight: bold;
line-height: 2.75vmin;
}
#back > div {
white-space: nowrap;
}
#back .text, #back .symb {
color: #e3e3e3;
}
#back .comment {
color: #999;
}
#back .attr {
color: #ddca7e;
}
#back .value {
color: #96b38a;
}
#back .meta {
color: #9a8297;
}
#turn-page {
background: rgba(0,0,0,0);
border: rgba(0,0,0,0);
cursor: pointer;
position: absolute;
left: 50%;
top: calc(50% + 34vmin);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
font-size: 1.75vmin;
}
#advices {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 3;
}
.advice {
font-size: 1.6vmin;
position: absolute;
width: 20vmin;
left: 32vmin;
padding: 1vmin;
}
.advice::before {
content: "";
display: inline-block;
border-top: 1px solid black;
width: 5vmin;
height: 0;
position: absolute;
top: 2vmin;
left: 0;
transform: translate(-100%, 30%);
}
.advice::after {
content:"";
display: block;
width: 1.3vmin;
height: 1.3vmin;
background: black;
border-radius: 100%;
position: absolute;
top: 1vmin;
left: 0;
transform: translate(-6vmin, 33%);
}
.advice.right {
left: auto;
right: 32vmin;
text-align: right;
}
.advice.right::before {
left: auto;
right: 0;
transform: translate(100%, 30%);
}
.advice.right::after {
left: auto;
right: 0;
transform: translate(6vmin, 33%);
}
body.active .advice::before,
body.active .advice::after {
border-color: #aa0;
background-color: #aa0;
}
.advice span {
display: none;
color: rgba(0,0,0,0.6);
margin-top: 1vmin;
font-weight: normal;
}
.advice:hover,
.advice:focus,
.advice:active {
z-index: 4;
background: white;
box-shadow: 1vmin 1vmin 0 rgba(0,0,0,0.1);
}
body.active .advice:hover,
body.active .advice:focus,
body.active .advice:active{
box-shadow: -1vmin 1vmin 0 rgba(0,0,0,0.1);
}
.advice.back {
display: none;
}
body.active .advice.front {
display: none;
}
body.active .advice.back {
display: block;
}
.advice:hover span,
.advice:focus span,
.advice:active span {
display: block;
}
#advice-menu {
top: -21vmin;
}
#advice-skip {
top: -29vmin;
}
#advice-logo {
top: -28.5vmin;
}
#advice-img-type {
top: 15vmin;
}
#advice-font-color {
top: -3vmin;
}
#advice-lang {
top: -27vmin;
}
#advice-lang::before {
width: 2.5vmin;
}
#advice-lang::after {
transform: translate(3vmin, 33%);
}
#advice-meta {
top: -19vmin;
}
#advice-img-alt {
top: 21vmin;
}
#advice-html5 {
top: 9vmin;
}
#advice-struct {
top: 16vmin;
}
#advice-links {
top: -3vmin;
}
#advice-html5::before {
width: 7vmin;
}
#advice-html5::after {
transform: translate(8vmin, 33%);
}
#advice-struct::before,
#advice-links::before{
width: 11vmin;
}
#advice-struct::after,
#advice-links::after{
transform: translate(12vmin, 33%);
}
#advice-contrast {
top: -7vmin;
}
#advice-abbr {
top: 1vmin;
}
#advice-form {
top: 12vmin;
}document.querySelector("#turn-page").addEventListener("click", function() {
document.querySelector("body").classList.toggle("active");
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.