Author: John Sexton

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?

The Smart Design: Accessibility and Colour

Web design is commonly seen as a very visual thing and the use of colour plays a large part. However, often the way different people view colour is over looked. What I mean by this, is people with dyslexia or low vision or colour blindness will view colours differently. For example, many dyslexics prefer a light pink or yellow background instead of a bright white and people with low vision will often like a high contrast such as yellow on a black background. This will be a very individual thing and its not always possible to design for all eventualities, so how do we design for accessibility and colour effectively?

Accessibility and Colour in WCAG2.0

The WCAG2.0 have produced a few guidelines on the use of colour, to help us design accessible websites. These fall into two main categories: colour contrast and the use of colours. There are a few best practices regarding web development, these will be explained in a later post.

Colour Contrast

This is measured by a ratio difference between the foreground and background colour. There are free online tools like Webaim’s contrast checker that can help you with measuring the contrast ratio. The WCAG2.0 has two levels of contrast ratio, depending on the level of access you are aiming for.

The WCAG2.0 guidelines are divided into three levels of access: A, AA and AAA. Level A, is considered the bare minimum access, level AA, is considered a minimum standard by many for best practice where as level AAA is considered the highest standard you can aspire to. The guidelines for colour contrast are defined at levels AA and AAA. For each level, it has one minimum ratio level for standard text and another level for bold and large text. Standard text is any text up to 18PT or 14PT bold while bold and large text is from 14PT bold or 18PT regular and above.

The minimum ratios as stated in the WCAG2.0 guidelines are listed below:

  • 4.5:1 For level AA standard text (up to 18PT).
  • 3:1 For level AA bold text (from 14PT and above).
  • 3:1 For level AA large text (from 18PT and above).
  • 7:1 For level AAA standard text (up to 18PT).
  • 4.5:1 For level AAA bold text (from 14PT and above).
  • 4.5:1 For level AAA large text (from 18PT and above).

Using Colours

The WCAG2.0 guidelines advise to avoid using colour as the only means of identification of something. So things like press the green button for go and the red button for stop, should be avoided. This is to prevent the difficulties it will cause someone who can not either see the colour or be able to tell the colours apart. However, if you use colours to support or re-enforce the identification of something, it can be helpful to people. As for some people it is easier to refer to a colour than the text. So by using both, you can help a wider group of people use your site more easily.

Colour Preferences

You have probably seen on some websites links that make it easy for your visitors to choose between different colour schemes. Often listed as lower contrast, higher contrast, gray scale and regular contrast. These are often pared with links to adjust the text size up or down. However, for some people these options can be very helpful, for others it just adds to the number of links on every page that they need to tab through. As explained above, these colour preferences are very personal to each person and is difficult to accommodate for everyone. They are not a WCAG2.0 guideline and there is some controversy over if they should be used or not.

My personal view is that they are an optional extra and not a priority. I also feel that if used, they should either have a skip link for quick navigation over the multiple link options or be accessed through a single link to the multiple colour preferences. This way there is less additional tabbing through these colour preferences for keyboard and voice dictation users. I have seen some terrible implementations of colour preferences, from mouse only controls to floating transparent controls, each giving access issues to different groups of people, so instead of helping, it adds a layer of poor accessibility.

Have your say

  • What are your views on having colour preference links on a website?
  • Do you have a preferred colour scheme you find easier to read?
  • Do you have colour preference links on your own site and how have you implemented them?
  • Have you seen any really good or really bad implementations of colour preference links?

Please feel free to answer any of the above questions or just tell us your experiences, preference or views on accessibility and colour in web design.

Accessibility and Usability: The first steps

Often I have been asked about the differences between accessibility and usability or which of them is more important. The truth is they tend to be used interchangeably and are equally important.

How I View the Terms Accessibility and Usability

My own view is accessibility will tend to refer to people having access to something. Where as usability is more about people being able to use something. As an example if a building has a flight of stairs leading to the door, people with mobility issues are going to have difficulty accessing the door. However, if the door was made of heavy stone and required great force to open it, many people will not be able to open it despite being able to access the door.

In the world of web accessibility, sometimes abbreviated to A11y, the term accessibility is broadly used for both access issues and usability issues. The term usability is generally used to define the ease of using any web interaction. Things like getting around a site or finding relevant information. In both cases it is about people interacting with your website through a wide range of web enabled devices.

WCAG2.0 and Accessibility

The WAI (Web Access Initiative), part of the W3C (World Wide Web Consortium), have produced WCAG2.0 (Web Consortium Access Guidelines). These are there to help web designers, web developers and web content authors produce accessible websites. However, it is not an easy read and without knowing a little about the people the guidelines are designed to help, it can be quite overwhelming.

So to help make those first steps, we will talk a little about people. After all, your website is potentially the most accessible communication media you have available to you.

Knowing your Audience

Firstly accessibility and usability effects everyone not just people who may have a physical impairment. If something is difficult or frustrating to use, most people will give up and look else where. If your website only works on one browser with specific add-ons installed at a particular screen resolution, it will limit the number of people who can use your site.

Secondly never assume, if your site is selling sports cars don’t assume that just because a visually impaired person can not drive one, that they are not going to buy one. People buy gifts, collectables and may appreciate all kind of things.

It is true many people with impairments can gain the most from accessible websites. It can be their life-line into equality and communication networks. A few examples may include elderly people who are not very mobile or live in remote locations or people who have a physical impairment such as hearing loss or visual impairment. It is worth remembering many people may have multiple impairments such as sight and hearing loss and these can be at varying degrees. There are other impairments that can effect many people like dyslexia or ADHD, these people are often effected by things like the use of colour or time sensitive tasks.

Understanding Disability Groups

I have broadly categorised disabilities into five groups below. Each category has a link to an article on Webaim, where you can read more about the disability and its effect with the web.

By understanding these broad groups of disabilities and the assistive technology people use to access the web, you can better appreciate the WCAG2.0 guidelines and why they exist.

Have your say

Tell us how you view the terms accessibility and usability, has it been a subject of controversy?