Difference between revisions of "Web Accessibility"
| (41 intermediate revisions by 2 users not shown) | |||
| Line 15: | 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 /> | - 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" /> | example: <img src="your_file.jpg" alt="Place image description here." width="180px height="180px" /> | ||
| + | |||
2. Missing "'''table summary'''" | 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 | - make sure that every table has a relevant summary | ||
example: <nowiki><table align="center" width="180px height="180px" summary="Summarize what your table is about here"></nowiki><br /> | example: <nowiki><table align="center" width="180px height="180px" summary="Summarize what your table is about here"></nowiki><br /> | ||
| + | |||
3. '''Using appropiate doctype (DTD) and/or missing doc types'''<br /> | 3. '''Using appropiate doctype (DTD) and/or missing doc types'''<br /> | ||
| Line 38: | Line 42: | ||
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.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 | + | - When using the HTML doctypes all tags need to have opened and closed |
| − | example: <br>....</br> [open tag: <br>, closed tag: </br>] | + | 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 | - When using the XHTML doctypes some tags can be self-closed | ||
| − | example: <br /> | + | example: <nowiki><br /></nowiki> |
| + | |||
| + | 4. Make sure all tags are closed or self-closed<br /><br /> | ||
| − | + | 5. Make sure tags are nested correctly<br /> | |
| + | -''' This is incorrect''': | ||
| + | <nowiki><b><i>This text is bold and italic</b></i></nowiki> | ||
| − | + | -''' This is correct''': | |
| + | <nowiki><b><i>This text is bold and italic</i></b></nowiki> | ||
| − | + | ||
---- | ---- | ||
| − | |||
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>