Website accessibility presentation made at MWLUG 2017 in Washington DC

WEBSITE
ACCESSIBILITY
Why and how to ensure your website is accessible

ROY RUMANER
 I have been working with IBM/Lotus Notes, Domino & XPages since 1994
(starting with v2.01 on OS/2 on a Novell Network).
 Original member of the Lotus L-Team on CompuServe
 Co-author: Special Edition: Using Lotus Notes & Domino 4.5 and Special Edition:
Using Lotus Notes & Domino 4.6
 This is my 5th time presenting at MWLUG
 I am currently working for Bank of America as an XPages Application
Development Team Leader
 Previous clients include: Canal Barge Company, PNC Bank, ABN-AMRO, Teledyne,
Sierra Nevada Corp., Morey Corp, 4C Technologies, TeamSpace, Uline, Abbott
Labs, Tenneco, YMCA, McDonald’s and many more
August 14, 2017Website Accessibility - Why and how to ensure your website is accessible3

AGENDA
• What is Accessibility?
• Why Does Accessibility Concern Me?
• What You Need To Do?
• How Do I Do It?
• Questions?

TERMS USED IN THIS PRESENTATION
• ACCESSIBILITY
The design of products, devices, services, or environments for people who experience
disabilities.
• ADA
The Americans with Disabilities Act
• WCAG 2.0
The Web Content Accessibility Guidelines
• SECTION 508
Part of a larger piece of legislation called The Rehabilitation Act of 1973.
• ARIA
A set of attributes that you can add to HTML elements

AGENDA
• What is Accessibility?
• How Do I Do It?
• Questions?

DISABILITIES
In 2010, most studies found that about one Billion people (19% of the population) and 1
in 5 people in the US have some kind of disability. Not all of these people have disabilities
that make it difficult for them to access the internet, but it is still a significant portion of
the population.
The major categories of disability types are:
• Visual – Blindness, low vision, color blindness (39M Blind / 246M Low vision)
• Hearing – Deafness and hard of hearing (48M)
• Motor – Inability to use a mouse, slow response time, limited fine motor control (18.2M)
• Cognitive – Learning disabilities, distractibility, inability to remember or focus on large
amounts of information (6.5M)

ACCESSIBILITY
Accessibility is about ensuring ALL users have equal access to the content
of your website and applications regardless of how they access the page.
They may use:
• screen reading software which reads the page to the user
• magnification software that enlarges the screen
• speech recognition software that allows users to control your page with voice commands
• alternative input devices that mimic a standard keyboard
• refreshable braille displays which transform the content into braille

Can all people, regardless of any impairment,
interact with your content.
For instance:
• How does someone who cannot use a mouse interact with
your Web page?
• What if they cannot see?
• Does your site accommodate older populations and the
issues they face?
SO WHAT DOES IT MEAN TO DESIGN SOMETHING
SO THAT IT IS ACCESSIBLE?

According to the Monthly Labor Review, by 2020, one in five workers will be
older than 55 — an increase of more than 50 percent over 2000, when that age
group accounted for only 13 percent of the U.S. labor force.
As the baby boom generation ages, it is redefining the U.S. workforce. Many
studies have shown a growing tendency toward delayed retirement, yet there
still won’t be enough younger workers to replace all of those who do retire. As a
result, it will be imperative for businesses to have resources that can help them
recruit and retain older workers, and individual workers will need tools that can
help them keep their competitive edge at work despite age-related difficulties
and impairments.
As the U.S. workforce continues to age, the need for accessible technology as a
widespread and mainstream business resource will increase even more.
MILLIONS OF AGING BABY BOOMERS CAN BENEFIT
FROM ACCESSIBLE TECHNOLOGY

Created by “Adam@homes” Brian Basset for Microsoft campaign in support of aging workers.

To help you decide what to do there are laws
and standards which define:
• whose sites have to be accessible
• what type of content has to be accessible
• who needs to be able to access it
• how you determine what is and what is not accessible

ACCORDING TO THE ADA
Title III of the Americans with Disabilities Act (ADA) prohibits discrimination on
the basis of disability in places of public accommodation, including restaurants,
movie theaters, schools, day care and recreational facilities, and doctors’ offices.
All public places, as well as privately owned commercial facilities, are required to
comply with ADA standards.
The question of ADA’s exact wording comes down to two issues:
1) whether the ADA applies to a website at all, and
2) if ADA applies only to websites that have a physical connection to goods and
services available at a physical store or location, or if it applies to all websites
even if they don’t have physical spaces. (See Gil v. Winn-Dixie)

ACCORDING TO SECTION 508
Section 508 is part of a larger piece of legislation called The Rehabilitation Act of 1973. The
Rehabilitation Act prohibits discrimination on the basis of disability in Federal programs, among other
things.
For federal institutions, Section 508 makes it very clear that all federal-related websites must be
accessible to all individuals, with and without disabilities. For private commercial websites, the
Department of Justice (DOJ), which enforces the ADA, has made it clear that it interprets the ADA as
applicable to websites.
In 2010, the DOJ issued an Advanced Notice of Proposed Rulemaking to specifically ensure all
websites, public and private, are subject to ADA compliance.
The DOJ’s proposed amendments to the ADA require compliance with the new rules setting WCAG
2.0 AA as the standard for federal government websites by January 18, 2018.
Note: As of July 20, 2017, the current administration revealed that the DOJ has placed web
accessibility, medical equipment, and furniture rulemakings under Title II and III of the ADA on the
Inactive List.

WHAT DOES THIS MEAN FOR WEBSITE OWNERS?
Though the official announcement has yet to come,
and now appears to be on hold, website and
business owners need to proactively plan to make
their sites accessible to users with disabilities.

HOW CAN I BECOME ADA COMPLIANT
1. Create, adopt, and maintain a web accessibility policy consistent with prevailing
standards.
2. Review the Web Content Accessibility Guidelines (WCAG) 2.0 for details about
making websites accessible to a wider range of people with disabilities, including
blindness and low vision, deafness and hearing loss, learning disabilities, cognitive
limitations, limited movement, speech disabilities, and photosensitivity.
3. Hire a third-party consultant to conduct a thorough website audit to determine what
features might be lacking and develop a list of recommendations for implementing
necessary updates.
4. Consider hiring website development experts who can help you enact these updates
and ensure that your website is ADA compliant, has an optimized user experience,
and works with existing assistive technologies.
5. Implement training for internal web and content development personnel on ADA and
WCAG 2.0 guidelines.

DO I NEED A WEB DEVELOPMENT EXPERT?
An ADA-compliant website isn’t just about having
an easier navigation, making text content readable,
or sufficiently contrasting colors in graphics,
although these are huge components of being
accessible. The website and content must also be
scalable and robust enough to work with current
and future assistive technologies.

COMMON ELEMENTS THAT NEED TO BE ACCESSIBLE
• Images: Graphics all need to include “alternative text”, an invisible code embedded to make it
possible for assistive technologies to access information that explains the content of the image.
• Videos: Text transcripts or captions of videos should be made available.
• Colors: The colors of all elements on the site should be sufficiently contrasting so that information is
easy to read. Additionally, any information in color (e.g. graphs, buttons) should be labeled in such a
way that users can understand the color information without color.
• Form Labels: All forms with editable fields should be clearly labeled outside of the field itself. For
example, a search bar should have a “Search” label before the field itself instead of inside the field box
or after.
• Stylesheets: Website stylesheets are used to control a site’s layout and presentation and should be
specially coded to ensure the site’s presentation is optimally retained. Stylesheets should also use
relative rather than absolute units.
• Keyboard: All content functions should be operable through a keyboard interface, such as using
unmodified arrow or tab keys. August 14, 2017Website Accessibility - Why and how to ensure your website is accessible18

IS MY WEBSITE COMPLIANT RIGHT NOW?
WCAG 2.0 has a list of tools that you can use to check if
your website meets accessibility guidelines. But, of course,
online tools are no substitute for a human expert.
508 Checker
A-Tester
A11Y Compliance Platform
a11y.css
Accessibility Checker
Accessibility Checklist
Accessibility Color Wheel
Accessibility Developer Tools

TEN CRITICAL ELEMENTS TO EVALUATE FOR
WEBSITE ACCESSIBILITY
1. Navigation
2. Content Structure
3. Hyperlinks
4. Text
5. Images
6. Forms
7. Document and Other Files
8. Multimedia
9. Adaptability
10.Policies, Processes, and
Maintenance

AGENDA
• What is Meant by Accessibility?
• How Do I Do It?
• Questions?

PUBLICLY AVAILABLE CONTENT SHOULD PROVIDE
EQUAL ACCESS TO ALL
The Americans with Disabilities Act states that “No individual shall be
discriminated against on the basis of disability in the full and equal
enjoyment of the goods, services, facilities, privileges, advantages,
or accommodations of any place of public accommodation.” With
technology so heavily integrated into daily living, online
environments are increasingly being perceived or interpreted as
places of public accommodation.
“Legally Blind Man Files ADA Suit Over Accessibility Of Hugo Boss’ Website”

PUBLICLY AVAILABLE CONTENT SHOULD PROVIDE
EQUAL ACCESS TO ALL
Organizations that do not incorporate accessibility best practices
within their websites, documents, and other digital media—whether
knowingly or unknowingly—exclude people with disabilities from
independently using that organization’s products and services. It
follows that owners of digital content such as websites, software,
mobile apps, or documents may want to consider evaluating their
materials and products and weigh the risks of potential litigation.
Covering the items in the website accessibility checklist can be a
great start.

THE FUTURE OF DIGITAL ACCESSIBILITY
With the increasing number of lawsuits related to digital
accessibility, it is recommended that organizations stay
one step ahead of the competition—and the risk—by
making sure their websites are accessible prior to
receiving a complaint. Not only will it expand your
customer base, but it will also generate good publicity for
your organization.

DOES THE ADA APPLY TO ONLINE BUSINESSES?
Before the internet become so ubiquitous, it was
assumed that the ADA applied only to physical structures.
But because the law doesn’t specifically state whether it
applies to brick-and-mortar vs. digital “places,” it is open
to interpretation.
A string of lawsuits brought against private companies for
inaccessible websites, web services, or digital
communications, has created a precedent that the ADA
applies to the internet. Although the precedent is not
entirely consistent across all jurisdictions.

JUAN CARLOS GIL V. WINN-DIXIE STORES, INC.
On June 12, Judge Robert Scola, of the Southern District of Florida, decided that Winn-Dixie’s
website is heavily integrated with the company’s physical store locations, making it subject to
the ADA. His decision will require the company to update its site.
The company has set aside $250,000 to update the site, though testimony during the trial
indicated it will not cost nearly that much.
“The factual findings demonstrate that Winn-Dixie’s website is inaccessible to visually impaired
individuals who must use screen reader software,” Scola wrote.
“Therefore, Winn-Dixie has violated the ADA because the inaccessibility of its website has
denied Gil the full and equal enjoyment of the goods, services, facilities, privileges, advantages
or accommodations that Winn-Dixie offers to its sighted customers.”
Experts believe it to be the first trial regarding a website’s accessibility under the ADA. Such
lawsuits have become popular in recent years as the Department of Justice has delayed formal
regulations.

ADA TITLE III LAWSUITS 2013 TO 2016

ADA TITLE III LAWSUITS JANUARY–APRIL 2017

COMPANIES SUED OVER BLIND-INACCESSIBLE SITES
• Urban Outfitters
• H&M
• Tony Burch
• Swatch
• Bally
• Hugo Boss
• Panera
• New Balance Athletics
• Steve Madden
• Tumi
• Aeropostal
• Deckers Outdoor Company (UGG
Boots)
• Reebok
• Genesco (Johnston & Murphy and
Journeys)
This is only a partial list
Website Accessibility - Why and how to ensure your website is accessible29 August 14, 2017

“If you can design a website, you can design an
accessible one”
University of Washington, Do-IT

AGENDA
• How Do I Do It?
• Questions?

WEB CONTENT ACCESSIBILITY GUIDELINES WCAG 2.0
The Web Content Accessibility Guidelines are a set of
technical standards.
• The WCAG has 4 Principles (P-O-U-R) that are broken down
into 12 Guidelines
• Those 12 Guidelines are further broken down into Success
Criteria
• For each Success Criteria there are 3 levels of Conformance
A, AA, AAA

SUCCESS LEVELS
• Level A
We must satisfy these requirements, otherwise it will be impossible for one or
more groups to access the web content
• Level AA
We should satisfy these requirements, otherwise some groups will find it
difficult to access the web content
• Level AAA
We may satisfy these requirements, in order to make it easier for some groups
to access the web content

THE FOUR WCAG PRINCIPLES
POUR – Four Principles of Accessibility
• Content must be Perceivable
• Interface components in the content must be Operable
• Content and controls must be Understandable
• Content should be Robust enough to work with current and
future assistive technologies (AT)

PERCEIVABLE
1. Provide text alternatives for any non-text content
2. Provide alternatives for time based media
3. Separate content from style
4. Make it easier for users to see and hear content

OPERABLE
5. Make all functionality available from a keyboard
6. Provide users enough time to read and use content
7. Do not design content known to cause seizures
8. Provide ways to help users navigate, find content and determine
where they are

UNDERSTANDABLE
9. Simplify text content
10.Web pages need to operate in predictable ways
11.Help users avoid and correct mistakes

ROBUST
12.Maximize compatibility with other products, including assistive
technologies

VISUAL/AUDIO DESIGN
Guideline 1.4.1 Level A Color
• Color should not be the only visual means of conveying essential
information. Recommended strategies include providing text cues or using
patterns in addition to different colors.
Guideline 2.3.1 Level A Seizures
• Content should not be designed in a way known to cause seizures in users
with photosensitive epilepsy. Elements occupying a significant portion of
the display that flash more than three times in one second should be tested
for compliance.
• The Trace Center Photosensitive Epilepsy Analysis Tool (PEAT) is available at
trace.wisc.edu/peat/

Of the 38 Level A and AA provisions,
about 50% impact
website design

ACCESSIBILITY ≠ USABILITY
A website can:
 comply with standards
 pass all the automated accessibility checks
 appear to be accessible
HOWEVER
 An accessible website is not necessarily usable
 Web pages can be verified accessible by focus groups, and still be inaccessible
to a third party
 Individual users may have cognitive, technical, or other barriers

AGENDA
• How Do I Do It?
• Questions?

FIX THE EASY STUFF FIRST
• Alt text
• Alternative formats
• Correctly labeled links
• Always follow best practices for web development
• Simplify pages (language, design, navigation)
• Resizable, clear font face
• Consistent navigation
• Contact info
• Quick loading pages
• Verify code, hyperlinks, spelling, CSS

LOW VISION
• Whenever possible, use vectors for complex images
• Without pixels, users can zoom to their desired level of
magnification, without content loss
• High Contrast Modes
• Whenever colors are chosen, color contrast must be considered
• Transparency in the background can cause alternative contrast
ratios
• For large text (over 18 points) the contrast ratio for AA is 3:1
and for AAA 5:1. For small text it's 5:1 for AA and 7:1 for AAA.

COLOR BLINDNESS
• Color should never be used to
define meaning within content
• Red-Green color blindness is
the most common, and is an
oft-used paradigm in data
visualizations
• e.g. “heatmaps”

DIAGRAMS, CHARTS, AND GRAPHS
• Ensure that there are textual
alternatives for all content
• For graphs, include numbers
visually to ensure there is a
textual representation of
content
• Utilize patterns to ensure that
there are visual, non-color,
means for indicating different
sections
• When in doubt, provide a textual
description of important findings

ARIA
ARIA is a set of special accessibility attributes
which can be added to any markup, but is
especially suited to HTML.

ROLE
• ARIA roles are added to HTML markup like an attribute. They
define the type of element and suggest what purpose it serves.
<header role="banner">
Banners typically includes things such as the logo or identity of the site
sponsor, and site-specific search tool. A banner usually appears at the top of
the page and typically spans the full width.

LANDMARK ROLES
The following roles are regions of the
page intended as navigational
landmarks.
All of these roles inherit from
the landmark base type and, with the
exception of application, all are imported
from the Role Attribute [ROLE].
• application*
• banner
• complementary
• contentinfo
• form
• main
• navigation
• search

LANDMARKS EXAMPLE

ARIA ROLES
alert
alertdialog
button
checkbox
columnheader
combobox
contentinfo
dialog
directory
document
form
grid
gridcell
group
heading
img
link
list
listbox
listitem
main
marquee
menu
menubar
menuitem
menuitemcheckbox
menuitemradio
navigation
radio
radiogroup
This is a partial list. See role_definitions for the complete list

STATES AND PROPERTIES
aria-activedescendent
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-disabled (state)
aria-dropeffect
aria-expanded (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-pressed (state)
aria-setsize
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
This is a partial list. See states and properties for the complete list

WEB ACCESSIBILITY EVALUATION TOOLS
(EXAMPLES)
• 508 Checker by Formstack
With 508checker.com you can quickly check a webpage for 508 compliance and learn more about how to become 508 compliant
across your entire organization
• A-Tester by Evaluera Ltd
A-Tester checks the pre-enhanced version of a web page designed with progressive enhancement against Evaluera's "WCAG 2.0
Level-AA conformance statements for HTML5 foundation markup" making a report that can serve as a broad and easily confirmed
WCAG 2.0 Level-AA claim, even for enhanced versions.
• A11Y Compliance Platform by Bureau of Internet Accessibility
Tools, reports and services to help organizations achieve, maintain and defend the accessibility of their organization's websites.
Standards and guidelines used includes Section 508, Web Content Accessibility Guidelines (WCAG) & Americans with Disabilities
(ADA)

USEFUL LINKS
• ARIA Specification 1.0 (Last update: March 20, 2014)
• ARIA Roles Model
• ARIA User Agent Implementation
• ARIA Best Practices
• How to meet WCAG 2.0
• DHTML style guide
• An overview of how keyboard navigation should work for each type of widget
supported by ARIA.
• HHS Section 508 Accessibility checklists
• The official HHS Accessibility checklists

ACCESSIBILITY EVALUATION TOOLS
• Wave
• Web Accessibility Evaluation Tool
• Accessibility Viewer
• An inspection tool for Windows that displays the accessibility API information (MSAA,
IAccessible2 UI Automation, ARIA, HTML DOM) exposed by web browsers to the operating system
• Inspect
• A Windows-based tool that enables you select any UI element and view the element's accessibility data.
• AChecker
• Checks single HTML pages for conformance with accessibility standards to ensure the content can be
accessed by everyone.
• Web Accessibility Evaluation Tools List
• A list of evaluation tools that you can filter to find ones that match your particular needs.

HOW TO CONTACT ME
Email: rrumaner@gmail.com
Twitter (and most everywhere else): rrumaner
LinkedIn: RoyRumaner
AccessibilityWebsiteBlog.com

ATTRIBUTIONS
Digital Accessibility Checklist: 10 Critical Elements to Evaluate for Website Accessibility was originally
published in the July 2016 issue of Mealey’s™ Litigation Report: Cyber Tech & E-Commerce as
“Digital Accessibility And Unlawful Discrimination Checklist: Common Pitfalls That Expose Website
Owners To ADA Equal Access Litigation” and has been reproduced here with some modifications.
WCAG20Map was reproduced from Digital Pulse
Digital Accessibility: The Growing Risks of Non-Compliance was reproduced from Crownpeak
Text from New Research from Forrester and Microsoft Shows Millions of Aging Baby Boomers Can
Benefit from Accessible Technology was from Microsoft

Website accessibility presentation made at MWLUG 2017 in Washington DC

Recommended

Recommended

More Related Content

Similar to Website accessibility presentation made at MWLUG 2017 in Washington DC

Similar to Website accessibility presentation made at MWLUG 2017 in Washington DC (20)

Recently uploaded

Recently uploaded (20)

Website accessibility presentation made at MWLUG 2017 in Washington DC

Editor's Notes