Difference between revisions of "Web Accessibility"

From AccessGA Wiki
Jump to navigation Jump to search
Line 1: Line 1:
 
= <span style="font-family:tahoma,geneva,sans-serif">About</span><br/> =
 
= <span style="font-family:tahoma,geneva,sans-serif">About</span><br/> =
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">'''Web Accessibility''' refers to the inclusive practice of making websites usable by people of all abilities and disabilities by incorporating accessibility standards into website design and development. Individuals with disabilities may encounter barriers to access if a website is not designed and developed with accessibility in mind. 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.</span><br/><br/><span style="font-family: tahoma,geneva,sans-serif">"Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web," [http://www.w3.org/WAI/intro/accessibility.php (W3C, Introduction to Web Accessibility]). Accessible websites improve the experience of all users.</span></span><br/><br/><span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">(See also [[Universal Design|Universal Design]], [[Assistive Technology|Assistive Technology]], Section 508 Requirements)</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">'''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</span></span><span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">may encounter barriers to access if a website is not designed and developed with the proper structure.</span></span><span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">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.</span><br/><br/><span style="font-family: tahoma,geneva,sans-serif">"Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web," [http://www.w3.org/WAI/intro/accessibility.php (W3C, Introduction to Web Accessibility]). Accessible websites improve the experience of all users.</span><br/><br/><span style="font-family: tahoma,geneva,sans-serif">(See also [[Universal Design|Universal Design]], [[Assistive Technology|Assistive Technology]], Section 508 Requirements)</span></span>
  
 
= <span style="font-family:tahoma,geneva,sans-serif">Principles</span><br/> =
 
= <span style="font-family:tahoma,geneva,sans-serif">Principles</span><br/> =
  
<span style="font-family:tahoma,geneva,sans-serif"><span style="font-size:larger">Key groups have developed web accessibility guidelines and standards including the US Access Board, which developed the Telecommunications Act Accessibility Guidelines and Section 508 Standards, and the World Wide Web Consortium, W3C, an international consortium which develops protocols and guidelines that ensure the long-term growth of the Web.</span></span><br/><br/><span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">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:arial,helvetica,sans-serif"><span style="font-size: small">Key groups have developed web accessibility guidelines and standards including the US Access Board, which developed the Telecommunications Act Accessibility Guidelines and Section 508 Standards, and the World Wide Web Consortium, W3C, an international consortium which develops protocols and guidelines that ensure the long-term growth of the Web.<br/><br/>W3C Web Content Accessibility Guidelines ([http://www.w3.org/TR/2006/WD-WCAG20-20060427/guidelines.html WCAG) 2.0]</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">1: Content must be '''perceivable'''.</span></span>
+
<span style="font-family:arial,helvetica,sans-serif"><span style="font-size: small">1: Content must be '''perceivable'''.</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">2: Interface components in the content must be '''operable'''.</span></span>
+
<span style="font-family:arial,helvetica,sans-serif"><span style="font-size: small">2: Interface components in the content must be '''operable'''.</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">3: Content and controls must be '''understandable'''.&nbsp;</span></span>
+
<span style="font-family:arial,helvetica,sans-serif"><span style="font-size: small">3: Content and controls must be '''understandable'''.&nbsp;</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">4: Content should be '''robust''' enough to work with current and future user agents (including assistive technologies)</span></span>
+
<span style="font-family:arial,helvetica,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>
  
<br/>[http://www.w3.org/WAI/WCAG20/quickref/#guidelines <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">WCAG 2.0 Quick Reference List</span></span>]
+
<br/><span style="font-family:arial,helvetica,sans-serif"><span style="font-size: small">[http://www.w3.org/WAI/WCAG20/quickref/#guidelines <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">WCAG 2.0 Quick Reference List</span></span>]</span></span>
  
[http://www.section508.gov/index.cfm?fuseAction=stdsSum <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Section 508 Standards</span></span>]
+
<span style="font-family:arial,helvetica,sans-serif"><span style="font-size: small">[http://www.section508.gov/index.cfm?fuseAction=stdsSum <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Section 508 Standards</span></span>]</span></span>
  
 
= <span style="font-family:tahoma,geneva,sans-serif">Techniques</span><br/> =
 
= <span style="font-family:tahoma,geneva,sans-serif">Techniques</span><br/> =
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Key Techniques for Web Content Accessibility</span></span>
+
<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Key Techniques for Web Content Accessibility</span></span>
  
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Provide document structure by using appropriate headings (&lt;H1&gt;, &lt;H2&gt;, &lt;H3&gt;). Screen readers rely on document markup language for navigation.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Provide document structure by using appropriate headings (&lt;H1&gt;, &lt;H2&gt;, &lt;H3&gt;). Screen readers rely on document markup language for navigation.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Use CSS Style sheets to apply styles to your document.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Use CSS Style sheets to apply styles to your document.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Provide logical reading order.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Provide logical reading order.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Add appropriate alt text to all meaningful images.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Add appropriate alt text to all meaningful images.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Add appropriate alt text to charts and graphs.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Add appropriate alt text to charts and graphs.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Consider adding long description alt text when a longer description is required.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Consider adding long description alt text when a longer description is required.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Add the functionality to skip to the main content.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Add the functionality to skip to the main content.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Add appropriate labels to forms.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Add appropriate labels to forms.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Provide sufficient color contrast between text and background colors.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Provide sufficient color contrast between text and background colors.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Do not use color as the sole means of communicating information such as required fields and error messages.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Do not use color as the sole means of communicating information such as required fields and error messages.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Explain all acronyms.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Explain all acronyms.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Use checklists for evaluation.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Use checklists for evaluation.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Navigate your website without a mouse, using only the keyboard.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Navigate your website without a mouse, using only the keyboard.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Evaluate your website using a screen reader.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Evaluate your website using a screen reader.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Add an accessibility statement to your website.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Add an accessibility statement to your website.</span></span>
*<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Provide users with the means to report inaccessible content.</span></span>
+
*<span style="font-size:small"><span style="font-family: arial,helvetica,sans-serif">Provide users with the means to report inaccessible content.</span></span>
  
= <br/>Resources<br/> =
+
= Resources<br/> =
  
'''<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Checklists:</span></span>'''
+
<span style="font-size:small">'''<span style="font-family: tahoma,geneva,sans-serif">Checklists:</span>'''</span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[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/2006/WD-WCAG20-20060427/appendixB.html Web Content Accessibility Guidelines 2.0 Checklist]</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://webaim.org/standards/wcag/checklist WebAIM's WCAG 2.0 Checklist]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://webaim.org/standards/wcag/checklist WebAIM's WCAG 2.0 Checklist]</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://www.ncdae.org/resources/cheatsheets/accessibility.php Identifying Web Accessibility Issues from NCDAE]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://www.ncdae.org/resources/cheatsheets/accessibility.php Identifying Web Accessibility Issues from NCDAE]</span></span>
  
 
<br/><br/>'''<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Guidelines and Demos:</span></span>'''
 
<br/><br/>'''<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Guidelines and Demos:</span></span>'''
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://www.w3.org/TR/WCAG20-TECHS/ WCAG 2.0 Guidelines]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://www.w3.org/TR/WCAG20-TECHS/ WCAG 2.0 Guidelines]</span></span>
  
<span style="font-size:larger"><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>
+
<span style="font-size:small"><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>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://www.w3.org/WAI/intro/aria Web Accessible Rich Internet Applications]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://www.w3.org/WAI/intro/aria Web Accessible Rich Internet Applications]</span></span>
  
[http://www.w3.org/Style/CSS/ <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">W3C Cascading Style Sheets</span></span>]
+
<span style="font-size:small">[http://www.w3.org/Style/CSS/ <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">W3C Cascading Style Sheets</span></span>]</span>
  
[http://webaim.org/intro/ <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">WebAIM Introduction to Web Accessibility</span></span>]
+
<span style="font-size:small">[http://webaim.org/intro/ <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">WebAIM Introduction to Web Accessibility</span></span>]</span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://webaim.org/blog/10-easy-accessibility-tips/ 10 Easy Accessibility Tips from WebAIM]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://webaim.org/blog/10-easy-accessibility-tips/ 10 Easy Accessibility Tips from WebAIM]</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://www.usg.edu/siteinfo/accessibility University System of Georgia Accessibility]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://www.usg.edu/siteinfo/accessibility University System of Georgia Accessibility]</span></span>
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">[http://accessibility.psu.edu/section508 Section 508 Summary Requirements Penn State]</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">[http://accessibility.psu.edu/section508 Section 508 Summary Requirements Penn State]</span></span>
  
[http://accessibility.oit.ncsu.edu/training/aria/landmarks-xhtml.html <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">ARIA Landmarks Tutorial</span></span>]
+
<span style="font-size:small">[http://accessibility.oit.ncsu.edu/training/aria/landmarks-xhtml.html <span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">ARIA Landmarks Tutorial</span></span>]</span>
  
  
Line 80: Line 80:
 
= Recommendations<br/> =
 
= Recommendations<br/> =
  
<span style="font-size:larger"><span style="font-family: tahoma,geneva,sans-serif">Recommendations and suggestions from the AccessIT Community</span></span>
+
<span style="font-size:small"><span style="font-family: tahoma,geneva,sans-serif">Recommendations and suggestions from the AccessIT Community</span></span>

Revision as of 10:00, 17 October 2013

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 andmay encounter barriers to access if a website is not designed and developed with the proper structure.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.

"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). Accessible websites improve the experience of all users.

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

Principles

Key groups have developed web accessibility guidelines and standards including the US Access Board, which developed the Telecommunications Act Accessibility Guidelines and Section 508 Standards, and the World Wide Web Consortium, W3C, an international consortium which develops protocols and guidelines that ensure the long-term growth of the Web.

W3C Web Content Accessibility Guidelines (WCAG) 2.0

1: Content must be perceivable.

2: Interface components in the content must be operable.

3: Content and controls must be understandable

4: Content should be robust enough to work with current and future user agents (including assistive technologies)


WCAG 2.0 Quick Reference List

Section 508 Standards

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.
  • 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.

Resources

Checklists:

Web Content Accessibility Guidelines 2.0 Checklist

WebAIM's WCAG 2.0 Checklist

Identifying Web Accessibility Issues from NCDAE



Guidelines and Demos:

WCAG 2.0 Guidelines

Improving a Web site with WCAG 2.0 Before and After Demonstration

Web Accessible Rich Internet Applications

W3C Cascading Style Sheets

WebAIM Introduction to Web Accessibility

10 Easy Accessibility Tips from WebAIM

University System of Georgia Accessibility

Section 508 Summary Requirements Penn State

ARIA Landmarks Tutorial


Publications:

Google- Accessibility is NOT Just for Blind

Background and Methodology

Recommendations

Recommendations and suggestions from the AccessIT Community