discontinued / server · Files

NOTE-WCAG10-HTML-TECHS-20001106 175 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 4171 4172 4173 4174 4175 4176 4177 4178 4179 4180 4181 4182 4183 4184 4185 4186 4187 4188 4189 4190 4191 4192 4193 4194 4195 4196 4197 4198 4199 4200 4201 4202 4203 4204 4205 4206 4207 4208 4209 4210 4211 4212 4213 4214 4215 4216 4217 4218 4219 4220 4221 4222 4223 4224 4225 4226 4227 4228 4229 4230 4231 4232 4233 4234 4235 4236 4237 4238 4239 4240 4241 4242 4243 4244 4245 4246 4247 4248 4249 4250 4251 4252 4253 4254 4255 4256 4257 4258 4259 4260 4261 4262 4263 4264 4265 4266 4267 4268 4269 4270 4271 4272 4273 4274 4275 4276 4277 4278 4279 4280 4281 4282 4283 4284 4285 4286 4287 4288 4289 4290 4291 4292 4293 4294 4295 4296 4297 4298 4299 4300 4301 4302 4303 4304 4305 4306 4307 4308 4309 4310 4311 4312 4313 4314 4315 4316 4317 4318 4319 4320 4321 4322 4323 4324 4325 4326 4327 4328 4329 4330 4331 4332 4333 4334 4335 4336 4337 4338 4339 4340 4341 4342 4343 4344 4345 4346 4347 4348 4349 4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 4375 4376 4377 4378 4379 4380 4381 4382 4383 4384 4385 4386 4387 4388 4389 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406 4407 4408 4409 4410 4411 4412 4413 4414 4415 4416 4417 4418 4419 4420 4421 4422 4423 4424 4425 4426 4427 4428 4429 4430 4431 4432 4433 4434 4435 4436 4437 4438 4439 4440 4441 4442 4443 4444 4445 4446 4447 4448 4449 4450 4451 4452 4453 4454 4455 4456 4457 4458 4459 4460 4461 4462 4463 4464 4465 4466 4467 4468 4469 4470 4471 4472 4473 4474 4475 4476 4477 4478 4479 4480 4481 4482 4483 4484 4485 4486 4487 4488 4489 4490 4491 4492 4493 4494 4495 4496 4497 4498 4499 4500 4501 4502 4503 4504 4505 4506 4507 4508 4509 4510 4511 4512 4513 4514 4515 4516 4517 4518 4519 4520 4521 4522 4523 4524 4525 4526 4527 4528 4529 4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 4550 4551 4552 4553 4554 4555 4556 4557 4558 4559 4560 4561 4562 4563 4564 4565 4566 4567 4568 4569 4570 4571 4572 4573 4574 4575 4576 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596 4597 4598 4599 4600 4601 4602 4603 4604 4605 4606 4607 4608 4609 4610 4611 4612 4613 4614 4615 4616 4617 4618 4619 4620 4621 4622 4623 4624 4625 4626 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637 4638 4639 4640 4641 4642 4643 4644 4645 4646 4647 4648 4649 4650 4651 4652 4653 4654 4655 4656 4657 4658 4659 4660 4661 4662 4663 4664 4665 4666 4667 4668 4669 4670 4671 4672 4673 4674 4675 4676 4677 4678 4679 4680 4681 4682 4683 4684 4685 4686 4687 4688 4689 4690 4691 4692 4693 4694 4695 4696 4697 4698 4699 4700 4701 4702 4703 4704 4705 4706 4707 4708 4709 4710 4711 4712 4713 4714 4715 4716 4717 4718 4719 4720 4721 4722 4723 4724 4725 4726 4727 4728 4729 4730 4731 4732 4733 4734 4735 4736 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- @@?? we aren't claiming transitional? -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML Techniques for Web Content Accessibility Guidelines 1.0</title>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-NOTE" />
<link rel="STYLESHEET" href="style/default.css" type="text/css" />
</head>
<body>
<div class="navbar"><map id="navbar-top" name="navbar-top"
title="Navigation Bar">
<p>[<a href="#toc">contents</a>] &nbsp; [<a href="#html-index">html index</a>]
&nbsp;</p>

<hr class="navbar" title="Navigation area separator" />
</map></div>

<div class="head">
<p><a href="http://www.w3.org/" title="Go to W3C Home Page"><img height="48"
width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home" /></a></p>

<h1 class="notoc">HTML Techniques for Web Content Accessibility Guidelines
1.0</h1>

<h2 class="notoc">W3C Note 6 November 2000</h2>

<dl>
<dt>This version:</dt>

<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/">
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/</a></dd>

<dd>(<a href="html-techniques.txt">plain text</a>, <a
href="html-techniques.ps">PostScript</a>, <a href="html-techniques.pdf">
PDF</a>, <a href="html-techniques.tgz">gzip tar file of HTML</a>, <a
href="html-techniques.zip">zip archive of HTML</a>)</dd>

<dt>Latest version:</dt>

<dd><a href="http://www.w3.org/TR/WCAG10-HTML-TECHS/">
http://www.w3.org/TR/WCAG10-HTML-TECHS/</a> <!--
      <DT>Latest public version:
      <DD><A HREF="http://www.w3.org/TR/WCAG10-HTML-TECHS/">http://www.w3.org/TR/WCAG10-HTML-TECHS/</A>
--></dd>

<dt>Previous version:</dt>

<dd><a href="http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/">
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/</a></dd>

<dt>Editors:</dt>

<dd>Wendy Chisholm, <a href="http://www.w3.org/">W3C</a>;<br />
 Gregg Vanderheiden, <a href="http://www.tracecenter.org/">Trace R &amp; D
Center</a> University of Wisconsin -- Madison;<br />
 Ian Jacobs, <a href="http://www.w3.org/">W3C</a></dd>
</dl>

<p class="copyright"><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
&copy;1999 - 2000 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
href="http://www.lcs.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.inria.fr/"><abbr lang="fr"
title="Institut National de Recherche en Informatique et Automatique">
INRIA</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights
Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">
liability</a>, <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">
trademark</a>, <a
href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">document
use</a> and <a
href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">software
licensing</a> rules apply.</p>
</div>

<hr />
<h2 class="nonb"><a id="Abstract" name="Abstract">Abstract</a></h2>

<p>This document describes techniques for authoring accessible Hypertext Markup
Language (<acronym title="Hypertext Markup Language">HTML</acronym>) content
(refer to HTML 4.01 <cite><a href="#ref-HTML4" title="Link to reference HTML4">
[HTML4]</a></cite>). This document is intended to help authors of Web content
who wish to claim conformance to "Web Content Accessibility Guidelines 1.0"
(<cite><a href="#ref-WCAG10"
title="Link to reference WCAG10">[WCAG10]</a></cite>). While the techniques in
this document should help people author HTML that conforms to "Web Content
Accessibility Guidelines 1.0", these techniques are neither guarantees of
conformance nor the only way an author might produce conforming content.</p>

<p>This document is part of a series of documents about techniques for
authoring accessible Web content. For information about the other documents in
the series, please refer to "Techniques for Web Content Accessibility
Guidelines 1.0" <cite><a href="#ref-WCAG10-TECHS"
title="Link to reference WCAG10-TECHS">[WCAG10-TECHS]</a></cite>.</p>

<p><strong>Note:</strong> This document contains a number of examples that
illustrate accessible solutions in CSS but also deprecated examples that
illustrate what content developers should not do. The deprecated examples are
highlighted and readers should approach them with caution -- they are meant for
illustrative purposes only.</p>

<h2 class="nonb"><a id="Status" name="Status">Status of this document</a></h2>

<p>This version has been published to correct some broken links in the previous
version.</p>

<p>The 6 November 2000 version of this document is a Note in a series of Notes
produced and endorsed by the <a href="http://www.w3.org/WAI/GL/">Web Content
Accessibility Guidelines Working Group</a> (WCAG WG). This Note has not been
reviewed or endorsed by W3C Members. The series of documents supersedes the
single document <a
href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505/">5 May 1999 W3C
Note Techniques for Web Content Accessibility Guidelines 1.0</a>. The topics
from the earlier document have been separated into technology-specific
documents that may evolve independently. Smaller technology-specific documents
allow authors to focus on a particular technology.</p>

<p>While the "Web Content Accessibility Guidelines 1.0" Recommendation <cite><a
href="#ref-WCAG10" title="Link to reference WCAG10">[WCAG10]</a></cite> is a
stable document, this series of companion documents is expected to evolve as
technologies change and content developers discover more effective techniques
for designing accessible Web content.</p>

<p>The <a href="http://www.w3.org/WAI/GL/wai-gl-techniques-changes.html">
history of changes to the series of documents</a> as well as the <a
href="http://www.w3.org/WAI/GL/wai-gl-tech-issues.html">list of open and closed
issues</a> are available. Readers are encouraged to comment on the document and
propose resolutions to current issues. Please send detailed comments on this
document to the Working Group at <a href="mailto:w3c-wai-gl@w3.org">
w3c-wai-gl@w3.org</a>; <a
href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">public archives</a> are
available.</p>

<p>The English version of this specification is the only normative version. <a
href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS">Translations of
this document</a> may be available.</p>

<p>The list of known errors in this document is available at <a
href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA">"Errata in Web Content
Accessibility Guidelines</a>." Please report errors in this document to <a
href="mailto:wai-wcag-editor@w3.org">wai-wcag-editor@w3.org</a>.</p>

<p>The <a href="http://www.w3.org/WAI/">Web Accessibility Initiative (<acronym
title="Web Accessibility Initiative">WAI</acronym>)</a> of the World Wide Web
Consortium (<acronym>W3C</acronym>) makes available a variety of resources on
Web accessibility. WAI Accessibility Guidelines are produced as part of the <a
href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</a>. The
goals of the Web Content Accessibility Guidelines Working Group are described
in <a href="http://www.w3.org/WAI/GL/new-charter-2000.html">the
charter</a>.</p>

<p>A list of <a href="http://www.w3.org/TR/">current W3C Recommendations and
other technical documents</a> is available.</p>

<!--NewPage--><!-- this is for html2ps -->
<div class="toc">
<h2 class="notoc"><a id="toc" name="toc">Table of Contents</a></h2>

<ul class="toc">
<li class="tocline2"><a id="toc-Abstract" href="#Abstract" name="toc-Abstract"
class="tocxref">Abstract</a></li>

<li class="tocline2"><a id="toc-Status" href="#Status" name="toc-Status"
class="tocxref">Status of this document</a></li>

<li class="tocline2"><a id="toc-document" href="#document" name="toc-document"
class="tocxref">1 Document structure and metadata</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-document-meta" href="#document-meta"
name="toc-document-meta" class="tocxref">1.1 Metadata</a></li>

<li class="tocline3"><a id="toc-grouping" href="#grouping" name="toc-grouping"
class="tocxref">1.2 Structural grouping</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-language" href="#language" name="toc-language"
class="tocxref">2 Language information</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-changes-in-lang" href="#changes-in-lang"
name="toc-changes-in-lang" class="tocxref">2.1 Identifying changes in
language</a></li>

<li class="tocline3"><a id="toc-identify-primary-lang"
href="#identify-primary-lang" name="toc-identify-primary-lang" class="tocxref">
2.2 Identifying the primary language</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-text" href="#text" name="toc-text"
class="tocxref">3 Text markup</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-text-emphasis" href="#text-emphasis"
name="toc-text-emphasis" class="tocxref">3.1 Emphasis</a></li>

<li class="tocline3"><a id="toc-text-abbr" href="#text-abbr"
name="toc-text-abbr" class="tocxref">3.2 Acronyms and abbreviations</a></li>

<li class="tocline3"><a id="toc-text-quotes" href="#text-quotes"
name="toc-text-quotes" class="tocxref">3.3 Quotations</a></li>

<li class="tocline3"><a id="toc-text-markup" href="#text-markup"
name="toc-text-markup" class="tocxref">3.4 Markup and style sheets rather than
images: The example of math</a></li>

<li class="tocline3"><a id="toc-misc-markup" href="#misc-markup"
name="toc-misc-markup" class="tocxref">3.5 Eight other structural elements (to
identify citations, code fragments, deleted text, and others)</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-lists" href="#lists" name="toc-lists"
class="tocxref">4 Lists</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-list-bullets" href="#list-bullets"
name="toc-list-bullets" class="tocxref">4.1 Use style sheets to change list
bullets</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-tables" href="#tables" name="toc-tables"
class="tocxref">5 Tables</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-data-tables" href="#data-tables"
name="toc-data-tables" class="tocxref">5.1 Tables of data</a></li>

<li class="tocline3"><a id="toc-tables-layout" href="#tables-layout"
name="toc-tables-layout" class="tocxref">5.2 Tables for layout</a></li>

<li class="tocline3"><a id="toc-wrapped-text" href="#wrapped-text"
name="toc-wrapped-text" class="tocxref">5.3 Linearizing tables</a></li>

<li class="tocline3"><a id="toc-bc-tables" href="#bc-tables"
name="toc-bc-tables" class="tocxref">5.4 Backward compatibility issues for
tables</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-links" href="#links" name="toc-links"
class="tocxref">6 Links</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-link-text" href="#link-text"
name="toc-link-text" class="tocxref">6.1 Link text</a></li>

<li class="tocline3"><a id="toc-group-bypass" href="#group-bypass"
name="toc-group-bypass" class="tocxref">6.2 Grouping and bypassing
links</a></li>

<li class="tocline3"><a id="toc-link-accesskey" href="#link-accesskey"
name="toc-link-accesskey" class="tocxref">6.3 Keyboard access</a></li>

<li class="tocline3"><a id="toc-anchors-targets" href="#anchors-targets"
name="toc-anchors-targets" class="tocxref">6.4 Anchors and targets</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-images" href="#images" name="toc-images"
class="tocxref">7 Images and image maps</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-image-text-equivalent"
href="#image-text-equivalent" name="toc-image-text-equivalent" class="tocxref">
7.1 Short text equivalents for images ("alt-text")</a></li>

<li class="tocline3"><a id="toc-long-descriptions" href="#long-descriptions"
name="toc-long-descriptions" class="tocxref">7.2 Long descriptions of
images</a></li>

<li class="tocline3"><a id="toc-ascii-art" href="#ascii-art"
name="toc-ascii-art" class="tocxref">7.3 Ascii art</a></li>

<li class="tocline3"><a id="toc-image-maps" href="#image-maps"
name="toc-image-maps" class="tocxref">7.4 Image maps</a></li>

<li class="tocline3"><a id="toc-color-images" href="#color-images"
name="toc-color-images" class="tocxref">7.5 Color in images</a></li>

<li class="tocline3"><a id="toc-animated-images" href="#animated-images"
name="toc-animated-images" class="tocxref">7.6 Animated images</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-objects" href="#objects" name="toc-objects"
class="tocxref">8 Applets and other programmatic objects</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-applet-text-equivalent"
href="#applet-text-equivalent" name="toc-applet-text-equivalent"
class="tocxref">8.1 Text and non-text equivalents for applets and programmatic
objects</a></li>

<li class="tocline3"><a id="toc-accessible-applets" href="#accessible-applets"
name="toc-accessible-applets" class="tocxref">8.2 Directly accessible
applets</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-audio-and-video" href="#audio-and-video"
name="toc-audio-and-video" class="tocxref">9 Audio and video</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-audio-information" href="#audio-information"
name="toc-audio-information" class="tocxref">9.1 Audio information</a></li>

<li class="tocline3"><a id="toc-text-equivs-multimedia"
href="#text-equivs-multimedia" name="toc-text-equivs-multimedia"
class="tocxref">9.2 Text equivalents for multimedia</a></li>

<li class="tocline3"><a id="toc-embed-multimedia" href="#embed-multimedia"
name="toc-embed-multimedia" class="tocxref">9.3 Embedding multimedia
objects</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-frames" href="#frames" name="toc-frames"
class="tocxref">10 Frames</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-frame-names" href="#frame-names"
name="toc-frame-names" class="tocxref">10.1 Providing a frame title</a></li>

<li class="tocline3"><a id="toc-frame-text-equivalent"
href="#frame-text-equivalent" name="toc-frame-text-equivalent" class="tocxref">
10.2 Describing frame relationships</a></li>

<li class="tocline3"><a id="toc-noframes" href="#noframes" name="toc-noframes"
class="tocxref">10.3 Writing for browsers that do not support FRAME</a></li>

<li class="tocline3"><a id="toc-frame-has-html-src" href="#frame-has-html-src"
name="toc-frame-has-html-src" class="tocxref">10.4 Frame sources</a></li>

<li class="tocline3"><a id="toc-no-new-windows" href="#no-new-windows"
name="toc-no-new-windows" class="tocxref">10.5 Using FRAME targets</a></li>

<li class="tocline3"><a id="toc-alt-frames" href="#alt-frames"
name="toc-alt-frames" class="tocxref">10.6 Alternatives to frames</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-forms" href="#forms" name="toc-forms"
class="tocxref">11 Forms</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-forms-keyboard-access"
href="#forms-keyboard-access" name="toc-forms-keyboard-access" class="tocxref">
11.1 Keyboard access to forms</a></li>

<li class="tocline3"><a id="toc-forms-grouping" href="#forms-grouping"
name="toc-forms-grouping" class="tocxref">11.2 Grouping form controls</a></li>

<li class="tocline3"><a id="toc-forms-labels" href="#forms-labels"
name="toc-forms-labels" class="tocxref">11.3 Labeling form controls</a></li>

<li class="tocline3"><a id="toc-forms-graphical-buttons"
href="#forms-graphical-buttons" name="toc-forms-graphical-buttons"
class="tocxref">11.4 Graphical buttons</a></li>

<li class="tocline3"><a id="toc-forms-specific" href="#forms-specific"
name="toc-forms-specific" class="tocxref">11.5 Techniques for specific
controls</a></li>

<li class="tocline3"><a id="toc-bc-forms" href="#bc-forms" name="toc-bc-forms"
class="tocxref">11.6 Backward compatibility issues for forms</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-scripts" href="#scripts" name="toc-scripts"
class="tocxref">12 Scripts</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-scripts-gt" href="#scripts-gt"
name="toc-scripts-gt" class="tocxref">12.1 Graceful transformation of
scripts</a></li>

<li class="tocline3"><a id="toc-scripts-flicker" href="#scripts-flicker"
name="toc-scripts-flicker" class="tocxref">12.2 Scripts that cause
flickering</a></li>

<li class="tocline3"><a id="toc-scripts-movement-blinking"
href="#scripts-movement-blinking" name="toc-scripts-movement-blinking"
class="tocxref">12.3 Scripts that cause movement and blinking</a></li>

<li class="tocline3"><a id="toc-directly-accessible-scripts"
href="#directly-accessible-scripts" name="toc-directly-accessible-scripts"
class="tocxref">12.4 Directly accessible scripts</a></li>

<li class="tocline3"><a id="toc-scripts-alt" href="#scripts-alt"
name="toc-scripts-alt" class="tocxref">12.5 Alternative presentation of
scripts</a></li>

<li class="tocline3"><a id="toc-script-refresh" href="#script-refresh"
name="toc-script-refresh" class="tocxref">12.6 Page updates and new
windows</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-html-index" href="#html-index"
name="toc-html-index" class="tocxref">13 Index of HTML elements and
attributes</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-index-elements" href="#index-elements"
name="toc-index-elements" class="tocxref">Elements</a></li>

<li class="tocline3"><a id="toc-index-attributes" href="#index-attributes"
name="toc-index-attributes" class="tocxref">Attributes</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-References" href="#References"
name="toc-References" class="tocxref">14 References</a></li>

<li class="tocline2"><a id="toc-Resources" href="#Resources"
name="toc-Resources" class="tocxref">15 Resources</a> 

<ul class="toc">
<li class="tocline3"><a id="toc-OtherGuidelines" href="#OtherGuidelines"
name="toc-OtherGuidelines" class="tocxref">15.1 Other guidelines</a></li>

<li class="tocline3"><a id="toc-ToolResources" href="#ToolResources"
name="toc-ToolResources" class="tocxref">15.2 User agents and other
tools</a></li>

<li class="tocline3"><a id="toc-AccessResources" href="#AccessResources"
name="toc-AccessResources" class="tocxref">15.3 Accessibility
resources</a></li>
</ul>
</li>

<li class="tocline2"><a id="toc-Acknowledgments" href="#Acknowledgments"
name="toc-Acknowledgments" class="tocxref">16 Acknowledgments</a></li>
</ul>
</div>

<div class="noprint">
<hr title="Separator from Introduction" />
</div>

<!--NewPage--><!-- this is for html2ps -->
<h2>1 <a id="document" name="document">Document structure and metadata</a></h2>

<p>Content developers should use structural markup and use it according to
specification. Structural elements and attribute (refer to the <a
href="#html-index">index of HTML elements and attributes</a> to identify them)
promote consistency in documents and supply information to other tools (e.g.,
indexing tools, search engines, programs that extract tables to databases,
navigation tools that use heading elements, and automatic translation software
that translates text from one language into another.</p>

<h3>1.1 <a id="document-meta" name="document-meta">Metadata</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-use-metadata"
class="noxref">13.2</a> Provide metadata to add semantic information to pages
and sites. [Priority&nbsp;2]</li>
</ul>

<p>Some structural elements provide information about the document itself. This
is called "metadata" about the document -- metadata is information about data.
Well-crafted metadata can provide important orientation information to users.
HTML elements that provide useful information about a document include:</p>

<h4>1.1.1 <a id="doc-title" name="doc-title">TITLE: The document
title.</a></h4>

<p>Note that the (mandatory) TITLE element, which only appears once in a
document, is different from the "<a href="#adef-title">title</a>" attribute,
which applies to almost every HTML 4.01 element. Content developers should use
the "title" attribute in accordance with the HTML 4.01 specification. For
example, "title" should be used with links to provide information about the
target of the link.</p>

<h4>1.1.2 <a id="title-element" name="title-element">The</a> <a
href="#edef-ADDRESS">ADDRESS</a> element</h4>

<p>This element can be used to provide information about the creator of the
page.</p>

<h4>1.1.3 <a id="meta-element" name="meta-element">The</a> <a
href="#edef-META">META</a> element</h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
class="noxref">7.4</a> Until user agents provide the ability to stop the
refresh, do not create periodically auto-refreshing pages. [Priority&nbsp;2]
,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-auto-forward"
class="noxref">7.5</a> Until user agents provide the ability to stop
auto-redirect, do not use markup to redirect pages automatically. Instead,
configure the server to perform redirects. [Priority&nbsp;2] .</li>
</ul>

<p>This element can specify metadata for a document including keywords, and
information about the author. Please refer to the section on <a
href="http://www.w3.org/TR/WCAG10-CORE-TECHS/#auto-page-refresh">automatic page
refresh</a> for information on why META should <strong>not</strong> be used to
redirect or auto-refresh pages.</p>

<p>The following are <strong>deprecated</strong> HTML examples. The first
changes the user's page at page at regular intervals. Content developers should
<strong>not</strong> use this technique to simulate "push" technology.
Developers cannot predict how much time a user will require to read a page;
premature refresh can disorient users. Content developers should avoid periodic
refresh and allow users to choose when they want the latest information.</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
&lt;META http-equiv="refresh" content="60"&gt;
&lt;BODY&gt;
&lt;P&gt;<em>...Information...</em>
&lt;/BODY&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>The following HTML example (using the META element) forwards the user from
one page to another after a timeout. However, users should <strong>not</strong>
redirect users with this markup since is non-standard, it disorients users, and
it can disrupt a browser's history of visited pages.</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
&lt;HEAD&gt;
&lt;TITLE&gt;Don't use this!&lt;/TITLE&gt;
&lt;META http-equiv="refresh" content="5;
         http://www.example.com/newpage"&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;If your browser supports Refresh,
you'll be transported to our
&lt;A href="http://www.example.com/newpage"&gt;new site&lt;/A&gt;
in 5 seconds, otherwise, select the link manually.
&lt;/BODY&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>1.1.4 <a id="doctype" name="doctype">The !DOCTYPE statement</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-identify-grammar"
class="noxref">3.2</a> Create documents that validate to published formal
grammars. [Priority&nbsp;2]</li>
</ul>

<p>Validating to a published formal grammar and declaring that validation at
the beginning of a document lets the user know that the structure of the
document is sound. It also lets the user agent know where to look for semantics
if it needs to. <a href="http://validator.w3.org/">The W3C Validation
Service</a> validates documents against a <a
href="http://validator.w3.org/sgml-lib/catalog">whole list of published
grammars</a>.</p>

<p>It is preferable to validate to W3C grammars. Refer to the <a
href="http://www.w3.org/TR/WCAG10-CORE-TECHS/#access-reviewed">Technologies
Reviewed for Accessibility</a>.</p>

<!-- <p>We will link to XML techniques document when ready.</p> -->
<h4>1.1.5 The <a id="link-metadata" name="link-metadata" href="#edef-LINK">
LINK</a> element and navigation tools</h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-bundled-version"
class="noxref">13.9</a> Provide information about document collections (i.e.,
documents comprising multiple pages.). [Priority&nbsp;3]</li>
</ul>

<p>Content developers should use the <a href="#edef-LINK">LINK</a> element and
link types (refer to <cite><a href="#ref-HTML4"
title="Link to reference HTML4">[HTML4]</a></cite>, section 6.12) to describe
document navigation mechanisms and organization. Some user agents may
synthesize navigation tools or allow ordered printing of a set of documents
based on such markup.</p>

<div class="example">
<p><strong><a id="example-link" name="example-link">Example.</a></strong></p>

<p>The following <a href="#edef-LINK">LINK</a> elements might be included in
the head of chapter 2 of a book:</p>

<pre>
   &lt;LINK rel="Next" href="chapter3"&gt;
   &lt;LINK rel="Prev" href="chapter1"&gt;
   &lt;LINK rel="Start" href="cover"&gt;
   &lt;LINK rel="Glossary" href="glossary"&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>1.1.6 The <a id="link-alternative-docs" name="link-alternative-docs"
href="#edef-LINK">LINK</a> element and alternative documents</h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
alternative presentation or page. [Priority&nbsp;2]</li>
</ul>

<p>The LINK element may also be used to designate alternative documents.
Browsers should load the alternative page automatically based on the user's
browser type and preferences. For example, use the LINK element as follows:</p>

<div class="example">
<p><strong>Example.</strong></p>

<p>User agents that support LINK will load the alternative page for those users
whose browsers may be identified as supporting "aural","braille", or "tty"
rendering.</p>

<pre>
        &lt;HEAD&gt;
        &lt;TITLE&gt;Welcome to the Virtual Mall!&lt;/TITLE&gt;
        &lt;LINK title="Text-only version"
              rel="alternate"
              href="text_only"
              media="aural, braille, tty"&gt;
        &lt;/HEAD&gt;
        &lt;BODY&gt;&lt;P&gt;...&lt;/BODY&gt;

</pre>

<p class="off">End example.</p>
</div>

<h3>1.2 <a id="grouping" name="grouping">Structural grouping</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-group-information"
class="noxref">12.3</a> Divide large blocks of information into more manageable
groups where natural and appropriate. [Priority&nbsp;2]</li>
</ul>

<p>The following HTML 4.01 mechanisms group content and make it easier to
understand.:</p>

<ul>
<li>Use <a href="#edef-FIELDSET">FIELDSET</a> to <a href="#forms">group form
controls into semantic units</a> and describe the group with the <a
href="#edef-LEGEND">LEGEND</a> element.</li>

<li>Use <a href="#edef-OPTGROUP">OPTGROUP</a> to <a
href="#forms-group-options">organize long lists of menu options into smaller
groups.</a>.</li>

<li><a href="#tables">Use tables for tabular data</a> and describe the table
with <a href="#edef-CAPTION">CAPTION</a>.</li>

<li><a href="#tables">Group table rows and columns</a> with <a
href="#edef-THEAD">THEAD</a>, <a href="#edef-TBODY">TBODY</a>, <a
href="#edef-TFOOT">TFOOT</a>, and <a href="#edef-COLGROUP">COLGROUP</a>.</li>

<li><a href="#lists">Nest lists</a> with <a href="#edef-UL">UL</a>, <a
href="#edef-OL">OL</a>, and <a href="#edef-DL">DL</a>.</li>

<li>Use section headings (<a href="#edef-H1">H1</a> - H6) to create structured
documents and break up long stretches of text. Refer to the following section
for more information.</li>

<li>Break up lines of text into paragraphs (with the <a href="#edef-P">P</a>
element).</li>

<li>Group related links. Refer to the section <a href="#group-bypass">Grouping
and bypassing links</a></li>
</ul>

<p>All of these grouping mechanisms should be used when appropriate and
natural, i.e., when the information lends itself to logical groups. Content
developers should not create groups randomly, as this will confuse all users. 
<!--Link to style section for no spaces in titles ??? --></p>

<h4>1.2.1 <a id="document-headers" name="document-headers">Section
headings</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-logical-headings"
class="noxref">3.5</a> Use header elements to convey document structure and use
them according to specification. [Priority&nbsp;2]</li>
</ul>

<p>Long documents are often divided into a variety of chapters, chapters have
subtopics and subtopics are divided into various sections, sections into
paragraphs, etc. These semantic chunks of information make up the structure of
the document.</p>

<p>Sections should be introduced with the HTML heading elements (<a
href="#edef-H1">H1</a>-H6). Other markup may complement these elements to
improve presentation (e.g., the <a href="#edef-HR">HR</a> element to create a
horizontal dividing line), but visual presentation is not sufficient to
identify document sections.</p>

<p>Since some users skim through a document by navigating its headings, it is
important to use them appropriately to convey document structure. Users should
order heading elements properly. For example, in HTML, H2 elements should
follow H1 elements, H3 elements should follow H2 elements, etc. Content
developers should not "skip" levels (e.g., H1 directly to H3). Do not use
headings to create font effects; use <a
href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-fonts">style sheets to
change font styles</a> for example.</p>

<p>Note that in HTML, heading elements (H1 - H6) only start sections, they
don't contain them as element content. The following HTML markup shows how
style sheets may be used to control the appearance of a heading and the content
that follows:</p>

<div class="example">
<p><strong><a id="example-header" name="example-header">
Example.</a></strong></p>

<pre>
   &lt;HEAD&gt;
   &lt;TITLE&gt;Cooking techniques&lt;/TITLE&gt;
   &lt;STYLE type="text/css"&gt;
      /* Indent heading and following content */
      DIV.section2 { margin-left: 5% }
   &lt;/STYLE&gt;
   &lt;/HEAD&gt;
   &lt;BODY&gt;
   &lt;H1&gt;Cooking techniques&lt;/H1&gt;
   <em>... some text here ...</em>
   &lt;DIV class="section2"&gt;
   &lt;H2&gt;Cooking with oil&lt;/H2&gt;
   <em>... text of the section ...</em>
   &lt;/DIV&gt;

   &lt;DIV class="section2"&gt;
   &lt;H2&gt;Cooking with butter&lt;/H2&gt;
   <em>... text of the section ...</em>
   &lt;/DIV&gt;
</pre>

<p class="off">End example.</p>
</div>

<p><a href="#links">See also the section on links</a>.</p>

<h2>2 <a id="language" name="language">Language information</a></h2>

<h3>2.1 <a id="changes-in-lang" name="changes-in-lang">Identifying changes in
language</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-identify-changes"
class="noxref">4.1</a> Clearly identify changes in the natural language of a
document's text and any text equivalents (e.g., captions).
[Priority&nbsp;1]</li>
</ul>

<p>If you use a number of different languages on a page, make sure that any
changes in language are clearly identified by using the "<a
href="#adef-lang">lang</a>" attribute:</p>

<div class="example">
<p><strong><a id="example-lang" name="example-lang">Example.</a></strong></p>

<pre>
   &lt;P&gt;And with a certain &lt;SPAN lang="fr"&gt;je ne sais quoi&lt;/SPAN&gt;, 
   she entered both the room, and his life, forever. &lt;Q&gt;My name
   is Natasha,&lt;/Q&gt; she said. &lt;Q lang="it"&gt;Piacere,&lt;/Q&gt;
   he replied in impeccable Italian, locking the door.
</pre>

<p class="off">End example.</p>
</div>

<p>Identifying changes in language are important for a number of reasons:</p>

<ol>
<li>Users who are reading the document in braille will be able to substitute
the appropriate control codes (markup) where language changes occur to ensure
that the braille translation software will generate the correct characters
(accented characters, for instance). These control codes also prevent braille
contractions from being generated, which could further confuse the user.
Braille contractions combine commonly used groups of characters that usually
appear in multiple cells into a single cell. For example, "ing" which usually
takes up three cells (one for each character) can be contracted into a single
cell.</li>

<li>Similarly, speech synthesizers that "speak" multiple languages will be able
to generate the text in the appropriate accent with proper pronunciation. If
changes are not marked, the synthesizer will try its best to speak the words in
the primary language it works in. Thus, the French word for car, <span
lang="fr">"voiture"</span> would be pronounced "voter" by a speech synthesizer
that uses English as its primary language.</li>

<li>Users who are unable to translate between languages themselves, will be
able to have unfamiliar languages translated by machine translators.</li>
</ol>

<h3>2.2 <a id="identify-primary-lang" name="identify-primary-lang">Identifying
the primary language</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-identify-lang"
class="noxref">4.3</a> Identify the primary natural language of a document.
[Priority&nbsp;3]</li>
</ul>

<p>It is also good practice to identify the primary language of a document,
either with markup (as shown below) or through HTTP headers.</p>

<div class="example">
<p><strong><a id="example-lang-2" name="example-lang-2">
Example.</a></strong></p>

<pre>
    &lt;HTML lang="fr"&gt;
       ....rest of an HTML document written in French...
    &lt;/HTML&gt;
</pre>

<p class="off">End example.</p>
</div>

<h2>3 <a id="text" name="text">Text markup</a></h2>

<p>The following sections discuss ways to add structure to pieces of text.</p>

<h3>3.1 <a id="text-emphasis" name="text-emphasis">Emphasis</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets"
class="noxref">3.3</a> Use style sheets to control layout and presentation.
[Priority&nbsp;2]</li>
</ul>

<p>The proper HTML elements should be used to mark up emphasis: <a
href="#edef-EM">EM</a> and <a href="#edef-STRONG">STRONG</a>. The <a
href="#edef-B">B</a> and <a href="#edef-I">I</a> elements should not be used;
they are used to create a visual presentation effect. The EM and STRONG
elements were designed to indicate structural emphasis that may be rendered in
a variety of ways (font style changes, speech inflection changes, etc.) 
<!--Could add a
section for SUB/SUP saying don't use for small text --></p>

<h3>3.2 <a id="text-abbr" name="text-abbr">Acronyms and abbreviations</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-expand-abbr"
class="noxref">4.2</a> Specify the expansion of each abbreviation or acronym in
a document where it first occurs. [Priority&nbsp;3]</li>
</ul>

<p>Mark up abbreviations and acronyms with <a href="#edef-ABBR">ABBR</a> and <a
href="#edef-ACRONYM">ACRONYM</a> and use "<a href="#adef-title">title</a>" to
indicate the expansion:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;P&gt;Welcome to the &lt;ACRONYM title="World Wide Web"&gt;WWW&lt;/ACRONYM&gt;!
</pre>

<p class="off">End example.</p>
</div>

<p>This also applies to shortened phrases used as headings for table row or
columns. If a heading is already abbreviated provide the expansion in ABBR. If
a heading is long, you may wish to provide an abbreviation, as described in <a
href="#data-tables">Data Tables</a>.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
  ...
  &lt;TH&gt;First name&lt;/TH&gt;
  &lt;TH&gt;&lt;ABBR title="Social Security Number"&gt;SS#&lt;/ABBR&gt;
  ...
</pre>

<p class="off">End example.</p>
</div>

<h3>3.3 <a id="text-quotes" name="text-quotes">Quotations</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-quotes" class="noxref">
3.7</a> Mark up quotations. Do not use quotation markup for formatting effects
such as indentation. [Priority&nbsp;2]</li>
</ul>

<p>The <a href="#edef-Q">Q</a> and <a href="#edef-BLOCKQUOTE">BLOCKQUOTE</a>
elements mark up inline and block quotations, respectively.</p>

<div class="example">
<p><strong>Example.</strong></p>

<p>This example marks up a longer quotation with <a href="#edef-BLOCKQUOTE">
BLOCKQUOTE</a>:</p>

<pre>
   &lt;BLOCKQUOTE cite="http://www.example.com/loveslabourlost"&gt;
     &lt;P&gt;Remuneration! O! that's the Latin word for three farthings.
        --- William Shakespeare (Love's Labor Lost).
     &lt;/P&gt;
   &lt;/BLOCKQUOTE&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>3.4 <a id="text-markup" name="text-markup">Markup and style sheets rather
than images: The example of math</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-use-markup"
class="noxref">3.1</a> When an appropriate markup language exists, use markup
rather than images to convey information. [Priority&nbsp;2]</li>
</ul>

<p>Using markup (and style sheets) where possible rather than images (e.g., a
mathematical equation) promotes accessibility for the following reasons:</p>

<ul>
<li>Text may be magnified or interpreted as speech or braille.</li>

<li>Search engines can use text information.</li>
</ul>

<p>As an example, consider these techniques for putting mathematics on the
Web:</p>

<ul>
<li>Ensure that users know what variables represent, for example, in the
equation "F = m * a", indicate that F= Force, m = mass, a = acceleration.</li>

<li>For straightforward equations, use characters, as in "x + y = z"</li>

<li>For more complex equations, mark them up with MathML (<cite><a
href="#ref-MATHML" title="Link to reference MATHML">[MATHML]</a></cite>) or
TeX. <strong>Note.</strong> MathML can be used to create very accessible
documents but currently is not as widely supported or used as TeX.</li>

<li>Provide a text description of the equation and, where possible, use
character entity references to create the mathematical symbols. A text
equivalent must be provided if the equation is represented by one or more
images.</li>
</ul>

<p>TeX is commonly used to create technical papers which are then converted to
HTML for publication on the Web. However, converters tend to generate images,
use deprecated markup, and use tables for layout. Consequently, content
providers should:</p>

<ol>
<li>Make the original TeX (or LaTeX) document available on the Web. There is a
system called "AsTeR" (<cite><a href="#ref-ASTER"
title="Link to reference ASTER">[ASTER]</a></cite>) that can create an auditory
rendition of TeX and LaTeX documents. Also, IBM has a plug-in for Netscape and
Internet Explorer that reads TeX/LaTeX documents and some of MathML (refer to
<cite><a href="#ref-HYPERMEDIA" title="Link to reference HYPERMEDIA">
[HYPERMEDIA]</a></cite>). <strong>Note.</strong> These tools work primarily in
the English environment and may not work so well with speech synthesizers whose
primary language is not English.</li>

<li>Ensure that the HTML created by the conversion process is accessible.
Provide a single description of the equation (rather than "alt" text on every
generated image as there may be small images for bits and pieces of the
equation).</li>
</ol>

<h3>3.5 <a id="misc-markup" name="misc-markup">Eight other structural elements
(to identify citations, code fragments, deleted text, and others)</a></h3>

<p>The HTML 4.01 specification defines the following structural elements for
miscellaneous markup needs:</p>

<dl>
<dt><a href="#edef-CITE">CITE</a></dt>

<dd>Contains a citation or a reference to other sources.</dd>

<dt><a href="#edef-DFN">DFN</a></dt>

<dd>Indicates that this is the defining instance of the enclosed term.</dd>

<dt><a href="#edef-CODE">CODE</a></dt>

<dd>Designates a fragment of computer code.</dd>

<dt><a href="#edef-SAMP">SAMP</a></dt>

<dd>Designates sample output from programs, scripts, etc.</dd>

<dt><a href="#edef-KBD">KBD</a></dt>

<dd>Indicates text to be entered by the user.</dd>

<dt><a href="#edef-VAR">VAR</a></dt>

<dd>Indicates an instance of a variable or program argument.</dd>

<dt><a href="#edef-INS">INS</a></dt>

<dd>Indicates text inserted into a document.</dd>

<dt><a href="#edef-DEL">DEL</a></dt>

<dd>Indicates text deleted from a document.</dd>
</dl>

<h2>4 <a id="lists" name="lists">Lists</a></h2>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-list-structure"
class="noxref">3.6</a> Mark up lists and list items properly.
[Priority&nbsp;2]</li>
</ul>

<p>The HTML list elements <a href="#edef-DL">DL</a>, <a href="#edef-UL">UL</a>,
and <a href="#edef-OL">OL</a> should only be used to create lists, not for
formatting effects such as indentation. Refer to information on <a
href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment">CSS and tables
for layout</a> in the CSS Techniques <cite><a href="#ref-WCAG10-CSS-TECHNIQUES"
title="Link to reference WCAG10-CSS-TECHNIQUES">
[WCAG10-CSS-TECHNIQUES]</a></cite>.</p>

<!-- There used to be a technique here. Is it gone? -IJ -->
<p><a id="order-lists" name="order-lists">Ordered lists help non-visual users
navigate.</a> Non-visual users may "get lost" in lists, especially in nested
lists and those that do not indicate the specific nest level for each list
item. Until user agents provide a means to identify list context clearly (e.g.,
by supporting the ':before' pseudo-element in CSS2), content developers should
include contextual clues in their lists.</p>

<p>For numbered lists, compound numbers are more informative than simple
numbers. Thus, a list numbered "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1," provides more
context than the same list without compound numbers, which might be formatted
as follows:</p>

<pre>
1.
  1.
  2.
    1.
  3.
2.
  1.
</pre>

<p>and would be spoken as "1, 1, 2, 1, 2, 3, 2, 1", conveying no information
about list depth.</p>

<p><cite><a href="#ref-CSS1" title="Link to reference CSS1">[CSS1]</a></cite>
and <cite><a href="#ref-CSS2" title="Link to reference CSS2">[CSS2]</a></cite>
allow users to control number styles (for all lists, not just ordered) through
user style sheets.</p>

<div class="css-example">
<p><strong>Example.</strong></p>

<p>The following CSS2 style sheet shows how to specify compound numbers for
nested lists created with either UL or OL elements. Items are numbered as "1",
"1.1", "1.1.1", etc.</p>

<pre>
&lt;STYLE type="text/css"&gt;
   UL, OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, "."); counter-increment: item }
&lt;/STYLE&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Until either CSS2 is widely supported or user agents allow users to control
rendering of lists through other means, authors should consider providing
contextual clues in unnumbered nested lists. Non-visual users may have
difficulties knowing where a list begins and ends and where each list item
starts. For example, if a list entry wraps to the next line on the screen, it
may appear to be two separate items in the list. This may pose a problem for
legacy screen readers.</p>

<h3>4.1 <a id="list-bullets" name="list-bullets">Use style sheets to change
list bullets</a></h3>

<p>To change the "bullet" style of unordered list items created with the <a
href="#edef-LI">LI</a> element, use style sheets. In CSS, it is possible to
specify a fallback bullet style (e.g., 'disc') if a bullet image cannot be
loaded.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;HEAD&gt;
&lt;TITLE&gt;Using style sheets to change bullets&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
   UL { list-style: url(star.gif) disc }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;UL&gt;
   &lt;LI&gt;Audrey
   &lt;LI&gt;Laurie
   &lt;LI&gt;Alice
&lt;/UL&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>To further ensure that users understand differences between list items
indicated visually, content developers should provide a text label before or
after the list item phrase:</p>

<div class="example">
<p><strong>Example.</strong></p>

<p>In this example, new information is communicated through text ("New"), font
style (bold), and color (yellow bullet, red text on yellow background).</p>

<pre>
&lt;HEAD&gt;
&lt;TITLE&gt;Bullet styles example&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
   .newtxt { font-weight: bold;
             color: red;
             background-color: yellow }
   .newbullet { list-style : url(yellow.gif) disc }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;UL&gt;
   &lt;LI class="newbullet"&gt;Roth IRA &lt;SPAN class="newtext"&gt;New&lt;/SPAN&gt;&lt;/LI&gt;
   &lt;LI&gt; 401(k)&lt;/LI&gt;
&lt;/UL&gt;
&lt;/BODY&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>4.1.1 <a id="list-images" name="list-images">Images used as
bullets</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>
</ul>

<p>Avoid using images as bullets in definition lists created with <a
href="#edef-DL">DL</a>, <a href="#edef-DT">DT</a>, and <a href="#edef-DD">
DD</a>. However, if this method is used, be sure to provide a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> for the images.</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
&lt;HEAD&gt;
&lt;TITLE&gt;Deprecated example using image in DL lists&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;DL&gt;
   &lt;DD&gt;&lt;IMG src="star.gif" alt="* "&gt;Audrey
   &lt;DD&gt;&lt;IMG src="star.gif" alt="* "&gt;Laurie
   &lt;DD&gt;&lt;IMG src="star.gif" alt="* "&gt;Alice
&lt;/DL&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Content developers should avoid list styles where bullets provide additional
(visual) information. However, if this is done, be sure to provide a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> describing meaning of the bullet:</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
&lt;DL&gt;
&lt;DD&gt;&lt;IMG src="red.gif" alt="New:"&gt;Roth IRA&lt;/DD&gt;
&lt;DD&gt;&lt;IMG src="yellow.gif" alt="Old:"&gt;401(k)&lt;/DD&gt;
&lt;/DL&gt;
</pre>

<p class="off">End example.</p>
</div>

<h2>5 <a id="tables" name="tables">Tables</a></h2>

<p>This section discusses the accessibility of tables and elements that one can
put in a <a href="#edef-TABLE">TABLE</a> element. Two types of tables are
discussed: tables used to organize data, and tables used to create a visual
layout of the page.</p>

<h3>5.1 <a id="data-tables" name="data-tables">Tables of data</a></h3>

<p>Content developers may make HTML 4.01 data tables more accessible in a
number of ways:</p>

<ul>
<li>Providing summary information</li>

<li>Identifying row and column information</li>
</ul>

<h4>5.1.1 <a id="table-summary-info" name="table-summary-info">Providing
summary information</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-summaries"
class="noxref">5.5</a> Provide summaries for tables. [Priority&nbsp;3]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-abbreviate-labels"
class="noxref">5.6</a> Provide abbreviations for header labels.
[Priority&nbsp;3]</li>
</ul>

<ul>
<li>Provide a caption via the <a href="#edef-CAPTION">CAPTION</a> element. A
table caption describes the nature of the table in one to three sentences. Two
examples: 

<ol>
<li>"Cups of coffee consumed by each senator."</li>

<li>"Who spends the most on pollution cleanup?"</li>
</ol>

A caption may not always be necessary.</li>

<li>If a CAPTION is not provided, use the "title" attribute on the TABLE
element to describe the nature of the table in a few words.</li>

<li>Provide a summary via the "<a href="#adef-summary">summary</a>" attribute.
Summaries are especially useful for non-visual readers. A summary of the
relationships among cells is especially important for tables with nested
headings, cells that span multiple columns or rows, or other relationships that
may not be obvious from analyzing the structure of the table but that may be
apparent in a visual rendering of the table. A summary may also describe how
the table fits into the context of the current document. If no caption is
provided, it is even more critical to provide a summary. Two examples: 

<ol>
<li>"This table charts the number of cups of coffee consumed by each senator,
the type of coffee (decaf or regular), and whether taken with sugar."</li>

<li>"Total required by pollution control standards as of January 1, 1971.
Commercial category includes stores, insurance companies and banks. The table
is divided into two columns. The left-hand column is 'Total investment required
in billions of dollars'. The right--hand column is 'Spending' and is divided
into three sub-columns. The first sub-column is titled '1970 actual in millions
of dollars', the second is '1971 planned in millions of dollars', and the third
is 'Percent change, 1970 versus 1971.' The rows are industries." [NBA,
1996].</li>
</ol>
</li>

<li>Provide terse substitutes for header labels with the "<a
href="#adef-abbr">abbr</a>" attribute on TH. These will be particularly useful
for future speaking technologies that can read row and column labels for each
cell. Abbreviations cut down on repetition and reading time.</li>
</ul>

<!-- p>@@separate out the examples?</p -->
<h4>5.1.2 <a id="identifying-table-rows-columns"
name="identifying-table-rows-columns">Identifying rows and column
information</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-headers"
class="noxref">5.1</a> For data tables, identify row and column headers.
[Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-structure"
class="noxref">5.2</a> For data tables that have two or more logical levels of
row or column headers, use markup to associate data cells and header cells.
[Priority&nbsp;1]</li>
</ul>

<ul>
<li>Identify structural groups of rows (<a href="#edef-THEAD">THEAD</a> for
repeated table headers, <a href="#edef-TFOOT">TFOOT</a> for repeated table
footers, and <a href="#edef-TBODY">TBODY</a> for other groups of rows) and
groups of columns (<a href="#edef-COLGROUP">COLGROUP</a> and <a
href="#edef-COL">COL</a>).</li>

<li>Label table elements with the "<a href="#adef-scope">scope</a>", "<a
href="#adef-headers">headers</a>", and "<a href="#adef-axis">axis</a>"
attributes so that future browsers and assistive technologies will be able to
select data from a table by filtering on categories.</li>

<li>Do not use <a href="#edef-PRE">PRE</a> to create a tabular layout of text
-- use the TABLE element so that assistive technologies may recognize that it
is a table.</li>

<li>For information about table headers, refer to the table header algorithm
and discussion in the HTML 4.01 Recommendation (<cite><a href="#ref-HTML4"
title="Link to reference HTML4">[HTML4]</a></cite>, section 11.4.3).</li>
</ul>

<div class="example"><strong>Example.</strong> 

<p>This example shows how to associate data cells (created with <a
href="#edef-TD">TD</a>) with their corresponding headers by means of the "<a
href="#adef-headers">headers</a>" attribute. The "headers" attribute specifies
a list of header cells (row and column labels) associated with the current data
cell. This requires each header cell to have an "id" attribute.</p>

<pre>
   &lt;TABLE border="1" 
          summary="This table charts the number of
                   cups of coffee consumed by each senator,  
                   the type of coffee (decaf or regular),
                   and whether taken with sugar."&gt;
     &lt;CAPTION&gt;Cups of coffee consumed by each senator&lt;/CAPTION&gt;
     &lt;TR&gt;   
         &lt;TH id="header1"&gt;Name&lt;/TH&gt;
         &lt;TH id="header2"&gt;Cups&lt;/TH&gt;     
         &lt;TH id="header3" abbr="Type"&gt;Type of  Coffee&lt;/TH&gt;   
         &lt;TH id="header4"&gt;Sugar?&lt;/TH&gt;
     &lt;TR&gt;  
         &lt;TD headers="header1"&gt;T. Sexton&lt;/TD&gt;  
         &lt;TD headers="header2"&gt;10&lt;/TD&gt;
         &lt;TD headers="header3"&gt;Espresso&lt;/TD&gt;
         &lt;TD headers="header4"&gt;No&lt;/TD&gt;  
     &lt;TR&gt;  
         &lt;TD headers="header1"&gt;J. Dinnen&lt;/TD&gt; 
         &lt;TD headers="header2"&gt;5&lt;/TD&gt;
         &lt;TD headers="header3"&gt;Decaf&lt;/TD&gt;
        &lt;TD headers="header4"&gt;Yes&lt;/TD&gt;
  &lt;/TABLE&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>A speech synthesizer might render this tables as follows:</p>

<pre>
  Caption: Cups of coffee consumed by each senator
  Summary: This table charts the number of cups of coffee
           consumed by each senator, the type of coffee
          (decaf or regular), and whether taken with sugar.
  Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
  Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
</pre>

<p>A visual user agent might render this table as follows:</p>

<p><img src="techimages/coffee-table.gif"
alt="Illustration of coffee table rendering"
longdesc="techimages/coffee-table-longdesc.html" /> <a
id="coffee-table-longdesc" name="coffee-table-longdesc" rel="Alternate"
href="techimages/coffee-table-longdesc.html">[Description of coffee
table]</a></p>

<p>The next example associates the same header (<a href="#edef-TH">TH</a>) and
data (<a href="#edef-TD">TD</a>) cells as before, but this time uses the "<a
href="#adef-scope">scope</a>" attribute rather than "<a
href="#adef-headers">headers</a>". "Scope" must have one of the following
values: "row", "col", "rowgroup", or "colgroup." Scope specifies the set of
data cells to be associated with the current header cell. This method is
particularly useful for simple tables. It should be noted that the spoken
rendering of this table would be identical to that of the previous example. A
choice between the "headers" and "scope" attributes is dependent on the
complexity of the table. It does not affect the output so long as the
relationships between header and data cells are made clear in the markup.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;TABLE border="1" 
          summary="This table charts ..."&gt;  
      &lt;CAPTION&gt;Cups of coffee consumed by each senator&lt;/CAPTION&gt;
      &lt;TR&gt;  
           &lt;TH scope="col"&gt;Name&lt;/TH&gt;
           &lt;TH scope="col"&gt;Cups&lt;/TH&gt;
           &lt;TH scope="col" abbr="Type"&gt;Type of Coffee&lt;/TH&gt;  
           &lt;TH scope="col"&gt;Sugar?&lt;/TH&gt;
     &lt;TR&gt;  
           &lt;TD&gt;T. Sexton&lt;/TD&gt;  &lt;TD&gt;10&lt;/TD&gt;
           &lt;TD&gt;Espresso&lt;/TD&gt;   &lt;TD&gt;No&lt;/TD&gt;
     &lt;TR&gt;  
           &lt;TD&gt;J. Dinnen&lt;/TD&gt;  &lt;TD&gt;5&lt;/TD&gt;
           &lt;TD&gt;Decaf&lt;/TD&gt;       &lt;TD&gt;Yes&lt;/TD&gt;
  &lt;/TABLE&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>The following example shows how to create categories within a table using
the "<a href="#adef-axis">axis</a>" attribute.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;TABLE border="1"&gt;
     &lt;CAPTION&gt;Travel Expense Report&lt;/CAPTION&gt;
     &lt;TR&gt;  
          &lt;TH&gt;&lt;/TH&gt;  
          &lt;TH id="header2" axis="expenses"&gt;Meals
          &lt;TH id="header3" axis="expenses"&gt;Hotels
          &lt;TH id="header4" axis="expenses"&gt;Transport
          &lt;TD&gt;subtotals&lt;/TD&gt;    
     &lt;TR&gt;  
          &lt;TH id="header6" axis="location"&gt;San Jose
          &lt;TH&gt; &lt;TH&gt; &lt;TH&gt; &lt;TD&gt; 
     &lt;TR&gt;  
         &lt;TD id="header7" axis="date"&gt;25-Aug-97
         &lt;TD headers="header6 header7 header2"&gt;37.74
         &lt;TD headers="header6 header7 header3"&gt;112.00
         &lt;TD headers="header6 header7 header4"&gt;45.00
         &lt;TD&gt;
     &lt;TR&gt;  
         &lt;TD id="header8" axis="date"&gt;26-Aug-97
         &lt;TD headers="header6 header8 header2"&gt;27.28
         &lt;TD headers="header6 header8 header3"&gt;112.00
         &lt;TD headers="header6 header8 header4"&gt;45.00 
         &lt;TD&gt;
     &lt;TR&gt;  
         &lt;TD&gt;subtotals 
         &lt;TD&gt;65.02
         &lt;TD&gt;224.00
         &lt;TD&gt;90.00
         &lt;TD&gt;379.02
     &lt;TR&gt;   
         &lt;TH id="header10" axis="location"&gt;Seattle
         &lt;TH&gt; &lt;TH&gt; &lt;TH&gt; &lt;TD&gt;
     &lt;TR&gt;  
         &lt;TD id="header11" axis="date"&gt;27-Aug-97
         &lt;TD headers="header10 header11 header2"&gt;96.25
         &lt;TD headers="header10 header11 header3"&gt;109.00
         &lt;TD headers="header10 header11 header4"&gt;36.00
         &lt;TD&gt;
     &lt;TR&gt;  
         &lt;TD id="header12" axis="date"&gt;28-Aug-97
         &lt;TD headers="header10 header12 header2"&gt;35.00
         &lt;TD headers="header10 header12 header3"&gt;109.00
         &lt;TD headers="header10 header12 header4"&gt;36.00 
         &lt;TD&gt;
     &lt;TR&gt;  
         &lt;TD&gt;subtotals
         &lt;TD&gt;131.25
         &lt;TD&gt;218.00
         &lt;TD&gt;72.00
         &lt;TD&gt;421.25
     &lt;TR&gt;   
         &lt;TH&gt;Totals
         &lt;TD&gt;196.27
         &lt;TD&gt;442.00
         &lt;TD&gt;162.00
         &lt;TD&gt;800.27
   &lt;/TABLE&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>This table lists travel expenses at two locations: San Jose and Seattle, by
date, and category (meals, hotels, and transport). The following image shows
how a visual user agent might render it. <a id="travel-report-longdesc"
name="travel-report-longdesc" rel="Alternate"
href="techimages/travel-report-longdesc.html">[Description of travel
table]</a></p>

<p><img src="techimages/table1.gif"
alt="Travel Expense Report table as rendered by a visual user agent."
longdesc="techimages/travel-report-longdesc.html" /></p>

<h3>5.2 <a id="tables-layout" name="tables-layout">Tables for layout</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-table-for-layout"
class="noxref">5.3</a> Do not use tables for layout unless the table makes
sense when linearized. Otherwise, if the table does not make sense, provide an
alternative equivalent (which may be a linearized version).
[Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-table-layout"
class="noxref">5.4</a> If a table is used for layout, do not use any structural
markup for the purpose of visual formatting. [Priority&nbsp;2]</li>
</ul>

<p>Authors should use style sheets for <a
href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment">layout and
positioning</a>. However, when it is necessary to use a table for layout, the
table must linearize in a readable order. When a table is linearized, the
contents of the cells become a series of paragraphs (e.g., down the page) one
after another. Cells should make sense when read in row order and should
include structural elements (that create paragraphs, headings, lists, etc.) so
the page makes sense after linearization.</p>

<p>Also, when using tables to create a layout, do not use structural markup to
create visual formatting. For example, the TH (table header) element, is
usually displayed visually as centered, and bold. If a cell is not actually a
header for a row or column of data, use style sheets or formatting attributes
of the element.</p>

<h3>5.3 <a id="wrapped-text" name="wrapped-text">Linearizing tables</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-linear-tables"
class="noxref">10.3</a> Until user agents (including assistive technologies)
render side-by-side text correctly, provide a linear text alternative (on the
current page or some other) for <em>all</em> tables that lay out text in
parallel, word-wrapped columns. [Priority&nbsp;3]</li>
</ul>

<p>Tables used to lay out pages where cell text wraps pose problems for older
screen readers that do not interpret the source HTML or browsers that do not
allow navigation of individual table cells. These screen readers will read
across the page, reading sentences on the same row from different columns as
one sentence.</p>

<p>For example, if a table is rendered like this on the screen:</p>

<pre>
There is a 30% chance of               Classes at the University of Wisconsin 
rain showers this morning, but they    will resume on September 3rd. 
should stop before the weekend.
</pre>

<p>This might be read by a screen reader as:</p>

<pre>
There is a 30% chance of Classes at the University of Wisconsin
rain showers this morning, but they will resume on September 3rd. 
should stop before the weekend.
</pre>

<!-- p>Screen readers that read the source HTML will recognize the
structure of each cell, but for older screen readers, content
developers may minimize the risk of word wrapping by limiting the
amount of text in each cell. Also, the longest chunks of text should
all be in the last column (rightmost for left-to-right tables). This
way, if they wrap, they will still be read coherently. Content
developers should test tables for wrapping with a browser window
dimension of "640x480".</p -->
<!-- P>Since table markup is structural, and we suggest separating structure
from presentation, we recommend using style sheets to create layout,
alignment, and presentation effects.  Thus, the two columns in the
above example could have been created using style sheets.  Please refer
to the section on style sheets for more information.</p -->
<p>It is usually very simple to linearize a table used to layout a page -
simply strip the table markup from the table. There are several tools that do
this, and it is becoming more common for screen readers and some browsers to
linearize tables.</p>

<p>However, linearizing <a href="#data-tables">data tables</a> requires a
different strategy. Since data cells rely on the information provided by
surrounding and header cells, the relationship information that is available
visually needs to be translated into the linear table.</p>

<p>For example, specify the column layout order. The natural language writing
direction may affect column layout and thus the order of a linearized table.
The "<a href="#adef-dir">dir</a>" attribute specifies column layout order
(e.g., dir="rtl" specifies right-to-left layout).</p>

<!-- p>@@also the case for layout tables?</p --><!-- p>@@example</p -->
<!-- p> @@again, there are tools to help produce linearized versions of data tables.
We will provide a link </p -->
<p>This markup will also help browsers linearize tables (also called table
"serialization"). A row-based linear version may be created by reading the row
header, then preceding each cell with the cell's column header. Or, the
linearization might be column-based. Future browsers and assistive technologies
will be able to automatically translate tables into linear sequences or
navigate a table cell by cell if data is labeled appropriately. The WAI
Evaluation and Repair working group is tracking the progress of tools as well
as developing their own that will allow users to linearize or navigate tables
cell by cell. Refer to <cite><a href="#ref-WAI-ER"
title="Link to reference WAI-ER">[WAI-ER]</a></cite>.</p>

<p><span class="quicktest">Quicktest!</span> To get a better understanding of
how a screen reader would read a table, run a piece of paper down the page and
read your table line by line.</p>

<h3>5.4 <a id="bc-tables" name="bc-tables">Backward compatibility issues for
tables</a></h3>

<!-- p>@@checkpoint that this can fit under?</p -->
<p>In HTML 3.2 browsers, the rows of a <a href="#edef-TFOOT">TFOOT</a> element
will appear before the table body. 
<!-- Used to say "before the BODY of the document" which
I don't think is true. -IJ --></p>

<h2>6 <a id="links" name="links">Links</a></h2>

<h3>6.1 <a id="link-text" name="link-text">Link text</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-meaningful-links"
class="noxref">13.1</a> Clearly identify the target of each link.
[Priority&nbsp;2]</li>
</ul>

<p>Good link text should not be overly general; don't use "click here." Not
only is this phrase device-dependent (it implies a pointing device) it says
nothing about what is to be found if the link if followed. Instead of "click
here", link text should indicate the nature of the link target, as in "more
information about sea lions" or "text-only version of this page". Note that for
the latter case (and other format- or language-specific documents), content
developers are encouraged to use <a
href="http://www.w3.org/TR/WCAG10-CORE-TECHS/#content-negotiation">content
negotiation</a> instead, so that users who prefer text versions will have them
served automatically.</p>

<p>In addition to clear link text, content developers may specify a value of
the "title" attribute that clearly and accurately describes the target of the
link.</p>

<p><a id="link-consistent" name="link-consistent">If more than one link on a
page shares the same link text, all those links should point to the same
resource.</a> Such consistency will help page design as well as
accessibility.</p>

<p>If two or more links refer to different targets but share the same link
text, distinguish the links by specifying a different value for the "<a
href="#adef-title">title</a>" attribute of each <a href="#edef-A">A</a>
element.</p>

<p>"Auditory users" -- people who are blind, have difficulty seeing, or who are
using devices with small or no displays -- are unable to scan the page quickly
with their eyes. To get an overview of a page or to quickly find a link, these
users will often tab from one link to the next or review a list of available
links on a page.</p>

<p>Thus, for a series of related links, include introductory information in the
first link, then distinguishing information in the links that follow. This will
provide context information for users reading them in sequence.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
  &lt;A href="my-doc.html"&gt;My document is available in HTML&lt;/A&gt;,
  &lt;A href="my-doc.pdf" title="My document in PDF"&gt;PDF&lt;/A&gt;,
  &lt;A href="my-doc.txt" title="My document in text"&gt;plain text&lt;/A&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>6.1.1 <a id="link-text-images" name="link-text-images">Text for images used
as links</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>
</ul>

<p>When an image is used as the content of a link, specify a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> for the image.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
  &lt;A href="routes.html"&gt;
     &lt;IMG src="topo.html" 
          alt="Current routes at Boulders Climbing Gym"&gt;
  &lt;/A&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Or, if you provide link text, use a space as the "alt" attribute value of
the IMG element. Note that this text will appear on the page next to the
image.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
  &lt;A href="routes.html"&gt;
     &lt;IMG src="topo.html" alt=" "&gt;
        Current routes at Boulders Climbing Gym
  &lt;/A&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>6.2 <a id="group-bypass" name="group-bypass">Grouping and bypassing
links</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links"
class="noxref">13.6</a> Group related links, identify the group (for user
agents), and, until user agents do so, provide a way to bypass the group.
[Priority&nbsp;3]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-divide-links"
class="noxref">10.5</a> Until user agents (including assistive technologies)
render adjacent links distinctly, include non-link, printable characters
(surrounded by spaces) between adjacent links. [Priority&nbsp;3]</li>
</ul>

<p>When links are grouped into logical sets (for example, in a navigation bar
that appears on every page in a site) they should be marked up as a unit.
Navigation bars are usually the first thing someone encounters on a page. For
users with speech synthesizers, this means having to hear a number of links on
every page before reaching the interesting content of a page. There are several
ways to allow users to bypass groups of links (as users with vision do when
they see the same set on each page):</p>

<ul>
<li>Include a link that allows users to skip over the set of navigation links. 
<!-- LI>Use the HTML 4.01 "<a href="#adef-tabindex">tabindex</a>"
attribute to allow users to jump to an anchor after the set of
navigation links. This attribute is not yet widely supported. </li --></li>

<li>Provide a style sheet that allows users to hide the set of navigation
links.</li>

<li>Use the HTML 4.01 MAP element to group links, then identify the group with
the "<a href="#adef-title">title</a>" attribute.</li>
</ul>

<p>In the future, user agents may allow users to skip over elements such as
navigation bars.</p>

<div class="example">
<p><strong>Example.</strong></p>

<p>In this example, the <a href="#edef-MAP">MAP</a> element groups a set of
links, the "title" attribute identifies it as a navigation bar , 
<!-- "<a href="#adef-tabindex">tabindex</a>" is set
on an anchor following the group, --> and a link at the beginning of the group
links to the anchor after the group. Also, note that the links are separated by
non-link, printable characters (surrounded by spaces).</p>

<pre>
   &lt;BODY&gt;     
     &lt;MAP title="Navigation Bar"&gt;    
       &lt;P&gt;
       [&lt;A href="#how"&gt;Bypass navigation bar&lt;/A&gt;]
       [&lt;A href="home.html"&gt;Home&lt;/A&gt;]
       [&lt;A href="search.html"&gt;Search&lt;/A&gt;]
       [&lt;A href="new.html"&gt;New and highlighted&lt;/A&gt;]
       [&lt;A href="sitemap.html"&gt;Site map&lt;/A&gt;]
       &lt;/P&gt;
     &lt;/MAP&gt;     
     &lt;H1&gt;&lt;A name="how"&gt;How to use our site&lt;/A&gt;&lt;/H1&gt;
   &lt;!-- content of page --&gt;     
   &lt;/BODY&gt;     
</pre>

<p class="off">End example.</p>
</div>

<h3>6.3 <a id="link-accesskey" name="link-accesskey">Keyboard access</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-tab-order" class="noxref">
9.4</a> Create a logical tab order through links, form controls, and objects.
[Priority&nbsp;3]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-shortcuts"
class="noxref">9.5</a> Provide keyboard shortcuts to important links (including
those in client-side image maps), form controls, and groups of form controls.
[Priority&nbsp;3]</li>
</ul>

<p>Keyboard access to active elements of a page is important for many users who
cannot use a pointing device. User agents may include features that allow users
to bind keyboard strokes to certain actions. HTML 4.01 allows content
developers to specify keyboard shortcuts in documents via the "<a
href="#adef-accesskey">accesskey</a>" attribute.</p>

<div class="example">
<p><strong>Example.</strong></p>

<p>In this example, if the user activates the "C" key, the link will be
followed.</p>

<pre>
   &lt;A accesskey="C" href="doc.html" hreflang="en"
      title="XYZ company home page"&gt;
         XYZ company home page&lt;/A&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Note: Until user agents provide an overview of which key bindings are
available, provide information on the key bindings.</p>

<h3>6.4 <a id="anchors-targets" name="anchors-targets">Anchors and
targets</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
class="noxref">10.1</a> Until user agents allow users to turn off spawned
windows, do not cause pop-ups or other windows to appear and do not change the
current window without informing the user. [Priority&nbsp;2]</li>
</ul>

<!-- p>@@include info about using target attribute on A to generate new 
windows. test that an unknown target causes a new window to open.</p -->
<h2>7 <a id="images" name="images">Images and image maps</a></h2>

<p>The following sections discuss accessibility of images (including simple
animations such as GIF animations) and image maps.</p>

<p>For information about math represented as images, refer to the section on <a
href="#text-markup">using text markup and style sheets rather than
images</a>.</p>

<h3>7.1 <a id="image-text-equivalent" name="image-text-equivalent">Short text
equivalents for images ("alt-text")</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video. [Priority&nbsp;1]
.</li>
</ul>

<p>When using <a href="#edef-IMG">IMG</a>, specify a short <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> with the "<a href="#adef-alt">alt</a>" attribute. <strong>
Note.</strong> The value of this attribute is referred to as "alt-text".</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;IMG src="magnifyingglass.gif" alt="Search"&gt;     
</pre>

<p class="off">End example.</p>
</div>

<p><a id="object-alt" name="object-alt">When using</a> <a href="#edef-OBJECT">
OBJECT</a>, specify a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> in the body of the OBJECT element:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;OBJECT data="magnifyingglass.gif" type="image/gif"&gt;
      Search 
   &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>7.2 <a id="long-descriptions" name="long-descriptions">Long descriptions of
images</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>
</ul>

<p>When a short text equivalent does not suffice to adequately convey the
function or role of an image, provide additional information in a file
designated by the "<a href="#adef-longdesc">longdesc</a>" attribute:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;IMG src="97sales.gif" alt="Sales for 1997" 
        longdesc="sales97.html"&gt;
</pre>

<p>In sales97.html:</p>

<blockquote>
<p>A chart showing how sales in 1997 progressed. The chart<br />
is a bar-chart showing percentage increases in sales<br />
by month. Sales in January were up 10% from December 1996,<br />
sales in February dropped 3%, ..</p>
</blockquote>

<p class="off">End example.</p>
</div>

<p><a id="img-dlink" name="img-dlink">For user agents that don't support
"longdesc",</a> provide a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-d-link">description link</a> as
well next to the graphic:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html"&gt;
   &lt;A href="sales.html" title="Description of 1997 sales figures"&gt;[D]&lt;/A&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>When using OBJECT, specify longer text equivalent within the element's
content:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;OBJECT data="97sales.gif" type="image/gif"&gt;
          Sales in 1997 were down subsequent to our
          &lt;A href="anticipated.html"&gt;anticipated 
          purchase&lt;/A&gt; ...
   &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Note that OBJECT content, unlike "alt" text, can include markup. Thus,
content developers can provide a link to additional information from within the
OBJECT element:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;OBJECT data="97sales.gif" type="image/gif"&gt;
          Chart of our Sales in 1997.
          A &lt;A href="desc.html"&gt;textual description&lt;/A&gt; is available. 
  &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>7.2.1 <a id="img-dlink-invis" name="img-dlink-invis">Invisible
d-links</a></h4>

<p><strong>Note. Invisible d-links are deprecated in favor of the "longdesc"
attribute</strong>.</p>

<p>An invisible <a href="http://www.w3.org/TR/WCAG10-TECHS/#def-d-link">
d-link</a> is a small (1-pixel) or transparent image whose "<a
href="#adef-alt">alt</a>" attribute value is "D-link" or "D" and is part of the
content of an <a href="#edef-A">A</a> element. Like other d-links, it refers to
a text equivalent of the associated image. Like other links, users can tab to
it. Invisible d-links thus provide a (temporary) solution for designers who
wish to avoid visible d-links for stylistic reasons.</p>

<h3>7.3 <a id="ascii-art" name="ascii-art">Ascii art</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-skip-over-ascii"
class="noxref">13.10</a> Provide a means to skip over multi-line ASCII art.
[Priority&nbsp;3]</li>
</ul>

<p><a id="avoid-ascii-art" name="avoid-ascii-art">Avoid ASCII art</a>
(character illustrations) and use real images instead since it is easier to
supply a <a href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> for images. However, if <acronym
title="American Standard Code for Information Interchange">ASCII</acronym> art
must be used provide a link to jump over the ASCII art, as follows.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;P&gt;
&lt;a href="#post-art"&gt;skip over ASCII art&lt;/a&gt;
&lt;!-- ASCII art goes here --&gt;
&lt;a name="post-art"&gt;caption for ASCII art&lt;/a&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>ASCII art may also be marked up as follows [<a id="ascii-chart"
name="ascii-chart" href="#after-ascii-chart">skip over ASCII figure</a> or
consult a <a rel="Alternate" href="techimages/ascii-chart-longdesc.html">
description of chart</a>]:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre
title="Figure showing the percentage of photosensitive patients in whom a photoconvulsive response was elicited by a 2 second train of flashes with eyes open and closed.">

 
  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Flash frequency (Hz)
</pre>

<p class="off">End example.</p>
</div>

<p><a id="after-ascii-chart" name="after-ascii-chart">Another option</a> for
smaller ascii art is to use an <a href="#edef-ABBR">ABBR</a> element with "<a
href="#adef-title">title</a>".</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;P&gt;&lt;ABBR title="smiley in ASCII art"&gt;:-)&lt;/ABBR&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>If the ASCII art is complex, ensure that the text equivalent adequately
describes it.</p>

<p>Another way to replace <acronym
title="American Standard Code for Information Interchange">ASCII</acronym> art
is to use human language substitutes. For example, &lt;wink&gt; might
substitute for a winking smiley: <abbr title="winking smiley">;-)</abbr>. Or,
the word "therefore" can replace arrows consisting of dashes and greater than
signs (e.g., --&gt;), and the word "great" for the uncommon abbreviation
"gr8".</p>

<h3>7.4 <a id="image-maps" name="image-maps">Image maps</a></h3>

<p>An image map is an image that has "active regions". When the user selects
one of the regions, some action takes place -- a link may be followed,
information may be sent to a server, etc. To make an image map accessible,
content developers must ensure that each action associated with a visual region
may be activated without a pointing device.</p>

<!-- Fix the following and the related example
as per:
http://lists.w3.org/Archives/Public/w3c-wai-gl/1999JanMar/0439.html
-->
<p>Image maps are created with the <a href="#edef-MAP">MAP</a> element. HTML
allows two types of image maps: client-side (the user's browser processes a
URI) and server-side (the server processes click coordinates). For all image
maps, content developers must supply a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a>.</p>

<p>Content developers should create client-side image maps (with "<a
href="#adef-usemap">usemap</a>") rather than server-side image maps (with "<a
href="#adef-ismap">ismap</a>") because server-side image maps require a
specific input device. If server-side image maps must be used (e.g., because
the geometry of a region cannot be represented with values of the <a
href="#adef-shape">shape</a> attribute), authors must provide the same
functionality or information in an alternative accessible format. One way to
achieve this is to provide a textual link for each active region so that each
link is navigable with the <a href="#link-accesskey">keyboard</a>. If you must
use a server-side image map, please consult the section on <a
href="#server-side">server-side image maps</a></p>

<!-- Include example for server-side since more important. done - but comes
later, in the server-side section. -->
<h4>7.4.1 <a id="client-side-text-equivs" name="client-side-text-equivs">Text
equivalents for client-side image maps</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>
</ul>

<p>Provide <a href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">
text equivalents</a> for image maps since they convey visual information. As
with other links, the link text should make sense when read out of context.
Refer to <a href="#link-text">the section on Link Text</a> for information on
writing good link text. Users may also want keyboard shortcuts to access
frequently followed links. Refer to <a href="#link-accesskey">the section on
Keyboard access to links</a>.</p>

<p>If <a href="#edef-AREA">AREA</a> is used to create the map, use the "<a
href="#adef-alt">alt</a>" attribute:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;IMG src="welcome.gif" alt="Image map of areas in the library"
        usemap="#map1"&gt;
   &lt;MAP name="map1"&gt;
     &lt;AREA shape="rect" coords="0,0,30,30"
           href="reference.html" alt="Reference"&gt;
     &lt;AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Audio visual lab"&gt;
   &lt;/MAP&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>The following example illustrates the same idea, but uses <a
href="#edef-OBJECT">OBJECT</a> instead of IMG to insert the image to provide
more information about the image:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;OBJECT data="welcome.gif" type="image/gif" usemap="#map1"&gt;
       There are several areas in the library including
       the &lt;A href="reference.html"&gt;Reference&lt;/A&gt; section and the
       &lt;A href="media.html"&gt;Audio Visual Lab&lt;/A&gt;.
   &lt;/OBJECT&gt;
   &lt;MAP name="map1"&gt;
     &lt;AREA shape="rect" coords="0,0,30,30"
           href="reference.html" alt="Reference"&gt;
     &lt;AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Audio visual lab"&gt;
   &lt;/MAP&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>7.4.2 <a id="client-side-redundant-text" name="client-side-redundant-text">
Redundant text links for client-side image maps</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-redundant-client-links"
class="noxref">1.5</a> Until user agents render text equivalents for
client-side image map links, provide redundant text links for each active
region of a client-side image map. [Priority&nbsp;3]</li>
</ul>

<p>In addition to providing a text equivalent, provide redundant textual links.
If the <a href="#edef-A">A</a> element is used instead of AREA, the content
developer may describe the active regions and provide redundant links at the
same time:</p>

<div class="example">
<p><strong><a id="object-example" name="object-example">
Example.</a></strong></p>

<pre>
   &lt;OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"&gt;
   &lt;MAP name="map1"&gt;
     &lt;P&gt;Navigate the site.
     [&lt;A href="guide.html" shape="rect"
        coords="0,0,118,28"&gt;Access Guide&lt;/A&gt;]
     [&lt;A href="shortcut.html" shape="rect"
        coords="118,0,184,28"&gt;Go&lt;/A&gt;]
     [&lt;A href="search.html" shape="circle"
        coords="184.200,60"&gt;Search&lt;/A&gt;]
     [&lt;A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0"&gt;
          Top Ten&lt;/A&gt;]
   &lt;/MAP&gt;
   &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Note that in the previous example, the MAP element is the content of the
OBJECT element so that the alternative links will only be displayed if the
image map (navbar1.gif) is not.</p>

<p>Note also that links have been separated by brackets ([]). This is to
prevent older screen readers from reading several adjacent links as a single
link as well as to help sighted users distinguish between links visually.</p>

<p>Content developers should make sure they include printable characters (such
as brackets or a vertical bar (|)) surrounded by spaces between adjacent text
links. The problem does not occur if images have been used as links; The
alt-text will not be read as a single link because of the place-holding images
that graphical browsers use when images are not loaded. Refer to the section <a
href="#group-bypass">Grouping and bypassing links</a> for more information.</p>

<h4>7.4.3 <a id="client-vs-server-side" name="client-vs-server-side">
Client-side versus server-side image maps</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-client-side-maps"
class="noxref">9.1</a> Provide client-side image maps instead of server-side
image maps except where the regions cannot be defined with an available
geometric shape. [Priority&nbsp;1]</li>
</ul>

<!-- p>@@discuss reasoning why we suggest client- vs. server-side image maps.  Discuss tools
to use to convert server-side to client-side.  Find a good example of a server-side image
map.</p -->
<h4>7.4.4 <a id="server-side" name="server-side">Server-side image
maps</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-redundant-server-links"
class="noxref">1.2</a> Provide redundant text links for each active region of a
server-side image map. [Priority&nbsp;1]</li>
</ul>

<p>When a server-side image map must be used, content developers should provide
an alternative list of image map choices. There are three techniques:</p>

<ul>
<li>Include the alternative links within the body of an <a href="#edef-OBJECT">
OBJECT</a> element (refer to the previous <a href="#object-example">example
illustrating links in the OBJECT element</a>).</li>

<li>If <a href="#edef-IMG">IMG</a> is used to insert the image, provide an
alternative list of links after it and indicate the existence and location of
the alternative list (e.g., via that "<a href="#adef-alt">alt</a>" attribute). 

<div class="example">
<p><strong>Example.</strong></p>

<pre>
    &lt;A href="http://www.example.com/cgi-bin/imagemap/my-map"&gt;
    &lt;IMG src="welcome.gif" alt="Welcome! (Text links follow)" ismap&gt;
    &lt;/A&gt;

   &lt;P&gt;[&lt;A href="reference.html"&gt;Reference&lt;/A&gt;]
      [&lt;A href="media.html"&gt;Audio Visual Lab&lt;/A&gt;]
</pre>

<p class="off">End example.</p>
</div>
</li>

<li>If other approaches don't make the image map accessible, create an <a
href="http://www.w3.org/TR/WCAG10-TECHS/#alt-page-note">alternative page</a>
that is accessible.</li>
</ul>

<p>Server-side and client-side image maps may be used as submit buttons in
Forms. For more information, refer to the section <a
href="#forms-graphical-buttons">Graphical buttons</a>.</p>

<h3>7.5 <a id="color-images" name="color-images">Color in images</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-color-contrast"
class="noxref">2.2</a> Ensure that foreground and background color combinations
provide sufficient contrast when viewed by someone having color deficits or
when viewed on a black and white screen. [Priority&nbsp;2 for images,
Priority&nbsp;3 for text].</li>
</ul>

<!-- p>@@discuss contrast issues with regard to images</p -->
<h3>7.6 <a id="animated-images" name="animated-images">Animated images</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-movement"
class="noxref">7.3</a> Until user agents allow users to freeze moving content,
avoid movement in pages. [Priority&nbsp;2]</li>
</ul>

<!-- p>@@discuss avoiding movement caused by animated gifs.</p -->
<h2>8 <a id="objects" name="objects">Applets and other programmatic
objects</a></h2>

<p>While applets may be included in a document with either the <a
href="#edef-APPLET">APPLET</a> or <a href="#edef-OBJECT">OBJECT</a> element, <a
href="#edef-OBJECT">OBJECT</a> is the preferred method.</p>

<h3>8.1 <a id="applet-text-equivalent" name="applet-text-equivalent">Text and
non-text equivalents for applets and programmatic objects</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-dynamic-source"
class="noxref">6.2</a> Ensure that equivalents for dynamic content are updated
when the dynamic content changes. [Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-scripts" class="noxref">
6.3</a> Ensure that pages are usable when scripts, applets, or other
programmatic objects are turned off or not supported. If this is not possible,
provide equivalent information on an alternative accessible page.
[Priority&nbsp;1]</li>
</ul>

<p>If <a href="#edef-OBJECT">OBJECT</a> is used, provide a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> in the content of the element:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
  &lt;OBJECT classid="java:Press.class" width="500" height="500"&gt;
        As temperature increases, the molecules in the balloon...
  &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>A more complex example takes advantage of the fact the OBJECT elements may
be embedded to provide for alternative representations of information:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
  &lt;OBJECT classid="java:Press.class" width="500" height="500"&gt;          
     &lt;OBJECT data="Pressure.mpeg" type="video/mpeg"&gt;
        &lt;OBJECT data="Pressure.gif" type="image/gif"&gt;
           As temperature increases, the molecules in the balloon...
        &lt;/OBJECT&gt;
     &lt;/OBJECT&gt;
  &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>If <a href="#edef-APPLET">APPLET</a> is used, provide a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> with the "<a href="#adef-alt">alt</a>" attribute <em>and</em> in
the content in the APPLET element. This enables the content to transform
gracefully for those user agents that only support one of the two mechanisms
("alt" or content).</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
   &lt;APPLET code="Press.class" width="500" height="500"
           alt="Java applet: how temperature affects pressure"&gt;
         As temperature increases, the molecules in the balloon...
   &lt;/APPLET&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>8.2 <a id="accessible-applets" name="accessible-applets">Directly
accessible applets</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-directly-accessible"
class="noxref">8.1</a> Make programmatic elements such as scripts and applets
directly accessible or compatible with assistive technologies [Priority&nbsp;1
if functionality is important and not presented elsewhere, otherwise
Priority&nbsp;2.]</li>
</ul>

<p>If an applet (created with either <a href="#edef-OBJECT">OBJECT</a> or <a
href="#edef-APPLET">APPLET</a>) requires user interaction (e.g., the ability to
manipulate a physics experiment) that cannot be duplicated in an alternative
format, make the applet directly accessible.</p>

<p>If an applet creates motion, developers should provide a mechanism for
freezing this motion (for an example, refer to <cite><a href="#ref-TRACE"
title="Link to reference TRACE">[TRACE]</a></cite>). Also, please refer to the
next section for information about making audio and video presentations
accessible.</p>

<p>For more information about developing accessible applets, please refer to
<cite><a href="#ref-JAVAACCESS" title="Link to reference JAVAACCESS">
[JAVAACCESS]</a></cite> and <cite><a href="#ref-IBMJAVA"
title="Link to reference IBMJAVA">[IBMJAVA]</a></cite>. These companies have
been developing an Accessibility API as well as making the Java Swing classes
accessible.</p>

<p>Related checkpoints:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-relative-units"
class="noxref">3.4</a> Use relative rather than absolute units in markup
language attribute values and style sheet property values. [Priority&nbsp;2]
,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts"
class="noxref">6.4</a> For scripts and applets, ensure that event handlers are
input device-independent. [Priority&nbsp;2] ,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
alternative presentation or page. [Priority&nbsp;2] ,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-flicker"
class="noxref">7.1</a> Until user agents allow users to control flickering,
avoid causing the screen to flicker. [Priority&nbsp;1] ,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-blinking"
class="noxref">7.2</a> Until user agents allow users to control blinking, avoid
causing content to blink (i.e., change presentation at a regular rate, such as
turning on and off). [Priority&nbsp;2] ,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-movement"
class="noxref">7.3</a> Until user agents allow users to freeze moving content,
avoid movement in pages. [Priority&nbsp;2] ,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
class="noxref">7.4</a> Until user agents provide the ability to stop the
refresh, do not create periodically auto-refreshing pages. [Priority&nbsp;2]
,</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable"
class="noxref">9.2</a> Ensure that any element that has its own interface can
be operated in a device-independent manner. [Priority&nbsp;2] ,</li>

<li>and <a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
class="noxref">10.1</a> Until user agents allow users to turn off spawned
windows, do not cause pop-ups or other windows to appear and do not change the
current window without informing the user. [Priority&nbsp;2] .</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-synchronize-equivalents"
class="noxref">1.4</a> For any time-based multimedia presentation (e.g., a
movie or animation), synchronize equivalent alternatives (e.g., captions or
auditory descriptions of the visual track) with the presentation.
[Priority&nbsp;1]</li>
</ul>

<h2>9 <a id="audio-and-video" name="audio-and-video">Audio and video</a></h2>

<!-- Add information about CSS2 ACSS and SMIL control of cueing,
parallel sounds -->
<h3>9.1 <a id="audio-information" name="audio-information">Audio
information</a></h3>

<h3>9.2 <a id="text-equivs-multimedia" name="text-equivs-multimedia">Text
equivalents for multimedia</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>
</ul>

<p>When necessary, a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> should be provided for visual information to enable
understanding of the page. For example, consider a repeating animation that
shows cloud cover and precipitation as part of a weather status report. Since
the animation is supplementing the rest of the weather report (that is
presented in natural language - text), a less verbose description of the
animation is necessary. However, if the animation appears in a pedagogical
setting where students are learning about cloud formations in relation to land
mass, then the animation ought to be described for those who can not view the
animation but who also want to learn the lesson.</p>

<!-- why is this in this section?? <p>See also the section on 
<a href="http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-text">text style</a> for
controlling blinking.</p> -->
<h3>9.3 <a id="embed-multimedia" name="embed-multimedia">Embedding multimedia
objects</a></h3>

<p>Other objects, such as those requiring a plug-in, should also use the <a
href="#edef-OBJECT">OBJECT</a> element. However, for backward compatibility
with Netscape browsers, use the proprietary EMBED element within the OBJECT
element as follows:</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
  &lt;OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
  codebase="http://example.com/content.cab" width=100 height=80&gt; 
  &lt;PARAM name="Movie" value="moviename.swf"&gt; 
      &lt;EMBED src="moviename.swf" width=100 height=80 
      pluginspage="http://example.com/shockwave/download/"&gt; 
      &lt;/EMBED&gt;

      &lt;NOEMBED&gt; 
          &lt;IMG alt="Still from Movie"
                  src="moviename.gif" width=100 height=80&gt; 
      &lt;/NOEMBED&gt; 

  &lt;/OBJECT&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>For more information refer to <cite><a href="#ref-MACROMEDIA"
title="Link to reference MACROMEDIA">[MACROMEDIA]</a></cite>.</p>

<h2>10 <a id="frames" name="frames">Frames</a></h2>

<p>For visually enabled users, frames may organize a page into different zones.
For non-visual users, relationships between the content in frames (e.g., one
frame has a table of contents, another the contents themselves) must be
conveyed through other means.</p>

<p>Frames as implemented today (with the <a href="#edef-FRAMESET">FRAMESET</a>,
<a href="#edef-FRAME">FRAME</a>, and <a href="#edef-IFRAME">IFRAME</a>
elements) are problematic for several reasons:</p>

<ul>
<li>Without scripting, they tend to break the "previous page" functionality
offered by browsers.</li>

<li>It is impossible to refer to the "current state" of a frameset with a URI;
once a frameset changes contents, the original URI no longer applies.</li>

<li>Opening a frame in a new browser window can disorient or simply annoy
users.</li>
</ul>

<p>In the following sections, we discuss how to make frames more accessible. We
also provide an <a href="#alt-frames">alternative to frames</a> that uses HTML
4.01 and CSS and addresses many of the limitations of today's frame
implementations.</p>

<h3>10.1 <a id="frame-names" name="frame-names">Providing a frame
title</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-frame-titles"
class="noxref">12.1</a> Title each frame to facilitate frame identification and
navigation. [Priority&nbsp;1]</li>
</ul>

<div class="example">
<p><strong>Example.</strong></p>

<p>Use the "title" attribute to name frames.</p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;A simple frameset document&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET cols="10%, 90%"
          title="Our library of electronic documents"&gt;  
    &lt;FRAME src="nav.html" title="Navigation bar"&gt;  
    &lt;FRAME src="doc.html" title="Documents"&gt;
    &lt;NOFRAMES&gt;
       &lt;A href="lib.html" title="Library link"&gt;   
             Select to go to the electronic library&lt;/A&gt;  
    &lt;/NOFRAMES&gt;
&lt;/FRAMESET&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>10.2 <a id="frame-text-equivalent" name="frame-text-equivalent">Describing
frame relationships</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-frame-longdesc"
class="noxref">12.2</a> Describe the purpose of frames and how frames relate to
each other if it is not obvious by frame titles alone. [Priority&nbsp;2]</li>
</ul>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Today's news&lt;/TITLE&gt;
  &lt;/HEAD&gt;

  &lt;FRAMESET cols="10%,*,10%"&gt;

  &lt;FRAMESET rows="20%,*"&gt;
    &lt;FRAME src="promo.html" name="promo" title="promotions"&gt;
    &lt;FRAME src="sitenavbar.html" name="navbar" 
       title="Sitewide navigation bar" longdesc="frameset-desc.html#navbar"&gt;
  &lt;/FRAMESET&gt;

  &lt;FRAME src="story.html" name="story" title="Selected story - main content" 
     longdesc="frameset-desc.html#story"&gt;

  &lt;FRAMESET rows="*,20%"&gt;
    &lt;FRAME src="headlines.html" name="index" title="Index of other 
      national headlines" longdesc="frameset-desc.html#headlines"&gt;
    &lt;FRAME src="ad.html" name="adspace" title="Advertising"&gt;
  &lt;/FRAMESET&gt;

  &lt;NOFRAMES&gt;
    &lt;p&gt;&lt;a href="noframes.html"&gt;No frames version&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href="frameset-desc.html"&gt;Descriptions of frames.&lt;/a&gt;&lt;/p&gt;
  &lt;/NOFRAMES&gt;

  &lt;/FRAMESET&gt;
&lt;/HTML&gt;
</pre>

<p>frameset-desc.html might say something like:</p>

<pre>
#Navbar - this frame provides links to the major 
          sections of the site:  World News, National News,
          Local News, Technological News,
          and Entertainment News.

#Story  - this frame displays the currently selected story.

#Index  - this frame provides links to the day's 
          headline stories within this section.  
</pre>

<p class="off">End example.</p>
</div>

<p>Note that if the a frame's contents change, the text equivalent will no
longer apply. Also, links to descriptions of a frame should be provided along
with other alternative content in the <a href="#edef-NOFRAMES">NOFRAMES</a>
element of a <a href="#edef-FRAMESET">FRAMESET</a>. 
<!-- Long descriptions of frames should only 
be used for frames with static contents. not necessarily so - depending on
the frame and how longdesc is written.  WC --></p>

<!-- I commented out this example in favor of the current one.  perhaps add it
in as a way to show how the longdesc won't always be applicable?
<div class="example">
<p><strong>Example.</strong></p>

<p>In this example, the file "chart.html" inserts a complex chart.
The "longdesc" attribute designates the file "chart-desc.html",
which contains a long description of the chart.</p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;A simple frameset document&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET cols="20%, 80%"&gt;
     &lt;FRAME src="table_of_contents.html"&gt;
     &lt;FRAME src="chart.html" longdesc="chart-desc.html"&gt;
&lt;/FRAMESET&gt;
</pre>

<p>Note that if the second frame's contents change (from"chart.html"), the long description will no longer apply. Long
descriptions of frames should only be used for frames with static
contents.</p>

<p class="off">End example.</p>
</div>

-->
<h3>10.3 <a id="noframes" name="noframes">Writing for browsers that do not
support FRAME</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
alternative presentation or page. [Priority&nbsp;2]</li>
</ul>

<div class="example">
<p><strong>Example.</strong></p>

<p>In this example, if the user reads "top.html":</p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;This is top.html&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET cols="50%, 50%" title="Our big document"&gt;
    &lt;FRAME src="main.html" title="Where the content is displayed"&gt;
    &lt;FRAME src="table_of_contents.html" title="Table of Contents"&gt;
    &lt;NOFRAMES&gt;
        &lt;A href="table_of_contents.html"&gt;Table of Contents.&lt;/A&gt;
     &lt;!-- other navigational links that are available in main.html
          are available here also. --&gt;
    &lt;/NOFRAMES&gt;
&lt;/FRAMESET&gt;
&lt;/HTML&gt;
</pre>

<p>and the user agent is not displaying frames, the user will have access (via
a link) to a non-frames version of the same information.</p>

<p class="off">End example.</p>
</div>

<h3>10.4 <a id="frame-has-html-src" name="frame-has-html-src">Frame
sources</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-dynamic-source"
class="noxref">6.2</a> Ensure that equivalents for dynamic content are updated
when the dynamic content changes. [Priority&nbsp;1]</li>
</ul>

<!-- Fix this example -IJ -->
<p>Content developers must provide text equivalents of frames so that their
contents and the relationships between frames make sense. Note that as the
contents of a frame change, so must change any description. This is not
possible if an IMG is inserted directly into a frame. Thus, content developers
should always make the source ("src") of a frame an HTML file. Images may be
inserted into the HTML file and their text alternatives will evolve
correctly.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;A correct frameset document&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET cols="100%" title="Evolving frameset"&gt;
&lt;FRAME name="goodframe" src="apples.html" title="Apples"&gt;
&lt;/FRAMESET&gt;
&lt;/HTML&gt;
</pre>

<pre>
   &lt;!-- In apples.html --&gt;
   &lt;P&gt;&lt;IMG src="apples.gif" alt="Apples"&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>The following deprecated example should be avoided since it inserts <a
href="#edef-IMG">IMG</a> directly in a frame:</p>

<div class="deprecated-example">
<p><strong>Deprecated example.</strong></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;A bad frameset document&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET cols="100%" title="Static frameset"&gt;
   &lt;FRAME name="badframe"
          src="apples.gif" title="Apples"&gt;
&lt;/FRAMESET&gt;
&lt;/HTML&gt;
</pre>

<p>Note that if, for example, a link causes a new image to be inserted into the
frame:</p>

<pre>
  &lt;P&gt;Visit a beautiful grove of 
  &lt;A target="badframe" href="oranges.gif" title="Oranges"&gt;oranges&lt;/A&gt;
</pre>

<p>the initial title of the frame ("Apples") will no longer match the current
content of the frame ("Oranges").</p>

<p class="off">End example.</p>
</div>

<h3>10.5 <a id="no-new-windows" name="no-new-windows">Using FRAME
targets</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
class="noxref">10.1</a> Until user agents allow users to turn off spawned
windows, do not cause pop-ups or other windows to appear and do not change the
current window without informing the user. [Priority&nbsp;2]</li>
</ul>

<p>Content developers should avoid specifying a new window as the target of a
frame with target="_blank".</p>

<h3>10.6 <a id="alt-frames" name="alt-frames">Alternatives to frames</a></h3>

<p>One of the most common uses of frames is to split the user's browser window
into two parts: a navigation window and a content window. As an alternative to
frames, we encourage you to try the following:</p>

<ol>
<li>Create one document for the navigation mechanism (call it "nav.html"). A
separate document means that the navigation mechanism may be shared by more
than one document.</li>

<li>In each document requiring the navigation mechanism, include it at the
bottom of the document with the following (or similar) <a href="#edef-OBJECT">
OBJECT</a> markup: 

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;P&gt;
&lt;OBJECT data="nav.html"&gt;
Go to the &lt;A href="nav.html"&gt;table of contents&lt;/A&gt;
&lt;/OBJECT&gt;
</pre>
</div>

<p>Putting the navigation mechanism at the end of the document means that when
style sheets are turned off, users have access to the document's important
information first.</p>
</li>

<li>Use style sheets to position the navigation mechanism where you want on the
screen. For example, the following CSS rule floats the navigation bar to the
left of the page and makes it take up 25% of the available horizontal space: 

<div class="css-example">
<pre>
   OBJECT { float: left; width: 25% }
</pre>
</div>

<p>The following CSS rule attaches the navigation mechanism to the bottom-left
corner of the page of the page and keeps it there even if the user scrolls down
the page:</p>

<div class="css-example">
<pre>
   OBJECT { position: fixed; left: 0; bottom: 0 }
</pre>
</div>
</li>
</ol>

<p><strong>Note.</strong> Navigation mechanisms or other content may be
inserted in a document by means of server-side includes.</p>

<h4>10.6.1 <a id="frame-relative-size" name="frame-relative-size">Sizing frames
with relative units</a></h4>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-relative-units"
class="noxref">3.4</a> Use relative rather than absolute units in markup
language attribute values and style sheet property values.
[Priority&nbsp;2]</li>
</ul>

<p>In the previous examples, note that frame sizes are specified in percentage.
When a user resizes the window, the frames will adjust accordingly and remain
readable.</p>

<h2>11 <a id="forms" name="forms">Forms</a></h2>

<p>This section discusses the accessibility of forms and form controls that one
can put in a <a href="#edef-FORM">FORM</a> element.</p>

<h3>11.1 <a id="forms-keyboard-access" name="forms-keyboard-access">Keyboard
access to forms</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-tab-order" class="noxref">
9.4</a> Create a logical tab order through links, form controls, and objects.
[Priority&nbsp;3]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-shortcuts"
class="noxref">9.5</a> Provide keyboard shortcuts to important links (including
those in client-side image maps), form controls, and groups of form controls.
[Priority&nbsp;3]</li>
</ul>

<p>In the next example, we specify a tabbing order among elements (in order,
"field2", "field1", "submit") with "<a href="#adef-tabindex">tabindex</a>":</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;FORM action="submit" method="post"&gt;
   &lt;P&gt;
   &lt;INPUT tabindex="2" type="text" name="field1"&gt;
   &lt;INPUT tabindex="1" type="text" name="field2"&gt;
   &lt;INPUT tabindex="3" type="submit" name="submit"&gt;
   &lt;/FORM&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>This example assigns "U" as the accesskey (via "<a
href="#adef-accesskey">accesskey</a>"). Typing "U" gives focus to the label,
which in turn gives focus to the input control, so that the user can input
text.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
 
   &lt;FORM action="submit" method="post"&gt;
   &lt;P&gt;
         &lt;LABEL for="user" accesskey="U"&gt;name&lt;/LABEL&gt;
         &lt;INPUT type="text" id="user"&gt;
   &lt;/FORM&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>11.2 <a id="forms-grouping" name="forms-grouping">Grouping form
controls</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-group-information"
class="noxref">12.3</a> Divide large blocks of information into more manageable
groups where natural and appropriate. [Priority&nbsp;2]</li>
</ul>

<p>Content developers should <a href="#grouping">group information</a> where
natural and appropriate. When form controls can be grouped into logical units,
use the <a href="#edef-FIELDSET">FIELDSET</a> element and label those units
with the <a href="#edef-LEGEND">LEGEND</a> element:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;FORM action="http://example.com/adduser" method="post"&gt;
   &lt;FIELDSET&gt;
   &lt;LEGEND&gt;Personal information&lt;/LEGEND&gt;
   &lt;LABEL for="firstname"&gt;First name: &lt;/LABEL&gt;
   &lt;INPUT type="text" id="firstname" tabindex="1"&gt;
   &lt;LABEL for="lastname"&gt;Last name: &lt;/LABEL&gt;
   &lt;INPUT type="text" id="lastname" tabindex="2"&gt;
   ...more personal information...
   &lt;/FIELDSET&gt;
   &lt;FIELDSET&gt;
   &lt;LEGEND&gt;Medical History&lt;/LEGEND&gt;
   ...medical history information...
   &lt;/FIELDSET&gt;
&lt;/FORM&gt;
</pre>

<p class="off">End example.</p>
</div>

<h4>11.2.1 <a id="forms-group-options" name="forms-group-options">Grouping menu
options</a></h4>

<p>Content developers should <a href="#grouping">group information</a> where
natural and appropriate. For long lists of menu selections (which may be
difficult to track), content developers should group <a href="#edef-SELECT">
SELECT</a> items (defined by <a href="#edef-OPTION">OPTION</a>) into a
hierarchy using the <a href="#edef-OPTGROUP">OPTGROUP</a> element. Specifies a
label for the group of options with the <a href="#adef-label">label</a>
attribute on OPTGROUP.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;FORM action="http://example.com/prog/someprog" method="post"&gt;
 &lt;P&gt;
 &lt;SELECT name="ComOS"&gt;
     &lt;OPTGROUP label="PortMaster 3"&gt;
       &lt;OPTION label="3.7.1" value="pm3_3.7.1"&gt;PortMaster 3 with ComOS 3.7.1
       &lt;OPTION label="3.7" value="pm3_3.7"&gt;PortMaster 3 with ComOS 3.7
       &lt;OPTION label="3.5" value="pm3_3.5"&gt;PortMaster 3 with ComOS 3.5
     &lt;/OPTGROUP&gt;
     &lt;OPTGROUP label="PortMaster 2"&gt;
       &lt;OPTION label="3.7" value="pm2_3.7"&gt;PortMaster 2 with ComOS 3.7
       &lt;OPTION label="3.5" value="pm2_3.5"&gt;PortMaster 2 with ComOS 3.5
     &lt;/OPTGROUP&gt;
     &lt;OPTGROUP label="IRX"&gt;
       &lt;OPTION label="3.7R" value="IRX_3.7R"&gt;IRX with ComOS 3.7R
       &lt;OPTION label="3.5R" value="IRX_3.5R"&gt;IRX with ComOS 3.5R
     &lt;/OPTGROUP&gt;
 &lt;/SELECT&gt;
&lt;/FORM&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>11.3 <a id="forms-labels" name="forms-labels">Labeling form
controls</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-associate-labels"
class="noxref">12.4</a> Associate labels explicitly with their controls.
[Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-unassociated-labels"
class="noxref">10.2</a> Until user agents support explicit associations between
labels and form controls, for all form controls with implicitly associated
labels, ensure that the label is properly positioned. [Priority&nbsp;2]</li>
</ul>

<p>An example of <a href="#edef-LABEL">LABEL</a> used with "<a
href="#adef-for">for</a>" in HTML 4.01 is given in the previous section.</p>

<p>A label is implicitly associated with its form control either through markup
or positioning on the page. The following example shows how a label and form
control may be implicitly associated with markup.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
   &lt;LABEL for="firstname"&gt;First name: 
     &lt;INPUT type="text" id="firstname" tabindex="1"&gt;
   &lt;/LABEL&gt;

</pre>

<p class="off">End example.</p>
</div>

<h3>11.4 <a id="forms-graphical-buttons" name="forms-graphical-buttons">
Graphical buttons</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>
</ul>

<p>Using images to decorate buttons allows developers to make their forms
unique and easier to understand. Using an image for a button (e.g., with the <a
href="#edef-INPUT">INPUT</a> element or <a href="#edef-BUTTON">BUTTON</a>) is
not inherently inaccessible - assuming a text equivalent is provided for the
image.</p>

<p>However, a graphical form submit button created with <a href="#edef-INPUT">
INPUT</a>, type="image" creates a type of server-side image map. Whenever the
button is clicked with a mouse, the x and y coordinates of the mouse click are
sent to the server as part of the form submission.</p>

<p>In the <a href="#images">Image and Image Maps</a> section, we discuss why
server-side images ought to be avoided, and suggest using client-side image
maps instead. In HTML 4.01, graphical buttons may now be client-side image
maps. To preserve the functionality provided by the server, authors have the
following options, as stated in the HTML 4.01 Recommendation (<cite><a
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>, section
17.4.1):</p>

<blockquote>
<p>If the server takes different actions depending on the location clicked,
users of non-graphical browsers will be disadvantaged.<br />
 For this reason, authors should consider alternate approaches:</p>

<ul>
<li>Use multiple submit buttons (each with its own image) in place of a single
graphical submit button. Authors may use style sheets to control the
positioning of these buttons.</li>

<li>Use a client-side image map together with scripting.</li>
</ul>
</blockquote>

<h3>11.5 <a id="forms-specific" name="forms-specific">Techniques for specific
controls</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-place-holders"
class="noxref">10.4</a> Until user agents handle empty controls correctly,
include default, place-holding characters in edit boxes and text areas.
[Priority&nbsp;3]</li>
</ul>

<div class="example">
<p><strong>Example.</strong></p>

<p>Some legacy assistive technologies require initial text in form controls
such as <a href="#edef-TEXTAREA">TEXTAREA</a> in order to function
properly.</p>

<pre>
&lt;FORM action="http://example.com/prog/text-read" method="post"&gt;
     &lt;P&gt;
     &lt;TEXTAREA name=yourname rows="20" cols="80"&gt;
     Please enter your name here.
     &lt;/TEXTAREA&gt;
     &lt;INPUT type="submit" value="Send"&gt;&lt;INPUT type="reset"&gt;
     &lt;/P&gt;
&lt;/FORM&gt;
</pre>

<p class="off">End example.</p>
</div>

<p><a id="submit-alt" name="submit-alt">Provide</a> a <a
href="http://www.w3.org/TR/WCAG10-TECHS/#def-text-equivalent">text
equivalent</a> for images used as "submit" buttons:</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;FORM action="http://example.com/prog/text-read" method="post"&gt;
&lt;P&gt;
&lt;INPUT type="image" name=submit src="button.gif" alt="Submit"&gt;
&lt;/FORM&gt;
</pre>

<p class="off">End example.</p>
</div>

<p>Also refer to the section on <a href="#link-accesskey">keyboard access</a>
since this applies to form controls.</p>

<h3>11.6 <a id="bc-forms" name="bc-forms">Backward compatibility issues for
forms</a></h3>

<p>In some HTML 3.2 browsers,</p>

<ul>
<li>The <a href="#edef-BUTTON">BUTTON</a> element does not appear</li>

<li><a href="#edef-INPUT">INPUT</a> with type="button" will appear as a text
input field</li>
</ul>

<h2>12 <a id="scripts" name="scripts">Scripts</a></h2>

<p>This section discusses the accessibility of scripts included in a document
via the <a href="#edef-SCRIPT">SCRIPT</a> element. 
<!-- p>@@this section needs work. plus, is this the best place for this 
discussion? should we have a separate "non-w3c" module?</p --></p>

<h3>12.1 <a id="scripts-gt" name="scripts-gt">Graceful transformation of
scripts</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-fallback-page"
class="noxref">6.5</a> Ensure that dynamic content is accessible or provide an
alternative presentation or page. [Priority&nbsp;2]</li>
</ul>

<p>Content developers must ensure that pages are accessible with scripts turned
off or in browsers that don't support scripts.</p>

<ul>
<li>Avoid creating content on the fly on the client. If a user's browser does
not handle scripts, no content will be generated or displayed. However, this is
different than displaying or hiding already existing content by using a
combination of style sheets and scripting; if there is no script, then the
content is always shown. This also does not rule out generating pages on the
fly on the server-side and delivering them to the client.</li>

<li>Avoid creating links that use "javascript" as the URI. If a user is not
using scripts, then they won't be able to link since the browser can't create
the link content. 

<div class="deprecated-example">
<p><strong>Deprecated example.</strong> This is a dead-end link for a user
agent where scripts are not supported or not loaded.</p>

<pre>
    &lt;A href="javascript:"&gt;...&lt;/A&gt;
</pre>

<p class="off">End example.</p>
</div>
</li>
</ul>

<h3>12.2 <a id="scripts-flicker" name="scripts-flicker">Scripts that cause
flickering</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-flicker"
class="noxref">7.1</a> Until user agents allow users to control flickering,
avoid causing the screen to flicker. [Priority&nbsp;1]</li>
</ul>

<!-- p>@@how to create and pause flicker with scripts</p -->
<h3>12.3 <a id="scripts-movement-blinking" name="scripts-movement-blinking">
Scripts that cause movement and blinking</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-blinking"
class="noxref">7.2</a> Until user agents allow users to control blinking, avoid
causing content to blink (i.e., change presentation at a regular rate, such as
turning on and off). [Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-movement"
class="noxref">7.3</a> Until user agents allow users to freeze moving content,
avoid movement in pages. [Priority&nbsp;2]</li>
</ul>

<!-- p>@@how to create accessible scripts that cause movement and blinking. Part of the
next section?  directly accessible scripts?</p -->
<h3>12.4 <a id="directly-accessible-scripts"
name="directly-accessible-scripts">Directly accessible scripts</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts"
class="noxref">6.4</a> For scripts and applets, ensure that event handlers are
input device-independent. [Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-scripts" class="noxref">
6.3</a> Ensure that pages are usable when scripts, applets, or other
programmatic objects are turned off or not supported. If this is not possible,
provide equivalent information on an alternative accessible page.
[Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-directly-accessible"
class="noxref">8.1</a> Make programmatic elements such as scripts and applets
directly accessible or compatible with assistive technologies [Priority&nbsp;1
if functionality is important and not presented elsewhere, otherwise
Priority&nbsp;2.]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-device-independent-events"
class="noxref">9.3</a> For scripts, specify logical event handlers rather than
device-dependent event handlers. [Priority&nbsp;2]</li>
</ul>

<p>An event handler is a script that is invoked when a certain event occurs
(e.g, the mouse moves, a key is pressed, the document is loaded, etc.). In HTML
4.01, event handlers are attached to elements via <a
href="#event-handler-attribs">event handler attributes</a> (the attributes
beginning with "on", as in "onkeyup").</p>

<p>Some event handlers, when invoked, produce purely decorative effects such as
highlighting an image or changing the color of an element's text. Other event
handlers produce much more substantial effects, such as carrying out a
calculation, providing important information to the user, or submitting a form.
For event handlers that do more than just change the presentation of an
element, content developers should do the following:</p>

<ol>
<li>Use application-level event triggers rather than user interaction-level
triggers. In HTML 4.01, application-level event attributes are "onfocus",
"onblur" (the opposite of "onfocus"), and "onselect". Note that these
attributes are designed to be device-independent, but are implemented as
keyboard specific events in current browsers.</li>

<li>Otherwise, if you must use device-dependent attributes, provide redundant
input mechanisms (i.e., specify two handlers for the same element): 

<ul>
<li>Use "onmousedown" with "onkeydown".</li>

<li>Use "onmouseup" with "onkeyup"</li>

<li>Use "onclick" with "onkeypress"</li>
</ul>

<p>Note that there is no keyboard equivalent to double-clicking ("ondblclick")
in HTML 4.01.</p>
</li>

<li>Do not write event handlers that rely on mouse coordinates since this
prevents device-independent input.</li>
</ol>

<h3>12.5 <a id="scripts-alt" name="scripts-alt">Alternative presentation of
scripts</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent"
class="noxref">1.1</a> Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). <em>This includes</em>:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic objects,
<acronym title="American Standard Code for Information Interchange">
ASCII</acronym> art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction),
stand-alone audio files, audio tracks of video, and video.
[Priority&nbsp;1]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-dynamic-source"
class="noxref">6.2</a> Ensure that equivalents for dynamic content are updated
when the dynamic content changes. [Priority&nbsp;1]</li>
</ul>

<p>One way to accomplish this is with the <a href="#edef-NOSCRIPT">NOSCRIPT</a>
element. The content of this element is rendered when scripts are not
enabled.</p>

<div class="example">
<p><strong>Example.</strong></p>

<pre>
&lt;SCRIPT type="text/tcl"&gt;
 ...some Tcl script to show a billboard of sports scores...  
&lt;/SCRIPT&gt;
&lt;NOSCRIPT&gt;     
   &lt;P&gt;Results from yesterday's games:&lt;/P&gt; 
   &lt;DL&gt;
      &lt;DT&gt;Bulls 91,  Sonics 80.
      &lt;DD&gt;&lt;A href="bullsonic.html"&gt;Bulls vs. Sonics game highlights&lt;/A&gt; 
      ...more scores...  
   &lt;/DL&gt;
&lt;/NOSCRIPT&gt;
</pre>

<p class="off">End example.</p>
</div>

<h3>12.6 <a id="script-refresh" name="script-refresh">Page updates and new
windows</a></h3>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-periodic-refresh"
class="noxref">7.4</a> Until user agents provide the ability to stop the
refresh, do not create periodically auto-refreshing pages.
[Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-no-auto-forward"
class="noxref">7.5</a> Until user agents provide the ability to stop
auto-redirect, do not use markup to redirect pages automatically. Instead,
configure the server to perform redirects. [Priority&nbsp;2]</li>

<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups"
class="noxref">10.1</a> Until user agents allow users to turn off spawned
windows, do not cause pop-ups or other windows to appear and do not change the
current window without informing the user. [Priority&nbsp;2]</li>
</ul>

<!-- p>@@this section needs work.</p -->
<h2>13 <a id="html-index" name="html-index">Index of HTML elements and
attributes</a></h2>

<p>Checkpoints in this section:</p>

<ul>
<li><a href="http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-deprecated"
class="noxref">11.2</a> Avoid deprecated features of W3C technologies.
[Priority&nbsp;2]</li>
</ul>

<h3 class="nonb"><a id="index-elements" name="index-elements">Elements</a></h3>

<p><a href="elemidx-linear.html">Linear version of HTML 4.01 element
index</a>.</p>

<p>This index lists all elements in HTML 4.01. The first column of this table
links to the definition of the element in the HTML 4.01 specification (<cite><a
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>). Elements
that are deprecated in HTML 4.01 are followed by an asterisk (*). Elements that
are obsolete in HTML 4.01 or don't exist in a W3C specification of HTML (2.0,
3.2, 4.01) do not appear in this table.</p>

<p>The second column indicates other W3C specifications for HTML that included
each element. The third column indicates the element's role.</p>

<p>The last column lists the sections in the current document where the element
is discussed. An entry of "N/A" means that the element is not discussed in this
document.</p>

<table
summary="Element index. Column heads are element name, defined in versions other than HTML 4.0, role, and relevant techniques"
 border="1">
<tr>
<th valign="top" align="left">Element name</th>
<th valign="top" align="left">Defined also in</th>
<th valign="top" align="left">Role</th>
<th valign="top" align="left">Techniques</th>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-A" name="edef-A"
href="http://www.w3.org/TR/html401/struct/links.html#edef-A">A</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-ABBR" name="edef-ABBR"
href="http://www.w3.org/TR/html401/struct/text.html#edef-ABBR">ABBR</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-ACRONYM" name="edef-ACRONYM"
href="http://www.w3.org/TR/html401/struct/text.html#edef-ACRONYM">
ACRONYM</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-ADDRESS" name="edef-ADDRESS"
href="http://www.w3.org/TR/html401/struct/global.html#edef-ADDRESS">
ADDRESS</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-APPLET" name="edef-APPLET"
href="http://www.w3.org/TR/html401/struct/objects.html#edef-APPLET">
APPLET*</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Replaced</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-AREA" name="edef-AREA"
href="http://www.w3.org/TR/html401/struct/objects.html#edef-AREA">AREA</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-B" name="edef-B"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-B">B</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BASE" name="edef-BASE"
href="http://www.w3.org/TR/html401/struct/links.html#edef-BASE">BASE</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BASEFONT" name="edef-BASEFONT"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-BASEFONT">
BASEFONT*</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BDO" name="edef-BDO"
href="http://www.w3.org/TR/html401/struct/dirlang.html#edef-BDO">BDO</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BIG" name="edef-BIG"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-BIG">BIG</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BLOCKQUOTE" name="edef-BLOCKQUOTE"
href="http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE">
BLOCKQUOTE</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BODY" name="edef-BODY"
href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY">BODY</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BR" name="edef-BR"
href="http://www.w3.org/TR/html401/struct/text.html#edef-BR">BR</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-BUTTON" name="edef-BUTTON"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON">
BUTTON</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-CAPTION" name="edef-CAPTION"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION">
CAPTION</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-CENTER" name="edef-CENTER"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER">
CENTER*</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-CITE" name="edef-CITE"
href="http://www.w3.org/TR/html401/struct/text.html#edef-CITE">CITE</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-CODE" name="edef-CODE"
href="http://www.w3.org/TR/html401/struct/text.html#edef-CODE">CODE</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-COL" name="edef-COL"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-COL">COL</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-COLGROUP" name="edef-COLGROUP"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-COLGROUP">
COLGROUP</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DD" name="edef-DD"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DD">DD</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DEL" name="edef-DEL"
href="http://www.w3.org/TR/html401/struct/text.html#edef-del">DEL</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DFN" name="edef-DFN"
href="http://www.w3.org/TR/html401/struct/text.html#edef-DFN">DFN</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DIR" name="edef-DIR"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DIR">DIR*</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DIV" name="edef-DIV"
href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV">DIV</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DL" name="edef-DL"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DL">DL</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-DT" name="edef-DT"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-DT">DT</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-EM" name="edef-EM"
href="http://www.w3.org/TR/html401/struct/text.html#edef-EM">EM</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-FIELDSET" name="edef-FIELDSET"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-FIELDSET">
FIELDSET</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-FONT" name="edef-FONT"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-FONT">
FONT*</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-FORM" name="edef-FORM"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-FORM">FORM</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-FRAME" name="edef-FRAME"
href="http://www.w3.org/TR/html401/present/frames.html#edef-FRAME">
FRAME</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Replaced</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-FRAMESET" name="edef-FRAMESET"
href="http://www.w3.org/TR/html401/present/frames.html#edef-FRAMESET">
FRAMESET</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-H1" name="edef-H1"
href="http://www.w3.org/TR/html401/struct/global.html#edef-H1">H1</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-HEAD" name="edef-HEAD"
href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD">HEAD</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-HR" name="edef-HR"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-HR">HR</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-HTML" name="edef-HTML"
href="http://www.w3.org/TR/html401/struct/global.html#edef-HTML">HTML</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-I" name="edef-I"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-I">I</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-IFRAME" name="edef-IFRAME"
href="http://www.w3.org/TR/html401/present/frames.html#edef-IFRAME">
IFRAME</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Replaced</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-IMG" name="edef-IMG"
href="http://www.w3.org/TR/html401/struct/objects.html#edef-IMG">IMG</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Replaced</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-INPUT" name="edef-INPUT"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT">
INPUT</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-INS" name="edef-INS"
href="http://www.w3.org/TR/html401/struct/text.html#edef-ins">INS</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-ISINDEX" name="edef-ISINDEX"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-ISINDEX">
ISINDEX*</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-KBD" name="edef-KBD"
href="http://www.w3.org/TR/html401/struct/text.html#edef-KBD">KBD</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-LABEL" name="edef-LABEL"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">
LABEL</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-LEGEND" name="edef-LEGEND"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-LEGEND">
LEGEND</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-LI" name="edef-LI"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-LI">LI</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-LINK" name="edef-LINK"
href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK">LINK</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-MAP" name="edef-MAP"
href="http://www.w3.org/TR/html401/struct/objects.html#edef-MAP">MAP</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-MENU" name="edef-MENU"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-MENU">MENU*</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-META" name="edef-META"
href="http://www.w3.org/TR/html401/struct/global.html#edef-META">META</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-NOFRAMES" name="edef-NOFRAMES"
href="http://www.w3.org/TR/html401/present/frames.html#edef-NOFRAMES">
NOFRAMES</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-NOSCRIPT" name="edef-NOSCRIPT"
href="http://www.w3.org/TR/html401/interact/scripts.html#edef-NOSCRIPT">
NOSCRIPT</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-OBJECT" name="edef-OBJECT"
href="http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT">
OBJECT</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Replaced</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-OL" name="edef-OL"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-OL">OL</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-OPTGROUP" name="edef-OPTGROUP"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-OPTGROUP">
OPTGROUP</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-OPTION" name="edef-OPTION"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION">
OPTION</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-P" name="edef-P"
href="http://www.w3.org/TR/html401/struct/text.html#edef-P">P</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-PARAM" name="edef-PARAM"
href="http://www.w3.org/TR/html401/struct/objects.html#edef-PARAM">
PARAM</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-PRE" name="edef-PRE"
href="http://www.w3.org/TR/html401/struct/text.html#edef-PRE">PRE</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-Q" name="edef-Q"
href="http://www.w3.org/TR/html401/struct/text.html#edef-Q">Q</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-S" name="edef-S"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-S">S*</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SAMP" name="edef-SAMP"
href="http://www.w3.org/TR/html401/struct/text.html#edef-SAMP">SAMP</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SCRIPT" name="edef-SCRIPT"
href="http://www.w3.org/TR/html401/interact/scripts.html#edef-SCRIPT">
SCRIPT</a></td>
<td valign="top" align="left">3.2 (DTD)</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SELECT" name="edef-SELECT"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-SELECT">
SELECT</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SMALL" name="edef-SMALL"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-SMALL">
SMALL</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SPAN" name="edef-SPAN"
href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN">SPAN</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-STRIKE" name="edef-STRIKE"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-STRIKE">
STRIKE*</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-STRONG" name="edef-STRONG"
href="http://www.w3.org/TR/html401/struct/text.html#edef-STRONG">
STRONG</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-STYLE" name="edef-STYLE"
href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE">
STYLE</a></td>
<td valign="top" align="left">3.2 (DTD)</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SUB" name="edef-SUB"
href="http://www.w3.org/TR/html401/struct/text.html#edef-SUB">SUB</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-SUP" name="edef-SUP"
href="http://www.w3.org/TR/html401/struct/text.html#edef-SUP">SUP</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TABLE" name="edef-TABLE"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE">
TABLE</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TBODY" name="edef-TBODY"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TBODY">
TBODY</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TD" name="edef-TD"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TD">TD</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TEXTAREA" name="edef-TEXTAREA"
href="http://www.w3.org/TR/html401/interact/forms.html#edef-TEXTAREA">
TEXTAREA</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TFOOT" name="edef-TFOOT"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TFOOT">
TFOOT</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TH" name="edef-TH"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TH">TH</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-THEAD" name="edef-THEAD"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-THEAD">
THEAD</a></td>
<td valign="top" align="left">&nbsp;</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TITLE" name="edef-TITLE"
href="http://www.w3.org/TR/html401/struct/global.html#edef-TITLE">
TITLE</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TR" name="edef-TR"
href="http://www.w3.org/TR/html401/struct/tables.html#edef-TR">TR</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-TT" name="edef-TT"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-TT">TT</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-U" name="edef-U"
href="http://www.w3.org/TR/html401/present/graphics.html#edef-U">U*</a></td>
<td valign="top" align="left">3.2</td>
<td valign="top" align="left">Presentation</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-UL" name="edef-UL"
href="http://www.w3.org/TR/html401/struct/lists.html#edef-UL">UL</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="edef-VAR" name="edef-VAR"
href="http://www.w3.org/TR/html401/struct/text.html#edef-VAR">VAR</a></td>
<td valign="top" align="left">2.0, 3.2</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>
</table>

<h3 class="nonb"><a id="index-attributes"
name="index-attributes">Attributes</a></h3>

<p><a href="attridx-linear.html">Linear version of HTML 4.01 attribute
index</a>.</p>

<p>This index lists some attributes in HTML 4.01 that affect accessibility and
what elements they apply to. The first column of this table links to the
definition of the attribute in the HTML 4.01 specification (<cite><a
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>).
Attributes and elements that are deprecated in HTML 4.01 (<cite><a
href="#ref-HTML4" title="Link to reference HTML4">[HTML4]</a></cite>) are
followed by an asterisk (*). Attributes and elements that are obsolete in HTML
4.01 or don't exist in a W3C specification of HTML (2.0, 3.2, 4.01) do not
appear in this table. Attributes that apply to most elements of HTML 4.01 are
indicated as such; please consult the HTML 4.01 specification for the exact
list of elements with this attribute.</p>

<p>The second column indicates other W3C specifications for HTML that included
each attribute. The third column indicates the elements that take each
attribute. The fourth column indicates the attribute's role.</p>

<p>The last column lists the sections in the current document where the
attribute is discussed. An entry of "N/A" means that the attribute is not
discussed in this document.</p>

<table
summary="Attribute index. Column heads are attribute name, applies to elements, role, and relevant techniques"
 border="1">
<tr>
<th valign="top" align="left">Attribute name</th>
<th valign="top" align="left">Applies to elements</th>
<th valign="top" align="left">Role</th>
<th valign="top" align="left">Techniques</th>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-abbr" name="adef-abbr"
href="http://www.w3.org/TR/html401/struct/tables.html#adef-abbr">abbr</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
href="elemidx-linear.html#edef-TH">TH</a></td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-accesskey" name="adef-accesskey"
href="http://www.w3.org/TR/html401/interact/forms.html#adef-accesskey">
accesskey</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-A">A</a>, <a
href="elemidx-linear.html#edef-AREA">AREA</a>, <a
href="elemidx-linear.html#edef-BUTTON">BUTTON</a>, <a
href="elemidx-linear.html#edef-INPUT">INPUT</a>, <a
href="elemidx-linear.html#edef-LABEL">LABEL</a>, <a
href="elemidx-linear.html#edef-LEGEND">LEGEND</a>, <a
href="elemidx-linear.html#edef-TEXTAREA">TEXTAREA</a></td>
<td valign="top" align="left">User Interface</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-alt" name="adef-alt"
href="http://www.w3.org/TR/html401/struct/objects.html#adef-alt">alt</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-APPLET">
APPLET</a>, <a href="elemidx-linear.html#edef-AREA">AREA</a>, <a
href="elemidx-linear.html#edef-IMG">IMG</a>, <a
href="elemidx-linear.html#edef-INPUT">INPUT</a></td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-axis" name="adef-axis"
href="http://www.w3.org/TR/html401/struct/tables.html#adef-axis">axis</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
href="elemidx-linear.html#edef-TH">TH</a></td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-class" name="adef-class"
href="http://www.w3.org/TR/html401/struct/global.html#adef-class">
class</a></td>
<td valign="top" align="left">Most elements</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-dir" name="adef-dir"
href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir">dir</a></td>
<td valign="top" align="left">Most elements</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-for" name="adef-for"
href="http://www.w3.org/TR/html401/interact/forms.html#adef-for">for</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-LABEL">
LABEL</a></td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-headers" name="adef-headers"
href="http://www.w3.org/TR/html401/struct/tables.html#adef-headers">
headers</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
href="elemidx-linear.html#edef-TH">TH</a></td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-hreflang" name="adef-hreflang"
href="http://www.w3.org/TR/html401/struct/links.html#adef-hreflang">
hreflang</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-A">A</a>, <a
href="elemidx-linear.html#edef-LINK">LINK</a></td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-id" name="adef-id"
href="http://www.w3.org/TR/html401/struct/global.html#adef-id">id</a></td>
<td valign="top" align="left">Most elements</td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-label" name="adef-label"
href="http://www.w3.org/TR/html401/interact/forms.html#adef-label-OPTION">
label</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-OPTION">
OPTION</a></td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-lang" name="adef-lang"
href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang">lang</a></td>
<td valign="top" align="left">Most elements</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-longdesc" name="adef-longdesc"
href="http://www.w3.org/TR/html401/struct/objects.html#adef-longdesc-IMG">
longdesc</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-IMG">IMG</a>,
<a href="elemidx-linear.html#edef-FRAME">FRAME</a>, <a
href="elemidx-linear.html#edef-IFRAME">IFRAME</a></td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-scope" name="adef-scope"
href="http://www.w3.org/TR/html401/struct/tables.html#adef-scope">
scope</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TD">TD</a>, <a
href="elemidx-linear.html#edef-TH">TH</a></td>
<td valign="top" align="left">Structure</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-style" name="adef-style"
href="http://www.w3.org/TR/html401/present/styles#adef-style">style</a></td>
<td valign="top" align="left">Most elements</td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-summary" name="adef-summary"
href="http://www.w3.org/TR/html401/struct/tables.html#adef-summary">
summary</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-TABLE">
TABLE</a></td>
<td valign="top" align="left">Alternative</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-tabindex" name="adef-tabindex"
href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex">
tabindex</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-A">A</a>, <a
href="elemidx-linear.html#edef-AREA">AREA</a>, <a
href="elemidx-linear.html#edef-BUTTON">BUTTON</a>, <a
href="elemidx-linear.html#edef-INPUT">INPUT</a>, <a
href="elemidx-linear.html#edef-OBJECT">OBJECT</a>, <a
href="elemidx-linear.html#edef-SELECT">SELECT</a>, <a
href="elemidx-linear.html#edef-TEXTAREA">TEXTAREA</a></td>
<td valign="top" align="left">User Interface</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-title" name="adef-title"
href="http://www.w3.org/TR/html401/struct/global.html#adef-title">
title</a></td>
<td valign="top" align="left">Most elements</td>
<td valign="top" align="left">Metadata</td>
<td valign="top" align="left">N/A</td>
</tr>

<tr>
<td valign="top" align="left"><a id="adef-usemap" name="adef-usemap"
href="http://www.w3.org/TR/html401/struct/objects.html#adef-usemap">
usemap</a></td>
<td valign="top" align="left"><a href="elemidx-linear.html#edef-IMG">IMG</a>,
<a href="elemidx-linear.html#edef-INPUT">INPUT</a>, <a
href="elemidx-linear.html#edef-OBJECT">OBJECT</a></td>
<td valign="top" align="left">Processing</td>
<td valign="top" align="left">N/A</td>
</tr>
</table>

<p>The following is the list of HTML 4.01 attributes not directly related to
accessibility. Content developers should use style sheets instead of
presentation attributes. For event handler attributes, please refer to the
section on <a href="#directly-accessible-scripts">device-independent event
handlers</a> for more detail.</p>

<dl>
<dt><b>Other structural attributes:</b></dt>

<dd>start*, value*, rowspan, colspan, span</dd>

<dt><b>Other presentation attributes:</b></dt>

<dd>align*, valign*, clear*, nowrap*, char, charoff, hspace*, vspace*,
cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*,
color*, text*, link*, alink*, vlink*, border, noshade*, rules, size (deprecated
according to element), marginheight, marginwidth, frame, frameborder, rows,
cols</dd>

<dt><b>Other processing instruction attributes:</b></dt>

<dd><a id="adef-ismap" name="adef-ismap">ismap</a>, coords, <a id="adef-shape"
name="adef-shape">shape</a></dd>

<dt><b>Other user interface attributes:</b></dt>

<dd>target, scrolling, noresize</dd>

<dt><b>Other metadata attributes:</b></dt>

<dd><a id="adef-type" name="adef-type">type</a>, cite, datetime</dd>

<dt><b><a id="event-handler-attribs" name="event-handler-attribs">Event handler
attributes:</a></b></dt>

<dd>onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress,
onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onreset, onselect, onsubmit, onunload</dd>
</dl>

<hr />
<!--NewPage--><!-- this is for html2ps -->
<h2>14 <a id="References" name="References">References</a></h2>

<p>For the latest version of any <abbr title="the World Wide Web Consortium">
W3C</abbr> specification please consult the list of <a
href="http://www.w3.org/TR/"><abbr title="the World Wide Web Consortium">
W3C</abbr> Technical Reports</a> at http://www.w3.org/TR.</p>

<dl>
<dt><a id="ref-CSS1" name="ref-CSS1"><b>[CSS1]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1999/REC-CSS1-19990111">"CSS, level 1
Recommendation"</a>, B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11
January 1999. This CSS1 Recommendation is
http://www.w3.org/TR/1999/REC-CSS1-19990111. The <a
href="http://www.w3.org/TR/REC-CSS1">latest version of CSS1</a> is available at
http://www.w3.org/TR/REC-CSS1.</dd>

<dt><a id="ref-CSS2" name="ref-CSS2"><b>[CSS2]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/">"CSS, level 2
Recommendation"</a>, B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12
May 1998. This CSS2 Recommendation is
http://www.w3.org/TR/1998/REC-CSS2-19980512/. The <a
href="http://www.w3.org/TR/REC-CSS2/">latest version of CSS2</a> is available
at http://www.w3.org/TR/REC-CSS2.</dd>

<dt><a id="ref-HTML4" name="ref-HTML4"><b>[HTML4]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1999/REC-html401-19991224/">"HTML 4.01
Recommendation"</a>, D. Raggett, A. Le Hors, and I. Jacobs, eds., 24 December
1999. This <acronym>HTML</acronym> 4.01 Recommendation is
http://www.w3.org/TR/1999/REC-html401-19991224/.</dd>

<dt><a id="ref-MATHML" name="ref-MATHML"><b>[MATHML]</b></a></dt>

<dd><a href="http://www.w3.org/1999/07/REC-MathML-19990707/">"Mathematical
Markup Language"</a>, P. Ion and R. Miner, eds., 7 April 1998, revised 7 July
1999. This MathML 1.0 Recommendation is
http://www.w3.org/TR/1998/REC-MathML-19990707/. The <a
href="http://www.w3.org/TR/REC-MathML/">latest version of MathML 1.0</a> is
available at http://www.w3.org/TR/REC-MathML.</dd>

<dt><a id="ref-WCAG10" name="ref-WCAG10"><b>[WCAG10]</b></a></dt>

<dd><a href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/">"Web Content
Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, and I. Jacobs,
eds., 5 May 1999. This <acronym>WCAG</acronym> 1.0 Recommendation is
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.</dd>

<dt><a id="ref-WCAG10-CSS-TECHNIQUES" name="ref-WCAG10-CSS-TECHNIQUES"><b>
[WCAG10-CSS-TECHNIQUES]</b></a></dt>

<dd><a href="http://www.w3.org/TR/WCAG10-CSS-TECHS/">"CSS Techniques for Web
Content Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, and I.
Jacobs, eds. The latest version of this document is available at
http://www.w3.org/TR/WCAG10-CSS-TECHS/.</dd>

<dt><a id="ref-WCAG10-TECHS" name="ref-WCAG10-TECHS"><b>
[WCAG10-TECHS]</b></a></dt>

<dd><a href="http://www.w3.org/TR/WCAG10-TECHS/">"Techniques for Web Content
Accessibility Guidelines 1.0"</a>, W. Chisholm, G. Vanderheiden, I. Jacobs,
eds. This document explains how to implement the checkpoints defined in "Web
Content Accessibility Guidelines 1.0". The latest draft of the techniques is
available at http://www.w3.org/TR/WCAG10-TECHS/.</dd>
</dl>

<h2>15 <a id="Resources" name="Resources">Resources</a></h2>

<p><strong>Note:</strong> <em>W3C does not guarantee the stability of any of
the following references outside of its control. These references are included
for convenience. References to products are not endorsements of those
products.</em></p>

<h3>15.1 <a id="OtherGuidelines" name="OtherGuidelines">Other
guidelines</a></h3>

<dl>
<dt><a id="ref-IBMJAVA" name="ref-IBMJAVA"><b>[IBMJAVA]</b></a></dt>

<dd><a href="http://www-3.ibm.com/able/access.html">IBM Guidelines for Writing
Accessible Applications Using 100% Pure Java</a> are available from IBM Special
Needs Systems.</dd>

<dt><a id="ref-JAVAACCESS" name="ref-JAVAACCESS"><b>[JAVAACCESS]</b></a></dt>

<dd>Information about <a href="http://trace.wisc.edu/world/java/java.htm">Java
Accessibility and Usability</a> is available from the Trace R&amp;D
Center.</dd>

<dt><a id="ref-MACROMEDIA" name="ref-MACROMEDIA"><b>[MACROMEDIA]</b></a></dt>

<dd><a href="http://www.macromedia.com/support/flash/ts/documents/tn4150.html">
Flash OBJECT and EMBED Tag Syntax</a> from Macromedia.</dd>

<dt><a id="ref-UWSAG" name="ref-UWSAG"><b>[UWSAG]</b></a></dt>

<dd><a href="http://trace.wisc.edu/redirects/htmlgide/version8.htm">"The
Unified Web Site Accessibility Guidelines"</a>, G. Vanderheiden, W. Chisholm,
eds. The Unified Web Site Guidelines were compiled by the <a
href="http://www.tracecenter.org/">Trace R &amp; D Center</a> at the University
of Wisconsin under funding from the National Institute on Disability and
Rehabilitation Research (NIDRR),&nbsp; U.S. Dept. of Education.</dd>
</dl>

<h3>15.2 <a id="ToolResources" name="ToolResources">User agents and other
tools</a></h3>

<p>A list of <a href="http://www.w3.org/WAI/References/Browsing">alternative
Web browsers</a> (assistive technologies and other user agents designed for
accessibility) is maintained at the WAI Web site.</p>

<dl>
<dt><a id="ref-ASTER" name="ref-ASTER"><b>[ASTER]</b></a></dt>

<dd>For information about ASTER, an "Audio System For Technical Readings",
consult <a href="http://www.cs.cornell.edu/home/raman/">T. V. Raman's home
page</a>.</dd>

<dt><a id="ref-HYPERMEDIA" name="ref-HYPERMEDIA"><b>[HYPERMEDIA]</b></a></dt>

<dd><a href="http://www-4.ibm.com/software/network/techexplorer/">IBM's
techexplorer Hypermedia Browser</a>.</dd>
</dl>

<h3>15.3 <a id="AccessResources" name="AccessResources">Accessibility
resources</a></h3>

<dl>
<dt><a id="ref-TRACE" name="ref-TRACE"><b>[TRACE]</b></a></dt>

<dd>The <a href="http://trace.wisc.edu/">Trace Research &amp; Development
Center</a>. Consult this site for a variety of information about accessibility,
including a <a href="http://trace.wisc.edu/world/java/ScrollText.java">
scrolling Java applet that may be frozen by the user</a>.</dd>

<dt><a id="ref-WAI-ER" name="ref-WAI-ER"><b>[WAI-ER]</b></a></dt>

<dd>The <a href="http://www.w3.org/WAI/ER/">WAI Evaluation and Repair Working
Group</a></dd>
</dl>

<!--NewPage--><!-- this is for html2ps -->
<h2>16 <a id="Acknowledgments" name="Acknowledgments">Acknowledgments</a></h2>

<dl>
<dt>Web Content Guidelines Working Group Co-Chairs:</dt>

<dd><a href="mailto:jasonw@ariel.ucs.unimelb.edu.au">Jason White</a>,
University of Melbourne</dd>

<dd><a href="mailto:gv@tracecenter.org">Gregg Vanderheiden</a>, Trace Research
and Development</dd>

<dt>W3C Team contact:</dt>

<dd><a href="mailto:wendy@w3.org">Wendy Chisholm</a></dd>

<dt>We wish to thank the following people who have contributed their time and
valuable comments to shaping these guidelines:</dt>

<dd>Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al
Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard
Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau,
Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile,
MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles
Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam
Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve
Tyler, and Jaap van Lelieveld</dd>
</dl>

<p><a href="http://www.w3.org/WAI/WCAG1AAA-Conformance"
title="Explanation of Level Triple-A Conformance"><img class="conform"
height="32" width="88" src="http://www.w3.org/WAI/wcag1AAA"
alt="Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" />
</a></p>

<div class="navbar"><map id="navbar-bottom" name="navbar-bottom"
title="Navigation Bar">
<hr class="navbar" title="Navigation area separator" />
<p>[<a href="#toc">contents</a>] &nbsp; [<a href="#html-index">html index</a>]
&nbsp;</p>
</map></div>
</body>
</html>