Skip to content

Here's a list of simple accessibility and other best practices to know while writing your code.

Notifications You must be signed in to change notification settings

anoshaahmed/accessibility-info

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 

Repository files navigation

Accessibility Info // and other best practices

List of simple accessibility practices to know and other common mistakes to avoid while writing your code


Start tag

<!DOCTYPE html>

Always add the "!DOCTYPE"

HTML Language

<html lang="en">

Title

<head>
  <title>Some title</title>
</head>

Semantic tags

The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.

For example,

<body>
  <header>
    ...header of the webpage...
  </header>
  
  <main>
    ...main content of the webpage...
  </main>
  
  <footer>
    ...footer of the webpage...
  </footer>
</body>

Read more here

Heading

  • A first-level heading, (<h1>), indicates what the webpage is about and it is a must that every page has one (and only one).
  • If an image is being used as the h1, then the alt attribute of the img must not be empty.
  • Headings must start with <h1>, and move up by one level each time. This makes it easier for a screen reader to navigate the page.

Image

Image tags (<img>) must contain alternative text (alt=" ") for a screen reader to read out loud to the user.

For example,

<img src="images/flower.jpg" alt="Pink flower">

However, images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string ("").

Unordered and Ordered List

<ul> or <ol> must contain <li>. In other words, the direct children of unordered(<ul>) or ordered(<ol>) lists must be list items(<li>).

For example, if images need to be put in a list, then the images must go inside of <li> tags.

<ul>
  <li>
    <img src="images/image-1.jpg" alt="Spaghetti">
  </li>
  
  <li>
    <img src="images/image-2.jpg" alt="Ravioli">
  </li>
  
  <li>
    <img src="images/image-3.jpg" alt="Penne">
  </li>
  
  <li>
    <img src="images/image-4.jpg" alt="Macaroni">
  </li>
</ul>

ID vs. Class

IDs must only be used once. Use classes instead of IDs if they're required for styling on more than one element.

Link

<a> should have an aria-label. Read more here

For example,

<ul class="social-media">
  <li>
    <a aria-label="Facebook">
      <img src="images/icon-facebook.svg" alt="facebook">
    </a>
  </li>
  
  <li>
    <a aria-label="Twitter"><img src="images/icon-twitter.svg" alt="twitter">
    </a>
  </li>
  
  <li>
    <a aria-label="Instagram"><img src="images/icon-instagram.svg" alt="instagram">
    </a>
  </li>
</ul>

Button

Like <a> tags, <button> tags must also contain an aria-label=" ". Read more here

Link vs. Button

In simple words, use <a> if it needs to take the user to a different webpage; whereas, use a button if it needs to fulfill a small purpose on the same page, for example, a button to make the text green. Read more here

Don't use a <button> with an <a> inside of it. Instead, use <a> and style it like a button.

Form

An <input> must have a corresponding <label>

Section

A <section> needs a heading; if you don't need a heading in it, use some other element such as <div>

Article

An <article> needs a heading; if you don't need a heading in it, use some other element such as <div>


I hope this helps you :)

About

Here's a list of simple accessibility and other best practices to know while writing your code.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published