SlideShare a Scribd company logo
Accessibility (a11y)
A feature you can build
jQuery San Diego 2014
Monika Piotrowicz (@monsika)
Monika
Piotrowicz
Front End Web Developer
Shopify
@monsika
@shopify
I’m just...
A regular Front End Developer...
So how’d I get here?
A short story, starring WCAG 2.0 AA

Recommended for you

Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic

The document provides an introduction and overview of the Ionic framework for building mobile apps. It discusses that Ionic builds on existing technologies like AngularJS, Cordova plugins, and a layout engine. It reviews Ionic's technology stack including AngularJS, UI Router for routing, and Ionic components. It demonstrates how to generate a starter app, and shows examples of lists, buttons, icons, and touch gestures in Ionic.

mobilecordovahtml5
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins

This document discusses jQuery UI and plugins. It provides an overview of jQuery UI classes that can be used to style elements. It also demonstrates several common jQuery UI widgets like buttons, accordions, dialogs, and tabs. The document discusses jQuery UI effects for animations and transitions. It provides tips for identifying good plugins based on aspects like their API, documentation, support, and community. Overall, the document is an introduction to using jQuery UI and evaluating jQuery plugins.

pluginsthemerollercss framework
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

cssweb design and developmentresponsive
Today

• Introduction to accessibility
• Techniques you can implement today
• Introduction to screen readers & ARIA
• Testing tips
Web Accessibility
•

“When sites are correctly designed,
developed and edited, all users can have
equal access to information and
functionality” - Wikipedia

•
•
•

“Able to be easily obtained or used; easily
understood or appreciated” - Oxford Dictionary
Accessibility ~ Usability
All people can use an application, and it
should be easy to use for all people;
rough

Accessibility by the #’s
Group

Population

Vision Problems1

3-10%

Colorblindness2

4-8%

Physical Functioning1

8%

Cognitive Difficulty1

6%

Hearing Difficulty

3-11%

Assistive Tools

•
•
•
•
•

screen readers
screen magnifiers
keyboard-only
braille display
bumped font size

1 - CDC Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2011
http://1.usa.gov/M6tObC (under 65/over 65)
2 - Range worldwide prevalence of red-green color deficiency among men, 2012
http://1.usa.gov/M6tKsz
Me last year...

Recommended for you

Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk

What strategies can you take to bring a web application to a mobile device? Six steps from pure HTML/CSS all the way to almost native applications.

titaniumjquery mobilesencha
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015

Presentation from Denver Open Source Users Group in February 2015. http://www.meetup.com/DOSUG1/events/219099019/ AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems. Finally, you'll learn about my experience developing several real-world applications using AngularJS, HTML5 and Bootstrap.

coffeescriptgrunthttp2
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins

The document discusses lessons learned from examining popular jQuery plugins. It summarizes 30 top plugins, describing why each was created and how it grew. Key takeaways are that authors build plugins to make something better, for fun/exploration, or client needs. Managing features and user feedback is challenging. The best plugins have great demos, documentation, browser support testing, and are fun. The author is available for questions.

pluginsjquery
Go!
WCAG
The standard
http://www.w3.org/TR/WCAG20/

Understanding WCAG
http://www.w3.org/TR/UNDERSTANDING-WCAG20/

Techniques
http://www.w3.org/TR/WCAG20-TECHS/

Quick Reference
http://www.w3.org/WAI/WCAG20/quickref/

FAQ
http://www.w3.org/WAI/WCAG20/wcag2faq.html
Accessibility - A feature you can build
Accessibility
!=
just a checklist

Recommended for you

Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users. This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!

htmlcssprogressive enhancement
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All

Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.

responsive designjquery uihtml5
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013

The document summarizes information about the jQuery Foundation. It discusses that the Foundation coordinates work on the jQuery code, documentation, infrastructure and events. It is a non-profit organization funded through conferences, donations and memberships. The Foundation supports jQuery projects and web developers, and participates in standards processes. Upcoming releases of jQuery will be published on Bower and npm for dependency management, use AMD internally, defer feature detects, and aim to reduce forced layouts to improve performance. Developers are encouraged to understand how browsers work and avoid patterns that can cause layout thrashing.

layoutreflowperformance
Starting out
Early accessibility considerations
First Steps
• functional keyboard-only
• fallbacks for visual information
• well-functioning forms
Accessibility - A feature you can build
Keyboard Strategy
•

obvious focus states (keep those outlines!)

Recommended for you

Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.

user experience designhtml5web development
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5

The document discusses HTML5 game development. It covers various topics like game concepts, HTML5 components for games, developing a game step-by-step and advanced topics. It focuses on HTML5 canvas for graphics, local storage for data, and describes functions for animations, interactions, controls and other elements needed for game development. The document provides examples for drawing, colors, images and text on the canvas.

game development using html 5
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards

Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?

wdsgov08web standardshtml
a,
a:focus {
outline: none;
outline: 0;
}
Keyboard Strategy
✓ obvious focus states (keep those outlines!)
•

fallbacks for :hover & click()
↳ :focus & keydown()
Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ fallbacks for :hover & click()
↳ :focus & keydown()

•

add tabIndex=0 & key events to non-focusable
elements
Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ fallbacks for :hover & click()
↳ :focus & keydown()

✓ add tabIndex=0 & key events to non-focusable
elements

•

avoid keyboard traps & wasting time

Recommended for you

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.

htmlcssprogressive enhancement
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance

This document discusses improving website performance. It outlines three pillars of performance: visibility, interactivity, and responsiveness. For each pillar, it recommends books and techniques. Tips include using tools like Firebug and YSlow, delaying initialization, throttling and debouncing events, and profiling code. While optimizations can improve performance, they also increase costs. The document emphasizes establishing a baseline and focusing first on low-hanging fruit before more complex optimizations. It concludes by thanking the sponsors and providing contact information.

CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)

Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.

failuresuccesscss
Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ fallbacks for :hover & click()
↳ :focus & keydown()

✓ add tabIndex=0 & key events to non-focusable
elements

✓ avoid keyboard traps & wasting time
• HTML can get you there, FREE!
WebAIM http://bit.ly/M24Da2
Keyboard Events http://bit.ly/M241Br
Wanted: Free Events!

<span class="btn-style toggle-trigger">Click to Toggle</span>
<a href="#" class="btn-style toggle-trigger">Click to Toggle</a>
<button type="button" class="toggle-trigger">Click to Toggle</
button>

Use the button element http://bit.ly/1efaOO1
Links aren’t buttons http://bit.ly/1efaT4o
Accessibility - A feature you can build
Visual Considerations
• start with a good font size & high contrast
•
•
•

WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf
Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
NoCoffee (Chrome) http://bit.ly/1ljQvFF

Recommended for you

Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu Presented by Ksenija Gogic, TWG Overview What are components? How can designers apply a component-minded approach to their workflow? How can we leverage components to improve the design handoff? Ultimately – how can designers and developers work together even better? Using React as a framework, Ksenija will discuss how to design for a component-based web application to make for a more efficient workflow, an easier design handoff, and a better understanding between roles. Objective To create a common language and understanding when working with component-based web frameworks between designers and developers. Target Audience Designers and developers looking to make their collaborative workflow even better. Five Things Audience Members Will Learn How to take a component-minded approach to building a design system How to design and create components using Sketch symbols How to assemble (compose) collections of components using Sketch symbols How to work with modifiers (props) to customize components How to ensure everyone is speaking the same language

 
by FITC
web designweb developmentweb unleashed 2017
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009

This document outlines a presentation on beginning jQuery. It introduces jQuery, its history and core team. It also covers how to set up jQuery and explains its core functionality, including selecting elements, manipulating the DOM, AJAX, and events.

conference2009jqcon
Mash y amma
Mash y ammaMash y amma
Mash y amma

Se denomina software libre a aquel programa de computadora que se distribuye junto con su código fuente, dando al usuario la libertad de modificarlo, estudiarlo, copiarlo, adecuarlo y distribuirlo...

Visual Considerations
✓ start with a good font size & high contrast
•
•
•

WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf
Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
NoCoffee (Chrome) http://bit.ly/1ljQvFF

• don’t rely on color alone
•

add legends and texture or symbols
Red-Green Colorblind
(Deuteranopia)
Visual Considerations
✓ start with a good font size & high contrast
•
•
•

WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf
Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
NoCoffee (Chrome) http://bit.ly/1ljQvFF

✓ don’t rely on color alone
•

•

add legends and texture or symbols

all images have a meaningful alt attribute
• W3C How to write Alt Text http://bit.ly/1aKwIOg
• More from A List Apart http://bit.ly/1aKwRkI
Accessibility - A feature you can build

Recommended for you

How to give your executive summary a High Reader Impact
How to give your executive summary a High Reader ImpactHow to give your executive summary a High Reader Impact
How to give your executive summary a High Reader Impact

During the past eighteen months, the Systems Products laboratory developed a way for companies with large fleets of trucks to communicate directly with their drivers through a satellite link at any time. More than 94% of data and voice transmissions from tests with eight trucks over twenty states using a prototype satellite phone succeeded, though transmissions were sometimes limited by trucks moving outside the satellite's coverage area or obstructions blocking the signal. Overall, testing clearly proved the prototype's effectiveness, and further work on developing new antennas and satellite configurations to expand coverage was recommended.

business and economyproject managementonline teaching and learning
BC Resume
BC ResumeBC Resume
BC Resume

Barbara Crystal is a strategic marketing communications consultant with over 30 years of experience developing messaging, content, and marketing strategies across various industries including healthcare, insurance, and financial services. She has expertise in integrating messaging across multiple channels and audiences. Her professional experience includes leading product marketing communications at Blue Cross Blue Shield and communications roles at Aetna, JCAHO, and other organizations.

Images of the Flowers of West Dean Gardens
Images of the Flowers of West Dean GardensImages of the Flowers of West Dean Gardens
Images of the Flowers of West Dean Gardens

The document is a collection of photographs taken by Gary Marlowe of flowers in the walled gardens of West Dean Gardens in October 2011. It includes photos of vibrant dahlias, including Apache, Kenora Sunset, Moor Place, and Doris Day varieties. The photos were taken without additional color enhancement or a tripod. Marlowe hopes people enjoy the images capturing the riot of color in the gardens out of the ordinary.

dahlias
Forms
•

Every form field includes a real label
<label for="[INPUT ID]">
Forms
✓ Every form field includes a real label
<label for="[INPUT ID]">

•

Labels can include help, required, error text
Forms
✓ Every form field includes a real label
<label for="[INPUT ID]">

✓ Labels can include help, required, error text
• Provide meaningful message on form error

WebAIM Forms http://bit.ly/1aKw2bM
WebAIM Validation http://bit.ly/1aKw6bB
Accessible Form Labeling http://bit.ly/1aKw83b
Accessibility - A feature you can build

Recommended for you

Images Of Mannequins March 2010
Images Of Mannequins March 2010Images Of Mannequins March 2010
Images Of Mannequins March 2010

Gary Marlowe began photographing mannequins in shopping centers in February 2010 which sparked a fascination. The document presents a collection of Marlowe's photos focusing on mannequins modeling fashions in London's Covent Garden. It notes that the images are Marlowe's intellectual property though viewable on SlideShare.

Social Business Basics Clinic
Social Business Basics Clinic Social Business Basics Clinic
Social Business Basics Clinic

Clinic introducing SMBs to Social and Content strategy, tools, basic analytics, and tips for managing daily social processes and updates.

marketing strategystrategytutorial
Dan Korb Resume
Dan Korb ResumeDan Korb Resume
Dan Korb Resume

Daniel Korb is an experienced principal committed to student success. He has improved a previously poor-performing school, ensuring high compliance and earning top ratings. As principal, he maintains strong community relations through an open-door policy and low teacher turnover. He also developed programs providing industry certifications and supporting all students.

boldly go...
The SCREEN READER
VoiceOver

TalkBack

TRY ONE!!
How else can you expect to build for one?

NVDA

JAWS
How do they work?

• announce generated HTML in source
order
Screen reader 101
•
•

Use keyboard to navigate and find content

98.6% of screen reader users have JS
enabled!1

• Highly customizable

1 - WebAIM Survey http://bit.ly/1aKvVgp

Recommended for you

Using chop and change checking for more efficient reading.
Using chop and change checking for more efficient reading.Using chop and change checking for more efficient reading.
Using chop and change checking for more efficient reading.

How would you modernise this 1932 Harvard business letter? Chopping and changing punctuation, paragraphing, vocabulary and font, would make the reading more efficient for a modern audience.

business intelligencewriting styleeducation
Dr Richard Russell
Dr Richard RussellDr Richard Russell
Dr Richard Russell

Through his 'sea-water cure' Dr Richard Russell is widely regarded as being responsible for turning Brighton from a small fishing village to Britain's favourite seaside resort. He died 250 years ago this year, but his anniversary has been completely overlooked. This is his story.

leweshistorywater
Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner Graphic Resume 2016Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner Graphic Resume 2016

This document summarizes the professional experience and education of an architect named Carsen Nachreiner. It lists positions they held at architecture firms where they worked on projects from concept to construction documentation. It also outlines their education including graduating with honors from the University of Wisconsin-Madison with a B.LandArch. and the Boston Architectural College with a M.Arch. The document demonstrates extensive experience in architecture and landscape architecture as well as proficiency with design software.

HTML COUNTS!
headings,
• Shortcuts drill down toetc
landmarks, lists, links,
Headings
•
•
•
•

Main way screen reader users navigate
Do your main content areas have headings?
Are they descriptive?
Do they follow a hierarchy? (h1 >> h6)
H1 Blog
H2 Recent Articles
H3 Article Title
H3 Article Title
H3 Article Title
H2 About Me
H3 Contact Me
H3 Footer Title

Document Outline http://bit.ly/1ef9ScA
The Section Element http://bit.ly/1ef9TNN
Accessible Headings http://bit.ly/1ef9QBr Using Sections http://bit.ly/1ef9Ykx
SR’s ignore...
• img with empty alt attribute alt=""
• display: none;
• visibility: hidden;
• :before content, :after content* (sort of)
•

keep in mind for icons and icon fonts!
.icon-star:before {
content: “★”;
}

* in most cases, so assume it won’t be announced
Accessible Icon Fonts http://bit.ly/1efabUP
SR’s won’t ignore
•
•
•

content “hidden” with opacity, z-index, height
off-screen positioning (text-indent, top, left)
CSS clipping*

.sr-only,
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
* as seen in HTML5 BP, Twitter Bootstrap, etc.
WebAIM Invisible Content http://bit.ly/1efaij8

Recommended for you

How to help a time-poor reader.
How to help a time-poor reader.How to help a time-poor reader.
How to help a time-poor reader.

Treat time-poor readers to High Reader Impact templates for a faster, more efficient read and quicker decision-making.

trainingbusiness intelligencegovernment
Post eventstory
Post eventstoryPost eventstory
Post eventstory

Colin Jost, head writer and host of Weekend Update on Saturday Night Live, performed a comedy show at the Lied Center of Kansas. The Special Events Committee brought Jost to campus where he performed an hour-long comedic set that had the entire crowd laughing from start to finish. Both students and adults alike were excited to see the show, which was appealing to the university as a whole. A crowd started to build an hour before the show began in hopes of getting the best seats to see Jost live, who some watch every week on SNL.

Ewrt1b class14
Ewrt1b class14Ewrt1b class14
Ewrt1b class14

This document contains an agenda, terms list, and guidance for writing an essay on the book Stone Butch Blues by Leslie Feinberg. The agenda outlines the class activities, which include a presentation on terms, discussing essay #3, in-class writing, and learning about directed summaries, counterarguments, and conclusions. The terms list defines 13 terms related to gender and sexuality such as androgyny, bisexual, cross-dresser, cultural humility, and heterosexual privilege. The essay writing guidance provides tips on how to write a directed summary that introduces the literary work, hooks the reader, assumes familiarity, uses transitions, and includes a clear thesis statement. It also explains

Beyond the basics
There’s gotta be more to screen readers than just
that, right?
Accessibility - A feature you can build
ARIA
• Semantic information and better
interactions for screen readers
• Applied directly to HTML
•
•

Part of HTML5 spec

•

Roles, states & properties

Does not affect styles or
non-SR behavior

HTML5 Spec (W3C) http://bit.ly/1aKxXx5
ARIA Spec (W3C) http://bit.ly/1aKya3f
Roles
• Create new semantic meaning for
elements via “role-” attribute
• Once set, they don’t change
<nav role="navigation">
<article role="article">
<div role="tablist">
<div role="combobox">

Recommended for you

Top 30 world business Manglish
Top 30 world business ManglishTop 30 world business Manglish
Top 30 world business Manglish

The document contains summaries of 19 different paragraphs about various topics like trade shows, exhibitions, conferences, and businesses. The paragraphs discuss objectives, strategies, services, and details of different companies and events in industries like agriculture, mining, transportation, manufacturing, and more.

educationonline writingbusiness and economy
Beware of business memo hype!
Beware of business memo hype!Beware of business memo hype!
Beware of business memo hype!

I'd love to hear from anyone who can find a realistic goal in this memo. I think there is only one.

business intelligencebusiness modelonline writing
Micro overview
Micro overviewMicro overview
Micro overview

This document provides information about the 8085 and 8086 microprocessors. It begins with definitions of a microprocessor and details about the 8085 such as its power supply, clock frequency, and functions of the accumulator. It then discusses the 8085's registers, allowed register pairs, purpose of SID and SOD lines, and function of the IO/M signal. The document lists the categories of 8085 instructions and examples. It explains the differences between JMP and CALL instructions and shift and rotate instructions. Other topics covered include wait states, 8085 interrupts, its signal classification, operations performed on data, and the steps to fetch a byte. The document concludes with questions about the 8086's software aspects, multiprocessor

Landmark Roles
Define top-level page sections for easy navigation
Role
•main
•banner
•navigation
•search
•complimentary
•contentinfo
•form
Using Landmarks http://bit.ly/1aKyuyQ
WebAIM Landmarks http://bit.ly/1aKytem

HTML 5
........

<main>

........

<header>

........

<nav>

........

<form> (search form)

........

<aside>

........

<footer>
wrapper elements with
role="landmark"

Include all content
in a landmark
Widget Roles
Semantic meaning to your custom components
• tooltip
• slider
• dialog
• tab
• progressbar
• combobox
• menu
• alert

.. and many more!
<ul class="tab-controls">
<li>
<a href="#first-tab" class="current-item">Panel 1</a>
</li>
<li>
<a href="#second-tab" class="current-item">Panel 2</a>
</li>
<li>
<a href="#third-tab" class="current-item">Panel 3</a>
</li>
</ul>
<div id="tab-container">
<div class="tab-panel" id="first-tab">
<ul class="tab-controls" role="tablist">
<div class="tab-contents">
<li>
<p>Tab Contents</p>
</div>
<a href="#first-tab" class="current</div>
item" role="tab">Panel 1</a>
<div class="tab-panel" id="second-tab">
<div class="tab-contents">
<div id="tab-container">
<p>Tab Contents</p>
</div>
<div class="tab-panel" id="first-tab"
</div>
role="tab-panel">
<div class="tab-panel" id="third-tab">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
</div>

???

Recommended for you

We need strong business writing.
We need strong business writing.We need strong business writing.
We need strong business writing.

Jim was able to hold a staff meeting in January to share data on earnings, as he backs up his words with actions. The company used to be known for fabrication and gambling, but Jim was hired to identify and remove that culture. A new business leader created a name for himself and aims to raise salaries with a tactical vision through a pact with employees, while any vacancy will only occur if mediocre performance is addressed.

writingbusinesswriting style
Client sample using high reader impact and style stamp www.jmdtraining.com.au
Client sample using high reader impact and style stamp  www.jmdtraining.com.auClient sample using high reader impact and style stamp  www.jmdtraining.com.au
Client sample using high reader impact and style stamp www.jmdtraining.com.au

Our client sample shows how to capture readers' attention with a High Reader Impact and make the language more efficient with Style Stamp.

business and economybusinessbusiness services
R0boCamp2016 Любомир Демків: Розумний будинок своїми руками
R0boCamp2016 Любомир Демків: Розумний будинок своїми рукамиR0boCamp2016 Любомир Демків: Розумний будинок своїми руками
R0boCamp2016 Любомир Демків: Розумний будинок своїми руками

Любомир Демків: Розумний будинок своїми руками

r0bocamp2016lviv r0bocamp 2016
States & Properties
• Describe relationships - between content
& between user interactions
• updated via JS on UI changes
• attribute starts with “aria-” prefix
<section aria-labelledby="MainHeading">
<input aria-label="first 3 digits" ariadescribed="PhoneHelpText" aria-invalid="true">
<div aria-expanded="true">
<button aria-controls="ToggledContent">
Content Relationships
• Semantically link labels to content or add
them when missing
•

aria-labelledby, aria-label

<section aria-labelledby="HeadingAbout">
<h1 id="HeadingAbout">About Potato Chips</h1>
<p>....

Make the most of landmarks http://bit.ly/M1TFSb
Content Relationships
• Semantically link labels to content or add
them when missing
•

aria-labelledby, aria-label

<nav role="navigation" aria-label="Chip Section Navigation">
<ul>
<li>
<a href="/types">Flavors</a>
</li>
The more you know
It's just HTML!
.elem[aria-hidden = "false"] {
display: block;
}
.elem[aria-invalid ="false"] {
background: #999;
}
.elem[aria-expanded = "true"] {
height: 100%;
background-image: url("sprite/down-arrows.jpg");
}

Recommended for you

Nice New Wheels ...
Nice New Wheels ...Nice New Wheels ...
Nice New Wheels ...

Do you have a nice new car and need some protection for your wheels. This is for you RimPro-Tec System that offers Style and Protection .

car accessoriesauto detailautomotive
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers

This document provides a summary of a presentation on web accessibility for developers. It discusses: 1) An introduction to key concepts of accessibility including standards like WCAG 2.0 and how accessibility improves usability for all users. 2) Techniques developers can implement to make their sites more accessible, such as following keyboard navigation best practices, ensuring visual elements have adequate color contrast, and properly labeling form fields. 3) An introduction to screen readers and how they interact with web content, emphasizing the importance of semantic HTML and best practices like ARIA roles, states and properties for custom interactive elements.

Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build

My talk on web accessibility for web developers. I cover basic techniques, introduce screen readers and ARIA, and go over testing. I also include extended examples around keyboard behavior and focus management as well as ARIA labels. The goal is to demystify accessibility so we can weave it in to applications today.

color contrastfocuskeyboard
Accessibility - A feature you can build
Putting it all together
•
•
•
•
•

jQueryUI https://jqueryui.com/
Practical ARIA Examples http://bit.ly/1bhMqBg
HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ
Accessible Forms with ARIA http://bit.ly/1bhMv7M
Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy
Using ARIA Wisely
•
•
•

ARIA is a bridge, not a replacement.

•

USE plain HTML if you can

Not magic and makes no promises

•

Events, focus management, keyboard support, and
meaningful structure is still up to you

Only way to know for sure... TEST
ARIA Resources
W3C Intro

http://www.w3.org/TR/wai-aria-primer/

W3C How-to with design patterns
http://www.w3.org/TR/wai-aria-practices/

W3C Supporting Info for developers
http://www.w3.org/TR/aria-in-html/

WEBAIM Introduction

http://webaim.org/techniques/aria/

Warnings and Perspectives

http://alistapart.com/article/the-accessibility-of-wai-aria

General Information

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

ARIA Validation

http://validator.nu

Recommended for you

Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build

Presented at Midwest JS, August 14 2014. My talk on web accessibility for web developers. I cover basic techniques, introduce screen readers and ARIA, and go over testing. I also include extended examples around keyboard behavior and focus management as well as ARIA labels. The goal is to demystify accessibility so we can weave it in to applications today.

midwest jsariaaccessibility
Touch the web
Touch the webTouch the web
Touch the web

Touch is now everywhere. It is almost impossible to find a personal computing device without a touch screen. This means developers and designers need to reconsider how to design client interfaces to successfully enable successful touch interactions. Touch involves layout choices, new CSS properties and new touch APIs. This session covers design concepts and how to apply new coding techniques

css3javascripttouch
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible

An accessibility primer for jQuery developers. This presentation covered teaches how to make widgets and plugins navigable with the keyboard, as well as support for assistive technologies with ARIA. Presented at the 2009 jQuery Conference in Boston.

infusionaccessibilityjavascript
Testing
Automated Tools
•
•
•
•

WebAIM WAVE (FF) http://wave.webaim.org/toolbar/
Accessibility Developer Tools (Chrome) http://bit.ly/1fW0W0A
Web Developer Toolbar (Chrome & FF) http://bit.ly/1dA2JmY
Quail Project quailjs.org

http://quailjs.org/sprint/
Accessibility - A feature you can build
Manual Testing
• disable all images
• test with just a keyboard
• load it in a screen reader
• load it in another screen reader
Does your page make sense?
Is it usable ?
10 Tips anyone can use http://bit.ly/1efaA9N
6 Tests anyone can do http://bit.ly/1efaC1c

Recommended for you

Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK

We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.

accessibilitya11y
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev

This document provides an overview and comparison of WinJS and PhoneGap for developing Windows Store apps. It discusses the key components of WinJS like controls, layouts, animations and styling. It also explains how PhoneGap allows developing Windows Store apps using web technologies by providing access to native device APIs via a native web view. While WinJS and PhoneGap differ in their APIs, the document emphasizes they can both be used to create valid Windows Store apps and developers should choose based on preference and code portability needs. It encourages mixing frameworks freely as long as platform guidelines are followed.

Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX

The document summarizes a presentation given by Adrian Roselli on fringe accessibility techniques that should be avoided. It discusses common techniques like clicking on labels and checking color contrast. It then covers more fringe techniques such as avoiding default focus styles, using <h1> headings wisely, and setting the lang attribute. The document warns against disabling zoom, using tabindex greater than 0, and avoiding infinite scroll. It emphasizes that accessibility is an ongoing process rather than a checklist.

accessibilityhtmlcss
Unsolicited Advice
• Start small, there’s still a big impact
• Prioritize areas/pages
•
•
•

main navigation?
contact us form?
homepage?

• Document as you go
Final Thoughts
What I’ve learned
• Bake it in, don’t tack it on
• Awesome and helpful community
• You may find it hard to stop...
Behind all these checklists, rules, and
regulations, there are people just trying
to use your site.
So make it useable, for everybody.

Recommended for you

Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web

The WAI-ARIA specification has been a shot in the arm for accessibility on the web. In this talk, I'll cover the basics of building accessible web applications without ARIA, and then how to add ARIA for some extra accessibility magic.

ariaaccessibilityjavascript
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze

We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.

accessibilityuxusability
HTML5 Report Card
HTML5 Report CardHTML5 Report Card
HTML5 Report Card

- HTML5 ancillary materials like tutorials and books provide helpful supplements to the official specification and receive a grade of B. - New HTML5 elements like <video> and <canvas> aim to bring rich media and scripting capabilities to the web in a native way, but browser support varies. - The talk evaluated progress on HTML5 features, tools support, and accessibility, generally finding syntax improvements and new APIs promising but implementation lagging in places.

web directionshtml5w3c
Thanks!
@monsika
@shopify
More Resources
General
HTML5 Accessibility http://bit.ly/LVR8YX
Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF
Mozilla Dev Network ARIA http://mzl.la/M6u9ez
Apple Accessibility Resources http://bit.ly/M6tkSL

Screen Readers
WebAIM Screen Reader Testing http://bit.ly/M6sLIH
Videos of Screen Readers In Use http://bit.ly/M6sR39
How browsers interact with screen readers http://bit.ly/M6sUfi

NVDA resources
WebAIM NVDA http://bit.ly/M6sZj5
WebAIM NVDA Shortcuts http://bit.ly/M6t0n2
Using NVDA and FF to test pages http://bit.ly/M6t6Lu
Installing NVDA in a VM http://bit.ly/M6t8D4

VoiceOver resources
WebAIM VoiceOver http://bit.ly/M6tbyS
Apple VoiceOver User Guide http://bit.ly/M6tolE
Apple Developer Accessibility Guide http://bit.ly/M6ttpe

JAWS resources
WebAIM JAWS http://bit.ly/M6tw4D
WebAIM JAWS Shortcuts http://bit.ly/M6sBRM
Community & Blogs
@webaim
@paciellogroup
@stevefaulkner
@dequesystems
www.webaim.org
www.a11yproject.com
www.accessibleculture.org
www.webaxe.org
www.simplyaccessible.com/archives
an `a11y` meetup near you! http://bit.ly/1bhN3dW

Recommended for you

How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors from interacting with your content and functionality. If your university website is inaccessible, you could be preventing access to education, student services, and more. When your website is accessible, everyone can consume your information freely. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. While creating accessible websites involves every step, including design and content, the foundation for good accessibility starts with good markup. Join my workshop to learn more about accessibility and how to program a high-quality user experience that is inclusive and beneficial to all.

accessibilitya11ywebsites
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit

This workshop was presented on May 30, 2018 at the Web Accessibility Summit on the University of Missouri campus in Columbia, Missouri.

accessibilityhigher educationweb design and development
Are you accessible
Are you accessibleAre you accessible
Are you accessible

The document discusses why accessibility is important from humanitarian, legal, market, and technical perspectives. It provides examples of individuals with disabilities and how accessibility features would help them. It notes growing disability populations and legal requirements in various jurisdictions. Technical principles of perceivability, operability, understandability and robustness are introduced. Specific accessibility guidelines are then covered for page structure, images, keyboard, links, tables, forms, and testing.

drupalaccessibilitywebaccessibility

More Related Content

What's hot

Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
BorisMoore
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
jeresig
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
mennovanslooten
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
Morris Singer
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
Marc Grabanski
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
dmethvin
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
osa_ora
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
mennovanslooten
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
FITC
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
Ralph Whitbeck
 

What's hot (20)

Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 

Viewers also liked

Mash y amma
Mash y ammaMash y amma
How to give your executive summary a High Reader Impact
How to give your executive summary a High Reader ImpactHow to give your executive summary a High Reader Impact
How to give your executive summary a High Reader Impact
AROSA Consultancy and Training P/L
 
BC Resume
BC ResumeBC Resume
BC Resume
Barbara Crystal
 
Images of the Flowers of West Dean Gardens
Images of the Flowers of West Dean GardensImages of the Flowers of West Dean Gardens
Images of the Flowers of West Dean Gardens
Gary Marlowe
 
Images Of Mannequins March 2010
Images Of Mannequins March 2010Images Of Mannequins March 2010
Images Of Mannequins March 2010
Gary Marlowe
 
Social Business Basics Clinic
Social Business Basics Clinic Social Business Basics Clinic
Social Business Basics Clinic
Kelly Craft
 
Dan Korb Resume
Dan Korb ResumeDan Korb Resume
Dan Korb Resume
Dan Korb
 
Using chop and change checking for more efficient reading.
Using chop and change checking for more efficient reading.Using chop and change checking for more efficient reading.
Using chop and change checking for more efficient reading.
AROSA Consultancy and Training P/L
 
Dr Richard Russell
Dr Richard RussellDr Richard Russell
Dr Richard Russell
Gary Marlowe
 
Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner Graphic Resume 2016Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner
 
How to help a time-poor reader.
How to help a time-poor reader.How to help a time-poor reader.
How to help a time-poor reader.
AROSA Consultancy and Training P/L
 
Post eventstory
Post eventstoryPost eventstory
Post eventstory
hehall22
 
Ewrt1b class14
Ewrt1b class14Ewrt1b class14
Ewrt1b class14
jordanlachance
 
Top 30 world business Manglish
Top 30 world business ManglishTop 30 world business Manglish
Top 30 world business Manglish
AROSA Consultancy and Training P/L
 
Beware of business memo hype!
Beware of business memo hype!Beware of business memo hype!
Beware of business memo hype!
AROSA Consultancy and Training P/L
 
Micro overview
Micro overviewMicro overview
Micro overview
lamamokalled
 
We need strong business writing.
We need strong business writing.We need strong business writing.
We need strong business writing.
AROSA Consultancy and Training P/L
 
Client sample using high reader impact and style stamp www.jmdtraining.com.au
Client sample using high reader impact and style stamp  www.jmdtraining.com.auClient sample using high reader impact and style stamp  www.jmdtraining.com.au
Client sample using high reader impact and style stamp www.jmdtraining.com.au
AROSA Consultancy and Training P/L
 
R0boCamp2016 Любомир Демків: Розумний будинок своїми руками
R0boCamp2016 Любомир Демків: Розумний будинок своїми рукамиR0boCamp2016 Любомир Демків: Розумний будинок своїми руками
R0boCamp2016 Любомир Демків: Розумний будинок своїми руками
Lviv Startup Club
 
Nice New Wheels ...
Nice New Wheels ...Nice New Wheels ...
Nice New Wheels ...
RimPro-Tec Wheel Bands
 

Viewers also liked (20)

Mash y amma
Mash y ammaMash y amma
Mash y amma
 
How to give your executive summary a High Reader Impact
How to give your executive summary a High Reader ImpactHow to give your executive summary a High Reader Impact
How to give your executive summary a High Reader Impact
 
BC Resume
BC ResumeBC Resume
BC Resume
 
Images of the Flowers of West Dean Gardens
Images of the Flowers of West Dean GardensImages of the Flowers of West Dean Gardens
Images of the Flowers of West Dean Gardens
 
Images Of Mannequins March 2010
Images Of Mannequins March 2010Images Of Mannequins March 2010
Images Of Mannequins March 2010
 
Social Business Basics Clinic
Social Business Basics Clinic Social Business Basics Clinic
Social Business Basics Clinic
 
Dan Korb Resume
Dan Korb ResumeDan Korb Resume
Dan Korb Resume
 
Using chop and change checking for more efficient reading.
Using chop and change checking for more efficient reading.Using chop and change checking for more efficient reading.
Using chop and change checking for more efficient reading.
 
Dr Richard Russell
Dr Richard RussellDr Richard Russell
Dr Richard Russell
 
Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner Graphic Resume 2016Carsen Nachreiner Graphic Resume 2016
Carsen Nachreiner Graphic Resume 2016
 
How to help a time-poor reader.
How to help a time-poor reader.How to help a time-poor reader.
How to help a time-poor reader.
 
Post eventstory
Post eventstoryPost eventstory
Post eventstory
 
Ewrt1b class14
Ewrt1b class14Ewrt1b class14
Ewrt1b class14
 
Top 30 world business Manglish
Top 30 world business ManglishTop 30 world business Manglish
Top 30 world business Manglish
 
Beware of business memo hype!
Beware of business memo hype!Beware of business memo hype!
Beware of business memo hype!
 
Micro overview
Micro overviewMicro overview
Micro overview
 
We need strong business writing.
We need strong business writing.We need strong business writing.
We need strong business writing.
 
Client sample using high reader impact and style stamp www.jmdtraining.com.au
Client sample using high reader impact and style stamp  www.jmdtraining.com.auClient sample using high reader impact and style stamp  www.jmdtraining.com.au
Client sample using high reader impact and style stamp www.jmdtraining.com.au
 
R0boCamp2016 Любомир Демків: Розумний будинок своїми руками
R0boCamp2016 Любомир Демків: Розумний будинок своїми рукамиR0boCamp2016 Любомир Демків: Розумний будинок своїми руками
R0boCamp2016 Любомир Демків: Розумний будинок своїми руками
 
Nice New Wheels ...
Nice New Wheels ...Nice New Wheels ...
Nice New Wheels ...
 

Similar to Accessibility - A feature you can build

a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
Monika Piotrowicz
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build
Monika Piotrowicz
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
Monika Piotrowicz
 
Touch the web
Touch the webTouch the web
Touch the web
Chris Love
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
colinbdclark
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
Adrian Roselli
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
Adrian Roselli
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
greenideas
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
Adrian Roselli
 
HTML5 Report Card
HTML5 Report CardHTML5 Report Card
HTML5 Report Card
Michael(tm) Smith
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
Rachel Cherry
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
Rachel Cherry
 
Are you accessible
Are you accessibleAre you accessible
Are you accessible
Geri Druckman
 
Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)
REHMAT ULLAH
 
HTML 5
HTML 5HTML 5
HTML5
HTML5HTML5
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
Devin Olson
 
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Julio Camarero
 
Introduction web tech
Introduction web techIntroduction web tech
Introduction web tech
Liaquat Rahoo
 

Similar to Accessibility - A feature you can build (20)

a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Touch the web
Touch the webTouch the web
Touch the web
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
 
HTML5 Report Card
HTML5 Report CardHTML5 Report Card
HTML5 Report Card
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
Are you accessible
Are you accessibleAre you accessible
Are you accessible
 
Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML5
HTML5HTML5
HTML5
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
 
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
 
Introduction web tech
Introduction web techIntroduction web tech
Introduction web tech
 

Recently uploaded

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 

Recently uploaded (20)

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 

Accessibility - A feature you can build

  • 1. Accessibility (a11y) A feature you can build jQuery San Diego 2014 Monika Piotrowicz (@monsika)
  • 2. Monika Piotrowicz Front End Web Developer Shopify @monsika @shopify
  • 3. I’m just... A regular Front End Developer...
  • 4. So how’d I get here? A short story, starring WCAG 2.0 AA
  • 5. Today • Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
  • 6. Web Accessibility • “When sites are correctly designed, developed and edited, all users can have equal access to information and functionality” - Wikipedia • • • “Able to be easily obtained or used; easily understood or appreciated” - Oxford Dictionary Accessibility ~ Usability All people can use an application, and it should be easy to use for all people;
  • 7. rough Accessibility by the #’s Group Population Vision Problems1 3-10% Colorblindness2 4-8% Physical Functioning1 8% Cognitive Difficulty1 6% Hearing Difficulty 3-11% Assistive Tools • • • • • screen readers screen magnifiers keyboard-only braille display bumped font size 1 - CDC Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2011 http://1.usa.gov/M6tObC (under 65/over 65) 2 - Range worldwide prevalence of red-green color deficiency among men, 2012 http://1.usa.gov/M6tKsz
  • 9. Go!
  • 14. First Steps • functional keyboard-only • fallbacks for visual information • well-functioning forms
  • 16. Keyboard Strategy • obvious focus states (keep those outlines!)
  • 18. Keyboard Strategy ✓ obvious focus states (keep those outlines!) • fallbacks for :hover & click() ↳ :focus & keydown()
  • 19. Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ fallbacks for :hover & click() ↳ :focus & keydown() • add tabIndex=0 & key events to non-focusable elements
  • 20. Keyboard Strategy ��� obvious focus states (keep those outlines!) ✓ fallbacks for :hover & click() ↳ :focus & keydown() ✓ add tabIndex=0 & key events to non-focusable elements • avoid keyboard traps & wasting time
  • 21. Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ fallbacks for :hover & click() ↳ :focus & keydown() ✓ add tabIndex=0 & key events to non-focusable elements ✓ avoid keyboard traps & wasting time • HTML can get you there, FREE! WebAIM http://bit.ly/M24Da2 Keyboard Events http://bit.ly/M241Br
  • 22. Wanted: Free Events! <span class="btn-style toggle-trigger">Click to Toggle</span> <a href="#" class="btn-style toggle-trigger">Click to Toggle</a> <button type="button" class="toggle-trigger">Click to Toggle</ button> Use the button element http://bit.ly/1efaOO1 Links aren’t buttons http://bit.ly/1efaT4o
  • 24. Visual Considerations • start with a good font size & high contrast • • • WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er) NoCoffee (Chrome) http://bit.ly/1ljQvFF
  • 25. Visual Considerations ✓ start with a good font size & high contrast • • • WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er) NoCoffee (Chrome) http://bit.ly/1ljQvFF • don’t rely on color alone • add legends and texture or symbols
  • 27. Visual Considerations ✓ start with a good font size & high contrast • • • WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er) NoCoffee (Chrome) http://bit.ly/1ljQvFF ✓ don’t rely on color alone • • add legends and texture or symbols all images have a meaningful alt attribute • W3C How to write Alt Text http://bit.ly/1aKwIOg • More from A List Apart http://bit.ly/1aKwRkI
  • 29. Forms • Every form field includes a real label <label for="[INPUT ID]">
  • 30. Forms ✓ Every form field includes a real label <label for="[INPUT ID]"> • Labels can include help, required, error text
  • 31. Forms ✓ Every form field includes a real label <label for="[INPUT ID]"> ✓ Labels can include help, required, error text • Provide meaningful message on form error WebAIM Forms http://bit.ly/1aKw2bM WebAIM Validation http://bit.ly/1aKw6bB Accessible Form Labeling http://bit.ly/1aKw83b
  • 34. VoiceOver TalkBack TRY ONE!! How else can you expect to build for one? NVDA JAWS
  • 35. How do they work? • announce generated HTML in source order
  • 36. Screen reader 101 • • Use keyboard to navigate and find content 98.6% of screen reader users have JS enabled!1 • Highly customizable 1 - WebAIM Survey http://bit.ly/1aKvVgp
  • 37. HTML COUNTS! headings, • Shortcuts drill down toetc landmarks, lists, links,
  • 38. Headings • • • • Main way screen reader users navigate Do your main content areas have headings? Are they descriptive? Do they follow a hierarchy? (h1 >> h6) H1 Blog H2 Recent Articles H3 Article Title H3 Article Title H3 Article Title H2 About Me H3 Contact Me H3 Footer Title Document Outline http://bit.ly/1ef9ScA The Section Element http://bit.ly/1ef9TNN Accessible Headings http://bit.ly/1ef9QBr Using Sections http://bit.ly/1ef9Ykx
  • 39. SR’s ignore... • img with empty alt attribute alt="" • display: none; • visibility: hidden; • :before content, :after content* (sort of) • keep in mind for icons and icon fonts! .icon-star:before { content: “★”; } * in most cases, so assume it won’t be announced Accessible Icon Fonts http://bit.ly/1efabUP
  • 40. SR’s won’t ignore • • • content “hidden” with opacity, z-index, height off-screen positioning (text-indent, top, left) CSS clipping* .sr-only, .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } * as seen in HTML5 BP, Twitter Bootstrap, etc. WebAIM Invisible Content http://bit.ly/1efaij8
  • 41. Beyond the basics There’s gotta be more to screen readers than just that, right?
  • 43. ARIA • Semantic information and better interactions for screen readers • Applied directly to HTML • • Part of HTML5 spec • Roles, states & properties Does not affect styles or non-SR behavior HTML5 Spec (W3C) http://bit.ly/1aKxXx5 ARIA Spec (W3C) http://bit.ly/1aKya3f
  • 44. Roles • Create new semantic meaning for elements via “role-” attribute • Once set, they don’t change <nav role="navigation"> <article role="article"> <div role="tablist"> <div role="combobox">
  • 45. Landmark Roles Define top-level page sections for easy navigation Role •main •banner •navigation •search •complimentary •contentinfo •form Using Landmarks http://bit.ly/1aKyuyQ WebAIM Landmarks http://bit.ly/1aKytem HTML 5 ........ <main> ........ <header> ........ <nav> ........ <form> (search form) ........ <aside> ........ <footer>
  • 47. Widget Roles Semantic meaning to your custom components • tooltip • slider • dialog • tab • progressbar • combobox • menu • alert .. and many more!
  • 48. <ul class="tab-controls"> <li> <a href="#first-tab" class="current-item">Panel 1</a> </li> <li> <a href="#second-tab" class="current-item">Panel 2</a> </li> <li> <a href="#third-tab" class="current-item">Panel 3</a> </li> </ul> <div id="tab-container"> <div class="tab-panel" id="first-tab"> <ul class="tab-controls" role="tablist"> <div class="tab-contents"> <li> <p>Tab Contents</p> </div> <a href="#first-tab" class="current</div> item" role="tab">Panel 1</a> <div class="tab-panel" id="second-tab"> <div class="tab-contents"> <div id="tab-container"> <p>Tab Contents</p> </div> <div class="tab-panel" id="first-tab" </div> role="tab-panel"> <div class="tab-panel" id="third-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div> ???
  • 49. States & Properties • Describe relationships - between content & between user interactions • updated via JS on UI changes • attribute starts with “aria-” prefix <section aria-labelledby="MainHeading"> <input aria-label="first 3 digits" ariadescribed="PhoneHelpText" aria-invalid="true"> <div aria-expanded="true"> <button aria-controls="ToggledContent">
  • 50. Content Relationships • Semantically link labels to content or add them when missing • aria-labelledby, aria-label <section aria-labelledby="HeadingAbout"> <h1 id="HeadingAbout">About Potato Chips</h1> <p>.... Make the most of landmarks http://bit.ly/M1TFSb
  • 51. Content Relationships • Semantically link labels to content or add them when missing • aria-labelledby, aria-label <nav role="navigation" aria-label="Chip Section Navigation"> <ul> <li> <a href="/types">Flavors</a> </li>
  • 52. The more you know It's just HTML! .elem[aria-hidden = "false"] { display: block; } .elem[aria-invalid ="false"] { background: #999; } .elem[aria-expanded = "true"] { height: 100%; background-image: url("sprite/down-arrows.jpg"); }
  • 54. Putting it all together • • • • • jQueryUI https://jqueryui.com/ Practical ARIA Examples http://bit.ly/1bhMqBg HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ Accessible Forms with ARIA http://bit.ly/1bhMv7M Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy
  • 55. Using ARIA Wisely • • • ARIA is a bridge, not a replacement. • USE plain HTML if you can Not magic and makes no promises • Events, focus management, keyboard support, and meaningful structure is still up to you Only way to know for sure... TEST
  • 56. ARIA Resources W3C Intro http://www.w3.org/TR/wai-aria-primer/ W3C How-to with design patterns http://www.w3.org/TR/wai-aria-practices/ W3C Supporting Info for developers http://www.w3.org/TR/aria-in-html/ WEBAIM Introduction http://webaim.org/techniques/aria/ Warnings and Perspectives http://alistapart.com/article/the-accessibility-of-wai-aria General Information https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA ARIA Validation http://validator.nu
  • 58. Automated Tools • • • • WebAIM WAVE (FF) http://wave.webaim.org/toolbar/ Accessibility Developer Tools (Chrome) http://bit.ly/1fW0W0A Web Developer Toolbar (Chrome & FF) http://bit.ly/1dA2JmY Quail Project quailjs.org http://quailjs.org/sprint/
  • 60. Manual Testing • disable all images • test with just a keyboard • load it in a screen reader • load it in another screen reader Does your page make sense? Is it usable ? 10 Tips anyone can use http://bit.ly/1efaA9N 6 Tests anyone can do http://bit.ly/1efaC1c
  • 61. Unsolicited Advice • Start small, there’s still a big impact • Prioritize areas/pages • • • main navigation? contact us form? homepage? • Document as you go
  • 63. What I’ve learned • Bake it in, don’t tack it on • Awesome and helpful community • You may find it hard to stop...
  • 64. Behind all these checklists, rules, and regulations, there are people just trying to use your site. So make it useable, for everybody.
  • 67. General HTML5 Accessibility http://bit.ly/LVR8YX Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF Mozilla Dev Network ARIA http://mzl.la/M6u9ez Apple Accessibility Resources http://bit.ly/M6tkSL Screen Readers WebAIM Screen Reader Testing http://bit.ly/M6sLIH Videos of Screen Readers In Use http://bit.ly/M6sR39 How browsers interact with screen readers http://bit.ly/M6sUfi NVDA resources WebAIM NVDA http://bit.ly/M6sZj5 WebAIM NVDA Shortcuts http://bit.ly/M6t0n2 Using NVDA and FF to test pages http://bit.ly/M6t6Lu Installing NVDA in a VM http://bit.ly/M6t8D4 VoiceOver resources WebAIM VoiceOver http://bit.ly/M6tbyS Apple VoiceOver User Guide http://bit.ly/M6tolE Apple Developer Accessibility Guide http://bit.ly/M6ttpe JAWS resources WebAIM JAWS http://bit.ly/M6tw4D WebAIM JAWS Shortcuts http://bit.ly/M6sBRM