Step 1: Recognize that there is a problem.

Note: this one step will do more for your understanding of accessibilty than anything I can write here.

At the core of accessibility lies empathy. Its awfully hard to program for something that you never use and don't test. So that's what I propose:

Fire up the screen reader. ( Check the bottom of the page for more info on that )
Close your eyes and try to navigate around by using the screen reader.
Try to google something using a screen reader or do other normal computer tasks but use the screen reader instead of
Have spiritual awakening and gain understanding into the plight of your fellow man.

In all seriousness you should now know that the internet is hard to use if you're visually impaired. But screen readers are only one dimension of accessibilty.

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

Text vs. Images

Text is core to the content of your page, so making it accessible to everyone is important. Here are some general guidelines to follow.

Prefer using actual text over text inside a graphic. Assistive technologies can't read an image, and the text in an image can't be resized by a browser, like normal text. If an image has text that needs to be read, add it in the alt attribute of the image.

<img src="assets/img/buy-now.jpg" alt="Buy now">

Contrast

The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. The minimum recommended contrast ratio is 4.5:1. There are no automated tools that can effectively check this for you, but if you aren't sure about a specific color combination, you can run it through one of many color contrast checkers, such as WebAIM's color contrast checker.

Google Chrome's Accessibility Developer Tools also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.

Type Size

When possible, use the rem and em units to size everything. Not just font size, but also padding, margins, and any length value. This ensures that your design scales up and down uniformly if the user changes their browser's text size. It's common for vision-impaired users to resize their browser up to 200% zoom.

We use the rem unit nearly everywhere in Foundation, and even wrote a Sass function to make it a little easier. The rem-calc() function can take one or more pixel values and convert them to proper rem values.

.element {
  width: rem-calc(300);
  padding: rem-calc(10 16);
}

ARIA

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar.

Landmark Roles

ARIA landmark roles are helpful landmarks that can be used by AT to navigate a website.

These landmark roles are essentially screen reader specific directives. Below is a list of the most common aria roles in modern websites:

```
<header role="banner"></header>
```
A region of the page that is site focused. Typically your global page header.
```
<nav role="navigation"></nav>
```
Contains navigational links.
```
<article role="article"></article>
```
Represents an independent item of content. Use only once on outermost element of this type.
```
<aside role="complimentary"></aside>
```
Supporting section related to the main content even when separated.
```
<footer role="contentinfo"></footer>
```
Contains information about the document (meta info, copyright, company info, etc).
```
<form role="search"></form>
```
Add a `search` role to your primary search.

Note: the role attribute is supposed to describe what the element is doing. So if you have a div container with a bunch of links consider adding the role="navigation" attribute to ensure proper understanding by accessibility programs and screen readers

Language Attributes

Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation. Pretty self explainitory.

```
<html lang="en"></html>
```
Specify a language with the lang attribute on the <html> element.

Accessibility