Company LOGO Looking specifically at WordPress Web Accessibility
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
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
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
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
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
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?
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.
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
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
Web Accessibility Resources SSBBartGroup – Accessibility Management Platform - https://www.ssbbartgroup.com/amp/index.php **Contact our office to have your pages tested for accessibility – firstname.lastname@example.org ** https://email@example.com 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
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.
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
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
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
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…
Key Area Problems Adding and Editing Posts and Pages Custom Menus Widgets Theme Customization Logging Off
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/
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.
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
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
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
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
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
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
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?
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
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/
Questions? Please feel free to contact our office: Assistive Technology Initiative Aquia Building, Rm 238 firstname.lastname@example.org 703-993-4329 http://ati.gmu.edu Updated information coming soon on http://webaccessibility.gmu.edu http://webaccessibility.gmu.edu