Accessibility guidance

Markup

Specify page language with the lang attribute on the <html lang="en"> element.
Give page meaningful and unique title using the <title> tag.
For page sections and articles use headings (e.g. <h1>, <h2>, <h3>).
Use proper markup. For example, list items should be enclosed in list tags (<ul>, <ol>, <dl>).
Always indicate headers in data tables using <th> tags, and associate all data cells with their header.
Use ARIA roles which provide screen reader with more information. The following ARIA roles should be included in every project:
- banner - typically the header of page that includes the name of the site (<header role="banner">),
- navigation - use on any navigation list, typically on the nav element (<nav role="navigation">),
- main - main content in site (<main role="main">),
- contentinfo - for footer of page (<footer role="contentinfo">),
- search - for the search form (<form role="search">).

Be sure all images have a meaningful and descriptive alt attributes. (alt="Description of the image")

Always label all form ﬁelds with the <label> tag. If a form ﬁeld has no speciﬁc text label on the page, add one, and hide it with CSS or use the title attribute.
All labels should have a for attribute which corresponds to an id of the input field it relates to. (e.g. <label for="name">Name:</label><input id="name" type="text">)
Identify all input errors in text. Error should't be just image, icon or input with red border.

Ensure all links have :hover and :focus states and is recognizable.
Never use maximum-scale=1.0 for responsive layouts. Content should be scalable.
Make sure all links have a text. For example, if link should be just icon which don't have any text, you should add text and hide it.
Be sure your page is still usable when images are turned off. (This may include making sure that contrast is still sufficient if you happen to be using a background image and that image is removed.)