#evolverocks

WEB ACCESSIBILITY & AEM

Libby Schaper & Gina Petruccelli

Aug 31, 2016

#evolverocks 2

ABOUT US

Facebookfacebook.com/3shareMail

libby.schaper@3sharecorp.com Twitter

twitter.com/3share

Linkledinlinkedin.com/company/3-share-corporation

Libby SchaperSr. Project Manager3|SHARE

Contact Uswww.3sharecorp.com

#evolverocks 3

ABOUT US

Facebookfacebook.com/3share

Mailgina.petruccelli@3sharecorp.com Twitter

twitter.com/3share

Linkledinlinkedin.com/company/3-share-corporation

Gina PetruccelliSr. Project Manager3|SHARE

Contact Uswww.3sharecorp.com

#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

#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

#evolverocks

Why?There is a strong business case for accessibility

You never want to limit your audienceLogical content organization adjustments made for ADA compliance are better for general usability.

SEO - a properly structured site is a bonus for search engine optimizationEase of maintenance for your authorsBe 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%2C213#principle1

Also… It’s the law.Target.com 2005 Accessibility lawsuit https://www.w3.org/WAI/bcase/target-case-studyArizona State University 2009 Accessibility lawsuit

http://blogs.findlaw.com/injured/2010/01/kindle-lawsuit-settled-by-asu-and-blind-groups.htmlPenn State 2010 Accessibility lawsuit https://nfb.org/node/1026

6

#evolverocks

What can we do?

Programmatic Keyboard Input and navigabilityAlt Text for Images AND Image

mapsSkip NavigationAccessible Forms

TestingTurn Off the CSSTest on Mobile & Screen reader

Content / Design●Color ContrastAlt Text for Images Notate Links to DocumentsUse Text, Not Pictures of TextCaptions for VideosContent OrganizationTables - not for layout

7

#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

#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

#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

#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

#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

#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

#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

#evolverocks

PROGRAMMATIC ADJUSTMENTS: Tables

15

#evolverocks

PROGRAMMATIC ADJUSTMENTS: TablesThe 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:

#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

#evolverocks

TESTING: Screen Readers

JAWShttp://www.freedomscientific.com/Products/Blindness/JAWS

Window- ‐Eyeshttp://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/voiceover/

http://webaim.org/articles/voiceover/

Chrome Vox (Free)http://www.chromevox.com/

71.8% of screen reader users use a screen reader on mobile

#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/

#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

#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

#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

#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

#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

#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

#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

#evolverocks

Resources

To read the standard:http://www.epa.gov/accessibility/standards/

Tips & Trickshttp://webaim.org/https://www.w3.org/WAI/WCAG20/quickref/https://www.w3.org/TR/html51/index.html

To check your own page/sitehttp://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 colorblindnesshttp://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

#evolverocks 28

Webaim DemoWho wants to see their site in Wave?

#evolverocks 29

Questions?

We’re all ears.

#evolverocks

THANK YOU!