This session will highlight the capabilities within AEM 6.2 that allow you to create accessible web content and how to meet the important requirements of WCAG 2.0.

1. #evolverocks
WEB ACCESSIBILITY & AEM
Libby Schaper & Gina Petruccelli
Aug 31, 2016

2. #evolverocks 2
ABOUT US
Facebook
facebook.com/3share
Mail
libby.schaper@3sharecorp.com Twitter
twitter.com/3share
Linkledin
linkedin.com/company/3-
share-corporation
Libby Schaper
Sr. Project Manager
3|SHARE
Contact Us
www.3sharecorp.com

3. #evolverocks 3
ABOUT US
Facebook
facebook.com/3share
Mail
gina.petruccelli@3sharecorp.com
Twitter
twitter.com/3share
Linkledin
linkedin.com/company/3-
share-corporation
Gina Petruccelli
Sr. Project Manager
3|SHARE
Contact Us
www.3sharecorp.com

4. #evolverocks
What is the 508 standard?
The 508 standard is the electronic standard for ADA compliance. People with any
disability should be able to cleanly navigate your website, and be able to get to the
information they need just like any other person, regardless of the kind of
disability. These disabilities range from sight and hearing impairment to cognitive
disabilities, like ADHD and dyslexia.
https://www.access-board.gov/guidelines-and-standards/communications-and-
it/about-the-section-508-standards/section-508-standards
4

5. #evolverocks
What kinds of impairments are we talking about?
● Sight Impairment
○ Blindness / Low vision
○ Color Blindness
● Hearing Impairment
● Physical Disabilities
○ Inability to use a mouse
○ Limited fine motor control
● Cognitive Disabilities
○ Distractibility
○ Inability to focus on large amounts of information
5

6. #evolverocks
Why?
There is a strong business case for accessibility
You never want to limit your audience
Logical content organization adjustments made for ADA compliance are better for general usability.
SEO - a properly structured site is a bonus for search engine optimization
Ease of maintenance for your authors
Be kind! Accessibility supports social inclusion.
There are 3 levels of accessibility, minimal is Level A conformance, meaning you meet the minimum
success standards for that category or component. This is one of the best tools for referencing how to
meet the proper success criteria:
https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_overview&showtechniques=212%2
C213#principle1
Also… It’s the law.
Target.com 2005 Accessibility lawsuit https://www.w3.org/WAI/bcase/target-case-study
Arizona State University 2009 Accessibility lawsuit http://blogs.findlaw.com/injured/2010/01/kindle-
lawsuit-settled-by-asu-and-blind-groups.html
Penn State 2010 Accessibility lawsuit https://nfb.org/node/1026
6

7. #evolverocks
What can we do?
Programmatic
Keyboard Input and navigability
Alt Text for Images AND Image
maps
Skip Navigation
Accessible Forms
Testing
Turn Off the CSS
Test on Mobile & Screen reader
Content / Design
● Color Contrast
Alt Text for Images
Notate Links to Documents
Use Text, Not Pictures of Text
Captions for Videos
Content Organization
Tables - not for layout
7

8. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Keyboard Input
"When software is designed to run on a system that has a keyboard, product functions shall be
executable from a keyboard where the function itself or the result of performing a function can be
discerned textually."
When testing, avoid the mouse. Use only your keyboard to ensure you can get to all the content on
the page. Check the tab order of the components on the page to make sure they tab in a logical
order. This will determine the order the screen readers access content as well.
8

9. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Alt Text on Images
"A text equivalent for every non-text element shall be provided (e.g., via "alt",
"longdesc", or in element content)."
9

10. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Alt Text on images
<img title="Threeshare Logo" alt="Threeshare Logo"
src="/content/dam/threeshare/logo/_jcr_content/par/imageplus_0/image.img.
jpg/1371645426831.jpg"/>
● This can default to image title, then image name if no alt text is available on the
instance of the image.
● Decorative images (background images, etc) don’t need alt text, but should
probably be moved into the CSS .
10

11. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Forms
"When electronic forms are designed to be completed online, the form shall allow people using assistive
technology to access the information, field elements, and functionality required for completion and
submission of the form, including all directions and cues."
This simplest way to do this is to use the "name" and "for" attributes.
AEM does this for you!
This is what the html should look like for this simple form field:
<label for="name">Name:</label>
<input id="name" type="text" name="textfield" /
11

12. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Color
"Web pages shall be designed so that all information conveyed with color is also
available without color, for example from context or markup."
12

13. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Skip Navigation link
"A method shall be provided that permits users to skip repetitive navigation links."
Users using screen readers need a way to link to the main content of the page without going back over
navigational items found on each page. The link is the first item in the page. The anchor is placed at the
beginning of the main content.
<body>
<a href="#maincontent">Skip navigation</a>
...
<a name="maincontent" id="maincontent"></a>
<h1>Heading</h1>
<p>This is the first paragraph</p>
13

14. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Tables
● "Row and column headers shall be identified for data tables."
● Screen readers will read tabular data cell by cell, and without properly identified table headers,
information becomes jumbled and confusing.
● "Markup shall be used to associate data cells and header cells for data tables that have two or more
logical levels of row or column headers."
● Ideally, you would want to link the cell data to its corresponding column and row headers. You can do
this using "scope".
14

15. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Tables
15

16. #evolverocks
PROGRAMMATIC ADJUSTMENTS: Tables
The HTML should look like this:
<table><caption>Shelly's Daughters</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>
16
For a simple Tabular form like this:

17. #evolverocks
TESTING: Turn off the CSS
● "Documents shall be organized so they are readable without requiring an associated style sheet."
● Firefox has the ability to turn off CSS, and view the layout of the page. It's a good way to view the logical
layout of your content. In Chrome, you can do it using developer tools, but I’ve found this a faster
solution.
17

18. #evolverocks
TESTING: Screen Readers
JAWS
http://www.freedomscientific.com/Products/Blindnes
s/JAWS
Window-‐Eyes
http://www.gwmicro.com/window-eyes/
NVDA (Free)
http://www.nvaccess.org/
18
Voiceover (built in to Mac OS X and iOS)
http://www.apple.com/accessibility/osx/voice
over/
http://webaim.org/articles/voiceover/
Chrome Vox (Free)
http://www.chromevox.com/
71.8% of screen reader users use a screen reader on mobile

19. #evolverocks
DESIGN: Color Contrast
WCAG 2.0 Level AA:
● Contrast ratio of 4.5:1 for normal text or
3:1 for large text (18 pt or 14 pt bold)
WCAG 2.0 Level AAA:
● Contrast ratio of 7:1 for normal text or
4.5:1 for large text (18 pt or 14 pt bold)
19
https://www.paciellogroup.com/resources/contrastanalyser/

20. #evolverocks
DESIGN: Respect White or Blank Space
•Space between lines
•Space between paragraphs
•Can help users who have difficulty tracking text horizontally.
•Contributes to a cleaner, more aesthetically pleasing interface for everyone.
20

21. #evolverocks
CONTENT: Content Organization
<h1>Application Process
<h2>Undergraduate Admission
<h3>Admission
Requirements
<h3> Application Process
<h2>Graduate Admission</h2>
<h3>Graduate College
Requirements
<h3>College of Blank Requirements
Many experts recommend reserving H1 for the page title, H2 for major headings and H3 for major sub
headings. Making visual differences between header styles is also key for those with cognitive disorders or
visual impairments.
People using a screen reader have the ability to skip over pages or sections not applicable to them. Proper
structure help immensely.
<h1>Main heading/title of the page</h1>
<h2>Secondary heading</h2>
<h3>First subheading in this section</h3>
<h3>Second subheading in this section</h3>
<h2>Another secondary heading</h2>
21

22. #evolverocks
CONTENT: Use Text, Not Images of Text
•Pictures become blurry when enlarged
•Pictures take longer to download
•Pictures that contain text are not readable on
a screen reader
•Text in an image is not searchable
22

23. #evolverocks
CONTENT: Captioning Videos
"Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation."
● Youtube has some pretty good support for captioning videos, as well as tutorials on how to go about creating
a timed caption file. Quicktime is a great captioning tool, since Apple got into the accessibility game.
CaptionTube and Overstream are also handy captioning tools. Typically you will be creating an SRT file.
● Another alternative to captioning is to provide a text transcript of the video in an attached file
● For those with visual impairments, captions
should not just include a script of what someone
is saying but should also describe critical
actions or words on the screen.
● For image slideshows turned into videos, a
caption file would describe the images for those
with visual impairments and note if there was
music for those with hearing impairments.
23

24. #evolverocks
CONTENT: Accessible Linking
● When linking to a word document, PDF or other file, make sure to note in your link what the document
is and hyperlink that notation
● Fill out the Camp Counselor Application (PDF)
Register for Volunteer Weekend (Word Doc)
● If a link opens in a new window, warn the user. Switching windows using a screenreader can be
confusing and hard to navigate properly.
● Avoid naming links on a single page with the same text. Screen readers skipping around have no clue
what “Click here” or “Download PDF” is referring to. Be specific.
● Documents like PDF and Word should be made accessible.
24

25. #evolverocks
CONTENT: Think Twice About the Words You Choose
Word length and sentence complexity have an effect on the ability of certain individuals to decode the words
on a page.
● Understandable --> “easier to read”
● Manipulated --> Changed
● Subsequently --> Later
● “Testimonials from individuals with disabilities…” ----> “People with disabilities talk about…”
Juicy Studio Readability Test: http://juicystudio.com/services/readability.php
Struggling with Understandability: http://terrillthompson.com/blog/10
25

26. #evolverocks
If All Else Fails
"A text-only page, with equivalent
information or functionality, shall be
provided to make a web site comply
with the provisions of this part, when
compliance cannot be accomplished
in any other way. The content of the
text-only page shall be updated
whenever the primary page
changes."
This could include transcripts for
podcasts and alternatives to overly
javascript-y layouts.
26
image image

27. #evolverocks
Resources
To read the standard:
http://www.epa.gov/accessibility/standards/
Tips & Tricks
http://webaim.org/
https://www.w3.org/WAI/WCAG20/quickref/
https://www.w3.org/TR/html51/index.html
To check your own page/site
http://wave.webaim.org/
*Just because your site passes with no errors,
doesn’t mean it’s truly accessible, it just
technically meets the bare minimum
requirements. Wave is easy to fool.
● To simulate colorblindness
http://www.vischeck.com/
http://wearecolorblind.com/
● Aria (Accessible Rich Internet Applications) -
Method to define your dynamic web content and
applications to that people using assistive
technologies can identify and successfully interact
with the web application. ARIA markup can be
added to existing sites without altering functionality
for mainstream users, reducing cost for testing.
https://www.w3.org/TR/wai-aria/
27

28. #evolverocks 28
Webaim Demo
Who wants to see their site in Wave?

29. #evolverocks 29
Questions?
We’re all ears.

30. #evolverocks
THANK YOU!