Introduction to Accessibility

Todays Outline

What is Disablibility and Accessibility
Web Accessibility and Some Examples
Guidelines
ARIA
Tools

Disability, what is it?

Environment: Where am I?
Tools: What am I using?
Task: What am I doing?

Accessibility, what is it?

How: do we bridge the gap between achieving a task with the tools that we have in the environment that we are in?

Web Accessibility

Developers on the web have a responsibility and an opportunity to create accessible content.

Information such as text, images and media
Semantics and structure

Web Content Accessibility Guidelines (WCAG)
http://www.w3.org/WAI/intro/wcag.php

Examples

Twitter
https://twitter.com/

Air Canada
http://www.aircanada.com/en/home.html

What Can I Do?

A few of many accessibility tips and examples you can use:

Alternative Text
```
<img src="images/doge_icecream.jpg" />
```

<img src="images/doge_icecream.jpg" alt="Doge Ice Cream" />

What Can I Do?

Focus Indicator

<input type="text" placeholder="Am I Focused?" />

<input class="focus-good-input" type="text" placeholder="I am definitely focused!" />


              .focus-good-input:focus, .focus-good-input:hover {
                outline:1px solid red;
                background:yellow;
              }

What Can I Do?

Contrast

This is some text with low contrast.


              .low-contrast {
                color: #191970;
              }

This is some text with high contrast.


              .high-contrast {
                color: yellow;
              }

What Can I Do?

Visibility

Bad
- Using z-index to hide objects
- Using off screen space to hide objects
- Using opacity: 0; to hide objects
Good
- Using hidden attribute (if supported)
- Using display: none; style
- Using visibility: hidden; style

What Can I Do?

Labels

Name:


              <input id="name" type="text" />

Name:


              <label for="name">Name:</label>
              <input id="name" type="text" />

What Can I Do?

Structure:


              <body>
                <h1>heading text..
                <section><h1>heading text...
                  <section><h1>heading text...
                    <section><h1>heading text...
                    </section>
                  </section>
                </section>
              </body>


              <body>
                <h1>heading text..
                <section><h2>heading text...
                  <section><h3>heading text...
                    <section><h4>heading text...
                    </section>
                  </section>
                </section>
              </body>

What Can I Do?

Structure and Semantics:

Semantic HTML5 elements


              <main></main>


              <article></article>

Do not overuse them!

What Can I Do?

If your HTML is valid - GOOD

If you follow WCAG guidelines - AMAZING

What About More Complicated Web Application?

ARIA (Accessible Rich Internet Applications Suite)

Defines a way to make Web Content and Web Applications more accessible to people with disabilities.
http://www.w3.org/WAI/intro/aria
What is ARIA?

ARIA is an extension of the HTML.
ARIA does not require any knowledge of other technologies.

You can start using ARIA by adding attributes to your HTML elements.

ARIA Roles

Indicate the type of the element. Provides the semantics.

Examples of Roles

Widget Roles: button, alert, dialog, tablist, tabpanel, tab...

<div role="dialog" hidden>
  <h2 id="dialogTitle">This is a dialog title</h2>
  <p id="dialogDesc">This is a description of what this dialog is about.</p>
  <button>Close</button>
</div>

<ul role="tablist">
  <li>
    <a role="tab" id="fruits-tab" href="#fruits" onclick="showFruits();">Fruits</a>
    <div role="tabpanel" id="fruits">...</div>
  </li>
  <li>
    <a role="tab" id="vegetables-tab" href="#vegetables" onclick="showVegetables();">Vegetables</a>
    <div role="tabpanel" id="vegetables">...</div>
  </li>
</ul>

ARIA Roles

Indicate the type of the element. Provides the semantics.

Examples of Roles

Document Structure Roles: article, math, presentation, toolbar...

<ul role="tablist">
  <li role="presentation">
    <a role="tab" id="fruits-tab" href="#fruits" onclick="showFruits();>Fruits</a>
    <div role="tabpanel" id="fruits">...</div>
  </li>
  <li role="presentation">
    <a role="tab" id="vegetables-tab" href="#vegetables" onclick="showVegetables();">Vegetables</a>
    <div role="tabpanel" id="vegetables">...</div>
  </li>
</ul>

ARIA Roles

Indicate the type of the element. Provides the semantics.

Examples of Roles

Landmark Roles: main, search, log, complementary...

<main role="main">
  Content here is part of the main region of the document
  ...
</main>

ARIA States and Properties

Provide specific Information about an object.

Examples of States and Properties

Global States and Properties: aria-describedby, aria-labelledby, aria-disabled...

<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
  <h2 id="dialogTitle">This is a dialog title</h2>
  <p id="dialogDesc">This is a description of what this dialog is about.</p>
  <button>Close</button>
</div>

<ul role="tablist">
  <li role="presentation">
    <a role="tab" id="fruits-tab" href="#fruits" onclick="showFruits();>Fruits</a>
    <div role="tabpanel" id="fruits" aria-labelledby="fruits-tab">
      ...
    </div>
  </li>
  <li role="presentation">
    <a role="tab" id="vegetables-tab" href="#vegetables" onclick="showVegetables();">Vegetables</a>
    <div role="tabpanel" id="vegetables" aria-labelledby="vegetables-tab">
      ...
    </div>
  </li>
</ul>

ARIA States and Properties

Provide specific Information about an object.

Examples of States and Properties

Widget Attributes: aria-selected, aria-controls, aria-haspopup, aria-autocomplete...

<ul role="tablist">
  <li role="presentation">
    <a role="tab" id="fruits-tab" href="#fruits" onclick="showFruits(); aria-selected="true">Fruits</a>
    <div role="tabpanel" id="fruits" aria-labelledby="fruits-tab">
      ...
    </div>
  </li>
  <li role="presentation">
    <a role="tab" id="vegetables-tab" href="#vegetables" onclick="showVegetables();" aria-selected="false">Vegetables</a>
    <div role="tabpanel" id="vegetables" aria-labelledby="vegetables-tab">
      ...
    </div>
  </li>
</ul>

ARIA States and Properties

Provide specific Information about an object.

Examples of States and Properties

Relationship Attributes: aria-controls, aria-owns, aria-posinset, aria-setsize...

<ul role="tablist">
  <li role="presentation">
    <a role="tab" id="fruits-tab" href="#fruits" onclick="showFruits(); aria-controls="fruits" aria-selected="true">Fruits</a>
    <div role="tabpanel" id="fruits" aria-labelledby="fruits-tab">
      ...
    </div>
  </li>
  <li role="presentation">
    <a role="tab" id="vegetables-tab" href="#vegetables" onclick="showVegetables();" aria-controls="vegetables" aria-selected="false">Vegetables</a>
    <div role="tabpanel" id="vegetables" aria-labelledby="vegetables-tab">
      ...
    </div>
  </li>
</ul>

Tools

Thank You

Yura Zenevich

Email: yzenevich@mozilla.com

IRC: yzen

Twitter: yura_zen

Introduction to Accessibility

Todays Outline

What is Disablibility and Accessibility

Web Accessibility and Some Examples

Guidelines

ARIA

Tools

Disability, what is it?

Accessibility, what is it?

Web Accessibility

Web Content Accessibility Guidelines (WCAG) http://www.w3.org/WAI/intro/wcag.php

Examples

Twitter https://twitter.com/

Air Canada http://www.aircanada.com/en/home.html

What Can I Do?

Alternative Text

What Can I Do?

Focus Indicator

What Can I Do?

Contrast

What Can I Do?

Visibility

Bad

Good

What Can I Do?

Labels

What Can I Do?

What Can I Do?

Semantic HTML5 elements

Do not overuse them!

What Can I Do?

If your HTML is valid - GOOD

If you follow WCAG guidelines - AMAZING

What About More Complicated Web Application?

ARIA (Accessible Rich Internet Applications Suite)

What is ARIA?

ARIA Roles

Examples of Roles

ARIA Roles

Examples of Roles

ARIA Roles

Examples of Roles

ARIA States and Properties

Examples of States and Properties

ARIA States and Properties

Examples of States and Properties

ARIA States and Properties

Examples of States and Properties

Tools

Online

Firefox Add-Ons

Chrome Extensions

Thank You

Web Content Accessibility Guidelines (WCAG)
http://www.w3.org/WAI/intro/wcag.php

Twitter
https://twitter.com/

Air Canada
http://www.aircanada.com/en/home.html