accessibility
Lighthouse optimizations
calc
animations
scroll hijacking
CSS preprocessors
Essential
To support assistive technology
Ideal Support
To satisfy requirement for goverment
Specialized Support
Specialized audience/parts of page
Use plain language and avoid figures of speech, idioms, and complicated metaphors.
Make sure that button, a, and label element content is unique and descriptive. No click here and read more.
Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.
Centered-aligned or justified text is difficult to read.
Validate HTML. It helps across browsers but not as much needed anymore.
Use a lang attribute on the html element. Helps readers with pronouncement.
Do not disable viewport zoom.
Unique title for each page. It is read first.
Use landmark elements to indicate important content regions. (main, nav...)
Ensure a linear content flow.
Avoid using the autofocus attribute. Remove tabindex attribute values that aren't either 0 or -1.
Remove session timeouts.
Unique title for each page. It is read first.
Remove title attribute tooltips. It does not help with accessibility.
Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
Remove invisible focusable elements.
Check to see that keyboard focus order matches the visual layout.
Make sure that all img elements have an alt attribute.
Provide a text alternative for complex images such as charts, graphs, and maps.
Make sure that decorative images use null alt (empty) attribute values.
For images containing text, make sure the alt description includes the image's text.
Use heading elements to introduce content.
Heading elements should be written in a logical sequence.
Use only one h1 element per page or view.
Don't skip heading levels.
Use list elements (ol, ul, and dl elements) for list content.
This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements.
Use the a element for links. Links should always have a href attribute, even when used in Single Page Applications (SPAs).
Ensure that links are recognizable as links.
Ensure that controls have :focus states.
Use the button element for buttons. You can add type="button" to a button element to prevent the browser from attempting to submit form information when activated.
Provide a skip link and make sure that it is visible when focused.
Identify links that open in a new tab or window. Ideally, avoid links that open in a new tab or window.
Use the table element to describe tabular data.
Use the th element for table headers (with appropriate scope attributes).
scope = col | row
Use the caption element to provide a title for the table.
<table>
<caption>Delivery slots:</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">09:00 - 11:00</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th scope="row">11:00 - 13:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
[…]
</table>
All inputs in a form are associated with a corresponding label element. Use a for/id pairing to guarantee the highest level of browser/assistive technology support.
Use fieldset and legend elements where appropriate.
Inputs use autocomplete where appropriate.
Use fieldset and legend elements where appropriate.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<label> Address: <input name=ba autocomplete="section-blue shipping street-address"></label>
<input type="submit" value="Submit">
</fieldset>
</form>
Associate input error messaging with the input it corresponds to.
Make sure that error, warning, and success states are not visually communicated by just color.
Make sure that media does not autoplay.
Ensure that media controls use appropriate markup.
Check to see that all media can be paused.
Confirm the presence of captions.
Remove seizure triggers.
Confirm that transcripts are available.
Check your content in specialized browsing modes. Activate modes such as Windows High Contrast or Inverted Colors. Is your content still legible?
Increase text size to 200%. Is the content still readable? Does it cause content to overlap?
Double-check that good proximity between content is maintained.
Can you still see where links are among body content if everything is grayscale?
Use a simple, straightforward, and consistent layout.
Ensure animations are subtle and do not flash too much. Certain kinds of strobing or flashing animations will trigger seizures.
Provide a mechanism to pause background video.
Make sure all animation obeys the prefers-reduced-motion media query.
Check the contrast for all normal-sized text. Level AA compliance requires a contrast ratio of 4.5:1.
Check the contrast for all large-sized text. Level AA compliance requires a contrast ratio of 3:1.
Check the contrast for all icons. Level AA compliance requires a contrast ratio of 3.0:1.
Check custom ::selection colors.
Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.). Level AA compliance requires a contrast ratio of 3:1.
Check text that overlaps images or video. Is text still legible?
Ensure sufficient space between interactive items in order to provide a scroll area.
Check that the site can be rotated to any orientation.
Remove horizontal scrolling.
Ensure that button and link icons can be activated with ease. Are they big enough?
A <script> tag that:
Is in the <head> of the document.
Does not have a defer attribute.
Does not have an async attribute.
A <link rel="stylesheet"> tag that:
Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet.
Does not have a media attribute that matches the user's device.
If there's code in a render-blocking URL that's not critical, you can keep it in the URL, and then mark the URL with async or defer attributes
<link rel="preload" href="styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="styles.css">
</noscript>
see <amp-img>
Accept-Encoding: gzip, compress, br
vs
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
h1,h2{background-color:#000000;}
Does not use HTTPS
Links to cross-origin destinations are unsafe
Includes front-end JavaScript libraries with known security vulnerabilities
Page lacks the HTML doctype, thus triggering quirks mode
Browser errors were logged to the console
Displays images with incorrect aspect ratio
Does not use HTTP/2 for all of its resources
Uses document.write()
Does not use passive listeners to improve scrolling performance
.main-content {
/* Subtract 80px from 100vh */
height: calc(100vh - 80px);
}
.el {
/* Valid 👍 */
margin: calc(10px * 3);
/* Valid 👍 */
margin: calc(3 * 10px);
/* Invalid 👎 */
margin: calc(30px * 3px);
}
div {
/* Index value comes from the HTML (with a fallback) */
animation-delay: calc(var(--index, 1) * 0.2s);
}
/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
.circle {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
.container:hover & {
transform: translateX(200px);
}
}
.circle0 {
@extend .circle;
background: PaleTurquoise;
transition: all 1.5s linear;
}
.box {
background: steelblue;
border-radius: 5px;
display: inline-block;
height: 80px;
margin: 20px;
width: 80px;
.container:hover & {
transform: scale(1.4); // also can be rotate
}
}
.box1 {
transition: all 1.3s;
}
.carousel__slides {
display: flex;
flex-direction: row;
scroll-snap-type: x mandatory;
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.carousel__slide {
flex: 0 0 100%;
height: calc(100vh - 6.5rem);
scroll-snap-align: start;
}
Adds compilation step to create CSS from other language (SASS/SCSS)
Was used to add more functionality to CSS
Nowadays to add old browser support
Or mixins (to change shades of colors)
SCSS SYNTAX
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}