Your SlideShare is downloading. ×
0
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Basics of Website Accessibility
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Basics of Website Accessibility

1,090

Published on

Breakout Session from the 2013 Nonprofit Technology Conference (NTC)

Breakout Session from the 2013 Nonprofit Technology Conference (NTC)

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,090
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Agenda here…What is website accessibility?Assistive computing technologyWeb accessibility standardsBenefits of having an accessible websiteQuestions for your web developerQuick tips for your org’s website
  • 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 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.
  • 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.
  • ImportantThe major categories of disability types are:Visual blindness, low vision, color-blindness
  • Hearing deafness and hearing impairment
  • Motor inability to use a mouse, slow response time, limited fine motor control
  • Cognitive learning disabilities, distractibility, inability to remember or focus on large amounts of informationEach 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.
  • 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:PerceivableProvide 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.OperableMake 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. UnderstandableMake text readable and understandable. Make content appear and operate in predictable ways.Help users avoid and correct mistakes. RobustMaximize compatibility with current and future user tools.
  • 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.
  • Benefits of having an accessible site1) 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 documents4) 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 site1) 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 documents4) 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 site1) 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 documents4) 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 site1) 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 documents4) 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 site1) 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 documents4) 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)
  • Questions to ask your web developer1) 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?
  • Questions to ask your web developer4) 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?
  • Tips for improving your site right now - Use ALT tags on imagesAlternative 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 imgelement <imgsrc=“filename.jpg” alt=”I am alt text” />Use text surrounding the image e.g. photo caption or accompanying text.Best practices for alternative textKeep it briefAvoid repetitionLimit use of “photo of …” or “graphic of …” All images MUST have an alt attribute, even if it’s left empty. alt=“” is acceptable if appropriateImages 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
  • Tips for improving your site right now - Work on readability – in terms of written text AND formattingHere 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/
  • 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.
  • 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”.
  • Transcript

    • 1. Access for All:Basics of WebsiteAccessibility for Leaders#13NTCwalCindy Leonard@cindy_leonardleonard@rmu.eduBayer Center for Nonprofit Managementat Robert Morris University
    • 2. Session Agenda• What is website accessibility?• Assistive computing technology• Web accessibility standards• Benefits of having an accessible website• Questions for your web developer• Quick tips for your org’s website Access for All: Basics of Website Accessibility for Leaders Slide 1
    • 3. What is Web Accessibility?Image source: Hityourmarketi.com Access for All: Basics of Website Accessibility for Leaders Slide 2
    • 4. Image source: dom-iris.si/images/prilagoditve-komunikacija1_en.gif Access for All: Basics of Website Accessibility for Leaders Slide 3
    • 5. Image source: www.communities-ontheweb.com/images/BrailleReader.jpg Access for All: Basics of Website Accessibility for Leaders Slide 4
    • 6. Image source: 2.bp.blogspot.com/_fSq2BTxHxIY/TBbYXl4L9zI/AAAAAAAAAG4/E691lD5v14I/s1600/shapiro1.jpg Access for All: Basics of Website Accessibility for Leaders Slide 5
    • 7. Image source: www.abilityconnectiontexas.org/images/AT_RLTT_002.jpg Access for All: Basics of Website Accessibility for Leaders Slide 6
    • 8. Image source: www.scn.org/star/techphotos/intelikeys2.jpg Access for All: Basics of Website Accessibility for Leaders Slide 7
    • 9. WCAG 2.0 Image source: www.w3.org/WAI/ Access for All: Basics of Website Accessibility for Leaders Slide 8
    • 10. Section 508 Image source: www.extron.com/product/img/section508_logo3.gif Access for All: Basics of Website Accessibility for Leaders Slide 9
    • 11. Benefits of Having an Accessible Website Image source: stritar.net/Upload/Images/BrowserIcons.jpg Access for All: Basics of Website Accessibility for Leaders Slide 10
    • 12. Benefits of Having an Accessible Website Image source: website-serve.com/wp-content/uploads/Search_Engines.png Access for All: Basics of Website Accessibility for Leaders Slide 11
    • 13. Benefits of Having an Accessible Websitecsszengarden.com Access for All: Basics of Website Accessibility for Leaders Slide 12
    • 14. Benefits of Having an Accessible Website Image source: zoominlocal.com/pub-files/12597620344b1671729 24e4/pub/Get_connected_sup/lib/12881710424cc7ee22890c2.jpg Access for All: Basics of Website Accessibility for Leaders Slide 13
    • 15. Benefits of Having an Accessible Website Image source: img.howcast.com/images/info/mobile/howcast-on-mobile-devices.jpg Access for All: Basics of Website Accessibility for Leaders Slide 14
    • 16. Questions to Ask Your Web Developer Do you conform to Web Will it cost more to make my standards? Website accessible?Based on our Can you explain thecommunity & Website measures you willgoals, are there any take to ensure ouradditional accessibility Website isor usability features accessible?you would recommendfor us? Source: Tiffany Kuchta, Allegheny Graphics Web Development Access for All: Basics of Website Accessibility for Leaders Slide 15
    • 17. 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 theIf it’s our organization, same accessibilityhow do we ensure standards as yournew content meets developers?accessibilitystandards? Source: Tiffany Kuchta, Allegheny Graphics Web Development Access for All: Basics of Website Accessibility for Leaders Slide 16
    • 18. Quick Tip: Use ALT tags on images <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. Image source: http://www.whitehouse.gov/about/presidents/georgewashington Access for All: Basics of Website Accessibility for Leaders Slide 17
    • 19. Quick Tip: Improve readability of text Language Contrast Lists Shorter Font Size Paragraphs Readability Graphics & Narrower Images Columns Inverted Concise Pyramid Access for All: Basics of Website Accessibility for Leaders Slide 18
    • 20. Quick Tip: Make link text meaningful Image source : http://www.reuters.com/ Access for All: Basics of Website Accessibility for Leaders Slide 19
    • 21. Quick Tip: Make link text meaningful Image source: http://www.hhof.com/ Access for All: Basics of Website Accessibility for Leaders Slide 20
    • 22. Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad! or Online using #13NTCwal at www.nten.org/ntc/eval

    ×