Accessibility/Table example

This is an example page related to Wikipedia accessibility

As an example of a table that is somewhat less than accessible, consider the article w:Hydrogen. This, like many other articles on elements in the periodic table, has a large table detailing many of its characteristics. The tables are color-coded (which is good), and look very nice in a graphical browser with a large screen, but in Lynx, here's how it turns out:

                                  General
      Name, Symbol, Number Hydrogen, H, 1
                Chemical series nonmetals
       Group, Period, Block 1 (IA), 1 , s
       Density, Hardness 0.0899 kg/m3, NA
                     Appearance colorless
                        Atomic Properties
                Atomic weight 1.00794 amu
          Atomic radius (calc) 25 (53) pm
                    Covalent radius 37 pm
              van der Waals radius 120 pm
               Electron configuration 1s1
                e^- 's per energy level 1
  Oxidation states (Oxide) 1 (amphoteric)
              Crystal structure hexagonal
                      Physical Properties
                      State of matter gas
         Melting point 14.025 K (-434 °F)
         Boiling point 20.268 K (-423 °F)
         Molar volume 11.42 ×10^-3 m3/mol
      Heat of vaporization 0.44936 kJ/mol
            Heat of fusion 0.05868 kJ/mol
            Vapor pressure 209 Pa at 23 K
      Speed of sound 1270 m/s at 298.15 K
                            Miscellaneous
    Electronegativity 2.2 (Pauling scale)
    Specific heat capacity 14304 J/(kg*K)
    Electrical conductivity __ 10^6/m ohm
      Thermal conductivity 0.1815 W/(m*K)
         Ionization potential 1312 kJ/mol
                     Most Stable Isotopes

iso   NA    half-life DM  DE MeV  DP   
1H  99.985% H is stable with 0 neutrons
2H  0.015%  H is stable with 1 neutrons
3H  {syn.}  12.33 y   b^- 0.019  3He   
4H  {syn.}  unknown   n   2.910  3H

It's still relatively readable, but it could be better. In particular, because the "headings" within the table ("General", "Atomic Properties", etc.) are not actually marked up as headings (using h2 or the appropriate Wikipedia code), they are not rendered that way, and it's hard to tell that they are, in fact, headings.

There is also the fact that the table is rendered before the contents of the article. Accessibility experts usually recommend including some kind of link at the top of a lengthy block of stuff like this, so that users who are accessing the page sequentially (not random-access, as those with a visual browser and mouse do) can skip past all of it to go right to the article itself.

Whether either of these things can be easily implemented in the current framework of our PHP code and the available stylesheets, I do not know. Tables like this may benefit from a basic simplification process; in particular, it should be relatively easy to add CSS descriptors for the colors, headings, alignment and stuff that tables like this use. Much of this table's contents could then be rendered inside a div or other block element, with h2 or something for the headings, and lists for many of the additional bits. Some of it, maybe even all of it, may be best rendered inside a table, but a considerable amount of simplification could be done.

A possibly better solution

The following is perhaps a better approach to tables such as this one. It's far from perfect, but I think it's easier to edit (and looks better, particularly in a text browser) than the existing one. I do not know if it is more accessible, but with additional work I think it has the potential to be more accessible. (Ignore all the broken links; this was intended to be in the regular Wikipedia namespace. The table is what is important here.)

Full table

General

Name, Symbol, Number: Hydrogen, H, 1
Chemical series: nonmetals
Group, Period, Block: 1 (IA), 1, s
Density, Hardness: 0.0899 kg/m³, NA
Appearance: colorless

Atomic Properties

Atomic weight: 1.00794 amu
Atomic radius (calc): 25 (53) pm
Covalent radius: 37 pm
van der Waals radius: 120 pm
Electron configuration: 1s¹
e^- 's per energy level: 1
Oxidation states (Oxide): 1 (amphoteric)
Crystal structure: hexagonal

Physical Properties

State of matter: gas
Melting point: 14.025 K (-434 °F)
Boiling point: 20.268 K (-423 °F)
Molar volume: 11.42 ×10^-3 m³/mol
Heat of vaporization: 0.44936 kJ/mol
Heat of fusion: 0.05868 kJ/mol
Vapor pressure: 209 Pa at 23 K
Speed of sound: 1270 m/s at 298.15 K

Miscellaneous

Most Stable Isotopes

iso	NA	half-life	DM	DE M eV	DP
¹H	99.985%	H is stable with 0 neutrons
²H	0.015%	H is stable with 1 neutrons
³H	{syn.}	12.33 y	β^-	0.019	³He
⁴H	{syn.}	unknown	n	2.910	³H

SI units & STP are used except where noted.

Hydrogen is a chemical element in the periodic table that has the symbol H and atomic number 1. A colorless, odorless, non-metal, univalent, highly flammable diatomic gas, hydrogen is the lightest and most abundant element in the universe and is present in water and in all organic compounds and living organisms. Hydrogen is able to chemically react with most elements. Stars in their main sequence are overwhelmingly composed of hydrogen in its plasma state. This element is used in ammonia production, as a lifting gas, an alternative fuel, and more recently as a power-source of fuel cells.

Notable Characteristics

Hydrogen is the lightest chemical element with its most common isotope consisting of just a single proton and electron. At standard temperature and pressure conditions, hydrogen forms a diatomic gas, H₂, with a boiling point of only 20.27 K and a melting point of 14.02 K. Under exceedingly high pressures, like those found at the center of gas giants, the molecules lose their identity and the hydrogen becomes a liquid metal. Under the exceedingly low pressure conditions found in space, hydrogen tends to exist as individual atoms, simply because there is no way for them to combine; clouds of H₂ form and are associated with star formation.

This element plays a vital role in powering the universe through the proton-proton reaction and carbon-nitrogen cycle (these are nuclear fusion processes that release huge amounts of energy through combining two hydrogen atom into one helium).

Applications

Large quantities of hydrogen are needed industrially, notably in the Haber process for the production of ammonia, the hydrogenation of fats and oils, and the production of methanol. Other uses that require hydrogen:

hydrodealkylation, hydrodesulfurization, and hydrocracking.
manufacture of hydrochloric acid, welding, rocket fuels, and the reduction of metallic ores.
liquid hydrogen is used in cryogenic research including superconductivity studies,
tritium is produced in nuclear reactors and is used in hydrogen bomb construction.
It is fourteen and a half times lighter than air and at one time was widely used as a lifting agent in balloons and zeppelins until the Hindenburg disaster convinced the public that the gas was too dangerous for this purpose.
Deuterium is used in nuclear applications as a moderator to slow down neutrons, and deuterium compounds have applications in chemistry and biology in studies of reaction isotope effects.
Tritium is used as an isotopic label in the biosciences, as a radiation source in luminous paints.

Hydrogen can be burned in internal combustion engines, and a fleet of hydrogen burning cars is maintained by Chrysler-BMW. Hydrogen fuel cells are being looked into as a way to provide potentially cheap, pollution- free power.

History

Hydrogen (French for water-maker, from Greek hudôr, "water and gennen "generate") was first recognized as a distinct substance in 1776 by Henry Cavendish. Antoine Lavoisier gave the element its name.

Occurrence

Hydrogen is the most abundant element in the universe, making up 75% of normal matter by mass and over 90% by number of atoms. This element is found in great abundance stars and gas giant planets. Relative to its great abundance elsewhere, hydrogen is very rare in the earth's atmosphere (1 ppm by volume). The most common source for this element on earth is water which is composed two parts hydrogen to one part oxygen (H₂O). Other sources are; most forms of organic matter which includes all known life forms, coal, fossil fuels and natural gas. Methane (CH₄), which is a byproduct of organic decay, is an increasingly important source of hydrogen.

Hydrogen is prepared in several different ways; steam on heated carbon, hydrocarbon decomposition with heat, action of sodium or potassium hydroxide on aluminum, water electrolysis, or by displacement from acids with certain metals.

rest of article snipped

Here is what the above table looks like in the Lynx browser:

   H-TableImage.png
   Full table

General

   * Name, Symbol, Number: Hydrogen, H, 1
   * Chemical series: nonmetals
   * Group, Period, Block: 1 (IA), 1, s
   * Density, Hardness: 0.0899 kg/m3, NA
   * Appearance: colorless

Atomic Properties

   * Atomic weight: 1.00794 amu
   * Atomic radius (calc): 25 (53) pm
   * Covalent radius: 37 pm
   * van der Waals radius: 120 pm
   * Electron configuration: 1s1
   * e^- 's per energy level: 1
   * Oxidation states (Oxide): 1 (amphoteric)
   * Crystal structure: hexagonal

Physical Properties

   * State of matter: gas
   * Melting point: 14.025 K (-434 °F)
   * Boiling point: 20.268 K (-423 °F)
   * Molar volume: 11.42 ×10^-3 m3/mol
   * Heat of vaporization: 0.44936 kJ/mol
   * Heat of fusion: 0.05868 kJ/mol
   * Vapor pressure: 209 Pa at 23 K
   * Speed of sound: 1270 m/s at 298.15 K

Miscellaneous

   * Electronegativity: 2.2 (Pauling scale)
   * Specific heat capacity: 14304 J/(kg*K)
   * Electrical conductivity: __ 10^6/m ohm
   * Thermal conductivity: 0.1815 W/(m*K)
   * Ionization potential: 1312 kJ/mol

   iso   NA    half-life DM  DE MeV  DP
   1H  99.985% H is stable with 0 neutrons
   2H  0.015%  H is stable with 1 neutrons
   3H  {syn.}  12.33 y   b^- 0.019  3He
   4H  {syn.}  unknown   n   2.910  3H

   SI units & STP are used except where noted.

It's definitely better, in my opinion. The headings help break the table up a bit, and make it obvious what is being covered in each section of the table. Formatting it as a list has the added benefit that the cell contents aren't mashed together in a text-only or speech environment. The last (previously nested) table is still somewhat jumbled, but that's the kind of thing that probably should be in a table.

Another example

The Wikipedia articles on various U.S. states follow a similar table-formatted structure. These have quirks of their own, it seems, one of which is the fact that line breaks are used to create separated "headings" within table cells. Visually, it usually seems to work alright, but it's another example of straining a rendering quirk to make it perform a semantic job it wasn't made to do, when there are perfectly acceptable semantic structures for doing this job. Let me just illustrate. Here is what the table portion of w:Texas looks like in Lynx:

CAPTION: Texas

 Us-tx.PNG Texasstateseal.png
                State nickname: Lone Star State
                    US tx highlighted map.jpg
 (In Detail)
 Capital              Austin
 Area
  - Total
  - Land
  - Water
  - % water           Ranked 2^nd
                      696,241 km²
                      678,907 km²
                      17,333 km²
                      2.5%
 Population
  - Total (2000)
  - Density           Ranked 2^nd
                      20,851,820
                      30/km²
 Admittance into Union
  - Order
  - Date
                      28^th
                      December 29, 1845
 Time zone            Central: UTC-6/-5
                      Mountain: UTC-7/-6
                      All but some part of western TX in Central
 Latitude
 Longitude            25°50'N to 36°30'N
                      93°31'W to 106°38'W
 Width
 Length
 Elevation
   -Highest   
   -Mean
   -Lowest            1,065 km 
                      1,270 km

                      2,667 meters
                      520 meters
                      0 meters
   ISO 3166-2:        US-TX

This may very well be a bug in Lynx; line breaks within table cells should probably not cause this to happen, but there it is. The problem is, we're relying on line breaks to appropriately align a "heading" with its "contents." Such a format was likely chosen to avoid having a border around each cell, but this is something that could be fixed if we got clever with our CSS.

Wapcaplet 01:20 18 Jul 2003 (UTC)