1 / 34

Web Accessibility

Web Accessibility. Looking specifically at WordPress. Services. Informal AT assessments Training – software and equipment Training and technical resources Accessible Media (i.e., captioning, audio description) Accessible text Web accessibility testing and accessibility workshops.

dyre
Télécharger la présentation

Web Accessibility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Accessibility Looking specifically at WordPress

  2. Services • Informal AT assessments • Training – software and equipment • Training and technical resources • Accessible Media (i.e., captioning, audio description) • Accessible text • Web accessibility testing and accessibility workshops

  3. Agenda • Reasons why “Accessibility” is the new topic of discussion • Overall Web Accessibility and Design Considerations • Accessibility of WordPress Admin • Accessibility of WordPress • Resources • Questions

  4. Why “Accessibility” is the new topic of discussion ….. • Cliché, but correct answer: Because it’s the law!! • ADA/Section 508 • Helps Mason comply with Federal, State, and Local government standards (i.e., Penn State, Arizona State, Google Apps for Education) • Penn State (settled a year ago) – library’s online database, Angel LMS, departmental websites, “smart” podiums, ATMs • Arizona State (settled Jan. 2010) – Kindle Reader pilot • Google (initiated March 2011) • Last year DOJ under ADA created a settlement agreement with Fairfax County, VA to ensure accessibility of both physical and online material. • Other reasons: • Reaches a wider audience (i.e., captioning, • Search engines optimization favors accessible websites • non-traditional users, ESL) • Mobile phone access

  5. Rehabilitation Act

  6. ADA/VITA

  7. What does IT Accessibility Mean to you? • Mason has policy and an ATI Committee put in place: • ATI Office has worked with ITU Instructional Designers and are available to provide support and consultation to faculty who needs assistance with building accessible courses, administration who needs assistance with designing accessible sites and content and work closely with ODS who determines appropriate accommodations. • Where does this apply? • Online courses • Face-to-Face Courses that use online resources • For example: Blackboard and Piazza • Websites • For example: CommonSpot, Word Press, 3rd Party Services • Website Content • For example: Documents, Videos, etc. • Online and Desktop Applications • Library Databases • What role can you play to help increase accessibility?

  8. Web Accessibility

  9. Universal Design – Everyone Benefits • Accessible Web design contributes to better design for other users: • Multi-modality (support for visual, auditory, tactile access) benefits users of: • mobile phones with small display screens, Web-TV, kiosks. • Multi-modality increases usability of Web sites in different situations: • low bandwidth (images are slow to download); • noisy environments (difficult to hear the audio); • screen-glare (difficult to see the screen); • driving (eyes and hands are "busy"). • Redundant text/audio/video can support: • different learning styles; low literacy levels; second-language access. • Style sheets can support: • more efficient page transmission and site maintenance. • Captioning of audio files supports: • better machine indexing of content; faster searching of content.

  10. Design Considerations • Visual • Images should be optimized and include descriptive “alt” tags • Description of the file you have uploaded • Text description provides access to understanding what is being conveyed • Brief, clear, and contextual • Learning/Mobility/Visual/Other • Alternative formats of materials for students who require them (e.g. optional print packet of extensive online reading materials, CD of audio clips) • ODS provides students an accommodation to receive these materials in an accessible electronic format • ATI works to cut, scan, and re-format! • Hearing/ESL/Learning • Caption video or transcribed audio

  11. Overall Usability Considerations • Text should be legible and re-sizeable • 14 point font size is ideal • Using a clear sans serif font such as Helvetica or Arial • Document compatibility and accessibility • Is the document in a format that can be opened on various machines, versions of software or mobile? If the format isn’t accessible, is an alternative available? • Use of color should add interest and indicate interface choices, but should not disadvantage those with color blindness • White text on a black background is usually best

  12. Web Accessibility Resources • SSBBartGroup – Accessibility Management Platform - https://www.ssbbartgroup.com/amp/index.php**Contact our office to have your pages tested for accessibility – ati@gmu.edu ** • NetCentric – CommonLook Office – http://www.commonlook.com/CommonLook-office • Free Single Page DeQue – WorldSpace, Ramp and UnDoc - http://wsspg.dequecloud.com/worldspace/wsservice/eval/checkCompliance.jsp • Illinois Accessible Web Publishing Wizard for Microsoft Office - http://www.virtual508.com/ • Adobe Professional v. 9.0 or higher -http://www.adobe.com/accessibility/ • CourseAvenue - http://www.courseavenue.com/default.aspx

  13. Captioning Resources • ATI Media – Free Captioning http://ati.gmu.edu/media.cfm • MAGpiehttp://ncam.wgbh.org/webaccess/magpie/ • Subtitle Workshop (free) http://www.urusoft.net • Captionate (for Flash): http://www.buraks.com/captionate • World Caption: http://kb.wisc.edu/helpdesk/page.php?id=7096 (Mac), • CapScribe: http://capscribe.snow.utoronto.ca/site/ (Mac) • MovCaptioner: http://www.synchrimedia.com/ (Mac) • dotSub: http://dotsub.com/ • Subtitle Horse: http://www.subtitle-horse.com/ • CaptionTube: http://captiontube.appspot.com/ • Overstream: http://www.overstream.net/ • vSyncBookmarklet: http://vsync.tunezee.com/bookmarklet.html • Easy YouTube Caption Creator: http://accessify.com/tools-and-wizards/accessibility-tools/easy-youtube-caption-creator/

  14. Audio Description • Avoid the need for audio description where possible, by assuring that all important information is communicated visually and audibly. • Adding more descriptive text into your monologue helps to not require audio description.

  15. Document Accessibility • Number of electronic documents posted on websites are not accessible • E.g., PDFs scanned with no tags • E.g., Word documents designed without styles • E.g., forms are inaccessible

  16. Microsoft Built-In Accessibility Checker • When you go to file, you’ll see on the left side a “Check for Issues” and when selecting that you’ll find “Check Accessibility” http://www.microsoft.com/enable/training/office2010/default.aspx

  17. Adobe Reader Accessibility Features • There are some helpful accessibility features in the free Adobe PDF reader. For example, any PDF file open in Adobe reader can be read aloud with the "Read  Out Loud" option.  • Under the 'View' menu, select 'Read Out Loud', then 'Activate Read Outloud‘. • The Read Out Loud feature of Adobe Reader can be accessed with Keyboard Commands, as listed below. • Activate Read Out Loud:  Shift + Ctrl + Y • Read This Page Only:  Shift + Ctrl + V • Read To End of Document:  Shift + Ctrl + B • Pause/Resume:  Shift + Ctrl + C • Stop:  Shift + Ctrl + E

  18. WordPress Admin • Key Issues • Lack of design for accessibility in many key areas. • Many tasks appear not to be achievable without use of a mouse • Those areas where accessibility features are included can lack clear instructions – discoverability is so important • And remember – it’s not just about the blind…

  19. Key Area Problems • Adding and Editing Posts and Pages • Custom Menus • Widgets • Theme Customization • Logging Off

  20. Solutions • Expanded Admin Menus – http://wordpress.org/extend/plugins/expanded-admin-menus/ • Ozh Admin Drop Down Menu – http://wordpress.org/extend/plugins/osh-admin-drop-down-menu/

  21. Is WordPress Accessible? • It can be – but is it? Well – that depends upon the developer or content manager. • WordPress, with a high quality theme, should work right out of the box. However, it is up to you to choose an accessible Theme and maintain accessibility when creating your content.

  22. Things to do to make your site more accessible: • Accessibility options in browsers • Mainly Internet Explorer + Firefox • Specify colours, font styles and sizes • Adjust text size without zooming – there is a difference • Attach your own custom stylesheet (IE only) • Google Chrome is slowly starting to add more accessibility features

  23. WordPress Issues • Most WordPress themes contain some elements that compromise accessibility: • Keyboard operability, visible focus • Poor colour contrast • Page structures • Headings • Etc • Some WordPress plugins introduce markup and functionality that is not accessible: • Contact form plugins • Lightbox, gallery and carousel plugins • Social bookmarking plugins – egAddthis • Etc • The WordPress admin screens have some inaccessible features

  24. What does a non Accessible website like? • JAWS on text box with no label • JAWS on radio button with no label • JAWS on text box with label • JAWS on radio button with label • JAWS on radio button with label and fieldset/legend

  25. WordPress Solutions • Images – correct use of alternate text (alt attribute) • Describe what image shows or what it represents • Links • Ensure that destination is clear from the link: My blog post: Read more rather than My blog post: Read more • If link opens new tab or window inform the user

  26. WordPress Solutions • Use headings properly • Semantic elements • Break up content into more manageable chunks • Try to nest correctly • Often used as navigation mechanism by screen reader users • Signpost content • Keyboard focus and operation • Focus should be easily visible • Tab order should make sense • Ensure all functionality accessible by keystrokes

  27. WordPress Solutions • Text • Good colour contrast • Should allow itself to be resized without breaking layout (initially) • Use of colour alone to convey meaning • Mark up forms correctly • Use labels for input fields • Fieldset for grouping controls • Clear display of errors and use text • Don’t use CAPTCHAs

  28. WordPress Plug-Ins • When we talk about WordPress Plug-Ins you probably think of the common ones such as: • Contact Form • NexGen Gallery • Smart YouTube Pro • However, have you thought about how accessible those plug-ins may be?

  29. Accessibility Plug-Ins • Yes, there are accessibility plug-ins! • No, this doesn’t tell you what plug-ins are accessible …… • So why am I telling you this and what can it provide? • http://Wordpress.org/extend/plugins/tags/accessibility

  30. Accessible WordPress Site Examples • www.AccessSites.org • www.accessforall.eu

  31. Word Press Resources • http://codex.wordpress.org/accessibility/ • http://En.support.wordpress.com/accessibility • http://make.wordpress.org/accessibility/ • http://blog.rrwd.nl/2012/03/23/how-accessible-is-the-wordpress-cms-for-a-blind-content-manager/

  32. Web Testing Resources • Web Accessibility Toolbar: http://www.visionaustralia.org.au/ais/toolbar/ • WAVE: http://wave.webaim.org/ (This also comes as a Firefox Extension) • Funcational Accessibility Evaluator (FAE): http://fae.cita.uiuc.edu/ • HiSoftware Cynthia Says: http://www.cynthiasays.com/ • Total Validator: http://www.totalvalidator.com/ • Paciello Group WAT: http://www.paciellogroup.com/resources/index.html • Web Accessibility Inspector: http://www.fujitsu.com/global/accessibility/assistance/wi/

  33. Questions? • Please feel free to contact our office: Assistive Technology Initiative Aquia Building, Rm 238 ati@gmu.edu 703-993-4329 http://ati.gmu.edu Updated information coming soon on http://webaccessibility.gmu.edu

More Related