Difference between revisions of "Web Accessibility"

From WolfTech
Jump to navigation Jump to search
 
(86 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Web toc:Access}}To be effective a website must be usable by the visitor so that they can easily and quickly find the information they need and efficiently complete all necessary transactions. It is therefore essential that all websites be made accessible in order to provide equal access to people with special needs. This includes but is not limited to, the blind and hearing impaired. The overall goal is to provide people with disabilities similar user-experiences as their peers.
 +
 
'''NC State's Web Accessibility Regulations'''
 
'''NC State's Web Accessibility Regulations'''
  
Line 13: Line 15:
 
Below you will find a list of best practices that will allow your site to be usable by everyone regardless of their individual functional capabilities. When applied to web, these best practices integrate well with assistive technology (AT) used by a person with a disability and provide equivalent access to all content including audio and visual material.
 
Below you will find a list of best practices that will allow your site to be usable by everyone regardless of their individual functional capabilities. When applied to web, these best practices integrate well with assistive technology (AT) used by a person with a disability and provide equivalent access to all content including audio and visual material.
  
−
----
+
==Most Common Web Accessibility Errors==
 +
 
 +
1. Missing "'''alt tags'''" <br />
 +
; alt tags : An HTML tag that provides alternative text when non-textual elements, typically images
 +
 
 +
- make sure that every "img src" has a relevant "alt text" <br />
 +
    example: <img src="your_file.jpg" alt="Place image description here." width="180px height="180px" />
 +
 
  
−
'''Layout and Structure'''
+
2. Missing "'''table summary'''"
−
<ul>
+
; table summary : Sets a summary description for the table. Summary is not recognized by most graphical browsers. It is primarily intended for use by non-graphical browser for web accessibility.
−
<li>
 
−
Separate presentation layer from the structure. When possible use Cascading Style Sheets (CSS) to control the visual appearance of a page. </li>
 
−
<li>Do not use structural elements for presentation and layout. For example using heading <h> tag to enhance text; list <li> tag to indent text; text area input <textarea> element for text inset. </li>
 
−
<li>Use CSS and <nowiki><div></nowiki>< tag or <iframe> to create a text inset.</li>
 
−
<li>Use <title> element in the <head> section of the page to identify the contents of a page. Browsers expose this information to assistive technology and the user can identify the page. </li>
 
−
<li>Minimize using tables for layout. When used, limit them to simple tables and ensure that the read order of the cell content can be linearized. Tables increase the size and footprint of the page and they are not easily maintained. </li>
 
−
<li>Avoid using Frames for layout. Frames divide a web page into multiple, scrollable regions each with its own content source. Frames can be very disorienting to screen readers especially when content in one frame references content in another. </li>
 
−
<li>Avoid opening new windows or "pop-ups". New windows destroy user browsing history preventing them from using the "back" button to return to the source page. If new window is opened identify the target window using target ="name" and provide a mechanism to easily return to original location on source page.</li></ul>
 
  
−
'''Presentation and Styles'''
+
- make sure that every table has a relevant summary
−
<ul>
+
    example: <nowiki><table align="center" width="180px height="180px" summary="Summarize what your table is about here"></nowiki><br />
−
<li>Use external styles sheets for presentation and minimize use inline or internal styles. Many browsers provide mechanisms to allow users to switch between style sheets letting the user set their own style.</li>
 
−
<li>Write the page in the correct reading order and then use <nowiki><div></nowiki> tags and CSS positioning to construct the physical layout of the web page.</li>
 
−
<li>Avoid fixed font sizes like 12 points or 12 pixels as they cannot be magnified. Use relative sizes like <nowiki><font=3></nowiki>, <nowiki><font=120%></nowiki> or <nowiki><font=1.5 ems></nowiki>. Some browsers, however, do not support EMS values less then 1. </li>
 
−
<li>Avoid using multiple font types or colors on one page as they can created a busy and cluttered appearance
 
−
<li>Use relative sizes for container elements like tables, margins, <nowiki><div></nowiki>s etc.</li>
 
−
<li>Provide a good contrast between background and foreground colors</li>
 
−
<li>Do not use color only to convey meaning</li>
 
−
<li>Avoid blinking and moving text. Do not use <blink> or <marque> tags. </li></ul>
 
  
−
'''Navigation'''
 
−
Effective Navigation Design Activity
 
−
Should be consistent, easily learned with the least number of steps  Keep it simple and intuitive
 
−
Group links into menus consisting of logical sets and sub sets across the site
 
−
Use <ul> for each menu group and <li> tag to create a list of links within the group
 
−
Use heading <h> tags to provide a descriptive label to a menu set.
 
−
Develop a vertical rather than horizontal hierarchy of linked resources
 
−
Use CSS to style and position menu items
 
−
Avoid multiple menu groups
 
−
Avoid integrating menu items within content
 
−
 
−
Provide clear, visible and understandable labels (for start point) for links  Provide context relevant labels (not "click here"). Labels should make sense out of context.
 
−
Do not give the same label to multiple links on same page (more, next)
 
−
When embedded within text, use sufficient text as a part of the link to make it understandable when standing alone
 
−
Use alpha rather than a number character as first character for the link label
 
−
 
−
Inform users where they are, where they have been and where they are going  Use a site map to revel the structure of web site
 
−
Use "bread crumbs" to provide current location and page hierarchy within the site
 
−
Use the title attribute to provide a more detailed description of target of the link
 
−
Use <title> element in the <head> section of the page to give each page a unique descriptive label. Browsers expose this information to assistive technology and the user can orient themselves within the site
 
−
 
−
Provide alternatives when links are inaccessible (multimedia, image maps)  Provide alternative static links to menus developed with inaccessible technologies like DHTML, Flash or server side image maps
 
−
Provide a site map
 
−
 
−
Provide a way to skip navigation links and move directly to content  Use an invisible link as the first item in a list of links that would move the user to the main content on the page or to another group of links
 
−
 
−
Avoid irrelevant and duplicate links Keep links relevant to page content
 
−
 
  
 +
3. '''Using appropiate doctype (DTD) and/or missing doc types'''<br />
 +
- HTML
 +
    <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></nowiki>
 +
    <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></nowiki>
 +
    <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></nowiki>
 +
 +
- XHTML
 +
    <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki>
 +
    <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></nowiki>
 +
    <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></nowiki>
 +
 
 +
- When using the HTML doctypes all tags need to have opened and closed
 +
    example: <nowiki><br>....</br></nowiki>  [open tag: <nowiki><br></nowiki>, closed tag: <nowiki></br></nowiki>]
  
 +
- When using the XHTML doctypes some tags can be self-closed
 +
    example: <nowiki><br /></nowiki>
  
−
'''Non-Textual Content'''
+
4. Make sure all tags are closed or self-closed<br /><br />
  
−
'''Data Tables'''
+
5. Make sure tags are nested correctly<br />
 +
-''' This is incorrect''':
 +
    <nowiki><b><i>This text is bold and italic</b></i></nowiki>
  
−
'''Forms'''
+
-''' This is correct''':
 +
    <nowiki><b><i>This text is bold and italic</i></b></nowiki>
  
−
'''Scripting'''
+
     
  
−
'''Electronic Documents'''
+
----

Latest revision as of 11:00, 4 January 2007

To be effective a website must be usable by the visitor so that they can easily and quickly find the information they need and efficiently complete all necessary transactions. It is therefore essential that all websites be made accessible in order to provide equal access to people with special needs. This includes but is not limited to, the blind and hearing impaired. The overall goal is to provide people with disabilities similar user-experiences as their peers.

NC State's Web Accessibility Regulations

North Carolina State University is required to provide reasonable access to its educational services, programs and activities in accordance with Section 504 of the Rehabilitation Act of 1973, the Americans with Disabilities Act (ADA) of 1990, and North Carolina state law (N.C. Gen. Stat. § 168A-7). Accordingly, official NC State web pages and online instructional material should be accessible to disabled persons where possible, or a reasonable alternative accommodation should be offered.

Non-compliance with the Regulations

If the NC State Web Developer fails to provide a response to the Information Technology Division's inquiry or does not address accessibility problems in a timely fashion, the Provost and Executive Vice Chancellor, in consultation with an accessibility compliance team if necessary, may direct the removal of non-exempt inaccessible Web content from service.

Making Web Accessibility Easy

While the Regulation requires that web pages meet the technical Section 508 standards, they are minimum requirements to make the pages become "technically" accessible and may not necessarily be functionally usable by people with disabilities. To be usable, websites must provide people with disabilities similar user-experiences as their peers.

Below you will find a list of best practices that will allow your site to be usable by everyone regardless of their individual functional capabilities. When applied to web, these best practices integrate well with assistive technology (AT) used by a person with a disability and provide equivalent access to all content including audio and visual material.

Most Common Web Accessibility Errors

1. Missing "alt tags"

alt tags
An HTML tag that provides alternative text when non-textual elements, typically images

- make sure that every "img src" has a relevant "alt text" 

    example: <img src="your_file.jpg" alt="Place image description here." width="180px height="180px" />


2. Missing "table summary"

table summary
Sets a summary description for the table. Summary is not recognized by most graphical browsers. It is primarily intended for use by non-graphical browser for web accessibility.

- make sure that every table has a relevant summary 

    example: <table align="center" width="180px height="180px" summary="Summarize what your table is about here">


3. Using appropiate doctype (DTD) and/or missing doc types
- HTML 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

- XHTML 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

- When using the HTML doctypes all tags need to have opened and closed 

    example: <br>....</br>  [open tag: <br>, closed tag: </br>]

- When using the XHTML doctypes some tags can be self-closed 

    example: <br />

4. Make sure all tags are closed or self-closed

5. Make sure tags are nested correctly
- This is incorrect: 

    <b><i>This text is bold and italic</b></i>

- This is correct: 

    <b><i>This text is bold and italic</i></b>


Retrieved from "https://tools.wolftech.ncsu.edu/support/index.php?title=Web_Accessibility&oldid=6846"