Presentation is loading. Please wait.

Presentation is loading. Please wait.

Company LOGO Looking specifically at WordPress Web Accessibility.

Similar presentations


Presentation on theme: "Company LOGO Looking specifically at WordPress Web Accessibility."— Presentation transcript:

1

2 Company LOGO Looking specifically at WordPress Web Accessibility

3 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

4 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

5 Why “Accessibility” is the new topic of discussion …..  Cliché, but correct answer: Because it’s the law!!  ADA/Section 508 ADASection 508  Helps Mason comply with Federal, State, and Local government standards (i.e., Penn State, Arizona State, Google Apps for Education)Penn StateArizona StateGoogle 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.DOJ under ADA created a settlement agreement with Fairfax County, VA  Other reasons:  Reaches a wider audience (i.e., captioning,  Search engines optimization favors accessible websites  non-traditional users, ESL)  Mobile phone access

6 LawApplies toMandates Section 504Federal, State and Local government, Educational agencies, Companies (Corporate – Private), any facility receiving Federal fundsState No otherwise qualified individual with a disability shall, solely by reason of his/ her disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity of a public entity. Section 508Federal entities and States that have adopted similar regulations Requires that any electronic and information technology (EIT) procured, developed, used or maintained by Federal agencies must be accessible to employees and members of the public with disabilities, unless an undue burden would be imposed on the agency. Section 508 was enacted to: 1) eliminate barriers in information technology, 2) make available new opportunities for people with disabilities, and 3) encourage development of technologies that will help achieve these goals. Rehabilitation Act

7 LawApplies toMandates Americans with Disabilities Act (ADA) Unlike section 504 of the Rehabilitation Act of 1973, which only covers programs receiving Federal financial assistance, title II extends to all the activities of State and local governments whether or not they receive Federal funds. May not refuse to allow a person with a disability to participate in a service, program, or activity simply because the person has a disability. Must provide programs and services in an integrated setting, unless separate or different measures are necessary to ensure equal opportunity. Virginia Information Technology Accessibility Standard (GOV 103-00) All Commonwealth of Virginia Executive Branch agencies and institutions of higher learning. Outlines the minimum accessibility requirements for procurement, development, or maintenance of electronic and information technology systems. The Standard also requires that Commonwealth of Virginia (COV) employees with disabilities and members of the public with disabilities have access to and use of information and data comparable to the access and use of Commonwealth employees and the public who do not have disabilities. ADA/VITA

8 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, 3 rd Party Services  Website Content  For example: Documents, Videos, etc.  Online and Desktop Applications  Library Databases  What role can you play to help increase accessibility?

9 Web Accessibility

10 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.

11 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

12 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

13 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 ** https://www.ssbbartgroup.com/amp/index.phpati@gmu.edu NetCentric – CommonLook Office – http://www.commonlook.com/CommonLook-office http://www.commonlook.com/CommonLook-office Free Single Page DeQue – WorldSpace, Ramp and UnDoc - http://wsspg.dequecloud.com/worldspace/wsservice/eval/checkComplianc e.jsp http://wsspg.dequecloud.com/worldspace/wsservice/eval/checkComplianc e.jsp Illinois Accessible Web Publishing Wizard for Microsoft Office - http://www.virtual508.com/ http://www.virtual508.com/ Adobe Professional v. 9.0 or higher -http://www.adobe.com/accessibility/http://www.adobe.com/accessibility/ CourseAvenue - http://www.courseavenue.com/default.aspxhttp://www.courseavenue.com/default.aspx

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

15 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.

16  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 Document Accessibility Document Accessibility

17  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 Microsoft Built-In Accessibility Checker

18  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 Adobe Reader Accessibility Features

19

20 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…

21 Key Area Problems  Adding and Editing Posts and Pages  Custom Menus  Widgets  Theme Customization  Logging Off

22 Solutions  Expanded Admin Menus – http://wordpress.org/extend/plugins/expan ded-admin-menus/ http://wordpress.org/extend/plugins/expan ded-admin-menus/  Ozh Admin Drop Down Menu – http://wordpress.org/extend/plugins/osh- admin-drop-down-menu/ http://wordpress.org/extend/plugins/osh- admin-drop-down-menu/

23 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.

24 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

25 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 – eg Addthis  Etc  The WordPress admin screens have some inaccessible features

26 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

27 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

28 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

29 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

30 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?

31 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/a ccessibility http://Wordpress.org/extend/plugins/tags/a ccessibility

32 Accessible WordPress Site Examples  www.AccessSites.org www.AccessSites.org  www.accessforall.eu www.accessforall.eu

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

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

35 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 http://webaccessibility.gmu.edu


Download ppt "Company LOGO Looking specifically at WordPress Web Accessibility."

Similar presentations


Ads by Google