54 lines (42 loc) · 1.2 KB

A11y and HTML: The good and the bad way

There will be 2 examples of HTML code: the good and the bad one. The goal is to show how to make HTML code more accessible

graph LR
    A[The bad example]
     --> B[The good example]

Table of Contents

The bad example
- What's wrong with it?
The good example
- What's good about it?

The bad example

… go to the bad example!

What's wrong with it?

meta tags missing
no lang attribute
no title tag
more than one h1
too little semantic markup
no proper heading hierarchy
no proper form controls
no proper image markup
no proper link markup
no proper list markup
inline CSS styles
email as a link instead of mailto

The good example

… go to the good example!

What's good about it?

all necessary meta tags present
lang attribute present
title tag present
only one h1
semantic structure and markup
heading hierarchy
proper form controls
proper image markup
proper link markup
proper list markup
no inline CSS styles
email as a mailto link