Skip to content →

Category: Web Accessibility

Ultimate checklist for making your plugin accessible

HTML code semantics

Following HTML code semantics is fundamental in making your web applications accessible because assistive technologies, like screen readers, rely on the code to transmit the correct information to the user.

Forms are communly inaccurate due to a lack of the label tag or the misuse of the input fields.(Check out the W3C for forms in HTML4 or W3C for forms in HTML5.)

Another commun mistakes involves data tables weither by not structuring your table with the proper elements or  by adding visual attributes that should go in the CSS, (Check out W3C for tables in HTML4 or W3C for tables in HTML5.)

Follow W3C standards to the letter and you will have a good start.

Use CSS

To keep the integrity of your code separate content from presentation. In the case of a data table, attributes like cellspacing and cellpadding should be replaced by padding of the td element in your css file. This will allow users to strip down the visuals to suit their own needs.

Tabbed Navigation

Many users use only the tab key to navigate within a web browser and webpage, because they cannot use a mouse (in case of limited motor skills or blindness).

Colour contrast

There are many tools to help you choose the appropriate colour contrasts between background and foreground of your text.

A proper ratio of luminosity assures that users with visibility issues can clearly see differences between elements. Think of users with colourblindness or eye sensitivity.

WAI-ARIA attributes

If you want to go a step further and you are coding in HTML5, you can use ARIA attributes to compliment all previous steps. WAI-ARIA is a set of elements that give extra code information to assistive technologies.

More information about ARIA:

4 Comments

Making your site search engine friendlyRendre votre site convivial aux moteurs de recherche

Terms like search engine optimization (SEO), metadata, ranking and search engine marketing (SEM) can be a bit confusing. I will instead give you three basic ways to get your site more visibility on any search engine.

Follow accessibility standards

This is the most technical point, but the most critical of all three points. It demands the know-how from your web professional. The main focus is on making your content available and providing coherent HTML code.
Accessibility standards include:

  • Providing alternative text to anything non-textual or complex,
  • Using headings sequentially,
  • Conserving the purpose (semantics) of all HTML code,
  • Making the content of links and destination comprehensible as is.

Get known outside of your sphere

Use external resources to attract attention to your site. Social Networking sites are a great way of increasing your online presence. Facebook, Twitter, LinkedIn and now Google + are the most well known social networking sites, but there are much more out there. They all have different particularities. It is up to you to judge which one fits your needs most. You can also participate in forums, discussion boards and sites with comments that target your desired audience.

Web tools from your favourite search engine

All of the major search engines have what is called “Webmaster tools”. Search engines provide us with the possibility to send them data about your site directly. Data like your site URL and an index of your site, in turn they provide you with basic information on your site and submit it to their database (webcrawler).

Remember that making your site appear in search results takes time and dedication. There are no magic tricks to make your site be in the top results. The tips I gave you should give you a head start into attracting more people to your site.

Des termes tels que SEO, métadonnées, classement des sites Web et SEM peut être un peu compliqués. Je vais plutôt vous donner trois façons de donner à votre site Web plus de visibilité dans n’importe quel moteur de recherche.

Suivre les normes d’accessibilité

C’est le point le plus technique, mais le plus critique de tous les trois points. Elle exige du savoir-faire de la part de votre professionnel du Web. L’objectif principal est de rendre votre contenu disponible et de fournir du code HTML cohérent.
Les normes d’accessibilité comprennent les implications suivantes:

  • Il fault fournir un texte alternatif à tous les éléments non textuelles ou complexe,
  • Il faut utiliser des en-têtes de façon séquentielle,
  • Il faut conserver la signification (sémantique) de tous les codes HTML,
  • Il faut rendre le contenu et destinations des liens compréhensibles.

Obtenez connu en dehors de votre sphère

Utiliser des ressources externes pour attirer l’attention vers votre site. Les sites de réseaux sociaux sont une excellente façon d’augmenter votre présence en ligne. Facebook, Twitter, LinkedIn et maintenant Google + sont les plus connus des sites de réseautage social, mais il y en a beaucoup plus. Ils ont tous des particularités différentes. C’est à vous de juger celui qui correspond le plus à vos besoins. Vous pouvez également participer à des forums, des discussions et à des commentaires de sites qui ciblent votre auditoire désiré.

Des outils Web de votre moteur de recherche préféré

Tous les principaux moteurs de recherche ont ce qu’on appelle “Webmaster Tools“. Les moteurs de recherche nous fournissent la possibilité de leur envoyer directement des données sur votre site Web: des données comme l’URL et un index de votre site. En échange, ils vous fournissent des informations de base sur votre site et le transmettent à leur base de données (webcrawler).

Rappelez-vous que faire en sorte que votre site Web apparaisse dans les résultats de recherche prend du temps et surtout du travail. Il n’y a pas des tours de magie pour que votre site soit dans les premiers résultats. Les conseils que je t’ai donné devrait vous donner une longueur d’avance en attirant davantage de personnes à votre site.

Comments closed

Designing a website: Top 15 things to consider for web accessibility

Here are the main things to think about when designing a website:

  1. Maintain a design and layout consistency throughout the site,
  2. Avoid clutter,
  3. Include written transcript for any audio and visual media,
  4. Avoid multiple level menus. Do not have more than two levels,
  5. Include a sitemap when your site has embed pages,
  6. Avoid making the width of content too large,
  7. Any one link should have the same title,
  8. Make the titles of the pages clear,
  9. Content must be simple and to the point (Especially if your target audience is broad.),
  10. Do not add default value in form fields,
  11. Make sure that the colours of the background and foreground are well contrasted,
  12. Have a decent font-size. (14px is good.),
  13. Avoid images with text on them,
  14. Don’t use “Read more” links, instead use “Read more about THE TITLE OF THE PAGE”,
  15. All links in the content should be underlined.

Maintain a design and layout consistency throughout the site

I have rarely seen an effective switch in design or layout within the same site. If it is absolutely required, make all changed subtle. Having differences in webpages of one site can be confusing and frustrating for a visually-impaired person and even for a new visitor. A visually-impaired person often uses a screen reader to read the content of the site to them. If within the same site the structure of the site changes from one page to the other, it can be disorienting. The norm is to maintain the same look and feel throughout a site, your new visitor might feel lost when jumping to another page with a completely different look.

Avoid clutter

Keep the layout as clear as possible. This makes it easier for the visitor to find the destination they are looking for.

Include written transcript for any audio and visual media

It’s fair to say that this demand is not obvious to produce. But it’s not fair to those who do not possess all senses. Food for thought!

Avoid multiple level menus. Do not have more than two levels

Not only do multiple level menus often not work properly in different browser, especially older ones, but they are very hard to navigate by keyboard only. Next time you see a multiple level menu try going through the menu by click on the tab key on your keyboard. You’ll see, it won’t be easy to get to the third level or even the second level.

Include a sitemap when your site has embed pages

If your site does have many sub-pages within a page, make it easier for your visitor to get to those pages through a complete sitemap.

Avoid making the width of content too large

When the width of a paragraph is too long, it is often harder on the eyes. The reader gets tired more quickly. Those affected may include people with learning disabilities, newbies, but even people with no known deficiencies.

Any one link should have the same title

You should avoid having the same link with different titles. For example, the link to the contact page with the title “Contact us” should not named “Reach us” elsewhere. We want to avoid any type of confusion that the visitor may encounter.

Make the titles of the pages clear

Be as accurate as possible when naming your pages. Think that you will be using these titles as your page’s main heading.

Content must be simple and to the point

Do not be verbose. Use lists whenever possible. Keep your sentences short. Use words effeciently. Read the W3C Writing Style section.

Do not add a default value in the text input field

The label of the text input field should be enough as to determine the desired input.

Make sure that the colours of the background and foreground are well contrasted

Colour contrast can be measured with applications like the Contrast Analyser by The Paciello Group. Download the application, install it and with the pipette determine if your chosen background and foreground colours satisfy the required contrast ratio.

Have a decent font-size

Make it as easy as possible to read your content. For a font like Arial, use a font-size of 14px.

Avoid images with text on them

If you must have text in your images, make sure to describe the image in the alt attribut.

Don’t use “Read more” links

Instead of linking to your full page with the very commun “Read more” link or the like add the title of what you are linking to. So if the title of the page the link is directing to is called “The Greatest Article Ever” have your link be “Read more about The Greatest Article Ever”. It might be redundant for sighted people, but when you consider that these links might be read out of context by screen reader, then it makes sense.

All links in the content should be underlined

In terms of usability, we want to inform the visitor when a textual information is linked to another page. Making the link a different colour may be indistinguishable to visitors with color blindness.

Many of these points have other implications when implemented in practice. We’ll leave those for another post.

Leave a Comment

Top Accessible WordPress themes

This assessment is very simplistic and constitutes a basic preliminary review. It is not comprehensive nor exhaustive.

I chose themes from the Free Theme Directory and searched for Web Accessible and Accessibility. I narrowed my selection by considering which theme would be easily customizable, have good contrast between foreground and background, have elements in a convenient location and be aesthetically pleasing as is.

I then used the plugin Demo Data Creator to generate more content for posts, pages, comments and categories.

The following themes made the cut:

Precious version 4.0.1
At first glance the layout is pretty simple and effective. Convenient breadcrumb on top of page. Upon disabling the style sheets, nothing is out of order. Validates for XHTML 1.0 Transitional and CSS2.

Stardust version 2.7
Very stylish out of the box with flexible width. Has “Skip to content” and “Skip to menu” without CSS. By disabling the images, the date for each post is too dark. Validates for XHTML 1.0 Strict, but not in CSS with 6 CSS2 errors.

Whitepress version 1.1.7
This theme includes a skip to content, navigation and search form when disabling CSS. Has a nice javascript for going through the sidebar items, but also works when javascript is disabled. Uses fixed width for 1024×768 resolution. Validates for XHTML 1.0 Strict, but not in CSS with 1 CSS2 error.

Dodo version 1.2.1
This theme is what this website is based on. The color of the posts date and other meta information is also too light. By disabling the images, the text of the main menu has not enough contrast with its background. With a little tweek here and there, it’s really nice. Fails to validate with XHTML 1.0 Strict with 1 error, but passes CSS2.

Precious and Stardust passed the Firefox Accessibility Extension 1.5.61.0 rule set with only warnings signaled .The themes Whitepress (2 Fails) and Dodo (1 Fail) did not pass.

For validation, I used Markup Validation Service and The W3C CSS Validation Service.

8 Comments

em, a unit of measure

The secret of the “em” is proportions. Keeping the appropriate proportions regardless of the size. Let’s use font-sizes as an example.

First, set a parent font-size as an absolute measurement. Let’s say 16 pixels in the body. All subsequent sizes use the following formula: child pixels/parent pixels = child ems. So if you want an h1 to have a pixel size of 24, then its em unit would be 1.5 (from 24/16).

Nested elements require particular attention, because they multiply on each level. If you have a div inside a div and the outer div has a font-size of 1.5em, then the inner div (div div) should be 1em to cancel its inheritance.

Now that the how is settled, let’s go to the why.

Other than WCAG 1.0 recommending the use of relative units (ei. em or %) as opposed to absolute units, there’s the fact that not all browsers deal with resizing in the same way. Some older browsers like IE6 won’t resize any absolute pixels.

The proper implementation of this guideline might be daunting for larger style sheets. My initial advice would be to break it down to specific sections. Have parent pixels on primary divisions and set your inner relative ems accordingly.

[Source: CSS for accessible web pages by Richard Rutten]

Leave a Comment

The deal with opening hyperlinks in a new window or tab.

The main consensus is to avoid them. Why you say? Well because it’s not necessary. If you really want to open a link in another tab or window, you can do it yourself:

In Firefox, hover over the link you want to access, right-click your mouse to get a menu and click on “Open Link in New Tab” or “Open Link in New Window”.

Firefox Right Click Menu

In Internet Explorer, hover over the link you want to access, right-click your mouse to get a menu and click on “Open in New Tab” or “Open in New Window”.

Internet Explorer Right Click Menu

I found other compelling reasons to avoid this habit on Accessify Forum. Kyle J. Lamson wrote“…Forcing new windows can confuse people when it opens behind the window and they do not realize it and it is really iritating when we are reading and it blocks our view.” He also mentions that some browsers or applications do not support multiple windows. He continues by adding “If I want to return to your site, I will… either back button or because usually I open links in new tabs. But if I am just using your site as a jump off point to somewhere else… then i do not wish to remain at your site and you should not force me to.”

I agree with Kyle, it’s all about giving choices and not forcing anything on the user.

So use the back button or get to know your browser. Simple and efficient shortcuts will help make your web browsing experience a better one.

Leave a Comment

Pushing for Web Standards

Websites dedicated to online awareness and magazines alike are pushing more and more the importance of Web Standards. Sites like A List Apart has been an advocate for Web Standards and Web Accessibility for years. WordPress, Joomla and other content management systems have embraced the principles of accessibility. Forums like Accessifyforum have also seen increased interest.

Governments and now Educational Institutions, mainly Universities are taking the matter into their hands.

Blogs like www.prettysimple.co.uk/blog and contests like at www.accessibilityinfocus.co.uk encourage and pursue the issue in terms of content, design and context. I even came across a guild for accessible web designers. It is hopeful to see that web professionals consider web standards as an important facet of the web experience.

Leave a Comment

Getting Lists right

Lists can be tricky, but as long as you keep a consistent structure and the correct sequence, lists are a piece of cake.

Here are the basics to remember:

  • Make your menus into unordered lists,
  • Place the list inside a div,
  • Have an H2 header with menu title (hide it if not need to be visible),
  • The ul has no left indentation (for browser compatibility),
  • Use display:inline for horizontal lists,
  • Breadcrumbs use nested lists,
  • Be diligent.

To read more about lists: CSS Design: Taming Lists

Leave a Comment

Evaluating a website for accessibility

The W3C has extensive information on how to properly evaluation a sites accessibility. Here are the underlining steps to ensure that your evaluation is full-proof:

For a preliminary review, select a page that is representative of the whole site or that most people will see. Try to choose a page that has tabular data, images and scripts. And then:

  • Examine this page for alternative text,
  • Divs instead of tables for page layout,
  • Use the keyboard instead of the mouse for navigation,
  • Test with different font-sizes and screen resolutions.

The Firebug and Web Developer extensions in Firefox will make your life easier in accessing the code and disabling images and even resizing your browser size. It might be a good idea to try a screen reader, and not to mention an Web accessibility evaluation tool like AChecker. These will enhance your understanding of the sites limitations and successes.

Another important part of evaluating a site is to get people with disabilities involved in the process. Some may have insights that other users will not.

For a complete procedure of website evaluation you have to go to the W3C – Web Accessibility Initiative page.

Although a little outdated, the WAI also provides a comprehensive checklist of accessibility guidelines (WCAG 1.0) and an useful template for the final accessibility report. They really thought of everything!

Leave a Comment

Did you know that…

Did you know that according to Statistics Canada in 2006 there was 1,289,420 Canadians with a hearing impairment, 835,960 Canadians with a seeing impairment, 2,856,820 Canadians with an agility impairment, and 752,110 Canadians with a learning impairment. In every case, around 70% of these Canadians said that they had used the Internet in the past year. Let me crunch the numbers.  That’s 5,734,310 Canadians with the above mentioned impairments of 31,612,897, the total population recorded that year. So…there’s roughly about 13% of Canadians, with these impairments, that use the Internet.  That’s a lot of people if you ask me!

Ok, nobody likes having numbers thrown at them, but I hope that at least it impresses on you how important it is to consider people with impairments or disabilities as active members of our society and as such they should to be able to access with ease all the information everyone else can access.

You can have a look at the complete survey at the Statistics Canada website.

Leave a Comment