15 tips to improve web accessibility

<!doctype html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta name="author" content="Al Montoro" />
  </head>
  <body>
    <header>
      <h1>Page Title</h1>
      <ul role="navigation">
        <li><a href="home.html">Home</a></li>
        <li><a href="sec.html" aria-current="page">Section</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </header>
    <main>
      <section>
        <h2>Lorem Ipsum</h2>
        <p>
          <img src="pic.jpg" alt="Detailed description of picture"/>
          Lorem ipsum dolor sit amet
        </p>
        ...
      </section>
    </main>
  </body>
</html>

Link skips directly to the content

Make it easy for users to jump the header, menu, etc. and jump to the page main content by adding a skip link.

Menus should also be usable via keyboard

A way to control and navigate the menu via keyboard should be available for users that don't use a mouse.

Good color contrast

The color of the text and elements on the foreground should contrast enough with the color of the background.

Text must always
be readable

Pick a font that is easy to read, avoid small font sizes, and adapt the size to fit different screens.

Give meaning to abbreviations

Screen readers don't recognize acronyms or abbreviations. Use titles and the abbr tag to add meaning to them.

Descriptive and
easy to use forms

Use placeholders and labels to describe the fields. Organize fields in order. If there are errors, make it easy to jump and fix them.

The right image for the right place

Consider type and sizes. Use SVG for vectorial graphics and icons (leverage its accessibility features).

Specify the language of document/elements

It will help with Braille translation software, and with the pronounciation and definitions in screen readers.

Use metadata and social media tags

Well-crafted metadata provides orientation to users, screen readers, and external sites.

Use ARIA attributes and roles

They provide useful properties and make the web more accessible for people with disabilities.

Use semantic tags

Not only good for accessibility, but html5 tags improve performance and SEO.

Structure content logically

Headings and content must be structured in an orderly way. Don't skip headings, have valid HTML.

Always have
alternative text

First principle of web accessibility... and sometimes easier said than done.