Difference between revisions of "Web Accessibility"

From AccessGA Wiki
Jump to navigation Jump to search
 
(7 intermediate revisions by 3 users not shown)
Line 15: Line 15:
 
<br/><span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">W3C Web Content Accessibility Guidelines [http://www.w3.org/TR/2006/WD-WCAG20-20060427/guidelines.html WCAG 2.0]</span></span>
 
<br/><span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">W3C Web Content Accessibility Guidelines [http://www.w3.org/TR/2006/WD-WCAG20-20060427/guidelines.html WCAG 2.0]</span></span>
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">1: Content must be '''perceivable'''.</span></span>
+
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Content must be '''perceivable'''.</span></span>
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">2: Interface components in the content must be '''operable'''.</span></span>
+
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Interface components in the content must be '''operable'''.</span></span>
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">3: Content and controls must be '''understandable'''.&nbsp;</span></span>
+
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Content and controls must be '''understandable'''.&nbsp;</span></span>
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">4: Content should be '''robust''' enough to work with current and future user agents (including assistive technologies).</span></span>
+
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Content should be '''robust''' enough to work with current and future user agents (including assistive technologies).</span></span>
  
 
= <span style="font-size:medium"><span style="font-family: tahoma,geneva,sans-serif">Techniques</span></span><br/> =
 
= <span style="font-size:medium"><span style="font-family: tahoma,geneva,sans-serif">Techniques</span></span><br/> =
Line 45: Line 45:
 
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Add an accessibility statement to your website.</span></span>
 
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Add an accessibility statement to your website.</span></span>
 
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Provide users with the means to report inaccessible content.</span></span>
 
*<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">Provide users with the means to report inaccessible content.</span></span>
 +
 +
= <span style="font-size:medium"><span style="font-family: tahoma,geneva,sans-serif">Recommendations for Automated Website Checkers</span></span><br/> =
 +
 +
Modern web hosting environments demand modern tools. An automated assessment tool is one of the key, critical components of a comprehensive approach to Section 508 compliance. It is important to note that automated testing alone cannot ensure compliance of websites or web-based content. Manual (subjective) tests and testing by&nbsp;individuals experienced with&nbsp;assistive technologies are integral&nbsp;components of the overall testing process. With this in mind, automated tools&nbsp;can quickly and efficiently provide accessibility reporting for website managers and content providers. Tools that provide suggestions for repair help take the guesswork out of&nbsp;accessibility compliance.
 +
 +
Recommended features include:
 +
 +
*Successful Voluntary Product Accessibility Template (VPAT)
 +
*Scalable, configurable web-based platform
 +
*User-friendly interface
 +
*Continuous monitoring
 +
*Craws complex structures
 +
*Single reporting of repeated issues
 +
*High quality, reliable results
 +
*Customizable reporting to standards of choice (508, WCAG 2.0, Mobile, etc.)
 +
*Suggestions for remediation
 +
*Guidance for manual testing
 +
*Bypass unchanged content
 +
*Differentiate common issues from unique ones (i.e. templates)
 +
*Ability to test:
 +
**Document Object Module (DOM) of web pages
 +
**Uploaded files, native format
 +
**Source code entered directly
 +
**Content in non-public development environments
 +
**Public-facing content
 +
**Web-based applications, user interfaces, content management systems, learning management systems
 +
**Content on multiple platforms (Mac, PC, Mobile, etc.)
 +
*Trial version prior to purchase
 +
*Vendor support and training
  
 
= <span style="font-size:medium"><span style="font-family: tahoma,geneva,sans-serif">Resources</span></span><br/> =
 
= <span style="font-size:medium"><span style="font-family: tahoma,geneva,sans-serif">Resources</span></span><br/> =
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">'''Checklists:'''</span></span>
+
== <span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">'''Checklists'''</span></span> ==
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">[http://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html Web Content Accessibility Guidelines 2.0 Checklist]</span></span>
+
[http://www.w3.org/WAI/eval/preliminary.html <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">Easy Checks - A First Review of Web Accessibility</span></span>]
 +
 
 +
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">[http://www.ncdae.org/resources/cheatsheets/accessibility.php Identifying Web Accessibility Issues from NCDAE]</span></span>
  
 
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">[http://webaim.org/standards/wcag/checklist WebAIM's WCAG 2.0 Checklist]</span></span>
 
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">[http://webaim.org/standards/wcag/checklist WebAIM's WCAG 2.0 Checklist]</span></span>
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">[http://www.ncdae.org/resources/cheatsheets/accessibility.php Identifying Web Accessibility Issues from NCDAE]</span></span>
+
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">[http://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html Web Content Accessibility Guidelines 2.0 Checklist]</span></span>
 +
 
 +
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://www.w3.org/TR/WCAG-EM/#expertise Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0]</span></span>
  
[http://www.w3.org/WAI/eval/preliminary.html <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">Easy Checks - A First Review of Web Accessibility</span></span>]
+
== <span style="font-family:tahoma,geneva,sans-serif">'''<span style="font-size: small">Guidelines and Demos</span>'''</span><br/> ==
  
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://www.w3.org/TR/WCAG-EM/#expertise Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0]</span></span><br/><br/><span style="font-family:tahoma,geneva,sans-serif">'''<span style="font-size: larger">Guidelines and Demos:</span>'''</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://webaim.org/blog/10-easy-accessibility-tips/ 10 Easy Accessibility Tips from WebAIM]</span>
  
[http://www.w3.org/WAI/ <span style="font-family:tahoma,geneva,sans-serif">W3C Web Accessibility Initiative (WAI)</span>]
+
[http://www.w3.org/WAI/tutorials/ <span style="font-family:tahoma,geneva,sans-serif">Web Accessibility Tutorials</span>]
  
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/TR/WCAG20-TECHS/ WCAG 2.0 Guidelines]</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://accessibility.oit.ncsu.edu/training/aria/landmarks-xhtml.html <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">ARIA Landmarks Tutorial</span></span>]</span>
  
 
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/WAI/demos/bad/Overview.html Improving a Web site with WCAG 2.0 Before and After Demonstration]</span>
 
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/WAI/demos/bad/Overview.html Improving a Web site with WCAG 2.0 Before and After Demonstration]</span>
  
[http://accessibility.arl.org/ <span style="font-family:tahoma,geneva,sans-serif">Web Accessibility Toolkit</span>]
+
[http://www.section508.gov/summary-section508-standards <span style="font-family:tahoma,geneva,sans-serif">Section 508 Standards</span>]
  
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/WAI/intro/aria Web Accessible Rich Internet Applications]</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://accessibility.psu.edu/section508 Section 508 Summary Requirements Penn State]</span>
  
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/Style/CSS/ <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">W3C Cascading Style Sheets</span></span>]</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://a11yproject.com The Accessibility Project]</span>
  
<span style="font-family:tahoma,geneva,sans-serif">[http://webaim.org/intro/ <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">WebAIM Introduction to Web Accessibility</span></span>]</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://www.usg.edu/siteinfo/accessibility University System of Georgia Accessibility]</span>
  
<span style="font-family:tahoma,geneva,sans-serif">[http://webaim.org/blog/10-easy-accessibility-tips/ 10 Easy Accessibility Tips from WebAIM]</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/Style/CSS/ <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">W3C Cascading Style Sheets</span></span>]</span>
  
<span style="font-family:tahoma,geneva,sans-serif">[http://www.usg.edu/siteinfo/accessibility University System of Georgia Accessibility]</span>
+
[http://www.w3.org/WAI/ <span style="font-family:tahoma,geneva,sans-serif">W3C Web Accessibility Initiative (WAI)</span>]
  
<span style="font-family:tahoma,geneva,sans-serif">[http://accessibility.psu.edu/section508 Section 508 Summary Requirements Penn State]</span>
+
[http://accessibility.arl.org/ <span style="font-family:tahoma,geneva,sans-serif">Web Accessibility Toolkit</span>]
  
<span style="font-family:tahoma,geneva,sans-serif">[http://accessibility.oit.ncsu.edu/training/aria/landmarks-xhtml.html <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">ARIA Landmarks Tutorial</span></span>]</span>
+
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/WAI/intro/aria Web Accessible Rich Internet Applications]</span>
  
[http://www.section508.gov/summary-section508-standards <span style="font-family:tahoma,geneva,sans-serif">Section 508 Standards</span>]
+
<span style="font-family:tahoma,geneva,sans-serif">[http://webaim.org/intro/ <span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">WebAIM Introduction to Web Accessibility</span></span>]</span>
 
 
[http://www.w3.org/WAI/WCAG20/quickref/#guidelines WCAG 2.0 Quick Reference List]
 
  
 +
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/TR/WCAG20-TECHS/ WCAG 2.0 Guidelines]</span>
  
 +
<span style="font-family:tahoma,geneva,sans-serif">[http://www.w3.org/WAI/WCAG20/quickref/#guidelines WCAG 2.0 Quick Reference List]</span>
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: larger">'''Publications and Blogs:'''</span></span>
+
== <span style="font-family:tahoma,geneva,sans-serif"><span style="font-size: small">'''Publications and Blogs'''</span></span> ==
  
[http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/ Accessibility Lipstick on a Usability Pig]
+
<span style="font-family:tahoma,geneva,sans-serif">[http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/ Accessibility Lipstick on a Usability Pig]</span>
  
 
<span style="font-family:tahoma,geneva,sans-serif">[http://svk-nyc.com/journal/2013/09/google-web-accessibility-is-not-just-for-blind/?goback=.gde_761737_member_273811975#! <span style="font-family:tahoma,geneva,sans-serif"><span style="font-size:small">Google- Accessibility is NOT Just for Blind</span></span>]</span>
 
<span style="font-family:tahoma,geneva,sans-serif">[http://svk-nyc.com/journal/2013/09/google-web-accessibility-is-not-just-for-blind/?goback=.gde_761737_member_273811975#! <span style="font-family:tahoma,geneva,sans-serif"><span style="font-size:small">Google- Accessibility is NOT Just for Blind</span></span>]</span>

Latest revision as of 15:41, 18 August 2015

About

Web Accessibility refers to the practice of making websites usable by people of all abilities and disabilities by incorporating accessibility standards into website design and development. Many individuals with disabilities use screen readers and other assistive technology to access the Internet and may encounter barriers to access if a website is not designed and developed with appropriate structure and adequate navigation. Incorporating the use of web accessibility guidelines with the principles of universal design and web usability best practices can maximize the user experience and ensure content is available to all users. Accessible websites improve the experience of all users.

"Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web," (W3C, Introduction to Web Accessibility).

(See also Universal Design, Assistive Technology, Section 508 Requirements)

Principles

Key groups have developed web accessibility guidelines and standards, including:

  • The U.S. Access Board, which developed the Telecommunications Act Accessibility Guidelines and Section 508 Standards
  • The World Wide Web Consortium (W3C) an international consortium, which develops protocols and guidelines to ensure the long-term growth of the Web.


W3C Web Content Accessibility Guidelines WCAG 2.0

  • Content must be perceivable.
  • Interface components in the content must be operable.
  • Content and controls must be understandable
  • Content should be robust enough to work with current and future user agents (including assistive technologies).

Techniques

Key Techniques for Web Content Accessibility

  • Provide document structure by using appropriate headings (<h1>, <h2>, <h3>).
  • Screen readers rely on document markup language for navigation.
  • Use CSS Style sheets to apply styles to your document.
  • Provide logical reading order.
  • Add appropriate alt text to all meaningful images.
  • Add appropriate alt text to charts and graphs.
  • Consider adding long description alt text when a longer description is required.
  • Provide synchronized captions for multimedia content.
  • Add the functionality to skip to the main content.
  • Add appropriate labels to forms.
  • Provide sufficient color contrast between text and background colors.
  • Do not use color as the sole means of communicating information such as required fields and error messages.
  • Explain all acronyms.
  • Use checklists for evaluation.
  • Navigate your website without a mouse, using only the keyboard.
  • Evaluate your website using a screen reader.
  • Add an accessibility statement to your website.
  • Provide users with the means to report inaccessible content.

Recommendations for Automated Website Checkers

Modern web hosting environments demand modern tools. An automated assessment tool is one of the key, critical components of a comprehensive approach to Section 508 compliance. It is important to note that automated testing alone cannot ensure compliance of websites or web-based content. Manual (subjective) tests and testing by individuals experienced with assistive technologies are integral components of the overall testing process. With this in mind, automated tools can quickly and efficiently provide accessibility reporting for website managers and content providers. Tools that provide suggestions for repair help take the guesswork out of accessibility compliance.

Recommended features include:

  • Successful Voluntary Product Accessibility Template (VPAT)
  • Scalable, configurable web-based platform
  • User-friendly interface
  • Continuous monitoring
  • Craws complex structures
  • Single reporting of repeated issues
  • High quality, reliable results
  • Customizable reporting to standards of choice (508, WCAG 2.0, Mobile, etc.)
  • Suggestions for remediation
  • Guidance for manual testing
  • Bypass unchanged content
  • Differentiate common issues from unique ones (i.e. templates)
  • Ability to test:
    • Document Object Module (DOM) of web pages
    • Uploaded files, native format
    • Source code entered directly
    • Content in non-public development environments
    • Public-facing content
    • Web-based applications, user interfaces, content management systems, learning management systems
    • Content on multiple platforms (Mac, PC, Mobile, etc.)
  • Trial version prior to purchase
  • Vendor support and training

Resources

Checklists

Easy Checks - A First Review of Web Accessibility

Identifying Web Accessibility Issues from NCDAE

WebAIM's WCAG 2.0 Checklist

Web Content Accessibility Guidelines 2.0 Checklist

Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0

Guidelines and Demos

10 Easy Accessibility Tips from WebAIM

Web Accessibility Tutorials

ARIA Landmarks Tutorial

Improving a Web site with WCAG 2.0 Before and After Demonstration

Section 508 Standards

Section 508 Summary Requirements Penn State

The Accessibility Project

University System of Georgia Accessibility

W3C Cascading Style Sheets

W3C Web Accessibility Initiative (WAI)

Web Accessibility Toolkit

Web Accessible Rich Internet Applications

WebAIM Introduction to Web Accessibility

WCAG 2.0 Guidelines

WCAG 2.0 Quick Reference List

Publications and Blogs

Accessibility Lipstick on a Usability Pig

Google- Accessibility is NOT Just for Blind

Recommendations

Recommendations and suggestions from the AccessIT Community