Press "Enter" to skip to content

Semantic markup – a difference you can hear

[This originally appeared on my dev2dev blog 20-Nov-2007]
One of the often cited benefits of semantic markup is improved accessibility. It is not a guarantee that if you use semantic markup that your page will be accessible but it helps and when you do find accessibility problems they are easier to fix.

In case you are not familiar with the term semantic markup I’ll give a real quick intro. It basically means to use HTML tags the way they were intended. Pick the tag based on what the content is rather than how you want it to look. Use CSS to make it look the way you want. For example, if you have a list of items use ul or ol and li rather than tables or br. If you don’t want a bullet or you want the list to flow horizontally you can do that with CSS.

In a previous post I mentioned that one of the changes in the WebLogic 10.3 tech preview Admin Console is that CSS is used for most layout rather than tables.

I recently downloaded the Fire Vox talking browser extension for Firefox and used it to listen to WLS console. Installing Fire Vox is not as simple as other extensions but it is quite easy – just a few steps. Once it was installed one issue I ran into is that many of the key bindings it used conflicted with shortcuts used by other extensions. I disabled the Web Developer extension and customized a few other key settings in Fire Vox to solve the problem.

I went through the tutorial to get used to it and then tried it out on the version 10.0 and the 10.3 tech preview Consoles to compare the difference. What a difference there is. Fire Vox was reading all the tables that were used for layout and it gets annoying fast. For example, in version 10 it reads:

No summary table with 3 columns and 1 row. Table with 3 columns and 1 row. Heading level 1. Settings for my domain domain.
No summary table with 1 columns and 1 row. Table with 1 columns and 1 row. Table with 13 columns and 1 rows. External link configuration.

Compare that with the same area of the tech preview screen. It reads:

Settings for mydomain. Unnumbered list with 6 items. Bullet Configuration.

Clearly this is a big improvement.

A lot of markup changed between version 10 and the tech preview. It is not too surprising that a few accessibility features that worked in version 10 got broken. These were things that you couldn’t see by looking. (You may spot one of them if you read the above example carefully.) Using Fire Vox I was able to find and fix the regressions.

I think Fire Vox works very well but I have not used other screen readers yet so I have no point of reference. One of the things that attracted me to Fire Vox is that it already supports some of the WIA-ARIA spec. I’m hoping to play with live regions.

Semantic markup helps with accessibility but if you want your app to be accessible to screen readers you need to test with a screen reader.