Captcha should it stay or should it go

CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart), are a system to try and check that it is a person operating the web page and not a computer script. See the official CAPTCHA page for more information.

CAPTCHA’s and Accessibility

These have been a continual problem for accessibility. One of the most common reasons is because the popular image CAPTCHA makes the assumption that the person is able to see the image. The Section 508 US guidelines say that an audio CAPTCHA must be used with image CAPTCHA’s to help people unable to see.

However, this does not address those people who may have both sight and hearing loss or those people with reading difficulties such as different language or dyslexia. There are different styles of CAPTCHA from image, audio, question or challenge based. Each giving a barrier to different groups of people.

Are CAPTCHA’s effective

You may use CAPTCHA’s for many reasons from reducing spam, reducing password hacks to validating polls. However, it is not a full proof solution and adds both an accessibility barrier plus an additional layer of friction to user experience.

The term friction is the amount of things someone will need to do to complete a single task. So by adding a CAPTCHA, it adds to the number of things someone has to do to complete a form, signing or vote etc. Often CAPTCHA’s are difficult to get right, so may take a person several attempts. See this article Do CAPTCHA’s block spam or your readers.

This has made people turn away when coming across a CAPTCHA, which if you are in business, may lose you custom. Read this article CAPTCHA’s vs. Spam bots for some more different types of CAPTCHA’s.

Remember that CAPTCHA’s that depend on anything other than HTML client-side will not work for all cases. As the fact it depends on something that may not be supported in the browser viewing it gives it a floor. For example CAPTCHA’s that use JavaScript depend on the persons browser having JavaScript enabled.

My conclusion

I believe it is simply not possible to have a computer script check with 100% accuracy that it is a person using a web page control while maintaining a high level of accessibility. Plus the additional level of friction may have a negative effect by putting people off using your web page.

However, there are a few basic things you can do like using server-side spam filters or form validation. You could also use time measurements between the first page request and the subsequent associated post request. If this time is only a fraction of a second or no more than a couple of seconds, chances it will be a bot and not a person. Both these methods add no friction to the user experience and are transparent by working in the background.

Another idea is to use a selection of radio buttons and have the default selection to be something like “I am a bot, choose another option if you are human”. This does add a small amount of friction but doesn’t impact accessibility as long as the form is correctly marked up and the label text is easy to follow.

The truth is you can’t have 100% security you can only make a judgement on how much security you need and how much risk is taken. If your resources allow for it, you could have people manually checking all submissions but for most cases, this level is either un-manageable or just not required.

Have your say

Do you use CAPTCHA’s or do you despise CAPTCHA’s?

All views, thoughts and comments welcome.

Your how to guide for Multimedia and Accessibility

Today’s internet is rich with all kinds of multimedia from image galleries to audio and video streaming to real-time dynamic interactive content.

Where to start with multimedia and accessibility

The first step is to determine what exactly is it you want to achieve. What I mean by this is the message or communication interaction you want to convey between yourself and your visitors.

Say for example, if you are giving a video tutorial on a product, think about the information within that video. Not just what may be spoken but any visual information. It is this that can create your full video transcript.

Then think about your audience, all the different assistive technologies and how people will interact with your web content. From this you can decide about using audio description or signing or captioning within your video.

Lastly before you start work on creating any of these things, think about, progressive enhancement, what will work everywhere?

Next steps in multimedia and accessibility

Using this video example, the one thing that will work with all assistive technology and all browsers, from the things outlined above is your full video transcript. This is because transcripts are typically text based and if any images are included, they should have text alternatives.

So following the progressive enhanced design principles your full transcript will be the default content. Then you can test for video support and if used, support for captioning or other features added to your video. If your video is supported by the visitors browser of choice, you can then show the video and replace the default transcript content with a link to the transcript. This way keeping the choice of a transcript for your visitor, if that is their preferred format.

What about other media content?

Audio will work much the same as video by having a full text transcript. Flash, silverlight or similar content will generally have their own set of accessibility guidelines but again, having a text based version of the information, will allow for cases where the support is not available.

Document links should indicate within the link text what the document format is and optionally its size. It is not required for you to make the same document available in multiple formats to suit individuals personal preference. However, whichever format you choose to use, you should follow any published accessibility guidelines for it.

Charts, diagrams and other visual illustrations are one that can give people with a visual impairment, accessibility problems. This can generally be addressed through text based descriptions and tabular data that relates to the charts. This is one area that work is currently being done in, to try and make use of a mix of sound, tactile and text to speech to help enhance accessibility.

How about real-time dynamic content?

This is typically done with Javascript, so the first step will be to create some kind of basic text alternative. Before checking that the browser being used has support for your content. Then you can apply basic accessibility principles to how your real-time dynamic content is created and interactive with. Things like device independence.

For modern browsers, you can use HTML5 and ARIA. This allows you to specify additional information that assistive technology can use helping to make the content more accessible. Again, giving the user the option to choose the default basic content, will empower them with the freedom of choice.

Wrapping it all up

Rich multimedia content does add to the accessibility requirements but given some thought prior to adding your multimedia, it can still be kept accessible to everyone.

Understanding how people use assistive technology and how they interact with websites plus following key principles of accessibility, it can really help you make a difference.

Accessibility, it’s in a KIS

"It’s in a KIS?" you ask and I say "yes". KIS (Keep It Simple), is a phrase often over looked in today’s world of high tech web2.0 with social media, streaming and new frameworks that seem to be coming out every day!

How can we follow the principle of KIS?

In today’s high tech and rapid development of rich multi-media websites, the first basic principle is forgotten. This is all web pages are built on HTML. Everything else is added on.

Ideally you want to aim to achieve that all your web content and basic functionality will work in plain HTML. This does not include any styling or dynamic activity but should be enough to convey your message and allow some basic functionality like navigation and communication via forms.

Progressive enhanced design

Progressive enhancement is where you check for support of a feature before using it. For example a Flash video, you may place a static image and transcript of the video inside your HTML then check if the browser will support Flash. If it does, you can then replace the static image and transcript with the Flash video and a link to the transcript. This way you are offering the most basic type of content first and only if the technology used allows for it, you show the enhanced content but also still offering the basic content for people who may find it easier.

Many developers when using progressive enhanced design, forget to give people the option of choosing the less enhanced content. So taking the previous example of a Flash video, without adding the link to the transcript, you may be preventing people from accessing your content just because their browser supports Flash. The point is to use progressive enhancement to empower people with a choice and not leave that choice up to their browsers capabilities.

In some cases where the enhancement does not effect actual content, say a print page button, leaving the choice of enhancement up to the browser capabilities is fine. As weather the print function is supported or not, the same message is given, just in a slightly different way. Without support the message may say "print this page for your reference" and if the print function is supported it may show a print button saying "print now for your reference".

KIS and navigation

Your navigation is how people find things they are interested in on your site. If it is different on every page or is very complicated to follow, people will get confused and probably go else where.

There was a myth about a three click rule, that implied you must be able to get all content on your site in no more than three clicks. This generated a flux of mouse controlled multi-level navigation menus with hundreds of links on every page. This style of navigation cause many people great difficulties with using them and getting around web pages. There have been some improvements to this kind of navigation in recent times but I still say "do you really need them?"

Remember, you can place links in many places not just a single complicated multi-layered navigation system. You can use a site map page, keyword search box, aside sections and links within your content, footer or where ever it is most appropriate. The key thing is to make sure they are relevant.

KIS and your content

The web is still an evolving communication media with a fast growth and rapid rate of change. People are still adjusting from the changes from printed media and the web. Social media sites are also impacting our perception of how we use the internet.

Although you can still learn from print publishers way of writing content, using short concise headings, short introductory paragraphs and good use of plain language. There are a few tools designed to try and measure the level of ease of reading such as Flesch reading test and Gunning Fog index.

One thing to ask yourself when writing content, is it what your audience want and will enjoy? Remember people may be viewing your web page on any number of devices in all kinds of places, so bare this in mind.

So to summarise KIS

  • Always try to ensure your key content and basic functionality can work with just HTML. This ensures a strong foundation in which to build upon.
  • When introducing enhancements check they are supported and if it impacts content, give people the freedom of choice. This ensures things don’t brake on older tech and empowers people with a choice that best suits them.
  • Keep your navigation simple and relevant. Place links in the most appropriate section of your page and avoid over loading the page with hundreds of links. People enjoy an easy life, so help by making it easy for them.
  • Ensure your content is easy to read, concise and gives a structure of headings and short introductions to help people quickly find their points of interest.

Have your say

Share with us your experiences, good and bad. Tell us about sites you find a joy to use and ones that are not.

Have any questions, just ask in the comments or use our contact form.

The best of web accessibility in week one

Lest take a look back over the first week here at abc4accessibility.

Day 1 Accessibility and Usability: The first steps

We look at the two terms accessibility and usability and take the first steps into the world of web accessibility.

Day 2 The Smart Design: Accessibility and Colour

Here we take a look at how using colour can effect people and see some of the WCAG2.0 guidelines around contrast in web accessibility.

Day 3 Get started with Structured Headings

On day three we get a look at how to structure our web pages by using headings and why it can effect accessibility for many people.

Day 4 A Little Accessibility Guide to Device Independence

Now we learn a little about what device independence means and the difference to accessibility it makes for people who use the web.

Day 5 Assistive Technology: Introducing the Screen reader

On day five we start to look into the world of assistive technology and introduce the screen reader. We find out a little about who it’s for, how it works and how it benefits people with web accessibility.

Day 6 Your Guide to Accessibility and Screen Magnifier Software

Here we delve deeper into assistive technology and web accessibility by taking a look at screen magnifiers. Again we see how they work and who can benefit by using them.

Day 7 Accessibility for Voice Activation Software

Lastly on day seven we go further into assistive technology by looking at voice activation. We see what it does and how it can help the accessibility for people with using the web.

Bonus 10 Top Tips on Web Accessibility Best Practice

This last post will help you get started into the world of web accessibility. Learning about some of the most common things to be aware of and how to improve web accessibility for many people.

Share the love

If you found these articles helpful, why not share the love and share them with your friends. Please use the share links and help spread the message of web accessibility helping people use the web.

10 Top Tips on Web Accessibility Best Practice

These web accessibility top tips for best practice are based on both WCAG2.0 guidelines and my own experience of web accessibility and assistive technology. It is ment as a starting point and aims to help you make a start on the path to using better web accessibility practices.

1 Use well structured semantic mark up

By following W3C code standards and marking your content with the right HTML tags, you help both future proof and maintain your code and allow assistive technology to work more effectively.

You can read the article Get started with Structured Headings to see the value of using headings within your WebPages.

2 Use colour effectively

Colour is often considered part of the cosmetic design and not have any value to the content. Although for some people colour can aid there ability to read or find content.

You can read the article The Smart Design: Accessibility and Colour to find out more on how to use colour effectively.

3 Ensure device independence

This is key for many assistive technology as well as the fast growing mobile web access. More people are using mobile devices to access WebPages on the go or while relaxing at home.

You can read the article A Little Accessibility Guide to Device Independence to learn the fundamentals of this.

4 Use link text that is meaningful

Link text is the clickable text that will take you to something else. If an image is used instead of text, its alt text will be used as the link text.

Many assistive technologies and search engines will use this link text to see what the link is for. So link text like ‘click here’ or ‘more’ gives no meaning.

Also if the link is to something other than another webpage, it can be very helpful to say this within the link text. For example if the link is to a PDF file, adding ‘[PDF Document]’ to the link text will let people know what to expect.

5 Use progressive enhanced design where possible or graceful degradation

These terms are similar in that they both offer backward support for older technology. However, their approach is different.

Progressive enhancement is where you start with something that will work anywhere and then check for support of newer technology before using it. Where as graceful degradation is when if something is not supported you either give information about why and what is required before it will work or offer a more basic alternative.

You can read this article Graceful degradation versus progressive enhancement to see an example.

6 Separate content from style

The very early days of web technology, some basic styling like text size and colour was placed in the HTML code. In today’s web technology it is no longer required to do this. Now we have something called CSS (Cascading Style Sheets).

This allows us to just place our content in the HTML code and put all the styling in the CSS. By doing this it makes it easier to maintain and also allows assistive technology have some control over the styles. This can help people with low vision or people with dyslexia.

I generally advise that images used purely for decoration also be placed in the CSS and not in the HTML to help prevent any confusion over the purpose of images. Using null alt text may leave some people who may not be able to see them, wonder what the purpose of the image is. Placing alt text like * or decoration, may distract from the flow of content and again cause confusion.

7 Always use text to support the use of icons

When using icons to help identify something like a PDF document, make sure that it also has text that does the same thing. There are different ways of doing this from using images and alt text within the HTML content. To using custom fonts or images within the CSS and either visible or only screen reader visible text.

Screen reader only visible text is when it is not visible on the screen but screen reader software can access it and read it out.

There are a few ways people have managed this but the best way I have found is to use the CSS clip property. Some have used a left margin offset. However, this will cause horizontal scrolling for people using a right to left language.

8 Keep page content simple and consistent

There is a phrase known as KIS (Keep It Simple) and it is a great thing to bare in mind when writing or designing WebPages.

If your use of language is hard to read or the amount of information on your webpage is overwhelming, many people will not bother and look else where.

Likewise if your webpage layout and navigation is not consistent or is complicated to follow, again most people will give up and go somewhere else.

For accessibility, pages with large numbers of links, complex structures or inconsistent layout and navigation, will often make it very hard to impossible to use with assistive technology.

9 Don’t repeat yourself (DRY)

This term is often used in development and is good practice to follow in your WebPages. Things like using the same link text for different places will cause confusion and people will simply not know what link goes where.

Duplicating your navigation or content on a single webpage, will often just add to the level of complexity for people using assistive technology.

10 Label your form fields effectively

Assistive technology will use the HTML label tag and modern technology may use ARIA to identify form fields and sections of forms.

If form fields do not have their labels marked up, people who use assistive software like screen reader software, may not be able to use the form.

To conclude

These ten tips are a starting point on some of the most common accessibility issues found in today’s websites.

I hope you have found them useful and please feel free to comment, ask questions and let us know your views.

Bonus Tip

A bonus tip is not to place critical text in HTML title attributes. In most cases, you need not use them at all. The reason is generally this text is only available when using a mouse and if it just duplicates text elsewhere, it may cause some screen reader software to read the text twice.

Accessibility for Voice Activation Software

Have you ever watched Red Dwarf with Holly the talking computer and wanted to talk to your computer? For some people talking is their only way to use a computer.

What is voice activation software?

Voice activation software has advanced voice recognition that can listen to your voice through a microphone and convert this to computer instructions. It has evolved from simple sound detection to being able to understand words in multiple languages.

You will find it today being used on mobile phones such as Apples Siri to specialised assistive software on computers. Dragon Naturally Speaking, is probably the most popular voice activation software currently available.

How does web accessibility impact voice activation software?

If you have audio automatically play on your site, it can make it difficult for someone using voice activation to give voice commands. This making it hard to do anything while the audio is playing.

It takes more time to perform any task using voice activation, so moving through hundreds of links can be more trouble than its worth.

If there are little or no structure tags on a webpage, it can be very hard and slow to move and find information. Structure tags are things like headings and html5 section tags with ARIA roles.

You can read more about headings in the article Get started with Structured Headings and I will be covering ARIA in a later post.

Having timed restrictions such as only allowing people a limited time to perform a task may mean that its impossible to use with voice activation software.

Who will use voice activation software?

This started out as a very specialist software for people with physical limitations that prevent them from using a keyboard or mouse.

As the technology evolved it has moved into main stream products and now is used in many mobile devices.

Anyone may use voice activation software for any number of reasons from literacy difficulties to severe physical limitations. Some people may use it simply for their convenience over touch screen keyboards.

Things to note

It is important to remember people may use more than one assistive technology at the same time. It may be used with a screen magnifier or screen reader or other assistive technology.

You should also not assume anything about the people who may use voice activation software. It can be someone using it for better productivity or someone with multiple severe physical impairments.

Understanding how to build device independent websites can help improve peoples experience who use assistive technology. You can read the article A Little Accessibility Guide to Device Independence to learn a little about this.

Have your say

  • Do you use or ever seen voice activation software being used?
  • Have you ever used Siri or similar voice activation on a mobile device?

Why not share your experiences of voice activation software or ask us a question.

Your Guide to Accessibility and Screen Magnifier Software

Screen magnifier software is available in all shapes and sizes. From a basic magnifier built-in to operating systems to specialist software. They can be controlled by touch, keyboard, mouse or a specialised device. The main purpose is to make the visual display larger and easier to see for people with low vision.

How does screen magnifier software work?

Some will split the screen so that one section is magnified while the other is not. The split may be a left to right or a top to bottom split.

Others may use a boxed area on the screen that is moved around the display showing magnified content inside the box while showing at its original size outside the box. The box may be square, rectangle or circular.

The last type will magnify the whole screen showing only a small section of the display at any one time.

What’s in common with all of these methods is that you only get a small magnified section of the display at any one time.

What kind of magnification is available?

The level of magnification can be very slight from as little as 2% increase to very high magnification up to as much as 64 times the original size.

Some screen magnifiers will only enlarge the text content while others will enlarge everything. Some will also include colour contrast options for better visibility. Things like inversed colours or high contrast colours.

Some will enlarge the mouse pointer while others will use a fixed mouse pointer within the magnified area.

As well as this, there are various specialist monitors and stands, designed to give better visibility and comfort for people with limited sight.

Accessibility for Screen Magnifier Users

It is important to remember, you will only get a small part of the display at any given time. So things like having information presented in rows with one thing aligned to the left while the other part aligned to the right, across a wide screen without any visual guide can make it difficult to track with a mouse.

Form validation can cause difficulty if the error messages are placed away from the field which is at fault, This can make it hard to know what is wrong where.

Mouse activated tooltips can be a problem for screen magnifier users. If the tooltip extends outside the magnified area and moving the mouse hides the tooltip, they may never be able to see the whole tooltip.

This is the same for some drop down or pop out menus especially if they do not have any keyboard control.

Many screen magnifier users will use a keyboard over a mouse for faster access to content. So having visual indication of focused items can help them know where they are.

Things to note

There is both the visual and control aspects of your website to consider when looking at screen magnifier users. Remember people may combine screen magnifier software with a screen reader or voice control software. So it is important to understand a whole range of assistive technology and how people use them.

Have your say

Have you ever used or seen screen magnifier software used?

Why not share your thoughts on screen magnifier software and accessibility or ask me any questions you may have on the subject.

Assistive Technology: Introducing the Screen reader

What are screen readers or TTS (Text To Speech)? Screen readers are normally software that is installed on a computer, tablet or smart phone. Its primary purpose is to read out in a synthetic voice, the text information on the screen. There are a number of controls that help with choosing what is read out at any given time and how it is read. Such as reading a page title or spelling out a word.

Generally it will tend to be visually impaired people who will depend on using screen reader software. However, many other people may choose to use screen reader software for reasons from reading difficulties or language differences to ease of proof reading or multi-tasking.

How is screen reader software used?

The way people use screen reader software will depend on both the device and the person using it. For example a touch screen device with screen reader software will use touch gestures to control what is read out and these gestures will tend to be different to those used without the screen reader software enabled.

To help explain this, the Voiceover screen reader software on Apple devices change the single tap gesture to a double tap gesture for activating an item. This is designed to allow people who may not be able to see the screen to locate an item by the voice output before activating it.

Screen reader software on computers generally use keyboard controls to manage the various speech options and can be different from one software package to another. The level of support for the latest web technology or browser will also vary.

People who have a reasonably good level of sight, may use a mouse or other pointer device and may combine the screen reader with a screen magnifier. People who have little or very limited sight will tend to use only a keyboard or touch gestures and may combine the screen reader with a Braille display.

How do screen readers work with the web?

A key difference between using a screen reader compared to a visual display is the way information is presented. Visually, you may have multiple columns, boxes or other sections on a page, that can be quickly identified and read. However, as screen readers only output voice, you can only hear a single piece of information at any one time. A little like a music player, you only listen to one song at a time.

There are many controls within the screen reader software, that allow people to control what they would like to hear. Perhaps a little like the controls on a music player for play/pause or skip forward/backward.

Within a web page, if it follows good semantics, it will give screen reader software valuable information about the content. Things like where the headings or page sections are, what is a link or list, the details of tabular data or what images are on the page.

This information can then be used by the screen reader controls to move between these items more quickly without having to read from start to end. This giving people who use screen readers a similar experience to the visual display.

One thing to note is screen reader software will only look at the HTML or DOM content and ignore the visual styling from CSS. So the order of information being read out is based on the order it is within the HTML or DOM content and not where it is displayed visually.

This is often an area of confusion as an example a page may be displayed visually in three columns with navigation in the left column, main content and footer message in the centre column while additional information like contact details in the right column.

Depending on the order it is coded in the HTML or DOM, a screen reader may read it from left to right or the left column followed by the right column before the main content or alternatively read the main content first.

If we look at what happens in this example if the main content is read first, a user may get down to the footer information and assume this is the end of the content and not bother reading any further.

What can we do for screen reader users to help?

One thing some developers do to help is include skip to links and section markers. Skip to links allow people to quickly skip over a block of content to a specific part of the page and section markers can be used by many screen readers to either list as a summery or skip to just like skip to links.

Headings are another thing most screen readers can list or skip to and is often used by people to get an overview of content or quickly jump to an item of interest. You can read more about headings in the article: Get started with Structured Headings.

The text content is crucial as it is this that screen readers can read out. Things like colour and other visual information is ignored. You can read more about colour in the article: The Smart Design: Accessibility and Colour.

Remember for image content, you can add something called alt text. This is a short bit of text that says the main purpose for the image. I will cover images and alt text in a later article.

Have your say

  • Have you ever used or seen someone use a screen reader?
  • Do you know if your site is screen reader friendly?
  • Would you like to know more about screen readers?

A Little Accessibility Guide to Device Independence

When asking people about web accessibility and device independence, many will say its about giving keyboard access. However, its a little more then that. Here we will help you understand more about this accessibility term.

What is Device Independence?

A device can be anything that gives someone a way to use your website. This includes regular desktop computers, touch screen tablets or smart phones, games consoles and internet ready TVs. It also includes assistive technology like voice activation, eye trackers and other specialist keyboards, Braille keyboards and displays, screen readers and magnifiers. So to be really device independent, your website will need to work across all of these different kinds of internet ready products.

Plus you have to understand how people use these different internet devices to be able to develop your website in a way that will not prevent or make difficult for anyone using their internet product of choice.

Cross Browser Support

One of the first steps towards device independence would be making your website work equally well in all the popular browsers. This task is an on-going challenge as new browser updates are released and peoples choice changes. It is worth noting assistive technology is often behind and may not support the latest browser versions.

There are some best practices that can help you like following the W3C code standards, progressive enhanced design or graceful degradation and separating style from content. These all relate to web development and unless you develop your own website, will be the responsibility of the developers you use.

If you hire someone to build your website, you can ask them about browser support, if the use progressive enhanced design or separate style from content.

If you’d like to read more about progressive enhancement and graceful degradation, take a look at the article Graceful degradation versus progressive enhancement on the W3C WIKI.

Responsive Design

This is another developer term given to the design concept of allowing the page layout to flow to best suit the display it is being viewed on. Developers and designers use various techniques from scaling images and adjusting the number of columns to showing or hiding content to give a better experience for people no matter if they are using a small mobile phone or slightly larger tablet or the latest wide screen HD TV.

Again for many of us, this responsibility will be with who ever we hire to design and develop our website. Although having a basic understanding, allows us to ask our developer, have they included responsive design.

Assistive Technology and How People use It

This is one of the more difficult areas to address as most web developers will have little or no experience of specialist assistive technology. There are some guidelines in WCAG2.0 designed to help developers but often without knowing how people use these assistive technologies, it is difficult to get it right.

Some developers will hire accessibility specialists to help them through this process. By working with their designers and developers, performing many tests and following the accessibility advice given. They can produce much more accessible websites.

One point to remember is that it is often much easier and costs less, if accessibility specialists are involved from the beginning of a website project. As this can prevent the need to retro-fix issues and instead help designers and developers build accessibly from the ground up.

There are many different types of assistive technology and people may use them in different ways, on different devices. I have listed a few popular technologies below and my next article will start going through these in more detail.

  • Screen Readers or otherwise known as TTS (Text To Speech)
  • Screen Magnifiers or specialised monitors and stands
  • Braille Keyboards and Displays, sometimes referred to as refreshable Braille
  • Eye trackers, clickers and other specialist keyboards that are designed to help people with very limited mobility
  • Colour contrast software, often to help people with dyslexia
  • Touch screens, now commonly found in mainstream products, often used for people with coordination difficulties
  • Voice activation sometimes called dictation software

Have Your Say

  • Have you ever heard of the term device independence before?
  • Have you thought about device independence in this way before?

I would love to hear your views on device independence and your thoughts on my explanation of this accessibility subject.

Get started with Structured Headings

What do we mean by structured headings? Well we tend to write in blocks of paragraphs made up of sentences, phrases and words. These blocks can be grouped by headings or sometimes referred as titles or sub-titles.

These headings can be further grouped into their level of importance and relevance to each other. Many people show this by using larger bolder text for headings with greater importance.

How do structured headings impact accessibility?

So why do structured headings effect web accessibility? Well this is because how people make sense of your content. People will want to skim through your content to find what is relevant and interesting to them.

Yes, so this is nothing new and you’ve been using headings in your content since high school. But what about using headings on a web page?

Semantic Headings

When using headings on a web page, it is important to use the correct HTML mark-up. This is the code behind your web page and is what can tell browsers and assistive technology what is being looked at.

It is not what determines the visual style of your content. This you can do separately through something called style sheets.

The HTML code or sometimes known as tags, are placed inside angled brackets. There are both a start tag and stop tag. Otherwise known as opening tag and closing tag. For example a paragraph can be shown as <p>This is a short paragraph.</p>.

Note the closing tag is the same as the opening tag except for the forward slash "/" just after the opening angle bracket.

In HTML there are six different heading levels from 1 to 6 and are wrote as <h1>, <h2>, <h3> and so on.

How to Structure Headings

In HTML4 standards, it treats all content on a single web page as one document. Therefore, you should only have one <h1> top level heading that proceeds any other heading. All other heading levels must be ordered in a hierarchy fassion. This meaning that you may not place a <h3> before you have placed a <h2>.

With HTML5, the standards have changed and a web page can be grouped into separate content areas. Each area being treated as a separate document in its own right. This allows multiple <h1> headings being used on a single web page. Although the same hierarchy structure of only one <h1> heading should be used within any single section of the web page. This I will cover in more detail in a later post.

Below I give examples of both good and bad structured headings using the HTML4 standards.

Bad Heading Structures

 <h2>Search Options</h2>
<h1>Main Heading</h1>
  <h3>Latest News</h3>
  <h3>News Item 1</h3>
   <h4>News Item 2</h4>
    <h5>News Item 3</h5>
     <h6>Copyright</h6>

Lest go through the above structure and see why it is wrong.

The first mistake, is the first heading is not a <h1>, so the <h1>Main Heading</h1> needs to be placed before the <h2>Search Options</h2>.

The second mistake is there is a <h3> following the <h1> without having a <h2> before it. To fix this we just change it to a <h2>.

The third mistake, is that the three news item headings directly relate to the Latest News heading but its not reflected in the structure. To address this, we change all three News Item headings to be one heading level below the Latest News heading. So as we previously changed this to a <h2> the three news item headings need to be set as <h3>.

The last mistake is the copyright heading is set to a <h6> which does not fit into the document structure. So to fix this, we look at what this content relates to. Which is the Main Heading, so we need to change it to a <h2>.

See the revised heading structure below for how it should be structured.

Good Heading Structures

<h1>Main Heading</h1>
 <h2>Search Options</h2>
 <h2>Latest News</h2>
  <h3>News Item 1</h3>
  <h3>News Item 2</h3>
  <h3>News Item 3</h3>
 <h2>Copyright</h2>

How do people benefit from structured headings?

Well everyone benefits as it helps search engines categorise your web page content. This helping people find and read your web page.

People with limited sight benefit, as they can use screen reader or screen magnification software to read your headings and help them find the content quickly.

People who use specialist input devices such as voice activation or eye tracking or Braille keyboards can also quickly move between your headings.

Plus people who are using touch screens, mobiles or specialised web enabled devices like a Braille Note Taker can also quickly skip between your headings.

Have your say

Let us know your thoughts about using structured headings. Do you make use of them yourself?