Web Accessibility

Accessibility Webaim This is a pretty prolific site that has a cool little toolbar to install to your bowser. It’s called Wave. It’s a great tool, but it is also easy to fool. Just because your site passes with no accessibility errors, does not mean it’s accessible. It only means it technically meets minimum requirements. Colorblindness Simulators WeAreColorBlind – This tool is pretty high level, but it gives you a good idea about the need for consideration to you color blind audience. Color contrast is important, and there are a few great examples of the right and wrong way to display your data, when considering a color blind audience. CDAC – Digital Accessibility Center CDAC – Digital Accessibility Center CDAC provides a number of services that vary based on the type of web content. Static, content managed and dynamic web sites can benefit from our accessibility review service. Rich media content, such as Microsoft Word documents, Adobe Acrobat PDF files and multimedia can benefit from our review services.

Image Alt Text Alt= Screen shot of CQ5 text/image component alt text and advanced settings dialog box

Alt text in Word 2011 & 2012 Alt text in PDF (using Adobe Acrobat Pro) Alt Text Everywhere

Alt Text Resources W3C Techniques for providing useful text alternatives NCAM Effective practices for describing science content ational_media/stemdx ational_media/stemdx

Notate Links to Documents 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)

Proper Headings Main heading/title of the page Secondary heading First subheading in this section Second subheading in this section Another secondary heading

Proper Headings Example Application Process Undergraduate Admission Admission Requirements Application Process Graduate Admission OU Graduate College Requirements College of Blank Requirements

Headings For All Docs… Not Just Web

Headings even (especially) in PDF!

Speaking of PDFs…..

Create Accessible PDFs Not all PDFs are equal: – Image PDFs – PDFs with text, but no structure – Tagged PDF (the only accessible type) Can create an accessible PDF from scratch – Using a tool that supports tagged PDF (e.g., Word) – Save as tagged PDF Can fix an inaccessible PDF using Adobe Acrobat Pro

Fixing PDFs in Acrobat Pro 1. Convert to text (if needed) 2.Add tags to document (if needed) 3.Touch up reading order, add alt text to images 4.Check/correct headings and other tags 5.Create links from URLs (if needed) 6.Define document language 7.Run an accessibility check

PDF Accessibility Resources Includes workflows for: – Making a PDF accessible from scratch – Exporting from Word to tagged PDF – Repairing and creating inaccessible PDFs and PDF forms using Acrobat Pro PDFs are great for documents where: Appearance is critical. Document must be the same across all platforms. Security is critical. Document requires encryption, digital signatures, watermarks, etc.

Mark Up Tables Appropriately Include markup that clearly communicates the relationship between table headers and the cells within their scope:

Color Contrast Checker 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

Color Contrast Example

Respect white 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.

Clean & Simple is Good

Use Text, Not Pictures 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

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. Juicy Studio Readability Test: Struggling with Understandability:

Make Text Easier to Read Understandable  “easier to read” Manipulated  Changed Subsequently  Later “Testimonials from individuals with disabilities…”  “People with disabilities talk about…”

Become a Closed Captioning Master 3 Common terms to know:.SRT File common subtitle file that has the timecode and text Video Hosting Site this site is a 3rd party site where your video lives (i.e. YouTube or Vimeo). For every video you upload you will have a URL CC the abbreviation for Closed Captioning CC on YouTube You want to host your video through a service like YouTube. Use a captioning service like Overstream.net, CaptionTube or Amara to generate your captioning file.

Closed Captioning

Don’t forget to describe content that is otherwise only accessible to people who can see it. Examples: – Words on the screen – Critical actions – Other critical details about the setting, etc. Script the description Sync description with the video. description.html

Get Involved Follow #a11y on Twitter Contact the Disability Resource Center and get involved with the Web Accessibility Higher Education project EDUCAUSE IT Accessibility Constituent Group – Working to get accessibility on the radar of EDUCAUSE, CIO’s, and other IT Leaders –

Test Content on Mobile Device 71.8% of screen reader users now use a screen reader on a mobile device Source: WebAIM Screen Reader User Survey #4: Test on iPhone using VoiceOver. Some tips:

Test on Screen Reader JAWS product-page.asp product-page.asp Window-Eyes NVDA (Free!) VoiceOver (built in to Mac OS X and iOS)