Accessibility For Beginners with HTML and CSS
Tags: beginners, html, css
Published: 2018-08-01 12:17:12

---
title: Accessibility For Beginners with HTML and CSS
published: true
description: A quick cheat sheet on improving a web site's accessibility using HTML and CSS.
tags: beginners, html, css
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ibt6f9x6w37yfyy7jdi7.jpeg
---
This is a post for my #100DaysOfCode Day 2 based on freeCodeCamp material I learned.

Websites should be open and accessible to everyone, regardless of a user's abilities, but often the opposite happens. Here's a quick cheat sheet on improving a web site's accessibility using HTML and CSS.

**1. Images should have alternative text when their contents are not obvious from reading the text**
```html
<img src="logo.jpeg" alt="Company logo">
```

**2. h1 - h6 text are important for screen readers, keep their order**
```html
<!-- Don't do this -->
<h1>A header</h1>
<h4>A smaller header</h4>
<!-- Do this -->
<h1>A header</h1>
<h2>A smaller header</h2>
```

**3. Give structure to your page by using main, header, footer, nav, article, section, and audio**
```html
<header>
  <h1>The header!</h1>
</header>
<main>The document body</main>
<footer></footer>
```

**4. Use article element for blog entries, forum posts, or news articles**
```html
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
```

**5. Use both visual and auditory content**
So users with visual and/or auditory impairments could access it.

**6. Use the figure element for charts**
```html
<figure>
  <img src="your_chart.jpeg" alt="Short description of the chart">
  <br>
  <figcaption>
    Description of the chart.
  </figcaption>
</figure>
```

**7. Use label elements with inputs**
```html
<label for="name">Name:</label>
<input type="text" id="name" name="name">
```

**8. Group radio buttons in fieldsets**
```html
<fieldset>
  <legend>Choose one of these three items:</legend>
  <input id="one" type="radio" name="items" value="one">
  <label for="one">Choice One</label><br>
  <input id="two" type="radio" name="items" value="two">
  <label for="two">Choice Two</label><br>
  <input id="three" type="radio" name="items" value="three">
  <label for="three">Choice Three</label>
</fieldset>
```

**9. Use date fields with a picker**
```html
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
```

**10. Standartize time with time element**
This element's datetime attribute is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.
```html
<time datetime="2013-02-13">last Wednesday</time>
```

**11. Make some content visible only for screen readers**
Like this:
```css
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
```
Don't use:
- display: none; or visibility: hidden; they hide content for everyone, including screen reader users

- zero values for pixel sizes, such as width: 0px; height: 0px; it removes that element from the flow of your document, screen readers will ignore it

**12. Use high contrast text**
The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black. Foreground and background colors need sufficient contrast so colorblind users can distinguish them.

**13. Use descriptive link text**
```html
This:
<a href="">information about computers</a>
is better than this:
<a href="">Click here</a>
```

**14. Use access keys for important links**
```html
<button accesskey="b">Important Button</button>
```

**15. Use tabindex to add keyboard focus**
Links and form controls automatically get keyboard focus when a user tabs through a page. This functionality can be given to any other element by using a tabindex="n" on them, where n is not negative.
```html
<a href="" tabindex="1">First accessed link</a>
<a href="" tabindex="2">Second accessed link</a>
```
Photo by [Rodion Kutsaev](https://unsplash.com/@frostroomhead) on [Unsplash](https://unsplash.com/)