Learn why 508 accessibility is important for all and how, as government contractors, we can aid in fulfilling the need to provide proper 508 compliance to not only meet the requirements of the law, but also the intent.
8. Why be accessible?
0 Social responsibility
0 Usability
0 SEO
0 It’s the law
“The future is already here – it’s just not
evenly distributed.”
-William Gibso
Photo: www.flickr.com/photos/5c2v/6973783611/lightbox - Clement G
11. What does Section 508 cover?
0 Software
0 Internet/Intranets
0 Electronic documents
0 Telephones and conferencing
0 Video and multimedia
0 Proprietary products
0 Computers and electronic devicesS
12. Web Content Accessibility Guidelines
0 WCAG Guidelines provide the basic goals that authors
should work toward in order to make content more
accessible to users with different disabilities.
0 Principles (POUR)
0 Perceivable
0 Operable
0 Understandable
0 Robust
13. Accessibility &
the Web Examples
0 Accessibility Introduction to Screen Readers
0 Good and Bad Screen Reading on
Amazon.co.uk
0 Inaccessible form
0 Tutorial about Mobility and Cognition
0 Easy YouTube
0 Keyboard Browsing
0 Keyboard Focus - Pinterest vs. CDC.gov
0 Colorblindness – Google Analytics or Trivial
Pursuit
Photo: www.flickr.com/photos/cstmweb/3531254499/ - cstmweb
14. What is the contractor role?
As vendors/contractors, we:
0 Support programs that develop material and ensure
all contractual obligations for 508 are met
0 Test and validate deliverables for 508 compliance
using manual and automated tools against
0 Accessibility Checklists
0 Federal technical specifications
0 Fix (a.k.a. remediate) 508 compliance issues
15. Additional Roles
Contractors can also be the content authors and/or
support clients who develop content. This role
entails:
0 Finalizing source files
0 Supporting clearance of source material
0 Mark-up source documents to provide:
0 Alternative text for graphics and photos
0 Stylized headers, paragraphs, bullets and text
0 Summary text for data tables (data points), charts and graphs
0 Ensure compliance of digital media - like captioning and
transcripts
16. Additional Roles
(cont.)
In addition, we employ many specialists who:
0 Work with clients to determine when/if a 508
compliant PDF is required instead of the preferred
HTML publishing
0 Convert finalized and cleared content
0 Test and identify compliance issues
0 Remediate 508 compliance issues
17. “The power of the Web is in the universality. Access by
everyone regardless of disability is an essential aspect.”
-Tim Berners-Lee
Photo: /www.flickr.com/photos/blackbeltjones/7939628028 - moleitau
18. Web Content should/will be:
0 Designed for accessibility
0 Checked with automated accessibility tools
0 Manually tested for accessibility
19. Designing for Accessibility
0 Linear access or logical order
0 Clearly labeled links
0 Formatted headings
0 Paragraphs and elements
0 Use alt text appropriately for images, charts and graphics
0 Tables used only for presentation of data with headers
identified
0 Appropriate use of color and contrast
20. HTML Content Considerations
0 Separate content from presentation
0 Online forms
0 Image maps
0 Keyboard access
0 Skip navigation
0 Font size is under user control
0 Download link for viewers, players, and plug-ins
0 Video/Audio/Multimedia presentations
0 Page titles and bread crumbs
0 Flash objects and other applets
21. Testing & Remediation
Automated tools
0 Check often for alt text, document structure, table headings,
language specification, specific code
Manual Checks
0 Check content issues
0 Functionality without special programming
0 Literal guideline interpretation isn’t misunderstood
0 Compliance with the latest guidelines
22. Resources
0 Checklists
0 HHS Checklist - http://www.hhs.gov/web/508/checklists/index.html
0 Word to PDF Checklist -
http://blogs.adobe.com/accessibility/files/accessibility/assets/WordToPDFReferenceCard_v1.pdf
0 Converting Microsoft files to tagged PDFs - http://office.microsoft.com/en-us/word-help/createaccessible-pdfs-HA102478227.aspx
0 Articles
0 SEO alignment article - http://webaim.org/blog/web-accessibility-and-seo/
0 Usability/Accessibility Comparative - http://accessites.org/site/2007/09/a-comparative-
accessibility-and-usability/
0 Accessibility is SEO - http://www.alistapart.com/articles/accessibilityseo/
0 Usability, Accessibility, Web Standards and SEO - http://www.joomlashack.com/tutorials/159usability-accessibility-web-standards-and-seo
0 Other Resources
0
0
0
0
Colorblindness tester - http://enchroma.com/test/instructions/
WebAim – http://www.WebAIM.org
Web accessibility tutorial for developers - http://jimthatcher.com/webcourse1.htm
List of Assistive Technologies - http://www.usabilityfirst.com/about-usability/accessibility/types-ofaccessibility-aids/
0 Word Style Sheet Tutorial - http://office.microsoft.com/en-us/word-help/format-your-documentwith-styles-RZ001103924.aspx
24. Thank you
For more information, contact:
Jennifer Smith
Senior Web and Accessibility Strategist
Danya, International – Atlanta Office
jsmith@danya.com
Notas do Editor
Some of you may have been to accessibility training before and while technical execution is important and I will go over some, it is JUST as important to understand the who and why and address misconceptions.
That’s 19% of the US population and 12.6% … 38.3 million had a severe disability. Source: U.S. Census Bureau 2010 Data “Americans with Disabilities: 2010” Released in July, 2012.
8.2% of people in the US
4.8% of people in the US
3.3% of the US population - 2 million are blind
3.1% of the US population. This means they are deaf or have serious difficulty hearing.
These individual disabilities are also not limited to one status per person – some may suffer from multiple disabilities.Overall 1 in 5 Americans have a disability. Right now, that 1 in 5 might be a - distant aunt - an old high school classmate that is now a disabled veteran - your grandparentbut someday that 1 in 5 might be you – and at that time, you won’t want your independence or ability to complete a task online to hinge on whether or not a CEO or even a web designer thinks accessibility is “worth it.” Creative Commons photo: http://commons.wikimedia.org/wiki/File:Waka_waka.jpg - Ricardo bob 8
Social responsibility – Improves the quality of life for people with disabilities or impairments. Imagine if you had to ask for help in reading/viewing even the simplest content or filling out a form because it wasn’t accessible. Accessibility goes hand in hand with universal web standards and usability practices, not only in the US, but throughout the world. The cleaner, well thought out code also helps sites load faster, makes maintenance easier and generates a better overall user experience for everyone. Search engines can better index your content (like links, images, body content) for better search results when you’ve done things like properly tagging images, adding alt text to images and identifying headings, sub-heads, data table columns, headers and content.Because reading is fundamental for staying informed in today’s information-rich world, accessible documentation is truly an important step in promoting independence for individuals with disabilities. Accessible documents provide access to fundamental government services and information such as tax forms, social programs, and legislative representatives. They are also an additional means of communication, which makes possible a broader range of employment and educational opportunities.In addition, accessibility allows users with disabilities to participate in day-to-day activities that many take for granted.Photo credit: http://www.flickr.com/photos/5c2v/6973783611/lightbox - Clement G
What it isn’t: Ugly – Check out Apple.com, Whitehouse.gov, WebAim.org, BBC.co.uk
People working at and for the U.S. Federal government use Section 508 requirements determine accessibility. Section 508 requires electronic and information technology developed by or purchased for Federal Agencies be accessible by people with disabilities. There is a lot of jargon around 508, but it is reduced to 16 checkpoints. http://www.wordle.net/delete?index=6109402&d=WCYM Section 508:100; Accessibility:99; Screen Readers:95; Assistive Technology:91; Compliance:90; Disability:82; Hearing Impaired:81; Colorblind:78; WebAIM:83; Access:98; Universal Design:89; WCAG:84; Software:85; Remediation:77; Captions:76; JAWS:86; Alt Text:97; Page Titles:75; Headings:73; Logical Order:93; Link Text:87; Table Header:74; Meta data:79; Skip Navigation:96; Plug-ins:80; Transcript:94; Structure:88; Style Sheets:92
For web developers, we also use WCAG, currently in version 2.0, developed by the W3C (World Wide Web Consortium). These are more global standards outside the US Federal Government and will be directly referred to by the Section 508 refresh slated for sometime in 2014. Standards like 508 and WCAG do make developing accessible sites easier by clarifying functional requirements. There is a lot of overlap between Section 508 and WCAG, with only 4 or 5 differences in each.
So now that we know a bit more about who and what, here are some examples of assistive technologies and how they are used along with a couple of examples of sites developed with and without accessibility in mind. Starting with the most referenced: - Screen Readers (Intro - http://www.youtube.com/watch?v=bkRD6J0UhWY and ‘Good and Bad’ http://www.youtube.com/watch?v=2ZkVd8GeYTk – illustrate skip link option in this video) - Inaccessible form (https://www.youtube.com/watch?v=HOmIkBL1ITY) - Keyboard Browsing (http://www.youtube.com/watch?v=kOFAubwMkeo&list=UUCXhNabvw86SnYho-rWdLMA&index=5) followed by example of (http://pinterest.com/ vs. CDC.gov)- Mobility and Cognition – call out timing issue on rotating images and correlation between form field sizes for accessible web and good usability on small devices (http://www.youtube.com/watch?v=Obau6_BU-Ro) and http://icant.co.uk/easy-youtube/Many of these videos illustrate bad examples. Here’s another illustration of bad accessibility for people who are colorblind: http://wearecolorblind.com/example/google-analytics/ or http://wearecolorblind.com/example/trivial-pursuit/ Photo Credit: http://www.flickr.com/photos/cstmweb/3531254499/ - cstmweb
So what are we supposed to do about all of this…where do we fit in?
But wait…there’s more!
Finally…
Accessibility can also be the bridge that helps improve overall usability for all. In addition, many accessibility improvements to a site, for example structured content and ALT tags, help with SEO.Take a moment now to think of any experiences you have seen/heard of that involve accessibility. Even think about a time when YOU may have been temporarily disabled or unable to function the way you normally do because of an injury or a technical malfunction. Remember how frustrating it was or how powerless you felt when something you rely on for information or support was unavailable to you.Photo credit: http://www.flickr.com/photos/blackbeltjones/7939628028 - moleitau
Any content for the web, whether HTML or documents like Word or PDF files - needs to be structured and designed with the following. Developing content in this manner helps when converting documents to PDFs or for the developer to then code/develop HTML to display your content. For example: - Instructions for filling out a form below the form isn’t linear. Text boxes present information out of linear format. This is also the case if columns are manually set up outside the software’s column tool. - “Click here” links or misleading link text complicate navigation – again, not just for disabled users, but for all. - Balanced use of proper heading structure, like an outline with a clear hierarchy. - Reduce use of large blocks of text – wall of text overwhelming to cognitively disabled. Not to mention, it won’t be read or as easily scanned be users in a hurry. - Accurately describe the image in the alt text. This more difficult task for charts/graphs is often left to the subject matter expert so as not to misinterpret the data. - Associate column and row headers of tables – this helps the assistive technology create logical relationships within the table. - Don’t use color to convey meaning – for some types of colorblindness, saying the ‘red box’ the ‘green text.’ For contrast, people with low vision would have problems reading white text on a light blue background.
- For developers, this means that you can turn off style sheets and the content is still readable. CSS Zen Garden is an excellent example- Make sure form fields are labeled------------------- Skip navigation – imagine if you couldn’t scan the page with your eyes to go straight to the content and had to read the entire header and navigation layout for each web page.- Video/audio content must have Synchronized captions, a transcript and the player(s) must be accessible.- Page titles and bread crumbs act as the “You Are Here” sticker on a map. It helps everyone know where they are within the site and can help them navigate within the hierarchy of the site.- Flash, must - Accessible controls - Tabbable - Contents are well described - No timed issues - No flickering - Design addresses mobility issues - Design avoids trapped focus
Automated tools apply guidelines very literally. It might check to ensure there is alt text applied to an image but cannot check to ensure the description is correct. An image of a dog could be labeled “A kitty” and it would pass the automated checker. They help guide and provide a baseline of items to check for when testing and reviewing for accessibility.Manual checks coupled with automated checks ensure better compliance – more true to the intent of the guidelines.
So I hope what you take away from this:Accessibility is not just for blind peopleIt doesn’t mean your site/content has to be ugly and it isn’t an undue burden. Know that there are free accessibility tutorials and Danya International can serve as knowledgeable practitioners to apply, test, and remediate digital products for Section 508 accessibility.
Remember – accessibility is about people. Put aside your pre-conceived notions about disability and remember that someday YOU or someone close to you might be the person benefitting from your work.Photo Credit: http://www.flickr.com/photos/statefarm/7420389728 - State Farm