Recommended
Recommended
More Related Content
Similar to Access for All: Basics of Web Accessibility
Similar to Access for All: Basics of Web Accessibility (20)
More from Cindy Leonard
More from Cindy Leonard (20)
Recently uploaded
Recently uploaded (20)
Access for All: Basics of Web Accessibility
- 1. Access for All: Basics of Web Accessibility April 17, 2012 Presenters: Cindy Leonard Bayer Center for Nonprofit Management at Robert Morris University Sandi Gauder CMS Web Solutions
- 2. To access the audio portion of this webinar: 1) Dial: (866) 740-1260 2) Input access code: 3979000 Access for All: Basics of Web Accessibility
- 3. • Technology Services Manager • Bayer Center for Nonprofit Management at Robert Morris University • Enthusiastic Geek & Cat Lover • Web Developer • leonard@rmu.edu • @cindy_leonard Cindy Leonard
- 4. • Partner, CMS Web Solutions • Fan of Red Shoes & Cats (is it a geek thing?) • Web Developer • sandi@cmswebsolutions.com • @sgauder Sandi Gauder
- 5. • What is Web accessibility? • What are the various Web accessibility guidelines (and where do they come from?) • What are the benefits of having an accessible site? • Questions to ask your Web developer • Tips to improve your site right now • Additional resources • Q&A Agenda
- 15. Standard on Web Accessibility Source: www.crwflags.com/fotw/images/c/ca.gif
- 16. Accessibility for Ontarians with Disabilities Act (AODA) Integrated Accessibility Standards (Ontario) Source: http://www.crwflags.com/art/countries/canada~ontario.gif
- 17. Benefits of Having an Accessible Website Source: stritar.net/Upload/Images/BrowserIcons.jpg
- 18. Benefits of Having an Accessible Website Source: website-serve.com/wp-content/uploads/Search_Engines.png
- 19. Benefits of Having an Accessible Website HTML Web Page Word Doc Plain TextPDF
- 20. Benefits of Having an Accessible Website csszengarden.com
- 21. Benefits of Having an Accessible Website Source: zoominlocal.com/pub-files/12597620344b167172924e4/ pub/Get_connected_sup/lib/12881710424cc7ee22890c2.jpg
- 22. Benefits of Having an Accessible Website Source: img.howcast.com/images/info/mobile/howcast-on-mobile-devices.jpg
- 23. Questions to Ask Your Web Developer Do you conform to Web standards? Will it cost more to make my Website accessible? Can you explain the measures you will take to ensure our Website is accessible? Based on our community & Website goals, are there any additional accessibility or usability features you would recommend for us? Source: Tiffany Kuchta, Allegheny Graphics Web Development
- 24. Questions to Ask Your Web Developer Who will maintain the site once it has been built? If it’s your company, do your maintenance tech conform to the same accessibility standards as your developers? If it’s our organization, how do we ensure new content meets accessibility standards? Source: Tiffany Kuchta, Allegheny Graphics Web Development
- 25. Quick Tip: Use Headings Correctly Heading 1 Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Heading 2 Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Heading 3 Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Heading 3 Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Heading 2 Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Heading 3 Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Standard Header Tags <H1> through <H6> Hierarchy Information Structure Need at least an <H1> tag per page
- 26. Quick Tip: Use ALT tags on images Source: http://www.whitehouse.gov/about/presidents/georgewashington <img src=“georgewashington.png alt=“George Washington 1789 - 1797” /> <h1>George Washington</h1> <a href=“/”><img src=“nten-logo.png alt=“Home – NTEN.org” /></a> Use text when you can instead of embedding it in an image.
- 27. Quick Tip: Improve readability of text Readability Language Lists Shorter Paragraphs Narrower Columns Concise Inverted Pyramid Graphics & Images Font Size Contrast
- 28. Quick Tip: Make link text meaningful Source: http://www.reuters.com/
- 29. Quick Tip: Make link text meaningful Source: http://www.hhof.com/
- 30. Web Accessibility Standards • Web Accessibility Initiative (WAI) www.w3.org/WAI/ • Section 508 Standards (U.S. Federal Gov’t) www.section508.gov • Standard on Web Accessibility (Canada) www.tbs-sct.gc.ca/pol/doc- eng.aspx?section=text&id=23601 • Integrated Accessibility Standards (Ontario) www.e-laws.gov.on.ca/html/source/regs/ english/2011/elaws_src_regs_r11191_e.htm Additional Resources
- 31. Educational Info & Web Accessibility Training • Web Accessibility in Mind (WebAIM) www.webaim.org • Equal Access to Software and Information (EASI) www.easi.cc • Knowbility www.knowbility.org • TecAccess www.tecaccess.net Additional Resources
- 32. Online Web Accessibility Testing Tools • WAVE Tool by WebAIM wave.webaim.org • Cynthia Says by HiSoftware www.contentquality.com • Truwex Online 2.0 by Erigami checkwebsite.erigami.com/accessibility.html Additional Resources
Editor's Notes
- Welcome slide
- Give reminder about accessing audio portion of webinar
- Cindy - intro
- Sandi - intro
- CINDY Agenda What is Web accessibility? What are the various Web accessibility guidelines (and where do they come from?) What are the benefits of having an accessible site? Questions to ask your Web developer Tips to improve your site right now Additional resources Q&A
- SANDY Wiki link – this presentation and various links have been uploaded here for your convenience.
- CINDY Web accessibility means people with disabilities can use the web. The goal is to provide equal access and opportunity to get information, communicate, work and learn. If your website’s goal is to attract viewer/users (uh, everyone’s goal?) you cannot afford to ignore web accessibility. On either an ethical or financial level. Though estimates vary, most studies find that about one fifth (20%) of the population has some kind of disability. Not all of these people have disabilities that make it difficult for them to access the Internet.
- CINDY There are a number of assistive computing technology devices available, at varying degrees in cost, to assist people with disabilities in using computers and the Web. These devices are only effective, however, when websites are coded to meet Web accessibility standards, which is the biggest reason for implementing Web accessibility on a website (more on that later). People with visual disabilities might use a screen reader (or text-to-speech) piece of software or device that will literally read the page to them and allow them to interact with it. Other options include a refreshable Braille display, text-based browsers (such as Lynx) or voice browsers, which allow for some voice-based input and output that permits navigation and reading. Some people who are sighted but have poor vision may use screen magnification software or want to enlarge the text in their browser. People with hearing impairments require captions or transcripts for audio content on the Web. It is also helpful if the volume can be easily adjusted for those with partial hearing loss. People with physical or motor disabilities may use a specialized mouse or keyboard, a pointing device like a head-mouse, head-pointer or mouth-stick, voice-recognition software, or other assistive devices that meet their particular challenge. People with speech disabilities may have difficulty if using voice recognition software or web content that requires voice input. They might require the ability to input via text on a keyboard for sites using voice input. There are a number of cognitive and neurological disorders that can affect a person’s ability to use the Web. People with attention deficit disorder, dyslexia, or memory impairments, for example, need clear structure and navigation on a website, and may be helped by avoiding complex language and by adding complementary graphics. Some people might require the ability to turn off distracting audio or visual elements and some may need to be easily able to increase the font size on the page. People who are prone to seizures can be negatively affected by flashing text or other elements on a page. If someone has multiple disabilities, he or she requires a high level of flexibility in accessing content on a website. For example, if someone is both blind and deaf and wants to get content from a video, he or she may need to obtain a transcript of the audio and video content and use a refreshable Braille display to read it. People who have disabilities caused by aging may require any number of the devices or assistance already mentioned above. The assistance required is dependent on the symptoms experienced by the person.
- CINDY Important The major categories of disability types are: Visual blindness, low vision, color-blindness
- CINDY Hearing deafness and hearing impairment
- CINDY Motor inability to use a mouse, slow response time, limited fine motor control
- CINDY Cognitive learning disabilities, distractibility, inability to remember or focus on large amounts of information Each of the major categories of disabilities require certain types of adaptations in the design of the Web content. ---------------------------------- Most of the time, these adaptations benefit nearly everyone, not just people with disabilities. For example, people with cognitive disabilities benefit from illustrations and graphics, as well as from properly-organized content with headings, lists, and visual cues in the navigation. This also benefits everyone else – who doesn’t like a well-organized, easy to read website? Similarly, though captioned video content is meant to benefit people who are deaf, it can also benefit those who do not have sound on their computers, or who do not want to turn the sound on in public places such as libraries, airplanes, or computer labs. This is called Universal Design (talk about example – curb cuts) An accessible website improves the website experience for all of your users, not just those with disabilities.
- SANDI The Web Accessibility Initiative (WAI) is part of a larger group called the World Wide Web Consortium, or W3C for short. The W3C, an organization created by early founders and thinkers in the beginning stages of the Internet, has emerged as the international authority on standards and best practices surrounding websites and web development. It only makes sense that they address Web accessibility in their endeavors to realize the full potential of the Web. The WAI’s mission is to provide: “guidelines which are widely regarded as the international standard for Web accessibility support materials to help understand and implement Web accessibility resources, through international collaboration” Source: http://www.w3.org/WAI/about.html) The WAI produces a set of guidelines in a document called the “Web Content Accessibility Guidelines” or WCAG. WCAG updated in Dec. 2008 – is gold standard for web accessibility. The guidelines are organized under 4 principles: Perceivable Provide text alternatives for non-text content. Provide captions and other alternatives for multimedia. Create content that can be presented in different ways, including by assistive technologies, without losing meaning. Make it easier for users to see and hear content. Operable Make all functionality available from a keyboard. Give users enough time to read and use content. Do not use content that causes seizures. Help users navigate and find content. Understandable Make text readable and understandable. Make content appear and operate in predictable ways. Help users avoid and correct mistakes. Robust Maximize compatibility with current and future user tools.
- CINDY The other source for Web accessibility for organizations in the United States stems from the federal government’s Rehabilitation Act of 1973. This legislation “prohibits discrimination on the basis of disability in programs conducted by Federal agencies, in programs receiving Federal financial assistance, in Federal employment, and in the employment practices of Federal contractors.” (Source: http://en.wikipedia.org/wiki/Rehabilitation_Act_of_1973) One particular section of this Act provides standards for Web accessibility: Section 508. Section 508 requires that all technology and electronic information produced by Federal agencies as well as programs and organizations receiving Federal funding must be accessible to people with disabilities. Section 508 is a large document with all types of guidelines surrounding information technology and electronic information accessibility of all types, but for Web accessibility concerns we want to look at sub-section 1194.22 Web-based Intranet and Internet Information and Applications. The criteria for Web-based technology and information are based on access guidelines developed by the Web Accessibility Initiative of the World Wide Web Consortium. (Source: http://www.section508.gov/index.cfm?FuseAction=Content&ID=11) These guidelines are taken from the first version of WCAG. The 16 items on the list of Section 508 standards include things such as: Providing text equivalents for graphics, multimedia presentations and any scripted elements (like a navigation bar). Making pages readable and all info available without color and without needing an associated style sheet. Guidelines for making server-side image maps accessible (better to use client-side if you can!) Identifying headers on tables and identifying frames if used. Not causing seizures – avoiding anything flickering at a frequency greater than 2Hz and lower than 55 Hz. Providing a link to plug-ins or applets that are required to access content. Making electronic forms accessible. Permitting users to skip repetitive navigation and go straight to page content. Giving users enough time when a timed response is required. Providing a text only page if compliance cannot be accomplished in any other way.
- SANDI Standard on Web Accessibility (Canada) The Standard on Web Accessibility came into effect August 1, 2011. This standard applies to federal departments and federal agencies. The standard applies to all Web pages that: are public facing; the federal department is accountable for; and are provided through Government of Canada Web sites. The standard is being implemented in 3 phases Phase I (August 1, 2011 – February 29, 2012) All Web site home pages and pages referenced from Web site home pages. Significant number of Web pages that provide the most important information and services for individuals and businesses including rights and benefits. Significant number of Web pages that are the most frequently used. All new Web pages published post October 1, 2011 must immediately conform Phase II (March 1, 2012 – July 31, 2012) Additional Web pages that provide the most important information and services for individuals and businesses including rights and benefits. Additional Web pages that are the most frequently used. Phase III (August 1, 2012 - July 31, 2013) Remaining Web pages.
- SANDI Accessibility for Ontarians with Disabilities Act (AODA) - Integrated Accessibility Standards (Ontario) In 2005, the Government of Ontario passed the Accessibility for Ontarians with Disabilities Act, 2005 (AODA). Its goal is to make Ontario accessible by 2025. The Accessibility Standards for Customer Service was the first standard to become law as a regulation. The Integrated Accessibility Standards Regulation are being phased in between 2011 and 2025. If your organization has at least one employee, and you provide goods, services or facilities to the public or to other organizations, then you are subject to the regulation. Your requirements and timelines for compliance will vary depending on which class it falls under. See http://webaccessibilityexplained.ca/wp-content/uploads/timelines.pdf for details. 1. The Government of Ontario and the Legislative Assembly 2. Large designated public sector organizations with 50+ employees 3. Small designated public sector organizations with 1 to 49 employees 4. Large organizations with 50+ employees 5. Small organizations with 1 to 49 employees Accessible websites and web content The Government of Ontario, the Legislative Assembly, designated public sector organizations and organizations with 50 or more employees must conform with the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.0 as outlined in the Information and Communications Standard. Accessible formats and communication supports Organizations must provide or make arrangements for accessible formats and communications supports when a person with a disability requests them. The accessible formats and communication supports must be made available in a timely manner and at no additional cost other than the price charged to others who use similar information.
- CINDY Benefits of having an accessible site 1) Web content can be handled by any browser software (recall older sites “this site best viewed in…” or “optimized for…” – those days are gone!) 2) Greater visibility in search engines (which are more easily able to access and evaluate content on the site) 3) Ease of conversion to other formats, such as plain text, Word, or PDF documents 4) Ease of updating or changing a website’s content or appearance without having to “re-do” the entire site (separation of appearance and content) 5) Ability for low-bandwidth users to access content more easily (not everyone has high speed Internet! Whether someone has access to the Internet can depend greatly on financial status, geographical location as well as government policy. Low-income, rural, and minority populations have received special scrutiny as the technological "have-nots” Source: http://en.wikipedia.org/wiki/Internet_access.) 6) Better and faster access for people using mobile devices (such as PDAs or cell phones)
- CINDY Benefits of having an accessible site 1) Web content can be handled by any browser software (recall older sites “this site best viewed in…” or “optimized for…” – those days are gone!) 2) Greater visibility in search engines (which are more easily able to access and evaluate content on the site) 3) Ease of conversion to other formats, such as plain text, Word, or PDF documents 4) Ease of updating or changing a website’s content or appearance without having to “re-do” the entire site (separation of appearance and content) 5) Ability for low-bandwidth users to access content more easily (not everyone has high speed Internet! Whether someone has access to the Internet can depend greatly on financial status, geographical location as well as government policy. Low-income, rural, and minority populations have received special scrutiny as the technological "have-nots” Source: http://en.wikipedia.org/wiki/Internet_access.) 6) Better and faster access for people using mobile devices (such as PDAs or cell phones)
- CINDY Benefits of having an accessible site 1) Web content can be handled by any browser software (recall older sites “this site best viewed in…” or “optimized for…” – those days are gone!) 2) Greater visibility in search engines (which are more easily able to access and evaluate content on the site) 3) Ease of conversion to other formats, such as plain text, Word, or PDF documents 4) Ease of updating or changing a website’s content or appearance without having to “re-do” the entire site (separation of appearance and content) 5) Ability for low-bandwidth users to access content more easily (not everyone has high speed Internet! Whether someone has access to the Internet can depend greatly on financial status, geographical location as well as government policy. Low-income, rural, and minority populations have received special scrutiny as the technological "have-nots” Source: http://en.wikipedia.org/wiki/Internet_access.) 6) Better and faster access for people using mobile devices (such as PDAs or cell phones)
- CINDY Benefits of having an accessible site 1) Web content can be handled by any browser software (recall older sites “this site best viewed in…” or “optimized for…” – those days are gone!) 2) Greater visibility in search engines (which are more easily able to access and evaluate content on the site) 3) Ease of conversion to other formats, such as plain text, Word, or PDF documents 4) Ease of updating or changing a website’s content or appearance without having to “re-do” the entire site (separation of appearance and content) 5) Ability for low-bandwidth users to access content more easily (not everyone has high speed Internet! Whether someone has access to the Internet can depend greatly on financial status, geographical location as well as government policy. Low-income, rural, and minority populations have received special scrutiny as the technological "have-nots” Source: http://en.wikipedia.org/wiki/Internet_access.) 6) Better and faster access for people using mobile devices (such as PDAs or cell phones)
- Benefits of having an accessible site 1) Web content can be handled by any browser software (recall older sites “this site best viewed in…” or “optimized for…” – those days are gone!) 2) Greater visibility in search engines (which are more easily able to access and evaluate content on the site) 3) Ease of conversion to other formats, such as plain text, Word, or PDF documents 4) Ease of updating or changing a website’s content or appearance without having to “re-do” the entire site (separation of appearance and content) 5) Ability for low-bandwidth users to access content more easily (not everyone has high speed Internet! Whether someone has access to the Internet can depend greatly on financial status, geographical location as well as government policy. Low-income, rural, and minority populations have received special scrutiny as the technological "have-nots” Source: http://en.wikipedia.org/wiki/Internet_access.) 6) Better and faster access for people using mobile devices (such as PDAs or cell phones)
- CINDY Benefits of having an accessible site 1) Web content can be handled by any browser software (recall older sites “this site best viewed in…” or “optimized for…” – those days are gone!) 2) Greater visibility in search engines (which are more easily able to access and evaluate content on the site) 3) Ease of conversion to other formats, such as plain text, Word, or PDF documents 4) Ease of updating or changing a website’s content or appearance without having to “re-do” the entire site (separation of appearance and content) 5) Ability for low-bandwidth users to access content more easily (not everyone has high speed Internet! Whether someone has access to the Internet can depend greatly on financial status, geographical location as well as government policy. Low-income, rural, and minority populations have received special scrutiny as the technological "have-nots” Source: http://en.wikipedia.org/wiki/Internet_access.) 6) Better and faster access for people using mobile devices (such as PDAs or cell phones)
- SANDI Questions to ask your web developer 1) Do you conform to web standards? If not, why not? If so, can you explain what and why? 2) Does it cost more to make my website accessible? 3) Can you explain some of the measures you will take to ensure that our website is accessible? Do these measures include usability testing by real people? 4) Based on our community and website goals, are there any additional accessibility or usability features that you would recommend for us?
- SANDI Questions to ask your web developer 4) Who will maintain the website after it has been built? 5) If we will be maintaining it, how can we ensure that new content continues to meet accessibility standards? 6) If you will be maintaining it, do your maintenance technicians conform to the same accessibility standards as the developers did? How will we provide updates to you, and when will they be completed?
- CINDY Tips for improving your site right now - Use Headings Correctly For example, most graphic designers avoid using the standard heading tags in HTML (<h1>, <h2>, and so on) because they lack subtlety: in most Web browsers these tags make headlines look absurdly large (<h1>, <h2>) or ridiculously small (<h4>, <h5>, <h6>). But the header tags in HTML were not created with graphic design in mind. Their sole purpose is to designate a hierarchy of headline importance, so that both human readers and automated search engines can look at a document and easily determine its information structure. It's important to progress sequentially through the hierarchy of headings but it's not necessary to have all six on every page. For example, one page might have a main title(<h1>) and then a subtitle (<h2>) and that's it. This is perfectly acceptable. However, if the page were to jump from <h1> straight to <h3>, that would technically be incorrect. Although the page would still render perfectly fine in a browser, converting the document to other presentations could cause problems. It's best to just do it right the first time. Also, you should only have one <h1> tag per page. The <h1> tag is meant for the most important heading on the page. Having more than one most important heading wouldn't make any sense. However, once the most important heading (usually the page title) has been established, you may use as many h2-h6 tags as you find appropriate. http://mirificampress.com/permalink/the_h_hierarchy_using_heading_tags With better support for Cascading Style Sheets in recent versions of Web browsers, developers can change the appearance of structural elements to meet their design and visual preferences. Screen reader and other assistive technology users have the ability to navigate Web pages by structure. This means that the user can read or jump directly to top level elements (<h1>), next level elements (<h2>), third level elements (<h3>), and so on. Viewing or listening to this outline should give them a good idea of the contents and structure of the page. Pages should be structured in a hierarchical manner, with 1st degree headings (<h1>) being the most important (usually page titles or heading), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on. Technically, lower degree headings should be contained within headings of the next highest degree. Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings. Assistive technologies and other browsers rely upon the literal markup of the page to determine structure. Items that are bolded or display in a bigger font are not interpreted to be structural elements. Likewise, do not use headers to achieve visual results only. For instance, if you want to highlight or emphasize an element within your content that is not a heading (such as I did with the previous sentence), do not use heading tags to achieve the visual appearance you want. Instead, use font size, bold, or italics. Actually, you should use styles to achieve visual results. If you want to emphasize something, you technically should use the <strong> tag instead of <bold> and the <em> tag instead of <i>. Bold and italics (<i>) both connote visual emphasis, whereas strong and emphasis (<em>) suggest semantic emphasis. Visually, <b> and <strong>, and <em> and <i> look exactly the same, but developers should use the more proper HTML tags. In Dreamweaver, you can select Edit > Preferences > General and select Use <strong> and <em> in place of <b> and <i>.
- SANDI Tips for improving your site right now - Use ALT tags on images Alternative text is read by screen reader software and provides context or meaning to an image. There are 2 ways to effectively present alternative text: Use the alt attribute of the img element <img src=“filename.jpg” alt=”I am alt text” /> Use text surrounding the image e.g. photo caption or accompanying text. Best practices for alternative text Keep it brief Avoid repetition Limit use of “photo of …” or “graphic of …” All images MUST have an alt attribute, even if it’s left empty. alt=“” is acceptable if appropriate Images that are the only thing in a link must ALWAYS have alternative text e.g. logos that are linked to a site’s home page. If there is accompanying text, it’s better to include the image and text in the same link. Avoid using images for important text. Think of maps pointing to your street location that are customized images. An important consideration for screen magnifier users. Text scales, images don’t. More info at WebAIM: http://webaim.org/projects/screenreadersurvey2/#images
- CINDY Tips for improving your site right now - Work on readability – in terms of written text AND formatting Here are 10 readability tips to get readers to understand your message: 1. Write in the style, tone, and language of your readers — Since the 1930s, national literacy surveys have shown that the average adult in the U.S. reads at the 8th-grade level. 2. List your content in numbers or bullets. 3. Break up blocks of text into shorter paragraphs. 4. Use more narrow column lines of text – eyes don’t like to read from far left to far right of the page. 5. Be concise. So, if the same point can be made in a shorter sentence, then do that. 6. Write in an Inverted Pyramid Style, Start with the Conclusion. 7. Use illustrations, if appropriate to convey your message. Pictures are worth a thousand words! 8. Use large enough font size. 9. Ensure enough contrast between the text and it’s background. Otherwise, your readers will barely be able to see your words. http://www.cyberboomerang.com/2010/10/10-readability-tips-writing-website-content-that-your-visitors-will-read/
- SANDI Tips for improving your site right now - Make link text meaningful – avoid using “click here” or “read more”. Screen reader users often scan through the list of links on a page. If all the links say “read more”, there’s nothing to distinguish one link from another. If you need to limit the text length of links for the visual design, use CSS to style more meaningful text off-screen and still make it available to screen reader users.
- SANDI Tips for improving your site right now - Make link text meaningful – avoid using “click here” or “read more”. Screen reader users often scan through the list of links on a page. If all the links say “read more”, there’s nothing to distinguish one link from another. Instead of linking to “Click here” consider linking to “Press Release” and “Photo Gallery”.
- CINDY Read these, plus the links for anyone who’s only listening to the audio.
- CINDY
- CINDY Note that to test for Canada’s Standard on Web Accessibility and Ontario’s AODA, select WCAG 2.0. Also mention that live user review and testing is invaluable!
- BOTH