Tag: WCAG

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.

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.

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?