It’s Built In! Accessibility Options in Windows XP and Apple OS X
Web Accessibility...Accessibility Webaim’...
Transcript of Web Accessibility...Accessibility Webaim’...
![Page 1: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/1.jpg)
Web Accessibility
![Page 2: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/2.jpg)
Accessibility Webaim This is a pre-y prolific site that has a cool li-le 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 pre-y high level, but it gives you a good idea about the need for consideraFon 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 provides a number of services that vary based on the type of web content. StaFc, content managed and dynamic web sites can benefit from our accessibility review service. Rich media content, such as MicrosoK Word documents, Adobe Acrobat PDF files and mulFmedia can benefit from our review services.
![Page 3: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/3.jpg)
Image Alt Text
Alt= Screen shot of CQ5 text/image component alt text and advanced seRngs dialog box
![Page 4: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/4.jpg)
Alt text in Word 2011 & 2012 Alt text in PDF
(using Adobe Acrobat Pro)
Alt Text Everywhere
![Page 5: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/5.jpg)
Alt Text Resources
• W3C Techniques for providing useful text alternaFves h-p://www.w3.org/TR/html-‐alt-‐techniques/
• NCAM EffecFve pracFces for describing science content h-p://ncam.wgbh.org/experience_learn/educaFonal_media/stemdx
![Page 6: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/6.jpg)
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 notaFon
Fill out the Camp Counselor ApplicaFon (PDF) Register for Volunteer Weekend (Word Doc)
![Page 7: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/7.jpg)
Proper Headings
<h1>Main heading/Ftle of the page</h1> <h2>Secondary heading</h2> <h3>First subheading in this secFon</h3> <h3>Second subheading in this secFon</h3> <h2>Another secondary heading</h2>
![Page 8: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/8.jpg)
Proper Headings Example
<h1>ApplicaFon Process <h2>Undergraduate Admission <h3>Admission Requirements <h3> ApplicaFon Process <h2>Graduate Admission</h2> <h3>OU Graduate College Requirements
<h3>College of Blank Requirements
![Page 9: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/9.jpg)
Headings For All Docs… Not Just Web
![Page 10: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/10.jpg)
Headings even (especially) in PDF!
![Page 11: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/11.jpg)
Speaking of PDFs…..
![Page 12: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/12.jpg)
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
![Page 13: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/13.jpg)
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
![Page 14: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/14.jpg)
PDF Accessibility Resources
h-p://uw.edu/accessibility/pdf.html • Includes workflows for: – Making a PDF accessible from scratch – ExporFng from Word to tagged PDF – Repairing and creaFng inaccessible PDFs and PDF forms using Acrobat Pro
PDFs are great for documents where: • Appearance is criFcal. Document must be the same across all plaoorms.
• Security is criFcal. Document requires encrypFon, digital signatures, watermarks, etc.
![Page 15: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/15.jpg)
Mark Up Tables Appropriately Include markup that clearly communicates the relaFonship between table headers and the cells within their scope:
![Page 16: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/16.jpg)
Color Contrast Checker WCAG 2.0 Level AA: – Contrast raFo 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 raFo of 7:1 for normal text – Or 4.5:1 for large text
![Page 17: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/17.jpg)
Color Contrast Example h-p://www.paciellogroup.com/resources/contrast-‐analyser.html
![Page 18: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/18.jpg)
Respect white space
• Space between lines • Space between paragraphs • Can help users who have difficulty tracking text horizontally.
• Contributes to a cleaner, more aestheFcally pleasing interface for everyone.
![Page 19: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/19.jpg)
Clean & Simple is Good
![Page 20: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/20.jpg)
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
![Page 21: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/21.jpg)
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: h-p://juicystudio.com/services/readability.php
• Struggling with Understandability: h-p://terrillthompson.com/blog/10
![Page 22: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/22.jpg)
Make Text Easier to Read
• Understandable à “easier to read” • Manipulated à Changed • Subsequently à Later • “TesFmonials from individuals with disabiliFes…” à “People with disabiliFes talk about…”
![Page 23: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/23.jpg)
Become a Closed Captioning Master 3 Common terms to know: • .SRT File common subFtle file that has the Fmecode
and text • Video Hos/ng 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 abbreviaFon for Closed CapFoning CC on YouTube You want to host your video through a service like YouTube. Use a capFoning service like Overstream.net, CapFonTube or Amara to generate your capFoning file.
![Page 24: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/24.jpg)
Closed Captioning
![Page 25: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/25.jpg)
Closed Captioning
![Page 26: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/26.jpg)
Closed Captioning
![Page 27: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/27.jpg)
Closed Captioning
![Page 28: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/28.jpg)
Closed Captioning
• Don’t forget to describe content that is otherwise only accessible to people who can see it. Examples: – Words on the screen – CriFcal acFons – Other criFcal details about the seRng, etc.
• Script the descripFon • Sync descripFon with the video.
h-p://listeningislearning.org/background_what-‐is-‐descripFon.html
![Page 29: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/29.jpg)
Get Involved
• Follow #a11y on Twi-er • Contact the Disability Resource Center and get involved with the Web Accessibility Higher EducaFon project
• EDUCAUSE IT Accessibility ConsFtuent Group – Working to get accessibility on the radar of EDUCAUSE, CIO’s, and other IT Leaders
– h-p://educause.edu/groups/itaccess
![Page 30: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/30.jpg)
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: h-p://weba.im/survey4
• Test on iPhone using VoiceOver. Some Fps: h-p://webaim.org/arFcles/voiceover/
![Page 31: Web Accessibility...Accessibility Webaim’ ’’’’This’is’apre-y’prolific’site’thathas’acool’li-le’toolbar’to’install’to’your’bowser.’’’ It’s](https://reader035.fdocuments.net/reader035/viewer/2022070909/5f9291ab66270777307f4ded/html5/thumbnails/31.jpg)
Test on Screen Reader
• JAWS h-p://freedomscienFfic.com/products/fs/jaws-‐product-‐page.asp
• Window-‐Eyes h-p://www.gwmicro.com/Window-‐Eyes/
• NVDA (Free!) h-p://www.nvda-‐project.org
• VoiceOver (built in to Mac OS X and iOS) h-p://www.apple.com/accessibility/voiceover/