Accessibility
Presentations
-
Accessibility and the Modern Development Workflow
The Tenon plugin and how it works with your workflow
-
Using Responsive Images Responsibly
Proper techniques for using responsive images
-
Accessible Modern Web Applications with WAI-ARIA
Advanced ways of implementing ARIA
-
Integrating Accessibility in the Web Project Lifecycle
Addressing the problems we face trying to implement making sites accessible into our workflow.
All presentations can be found on YouTube
Interesting Facts
- Approximately one-third of people over 65 years of age are affected by disabling hearing loss.
- 82% of people living with blindness are aged 50 and above.
New public websites and web content must conform with WCAG 2.0 Level A
All public websites and web content posted after January 1, 2012, must conform with WCAG 2.0 Level AA.
- You don’t have to modify content posted before 2012
- You don’t have to make your internal website accessible.
WCAG 2.0
- Provide text alternatives for all images.
- Provide alternatives for time-based media.
- Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
- Make it easier for users to see and hear content including separating foreground from background.
WAI - ARIA
What is ARIA?
ARIA (Assistive Rich Internet Applications), is a spec from the W3C and created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. Out of the box, screen readers work with regular HTML, but adding ARIA can provide screen reader users with more context and greater interactivity with content.
ARIA has no effect on how elements are displayed or behave in browsers. It does not add new functionality and is meant to act only as an extra descriptive layer for screen readers.
How do we use ARIA?
Bootstrap tab list
Current Bootstrap code
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Articles</a></li>
</ul>
<!-- Nav Content -->
<div class="tab-content">
<div class="tab-pane active" id="home">Welcome</div>
<div class="tab-pane" id="profile">My profile.</div>
<div class="tab-pane" id="messages">My articles.</div>
</div>ARAI improved code
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab" aria-controls="home" aria-selected="true" tabindex="1">Home</a></li>
<li><a href="#profile" data-toggle="tab" aria-controls="profile" tabindex="2">Profile</a></li>
<li><a href="#messages" data-toggle="tab" aria-controls="articles" tabindex="3">Articles</a></li>
</ul>
<!-- Nav Content -->
<div id="myTabContent" class="tab-content" aria-live="polite">
<div class="tab-pane active" id="home" aria-labelledby="tab1" tabindex="1">Welcome</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="tab2" tabindex="2">My profile.</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="tab3" tabindex="3">My articles.</div>
</div>
<li class="active"><a href="#home" data-toggle="tab" aria-controls="home" aria-selected="true" tabindex="1">Home</a></li>
<div class="tab-pane active" id="home" aria-labelledby="tab1" tabindex="1">Welcome</div>