 |
 |
 |
| CONTENTS |
|---|
| Introduction |
| Basic Design Checks |
| Language |
| Navigation |
| Images |
| Tables |
| Frames |
| Inline Frames |
| Forms |
| Scripting |
| US Government's Section 508 |
| W3C's WCAG 1.0 |
| Web Page Testing |
| Language Codes |
In the interest of promoting Web Accessibility for all, the full content of Able Web Editor's Page Sample on the subject is included here.
Accessibility is the word used to describe how to make Web Pages accessible to people with disabilities. In some cases the law requires Web Pages to be Accessible, see Section 508. But the guidelines for Accessibility also provide an excellent way of evaluating the overall design of Web Pages and Web Sites.
AbleWebEditor.com's Other Resources includes Links to relevant Web Sites on the Internet including Web Page testing and Validation for Accessibility.
See also the description of how this Web Site and Able Web Editor are designed to comply with the needs of Web Accessibility.
The variety of disablities ranges from people who cannot use a Mouse, to people with learning disabilites, to people who require the use of assistive technologies such as screen readers, text-to-speech Browsers, or head wands. It is estimated that 1 out of 5 people using the Internet have some form of disability including the ones shown below.
But the guidelines for Web Accessibilty actually provide the best approach for creating Web Pages for all Visitors, including those using new technologies such as automatic language translation or hand held devices with small screens.
This Web Page describes specific examples of how to make Web Pages Accessible. It also includes the US Government's Section 508 which requires government agencies and businesses providing services to the US Government to make their Web Sites Accessible. This Web Page concludes with an introduction to the W3C's Web Content Accessibilty Guidelines.
The design checks for optimum Accessibility are also good guidelines for the design of Web Pages in general. Primarily Web Pages should be comprehensible as text only. People with impared vision can not scan a Web Page for relevant information. It must be read to them or enlarged in small sections. Also, not all Visitors can interact with Web Pages using a Mouse. Any interaction that requires a Mouse should have an alternate keyboard input. If a Visitor can not use a Mouse or the keyboard, assistive technologies can replicate keystrokes using techniques such as voice control.
|
Text-to-Speech Browsers that speak multiple languages need to be informed of the language being used. This includes identifying the primary language of the Web Page in the <html> Tag and any changes of language using Inline Text Tags such as the <span> Tag. Languages are identified by a two letter code. For a list of available codes, see Language Codes.
Use the title Attribute to expand <abbr> and <acronym> Tags.
These techniques allow search engines to find key words and documents in a specified language.
| Primary Language: | <html lang="en-us"> |
|---|---|
| Language Changes: | <span lang="fr"> |
| Abbreviations: | <abbr title=" Description "> |
| Acronym: | <acronym title=" Description "> |
For Text-to-Speech Browsers, repetitive Navigation Links should be grouped and provided with a means for being bypassed. For people with physical limitations, Links should be provided with a keyboard alternative using the accesskey Attribute. The table below lists additional considerations.
|
Shown below is the Source Listing for the Links at the top of this Web Page. "Skip.gif" is an invisible Image used at the beginning of the Links to allow Text-to-Speech Browser to skip to the page heading. Each Link has an Access Key assigned to it and the Links are separated by spaces and vertical bars.
<a href="#PgHead"><img
src="Images/Skip.gif"
Images and Image Maps need to have a text equivalent for Text-to-Speech Browsers. The text should describe the Image and its function when it is used as a Link such as, "Return to previous screen." This Image description is used by search robots to index pages on the Internet.
When the Image is easy to describe, the alt Attribute can be used. The text in this Attribute should be kept short, less than 150 characters or 10 to 12 words. If the Image is being used as a Link, the alt Attribute should be used to indicate the Link Destination. When an Image is used to add spacing on a Web Page, use a null value ( alt="" ). When an Image is used as a bullet or decorative Images, use an asterisk ( alt="*" ).
When the Image requires a more comprehensive description, both the alt and longdesc Attributes should be included. The longdesc Attribute is a Link to a text only Web Page that contains the long description of the Image. A D-Link should be included to duplicate this Link for Browsers that do not recognize the longdesc Attribute.
| Alt Description: | <img alt=" Description "> |
|---|---|
| or: | <area alt=" Description "> |
| Long Description Link: | <img longdec="Address"> |
| D-Link: | <a href="Address">D</a> |
| Image as Bullet: | <img src="Bullet.gif" alt=" * "> |
| Image as Spacer: | <img src="Spacer.gif" alt=" "> |
Shown below is a Source Listing for an Image that has alt and longdesc Attributes and a D-Link.
Tables can be used either for layout, Layout Tables, or to present tabular information, Data Tables. Data Tables can be either simple Tables with a single row or column of <th> Tags or complex Tables with two or more rows and/or columns of <th> Tags.
Tables present a special problem for Text-to-Speech Browsers because these Browsers read from left-to-right then top-to-bottom. Also Text-to-Speech Browsers can be used to move forward and back from one Cell to another. The problem becomes to identify which Heading Cell(s), <th>, apply to individual Data Cells, <td>. To resolve this problem, the HTML Standard added the headers and scope Attributes to relate Data Cells to specific Heading Cells. In addition, the summary, abbr, and axis Attributes have been added for descriptive text.
Tables:
Layout
|
Simple Data
|
Complex Data
|
Descriptive Attributes
Tables are useful for establishing the visual relationship between text and Images on a Web Page. For the most part, Browsers display these tables the same. Text-to-Speech Browsers read these tables from left-to-right and top-to-bottom. This is referred to as "Linearization." All of the information in one Cell is read before the Browser proceeds to the next Cell. The only guidelines to follow for Accessibility of Layout Tables is to verify that they are understandable when Linearized and do not use <th> Tags to create Cells.
|
Tables:
Layout
|
Simple Data
|
Complex Data
|
Descriptive Attributes
Simple Data Tables use a single row and/or column of <th> Tags for the Heading Cells. Within each <th> Tag, use the scope Attribute to specify whether the Heading Cell refers to rows or columns of Data Cells, <td>.
| Tag | Relates To | |
|---|---|---|
| <th scope="col"> | <td> Cells in current Column | |
| <th scope="row"> | <td> Cells in current Row | |
| <th scope="colgroup"> | <td> Cells defined by <colgroup> | |
| <th scope="rowgroup"> | <td> Cells in <tbody> |
The Table below is a Simple Table with two rows and two columns. The <th> Tags are the first Cell in each row and therefore create a column of Headings. They define the <td> Tags that follow in each row. Therefore, the scope Attributes use the value "row." Because this Table reads across the page, it Linearizes very well.
<table border="5"
cellpadding="6"><tr>
| Keyboard: | Ctrl+N |
|---|---|
| Menu Option: | Source >> New |
Tables:
Layout
|
Simple Data
|
Complex Data
|
Descriptive Attributes
Complex Data Tables have Data Cells that are defined by two or more rows or columns of Heading Cells. To specify the relationship, each <th> Tag includes an unique name in the id Attribute. Each <td> Tag includes a headers Attribute that indicates the Heading Cells that apply to that particular Data Cell. The headers Attribute may specify mulitple names from the id Attributes with each name separated by a space.
| Tag | Relates To | |
|---|---|---|
| <td headers="th_id"> | <th id="th_id"> |
The example below is not a complex Data Table because there is only one row and one column of Header Cells. However, it illustrates how to relate multiple Header Cells to Data Cells using the id and headers Attributes.
<table border="5"
cellpadding="6"><tr>
| Function | Filename | Folder | Subfolder |
|---|---|---|---|
| Default Buttons: | Button.but | Program Folder | Reference |
| Optional Lists: | *.but | Program Folder | Reference |
Tables:
Layout
|
Simple Data
|
Complex Data
|
Descriptive Attributes
Attributes have added to the HTML standard to describe the content of Table Cells. However, Browsers and assistive technologies have not yet made use of these Attributes.
| Table Summary: | <table summary=" Table Content "> |
|---|---|
| Header Content: | <th abbr=" Cell Content "> |
| or: | <td abbr=" Cell Content "> |
| Cell Category: | <td axis=" Cell Category "> |
| or: | <th axis=" Cell Category "> |
Tables:
Layout
|
Simple Data
|
Complex Data
|
Descriptive Attributes
Accessibility guidelines specify that Frames shall have titles that facilitate frame identification and navigation. Some assistive technologies use the name Attribute of the <frame> Tag to serve this function and others use the <title> Tag of the Web Page in the Frame. The best approach is to use meaningful name and title Attributes in the <frame> Tag and a meaningful <title> Element in all the Web Pages.
The HTML standard has added the longdesc Attribute to the <frame> Tag but it is currently not supported by assistive technologies. The <noframes> Tag should always be used to specify alternate information.
| Title: | <frame title=" Description "> 1 |
|---|---|
| Name: | <frame name="FrameName"> |
| Long Description: | <frame longdesc="Address"> 2 |
| No Frames: | <noframes> Alternate Content </noframes> |
Web Pages with Inline Frames should include meaningful name and title Attributes and alternate content between the Opening and Closing <iframe> Tags.
The HTML standard has added the longdesc Attribute to the <iframe> Tag but it is currently not supported by assistive technologies.
| Title: | <iframe title=" Description "> 1 |
|---|---|
| Name: | <iframe name="FrameName"> |
| Long Description: | <iframe longdesc="Address"> 2 |
| Inline Frames: | <iframe> Alternate Content </iframe> |
To complete a Form the Visitor must know what information is required for each Form Element. For Text-to-Speech Browsers this can be accomplished by following the guidelines below.
|
WCAG 1.0 Guideline 10.4 states "Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas." This Guideline no longer applies to current assistive technologies.
Web Pages that rely on Scripting may not be Accessible for text only or Text-to-Speech Browsers
|
The US Government has mandated that access to information technology is a civil right. The primary legislation addressing this issue for the Internet is Section 508 § 1194.22 The law prohibits federal agencies from developing, purchasing, using, or maintaining information technology that is inaccessible to persons with disabilities. States and other countries are adopting similar measures.
The 16 parts of Section 508 § 1194.22 are included below. Where appropriate, Links are included to the W3C's equivalent Guideline(s) and the topics that suggest how these issues may be addressed.
The organization responsible for creating standards for the Internet, the W3C, has created a Web Accessibility Initative ( WAI ) to address the issues of Accessibility. Their Web Content Accessibility Guidelines ( WCAG 1.0 ) specify three different Priorities. As the Checkpoints in each Priority are satisfied, the level of conformance increases from the lowest, Level "A," to the highest, Level "AAA." Logos are available to indicate the Level of conformance for each Web Page. The WCAG is not a law but rather series of Guidelines for Web Developers. For additional information including Links to the the full text of the Guidelines, see "Other Resources" at www.AbleWebEditor.com.
Indicated below is a brief summary of the Guidelines. Each Guideline is divided into a series of Checkpoints. Each Checkpoint is assigned the appropriate Priority level. Fortunately there are Validation services that automate the verification process. Unfortunately some of the Guidleines are open to interpretation with each of the validation services offering a different interpretation. The summary below includes Links to the equivalent item in Section 508 and the topics that suggest how these issues may be addressed.
Web Page testing is an important part of any Web Site development process. Many of the tests below can be accomplished following the Step-by-Step Instructions and using the Links and resources in the Other Resources section of www.AbleWebEditor.com.
|
The two letter Language Codes listed here are specified in ISO 639.2 which is maintained by the Library of Congress.
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
| Abkhazian | ab | Bambara | bm | Catalan | ca |
| Afar | aa | Bashkir | ba | Chamorro | ch |
| Afrikaans | af | Basque | eu | Chechen | ce |
| Akan | ak | Belarusian | be | Chichewa | ny |
| Albanian | sq | Bengali | bn | Chinese | zh |
| Amharic | am | Bihari | bh | Church Slavic | cu |
| Arabic | ar | Bislama | bi | Chuvash | cv |
| Aragonese | an | Bosnian | bs | Cornish | kw |
| Armenian | hy | Breton | br | Corsican | co |
| Assamese | as | Bulgarian | bg | Cree | cr |
| Avaric | av | Burmese | my | Croatian | hr |
| Avestan | ae | Czech | cs | ||
| Aymara | ay | ||||
| Azerbaijani | az |
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
| Danish | da | Faroese | fo | Gaelic | gd |
| Divehi | dv | Fijian | fj | Gallegan | gl |
| Dutch | nl | Finnish | fi | Ganda | lg |
| Dzongkha | dz | Flemish | nl | Georgian | ka |
| French | fr | German | de | ||
| English | en | Frisian | fy | Greek | el |
| Esperanto | eo | Fulah | ff | Greenlandic | kl |
| Estonian | et | Guarani | gn | ||
| Ewe | ee | Gujarati | gu |
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
| Haitian | ht | Icelandic | is | Kalaallisut | kl |
| Hausa | ha | Ido | io | Kannada | kn |
| Hebrew | he | Igbo | ig | Kanuri | kr |
| Herero | hz | Indonesian | id | Kashmiri | ks |
| Hindi | hi | Interlingua | ia | Kazakh | kk |
| Hiri Motu | ho | Interlingue | ie | Khmer | km |
| Hungarian | hu | Inuktitut | iu | Kikuyu | ki |
| Inupiaq | ik | Kinyarwanda | rw | ||
| Irish | ga | Kirghiz | ky | ||
| Italian | it | Komi | kv | ||
| Kongo | kg | ||||
| Japanese | ja | Korean | ko | ||
| Javanese | jv | Kuanyama | kj | ||
| Kurdish | ku |
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
| Lao | lo | Macedonian | mk | Nauru | na |
| Latin | la | Malagasy | mg | Navajo | nv |
| Latvian | lv | Malay | ms | Ndebele, South | nr |
| Limburgan | li | Malayalam | ml | Ndebele, North | nd |
| Lingala | ln | Maltese | mt | Ndonga | ng |
| Lithuanian | lt | Manx | gv | Nepali | ne |
| Luba-Katanga | lu | Maori | mi | Norwegian | no |
| Luxembourgish | lb | Marathi | mr | ||
| Marshallese | mh | ||||
| Moldavian | mo | ||||
| Mongolian | mn |
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
| Occitan | oc | Sami | se | Tahitian | ty |
| Ojibwa | oj | Samoan | sm | Tamil | ta |
| Oriya | or | Sango | sg | Tagalog | tl |
| Oromo | om | Sanskrit | sa | Tajik | tg |
| Ossetian | os | Sardinian | sc | Tatar | tt |
| Serbian | sr | Telugu | te | ||
| Panjabi | pa | Shona | sn | Thai | th |
| Pali | pi | Sichuan Yi | ii | Tibetan | bo |
| Persian | fa | Sindhi | sd | Tigrinya | ti |
| Polish | pl | Sinhalese | si | Tonga | to |
| Portuguese | pt | Slovak | sk | Tsonga | ts |
| Pushto | ps | Slovenian | sl | Tswana | tn |
| Somali | so | Turkish | tr | ||
| Quechua | qu | Sotho | st | Turkmen | tk |
| Spanish | es | Twi | tw | ||
| Raeto-Romance | rm | Sundanese | su | ||
| Romanian | ro | Swahili | sw | ||
| Rundi | rn | Swati | ss | ||
| Russian | ru | Swedish | sv |
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
| Uighur | ug | Venda | ve | Xhosa | xh |
| Ukrainian | uk | Vietnamese | vi | ||
| Urdu | ur | Volapük | vo | Yiddish | yi |
| Uzbek | uz | Yoruba | yo | ||
| Walloon | wa | ||||
| Welsh | cy | Zhuang | za | ||
| Wolof | wo | Zulu | zu |
Language Codes: A - C | D - G | H - K | L - N | O - T | U - Z
Copyright © 2004 by Donald H. McCunn
