Accessibility is a hot issue that is unavoidable in the web industry. The deadline to ensure that web content meets all accessibility standards has come and gone. Whether you're a designer, developer, content owner or project manager, this presentation will cover strategies to reach and maintain accessibility goals.
Presentation from 2018 OmniUpdate User Training Conference
2. 40+
Higher Ed
E-commerce
Small Business
Other
TYPES OF PROJECTS
KEANA LYNCH
www.beacontechnologies.com @keana_lynch
9.5years
EXPERIENCE
Analysis
Design
Development
User Experience
Management
Accessibility
I’M FROM
Greensboro, NC
INTERESTS
TRAVEL HIKE
KAYAK RESCUE
A LITTLE ABOUT ME
Director – UX Design & Development @
5. “The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”
– Tim Berners-Lee
W3C Director and inventor of the World Wide Web
6. The task of making a site accessible and
keeping it there can seem daunting…
…but it doesn’t have to be.
7. Assess
Revise
Scan Assess
Revise
Scan Assess
Revise
Scan Assess
Revise
Scan Assess
Revise
Scan
REPEAT
Accessibility Management Process
Where are you now ?
Understanding of accessibility evaluation and issues.
Where do you need to be?
Develop clear goals and an environment that supports accessibility.
How do you get there?
Fixing issues and utilizing management process.
How do you stay there?
Continue to review and report on content, processes, and resources.
8. Where are you now?
Understanding of accessibility evaluation and issues.
Are you…
just starting the process of Accessibility
on an existing site?
performing on-going management and
maintenance of existing site?
starting a new project or redesign?
Assess
Revise
Scan
9. Assess
Revise
Scan
https://www.w3.org/WAI/ER/tools/
Choosing Evaluation Tools
Find the tool that works best for you.
Tool Description Type
OU Insights OU Insights continually reports on these key areas of your website's health outside of the
publishing workflow, so you not only get people to your website, but you keep them there.
Scores, recommended actions, and drill-down capabilities make OU Insights an invaluable tool
for your team to uncover problems and improve areas that have a critical impact on your site
visitors' user experience.
CMS
Integration
Siteimprove Using global Web Content Accessibility Guidelines (WCAG 2.0) as its standard, Siteimprove
Accessibility gives you a bird's eye view of your website’s accessibility status. Clear explanations
of issues combined with practical recommendations do more than speed the fixing process.
Browser
Chrome
Extension
SortSite SortSite is a one-click web site testing tool used by federal agencies. One click is all it takes to
analyze an entire web site. Check WCAG and Section 508 guidelines against many file types: find
flashing GIFs, untagged PDFs.
Desktop
Program
Wave ‘WAVE’ is a free, community-built tool designed to facilitate web accessibility testing by providing
developers with a visual representation of issues directly on their page.
Browser
Chrome
Extension
Accessibility Developer Tools Chrome extension that adds a holistic accessibility audit, and sidebar pane, directly within
Google Developer Tools (GDT). Identify accessibility errors, including missing ARIA attributes,
color contrast values, and much more.
Chrome
Extension
14. Assess
Revise
Scan Where do you need to be?
Establish clear goals and an
environment that supports accessibility.
GUIDELINES
Section 508, WCAG 2.0
POLICY
TRAINING
15. Assess
Revise
Scan
Web Content Accessibility
Guidelines (WCAG) 2.0
W3C Recommendation 11 December 2008
Most basic web
accessibility
features.
A
Biggest and most
prevalent barriers
encountered by
disabled users.
AA
Highest and most
involved level of web
accessibility.
AAA
16. Assess
Revise
Scan
Web Content Accessibility
Guidelines (WCAG) 2.1
W3C Candidate Recommendation 30 January 2018
https://www.w3.org/TR/2018/CR-WCAG21-20180130/
WCAG 2.1 covers a wide range of
recommendations for making Web
content more accessible.
WCAG 2.1 will address
accessibility of web content on
desktops, laptops, tablets, and
mobile devices.
17. 1. Identify and document goals.
Plan objectives and realistic goals that are easy to
communicate and achieve.
2. Set and maintain policies and processes.
Create an environment that supports accessibility.
3. Promote awareness within your organization.
Provide documentation, training, and resources to your team.
Assess
Revise
Scan Strategic Planning
Careful planning is critical to effective implementation
of any accessibility effort.
18. Assess
Revise
Scan
Set Objectives
Focus your team.
Defining where you are with accessibility, and where you
need to be is the beginning of an outline of your
organizations objectives.
DELIVERABLESGOALS TIMELINE SUCCESS
20. Web accessibility is the sole responsibility of
developers
MYTH:
Every member of the team is responsible for
making their part of a project accessible
FACT:
Assess
Revise
Scan
Assign Responsibilities
22. • Standards
• Approach
• Conformance levels
• Scope of policy
• Conformance milestones
• Monitoring and review process
Assess
Revise
Scan
Policy
Summary of goals and objectives.
https://www.w3.org/WAI/impl/pol
23. Provide accessibility training as part of staff and career
development plans.
Assess
Revise
Scan
Skills and Training
Focus your team.
https://www.w3.org/WAI/training/Overview
CODE DESIGN CONTENT
24. Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
The tutorials cover various accessibility topics, based on common
tasks in web projects.
https://www.w3.org/WAI/tutorials/
Assess
Revise
Scan
Content Owner Training
Page Structure TablesMenusImages CarouselsForms
26. PDFs are a huge pain point!
Common Errors & Issues
Assess
Revise
Scan
2.4.2
Document title must not be blank.
1.1.1
Figures and images in PDF documents should have non blank ALT
text, except for decorative images which should be marked as
artifacts.
1.3.1
PDFs must be tagged to be accessible by screen readers.
https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html
27. Alt Text
Common Errors & Issues
Assess
Revise
Scan
1.1.1 and 1.2.1
IMG ALT text must not be the same as the image file name.
1.1.1
IMG tags must have an ALT attribute.
Using ALT text which duplicates link text in the same link or the
following link results in screen readers stuttering as the same text
is read out twice.
https://www.w3.org/WAI/tutorials/images/decision-tree/
29. Assess
Revise
Scan
Contrast & Design
Common Errors & Issues
1.4.3
Ensure that foreground and
background colors have
enough contrast.
1.4.4
Text-based form controls
with absolute font sizes
do not resize correctly.
30. Assess
Revise
Scan
Forms
Common Errors & Issues
https://www.w3.org/WAI/tutorials/forms/
Ensure Forms are Logical and Easy to Use
Ensure Forms are Keyboard Accessible
Associate Form Labels with Controls
31. Assess
Revise
Scan
Additional
Common Errors & Issues
2.1.1
All ONCLICK handlers should have an equivalent ONKEYPRESS handler.
2.4.2
Some pages have the same title, so the title cannot be used to distinguish
pages.
2.4.4
This link uses general text like "Click Here" and has no surrounding text to
make the context clear.
2.4.6
Headings should not be empty.
32. How do you stay there?
Continue to review and report on content, processes, and resources.
Staying Accessible Means
STAYING COMMITTED
• Stay in the know:
standards, techniques and best practices are always
changing.
• Govern your content:
new content is always being created, make sure you have a
plan in place to continuously monitor content.
• Stick to the plan:
continue to follow and modify the objectives, goals and
processes put in place.
Assess
Revise
Scan
REPEAT
37. Great!
You are done!
Ok…not really.
New content is always being
created, new projects are always
on-going and technology is ever
changing.
Staying accessible means
repeating the processes put in
place.
Assess
Revise
Scan
REPEAT
38. Site Examples
Assess
Revise
Scan
The following 5 sites are examples of colleges and/or universities
doing do a great job at using good accessibility practices:
http://www.ufl.edu/
https://www.grinnell.edu/
https://www.byu.edu/
http://www.lmu.edu/
https://www.unr.edu/