To check out and include:

Website Checklist

A list of elements that needs to be defined for the website to be ready for big action.

Language
Metadata
1. Opengraph
Icons
Roles
Styles
Humans
Futurefriendliness
Performance

1. Language

A <html> element at the top of your document should have the language specified. Remember about proper language codes: en-us, pl-pl, etc.

2. Metadata

The site needs those in the <head>:

title -- the page title, best if every subpage has it's own (with the order being POST -- CATEGORY -- SITE)
meta name="keywords" -- a list of , -separated tags that describes the content
meta name="description" -- a short paragraph describing the content of main site, category or a single post
meta name="author" -- a list of , -separated names of main people involved in the project
<link rel="author" href="humans.txt"> -- an url leading to the humans.txt file
<link rel="home" href="http://site.url"> -- a link to home root page

2.1. Opengraph

Opengraph meta elements -- mainly for facebook link sharing:

<meta property="og:type" content="website"> -- the type of document, for the most projects it's "website"
<meta property="og:site_name" content="name"> -- the name of the site
<meta property="og:title" content="title"> -- the same as in Metadata
<meta property="og:description" content="description"> -- the same as in Metadata
<meta property="og:url" content="http://site.url"> -- the same as in Metadata
<meta property="og:image" content="image-200.png"/> -- an image with dimensions at least 200x200 px

3. Icons

<link rel="icon" href="favicon.ico"> -- a favicon that should be placed in the root directory
<link rel="apple-touch-icon" href="apple-touch-icon.png"> -- an image with dimensions of 152*152 px

4. Roles

There is a long list of ARIA roles that exists as a draft. There are some crucial, some useful ones and a bunch of HTML5 tags duplicates. Use the second ones with caution, and don't use the third ones -- if you need them, it means that your markup is probably not semantic enough.

The must:

banner -- the main header element of the page with logo, main navigation, etc.
contentinfo -- the main information about the document with meta info, copyright, company name, etc.
complementary -- the one <aside> element that corresponds to the main content
main -- the main content, for example: <section class="page-content" role="main">
navigation -- for the main menu (in the header an footer aswell)
search -- the primary search form

The useful:

tree -- a multiple-nested list of items that can be collapsed and expanded
widget -- an abstract widget component, with some more-specific cases existing:
- alert -- a flash message about some event, time-sensitive
- progressbar -- a progress bar time-related
- timer -- a countdown, or other time-related automatically updating element
- tooltip -- a contextual popup with description of an element

5. Styles

There are some things in your CSS stylesheet that must be included and taken into consideration:

all links should have :focus state
the ::selection selector should be populated with project colors
all links should be recognizable (for text links it is best to underline)
test color contrast with some online tools

6. Humans

Introduction and being thankful in the humans.txt file.

7. Futurefriendliness

A README.md with the page maintenace, update and inner workings explained. Don't be very specific -- your HTML markup, SCSS styles and JavaScript scripts should be semantic and well commented instead.

8. Performance

Run some overall tests:

Optimize images with ImageOptim on Mac or Kraken.io Web Interface
Check loading times at GPRS or EDGE speed
Check accessibility at tiny screens
Check links and interactive elements for fat-fingers

magicznyleszek/website-checklist.md