Qatar Website Accessibility / Usability

Best Practices Checklist: v1.3

Date: January 30, 2012.

Mike Park
e-Accessibility Services
Mada, Qatar Assistive Technology Center
Office: +974 4459 4063
E-mail: mpark@mada.org.qa

W: mada.org.qa | T: +974.4459.4050 | F: +974.4459.4051 | E: info@mada.org.qa

Follow @MadaQATC on Twitter and http://facebook.com/madaqatc

Page | 1
Table of Contents

Qatar Website Accessibility / Usability Best Practices Checklist: v1.2 ........................... 1

Website Accessibility / Usability Best Practices Checklist ................................................ 3
Introduction ..................................................................................................................3
Accessibility Standards and Guidelines ....................................................................... 4
International Website Accessibility Guidelines .......................................................... 4
Usability Assessment Priorities ....................................................................................4
Accessibility Tools and Methods ..................................................................................5
Accessibility Resources............................................................................................6
About Mada e-Accessibility Services ........................................................................... 6
Qatar Website Accessibility / Usability Best Practices Checklist ...................................... 7
1.0 Website Platform, Structure, Layout and Design ................................................. 7
2.0 - Colours and Contrast ...........................................................................................8
3.0 - Space, Alignment and Consistency ..................................................................... 8
4.0 - Multi-Media Content.............................................................................................9
5.0 - Web Content and Mark-up Structure ................................................................. 10
6.0 - Images and Graphics......................................................................................... 13
7.0 - CSS and Website Accessibility Features ........................................................... 15
8.0 Frame / iFrame ................................................................................................. 16
9.0 - Tables................................................................................................................17
10.0 - Text .................................................................................................................17
11. 0 - Headings ........................................................................................................ 18
12.0 - Links and Labeling ........................................................................................... 19
13.0 - Web Site Navigation ........................................................................................ 20
14.0 - Web Site Menus .............................................................................................. 21
15.0 - Using Forms .................................................................................................... 22
16.0 - Web Programming ........................................................................................... 24
Appendix A - WCAG 2.0 Guidelines .............................................................................. 27
WCAG 2.0 Quick Reference List................................................................................ 27
Principle 1: Perceivable .......................................................................................... 27
Principle 2: Operable .............................................................................................. 27
Principle 3: Understandable ................................................................................... 27
Principle 4: Robust ................................................................................................. 27

Page | 2
Website Accessibility / Usability Best Practices
Checklist

Introduction

When re-building or retrofitting a website with accessibility and usability, a

comprehensive international guideline is available on how to incorporate
accessibility. The WCAG 2.0, Web Content Accessibility Guidelines were
developed by the W3C WAI (World Wide Web Consortium, Web Accessibility
Initiatives) which is recognized by legislation all over the world.
Mada has compiled a generic website accessibility and usability checklist for
Qatar with Arabic content that any organization can adopt and reshape into
policy. It is important to note; incorporating accessibility and usability into the
early planning stages and the process of a new website design is much easier
than retrofitting accessibility and usability into an existing website. From an
economic and time saving point of view, it makes perfect sense to do it right the
first time, not after the website has been built.

Why create Accessible Websites in Qatar?

It is the right thing to do! People with disabilities using Assistive

Technology (AT) devices must have equal rights to information. It is
estimated that there are over 10,000 Qataris not including Expats living
with a disability and the number is growing every year. We must also
assume that international users using AT devices will also be visiting the
websites in Qatar as major international events are planned for the future.

Qatar has Signed and Ratified on the United Nations; Convention on

the Rights of Persons with Disabilities which states that electronic
information including websites must be accessible to people with
disabilities.

ICT Qatar; Supreme Council of Information, Communication and

Technology has created an e-Accessibility Policy for Qatar, which
states that Websites must be accessible and comply to; WCAG 2.0 A and
AA guidelines.

References:
1. Some of the items in this checklist may directly quote references from the
W3C WCAG 2.0 Guidelines; http://www.w3.org/TR/WCAG/
2. Some of the ideas for usability were referenced from the BBC website;
My Web My Way; http://www.bbc.co.uk/accessibility/
Page | 3
Accessibility Standards and Guidelines

International Website Accessibility Guidelines

W3C WAI WCAG: WCAG 2.0 (A), (AA), (AAA)

World Wide Web Consortium, Web Accessibility Initiatives, Web Content

Accessibility Guidelines

Accessibility Guideline Priorities

Address Accessibility issues in the order of importance;

WCAG 2.0: (A), (AA) and (AAA, optional)

For most organizations; compliancy levels A and AA are required.

Qatar eAccessibility Policy; A and AA compliancy

Guideline; WCAG 2.0 (A)

Priority 1 is a must fix, it should be addressed first.

Guideline; WCAG 2.0 (AA)

Priority 2 is a must fix after Priority 1s have been addressed

Guideline; WCAG 2.0 (AAA)

Fixing Priority 3 issues is optional. Addressing Priority 3s will ensure the website
is fully accessible to the widest range of people possible.

Usability Assessment Priorities

Usability is just as important as compliance to guidelines. Web content and

functionality must be tested with keyboard and assistive technologies.

Usability of Assistive Technologies: Example; Keyboard and Screen Reader

Usability Priority 1
Usability Priority 2
Usability Priority 3

Page | 4
Accessibility Tools and Methods

Software Accessibility Tools

Accessibility tool used for analyzing WCAG 2.0 compliancy

Web Aim Wave Accessibility Toolbar (Single web page analyzer)

Website: http://wave.webaim.org/
1. Install Firefox browser
2. Download and install the Wave Accessibility Toolbar as a Firefox add-on

Colour Contrast Analyzer

Used for measuring colour contrast between foreground and background

content. The software checks for WCAG 2.0 colour contrast compliancy level AA
and AAA.
Software: Color Contrast Analyzer 2.2, by The Paciello Group
Website: http://www.paciellogroup.com/resources/contrast-analyser.html
1. Download the zip file
2. Unzip the file and run the EXE file
3. Run the application on the desktop with Imaging and Web editing software

Usability Testing

Conducting usability tests with a screen reader and keyboard will ensure the
following;
Web content and functional components are in a logical and priority
reading order
Non-text elements are properly labeled with text equivalent
The content or application is keyboard accessible
The website will be usable to all Assistive Technology (AT) users

Assistive Technologies (AT)

When conducting AT usability tests, use the free Screen Reader; NVDA
Website: http://www.nvda-project.org/

Personal Computer Keyboard

All website applications must be tested for usability with a keyboard.

Page | 5
Accessibility Resources

1. WCAG 2.0 Guidelines: http://www.w3.org/TR/WCAG/

2. Web Accessibility Checklist from Web Aim website:

http://webaim.org/standards/wcag/checklist

3. Accessible Web 2.0; ARIA (Accessible Rich Internet Application);

http://www.w3.org/WAI/intro/aria

4. Accessible You Tube Video Players;

http://wac.osu.edu/examples/youtube-player-controls/
http://www.visionaustralia.org/info.aspx?page=2260

5. Universal Sub-titles Online Captioning service for Videos

http://www.universalsubtitles.org/en/

6. Flash can be made accessible, follow the link to learn how:

http://www.adobe.com/accessibility/products/flash/

About Mada e-Accessibility Services

As part of a commitment towards building an inclusive digital society in Qatar, the

Mada e-Accessibility team offers professional website audit review services.
Organizations that are committed to providing accessible web platforms are able
to receive expert consultancy on how to achieve this. In addition to detailed
audits and reviews, Mada offers training to web developers and content
producers on how to achieve universal design and digital inclusion. Mada also
certifies organizations with Website and Document Accessibility certification.
Mada establishes partnerships with organizations to continue the support and
ensure accessibility best practices are met on an on-going basis.

Page | 6
Qatar Website Accessibility / Usability Best Practices Checklist

1.0 Website Platform, Structure, Layout and Design

Avoid using Flash, Frames or Tables as the structural layout, formatting

of the entire Web Site. WCAG 2.0 (A)

Avoid repeatedly using spacer images in website layout and design

WCAG 2.0 (A)

Use CSS and DIV element for Website layout and design.
WCAG 2.0 (A)

Content Management Systems (CMS);

Use accessible CMS platforms;
o Drupal,
o Joomla,
o MS Sharepoint
o OR
CMS platform that complies to W3C WAI WCAG 2.0
WCAG 2.0 (A)

Provide a good balance of graphic elements and text.

Usability Priority 1

Reduce the number of colours and keep the website design simple
Usability Priority 1

If possible, try to use at most; 3 column layout in all web pages

Usability Priority 1

Avoid using strong busy backgrounds, example: Using a busy photo as a

background. Usability Priority 1

Keep the website design and layout consistent. WCAG 2.0 (A)

Clearly define different sections of a webpage with headings and organize

content so it is located consistently on repeating pages.
Usability Priority 1

Page | 7
2.0 - Colours and Contrast

Contrast (Minimum): The visual presentation of text and images of text

has a contrast ratio of at least 4.5:1. WCAG 2.0 (AA)
o Web page background and foreground text colours should contrast
to the minimum requirements
o All visual presentations in the website which include; Web Design,
Flash, Videos, Photos and Graphics must have sufficient contrast

Contrast (Enhanced): The visual presentation of text and images of text

has a contrast ratio of at least 7:1. WCAG 2.0 (AAA)

If Red TEXT is used on a white background, achieve a 8:1 contrast ratio

or better Usability Priority 1

Web content colour combinations must also be tested for people with
colour blindness. Use the Color Contrast Analyzer 2.2 to
achieve 4.5:1 or better contrast; use Show contrast result for colour
blindness; Normal, Protanopia, Deuteranopia, Tritanopia
Usability Priority 1

Use the Color Contrast Analyzer 2.2, from The Paciello Group.
Used for measuring colour contrast between foreground and background
content. The software checks for WCAG 2.0 colour contrast compliancy
level AA and AAA. Usability Priority 1
Reference heading; Accessibility Tools and Methods

Colour alone should not be used as the only visual means of conveying
information, indicating an action, prompting a response, or distinguishing a
visual element. WCAG 2.0 (A)

3.0 - Space, Alignment and Consistency

Create simple, usable, visual layout of all web content and use a
consistent style of presentation between pages.
WCAG 2.0 (AA and AAA), Usability Priority 1

o Space: minimize space in between content to 1 or 2 space;

character space.

o Align: left align all content to the left side of the web page. Also left
align table headers and headings in page sections, etc

o Consistency: all important usable functions and content must be

consistently placed on all web pages.

Page | 8
4.0 - Multi-Media Content

Audio-only and Video-only (Prerecorded): WCAG 2.0 (A)

o Prerecorded Video-only
Provide synchronized Caption (Sub-Title) with the video
o Prerecorded Audio-only
Provide alternate text content; Caption or Text Transcript.
If Text Transcript is used, the link should be clearly labeled

Captions (Prerecorded): WCAG 2.0 (A)

Provide synchronized text with the media. Example: Video

Captions (Live): WCAG 2.0 (AA)

Provide real-time synchronized text with the live media.
Example: Live Video and Audio stream must have Captions

Audio Description or Media Alternative (Prerecorded): WCAG 2.0 (A)

Audio or descriptive text transcript are required to describe visual content
in a video that lacks dialogue or narration.

When linking to videos from link phrases or linked images, provide a

detailed description about the video content and if captions are not used, it
should be indicated within the description. Usability Priority 2

Audio Description (Prerecorded): WCAG 2.0 (AA)

Audio description is required to describe visual content in a video that
lacks dialogue or narration.

Audio Control: WCAG 2.0 (A)

o If audio plays on a webpage for more than 3 seconds, provide quick
access to an accessible mechanism to pause or stop it. this
especially applies to videos
o As a best practice, avoid playing audio automatically from any
sound source when the web page loads

Accessible Flash: WCAG 2.0 (A), Usability Priority 1

Flash applications should be thoroughly tested for usability
o Important; Flash does not work on all mobile platforms
o Flash must always be embedded using java script
o Description of the Flash object on a webpage;
Must be concise and placed in the Description field.
This is similar to image ALT text, but for Flash movies
If the Flash content does not provide significant meaning in a
page, the field can be left blank so assistive technologies
(AT) may skip over it

Page | 9
 o If a Flash application is not accessible, provide an alternative text
equivalent with detailed descriptions or create a clearly labeled link
to the HTML web version
o The Flash application should be fully operable with a keyboard
o Like web pages, the Flash functions and scenes must operate and
behave in predictable ways, as an example; avoid using auto
refresh or re-directs
o Avoid creating mouse only functionality like; sliders and drag and
drop
o All non text elements and content must have text equivalents;
(text labels)
o All operable controls must be labeled appropriately to reflect
functionality. Example; Label the play button as Play, not Play
button
o Arrange all elements and content so it may be read in a logical
tab / reading order sequence
o Provide text alternative for meaningful audio content (Captions)
o If possible, avoid playing audio after the Flash loads, otherwise a
Pause Audio button must be available at the top of the reading
order within the application so AT users using keyboard can stop
the audio
o Accessible volume control must also be available for A/V content
o Provide synchronized captions for all video content
o Usability: Test the Flash application with a keyboard and Screen
Reader to make sure it is usable. This will ensure usability of most
Assistive Technology (AT) devices
o WCAG 2.0 guidelines apply to Flash content and elements.
Example; Colour Contrast minimum contrast (AA)
o Also refer to WCAG 2.0 guideline references for Flash developers
o Flash can be made accessible, follow the link to learn how:
http://www.adobe.com/accessibility/products/flash/

5.0 - Web Content and Mark-up Structure

WCAG 2.0 (A) Info and Relationships

Semantic markup is used appropriately, web pages must have structure.
Examples:
a) Tables are used for tabular data, table headers and captions are
used appropriately
b) Text labels are associated with form controls
c) Heading, List and Paragraph elements are used appropriately for
their intended purposes

Page | 10
 WCAG 2.0 (A) Meaningful Sequence
Content and elements are read in a logical, intuitive order; determined by
code order.
Examples: Logical reading order in Form Fields, Content and Menus

WCAG 2.0 (A) Sensory Characteristics

Avoid conveying information or prompt an action by Shape, Colour,
Sound and/or Location alone.
Examples of phrases that should be avoided:
a) Click on the Square Blue button
b) Refer to the link Whats New in the bottom right column of the
page
c) A beeping sound indicates you have completed filling out the form

WCAG 2.0 (A) Provide a text equivalent for every non-text element on
your web pages which include: images, embedded objects (e.g. Flash),
audio, video, etc

Avoid animations, media and scripts that cause the screen to

flicker or flash rapidly 3 times or more within one second.
(Example; strobe light effect). If this cannot be avoided, users must be
warned prior to entering the content. WCAG 2.0 (A)

Use the simplest and most straightforward language that is possible.

This is usable to people with language barriers and cognitive disabilities
WCAG 2.0 (A)

Language of a Page: Use <HTML lang="ar" xml:lang="ar" dir=rtl> to

identify Arabic language in a web page. Also use proper reading direction;
dir=rtl for all Arabic text. WCAG 2.0 (A)

Language of Parts: Identify any changes in the page's language.

Use the Lang attribute to programmatically change the language in the
page. Equally important, use the; Reading Direction attribute, dir=rtl.
Arabic language is read from Right to Left (rtl), English is read from Left to
Right (ltr).
Code Examples:
<P lang="en" xml:lang="en" dir=ltr>English Text </P>
<SPAN lang="ar" xml:lang="ar" dir=rtl> Arabic Text </SPAN>
WCAG 2.0 (A)

Use the ABBR and ACRONYM elements to denote and expand any
abbreviations and acronyms that are present. Example: <acronym
title="World Wide Web">WWW</acronym> WCAG 2.0 (AAA)

Page | 11
 Only use list elements for actual lists, not formatting effects
WCAG 2.0 (A)
o Use the list element on actual lists; it serves a functional purpose
in Screen Reader usability
o Use list elements appropriately for; Short Phrases and Words
o Use ordered list for Numbered lists
o Use unordered lists for Bullets
o Avoid substituting the Paragraph element with the List element
o Avoid using ONLY numbers, dashes and image bullets without
using the actual list element mark-up

Page Titled: All web pages have unique titles that describe topic or
purpose. Page title should reflect navigation level WCAG 2.0 (A)
Examples:
a) Mada QATC, home
b) Mada QATC, About, Staff

If Paragraphs are used, use the <p> tag paragraph element and avoid
repeatedly using and substituting it with the break element <br>.
Divide large blocks of text into manageable, short paragraphs <p>.
WCAG 2.0 (A)

If possible, Lines of text should not be longer than 70 characters; this also
includes spaces in-between words. Usability Priority 2

Consistent Identification: Components that have the same functionality

within a set of Web pages are identified consistently.
As an example;
o Label Search form fields the same way on every page and size,
positioning, appearance, alignment are consistent on all pages.
WCAG 2.0 (AA)

Accessible PDF Documents: PDF documents are an extension of the

website, they must be fully accessible. Document content and structure
must also follow similar principals outlined in the WCAG 2.0 guidelines.
See Madas Document Accessibility Checklist for a more comprehensive
guideline.

Timing Adjustable: For each time limit that is set by the content, the user
should have the ability to; Turn Off, Adjust or Extend the time. There are
exceptions on online time dependent functions such as; Online Auctions
WCAG 2.0 (A)

Page | 12
 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating
information;
o There is a clear mechanism to pause, stop or hide the content
o Auto updating information: control the frequency of the update
o There is an exception if it is part of an activity where it is essential.
WCAG 2.0 (A)

Do Not Use; BLINK or MARQUEE elements WCAG 2.0 (A)

Web Plug-in content must be accessible or proven to be keyboard and

AT usable. WCAG 2.0 (A)

Use symbols (example; *) in content for their intended purpose only.

Most AT devices interpret symbols in a meaningful way; the asterisk
symbol is read and understood by screen reader users as a required form
field. Example; avoid using << as previous link. WCAG 2.0 (A)

EMBED elements present functionality not available to all users. The

NOEMBED element can be used to provide a description.

Provide a text alternative for content rendered using the object element.
The body of the object element can be used to provide a complete text
alternative for the object or may contain additional non-text content with
text alternatives.

6.0 - Images and Graphics

Images used in the website should include appropriate text

descriptions in the ALT attribute of the image element.
The ALT (Alternative text) must be used at all times otherwise it flags level
(A) accessibility errors generated by automated checkers such as the
Wave accessibility toolbar. WCAG 2.0 (A)
Example: <img src=file.gif Alt=description title=put title here>
o When ALT is not used, it creates usability issues for some screen
reader users by reading out redundant information such as the file
name, dimension, etc
o Context is everything; If the surrounding text or adjacent text
adequately describes the image, there is no need to describe the
image
o If there is text in the image and no equivalent adjacent text; where
appropriate, the image must be described out of context or word for
word exactly as seen in the text of image
o If the image is a link, you must provide description of the link
destination
o Avoid using phrases that start with "Image of ...", "Graphic of ,
Photo of unless it is an essential part of the description.
Page | 13
 On occasion; Photo of can be used to describe; significant
People, Places or Things
o Also avoid using words that start with "Logo, unless it is an
essential part of the description.
o Keep the ALT text description meaningful, brief and concise
o Try to keep the character limit in ALT between 50 and 80.
o Avoid repeatedly using spacer images without alt text, best
practice is to never use spacer images for formatting effects

WCAG 2.0 (A) When using complex images; charts, flow charts and
diagrams, use LONG description attribute in the image source tag
linked to a text only equivalent webpage.
o Sample code;
<IMG SRC="graph1.gif" LONGDESC="graph1.htm" ALT="Mada Expense Graph">
Create a webpage; graph1.htm describing in detail the
equivalent visual chart. If necessary, in addition to the
description, also create an accessible data table that reflects
the visual chart data

WCAG 2.0 (A) Images and Title attribute;

o The title attribute should be secondary and used to provide
additional information about the image or link. ALT text should be
used as the primary and should always contain the description first.
Most AT devices will read ALT information first, and in some cases
with the option to read whats in the Title attribute
o Never repeat the ALT information in the image Title attribute
o Title attributes can also be used to describe unexpected behaviors
triggered by the image link. As an example; if the link opens a
pop-up window, this behavior can be described here.
o The text in the title attribute must be brief, concise and no more
than 35 characters

WCAG 2.0 (A) If an image is used for only decoration and has no
function or meaning, do one of the following so AT may skip over it;
a) The image should be embedded in the CSS code and not in HTML
b) In HTML; include a blank quote in the ALT text attribute of the
image tag. <img src=file.gif Alt= title=put title here>

Avoid repetition of image ALT text information and related adjacent

text descriptions. Example: If you have a text description link next to an
image link that conveys the same information. The Alt text of the image
can be left null Alt= the image link can be grouped with the text link.
Screen reader users do not want to hear the same link phrase twice in
succession; this is redundant and not usable. Usability Priority 1

When using animated gifs, appropriately describe the image in the Alt
text. Slow down image frame transitions, the time in between each frame
should be set to a minimum of 3 seconds. Usability Priority 1
Page | 14
 When using Image Maps, provide Alt text description for every hotspot
area and the image itself. If possible, provide alternate text links below the
image map. WCAG 2.0 (A)

Where it is possible to mark up content instead of using images, use

a markup language. WCAG 2.0 (AA)
o If possible, avoid using text inside images
o Text should be separated from the graphics or photos
o Corporate logos, branding, diagrams and maps are an exception
If possible, enlarge image of text to 14 to 18 pts for
maximum clarity. 18 to 22 pts for Arabic image of text
The image must also be; clear, sharp and in high contrast

Graphical maps in nature are only visual and not accessible to

people using screen readers and keyboards. The solution is to provide
an equivalent, descriptive text alternative of the visual presentation.
WCAG 2.0 (A)
Recommendations;
o Place the text equivalent information above the image or map
application
o If applicable, provide directions from point A to B
o Include a list of addresses and/or descriptions to key locations on
the map
o Describe intersections, surroundings and nearby public
transportation if applicable

7.0 - CSS and Website Accessibility Features

Organize web pages so users may read / view web pages without
associated style sheets. Usability Priority 1

Use CSS and DIV elements for styling and the layout structure of the
website while avoid using tables. WCAG 2.0 (AA)

Create all website navigation menus with List, Div elements and CSS
styling. Usability Priority 1

All Text, font styles, HTML mark-up and attributes should be controlled
with CSS. WCAG 2.0 (AA)

Scalable User Interface, Layout and Text:

User interface, layout and text in web pages should be re-sizable and
coded in CSS with scalable relative (%) sizing and positioning, avoid using
absolute fixed sizing (Pixels). WCAG 2.0 (AA)
o English website: The font size must be able to adjust to 200%
without breaking the text and layout
Page | 15
 o Arabic website: The font size must be able to adjust to 240%
without breaking the text and layout

Optional Web Accessibility Features: Create a widget / tool to give the

users the ability to customize the look and feel of the website. Create a
widget tool for adjusting font size and the general appearance (Colours) of
the website.
The advantage of using CSS allows the users to switch between multiple
style sheets. The appearance of the website can also be overridden by AT
devices or user defined colour style sheets. The ability to change the
appearance (Colours and text Size) of the website accommodates the
requirements of each individual visiting the website.

Recommendation: Create a Widget / Tool;

a. Colour Contrast Selector User has the ability to inverse the

colour contrast of the website. Create a tool to switch between CSS
style sheets with black text on white background (Default) and
white text on black background (Reverse Contrast)
WCAG 2.0 (AAA), Usability Priority 2

b. Font Size Adjuster User has the ability to change the font size of
the website. Create a tool to adjust font size starting at CSS 90% to
200% for English website, CSS 130% to 240% for Arabic website
WCAG 2.0 (AAA), Usability Priority 2

Accessibility Toolbar Recommendation:

8.0 Frame / iFrame

As a best practice, Avoid using Frames or iFrames in websites; it is not

usable to people using assistive technologies

If frames are used, do the following;

o Each Frame source must always reference a HTML file. As an

example, do not link to an image file because the image file alone
without the ALT attribute is not accessible or usable. WCAG 2.0 (A)

o Title each frame source to facilitate frame identification and

navigation. Provide a meaningful name for identifying frames.
<FRAME SRC="menu2.html" TITLE="Left sub-menu level 2">
WCAG 2.0 (A)

Page | 16
 o Provide accessible NOFRAMES content. WCAG 2.0 (A)

9.0 - Tables

Use tables only for the purpose of presenting tabular data.

WCAG 2.0 (A)

If this table is used for layout only, do not use structural markup to
achieve formatting effects. WCAG 2.0 (A)

Keep tables simple while trying to utilize all rows and columns. Avoid
leaving too many cell spaces blank; use the dash - character in place of
empty data cells. Usability Priority 1

Do not nest tables within tables. WCAG 2.0 (A)

Use Table "Summary" attribute to provide a brief summary of the table.

WCAG 2.0 (A)

If this is a data table (not used for layout only), use the Caption element
as the title of the table. WCAG 2.0 (A)

Table "Headers" TH element, must be used to label rows or columns

of data. WCAG 2.0 (A)

Complex Tables: If multi headers are used with complex row and column
spans; Use Table; ID, Axis and Scope attributes. WCAG 2.0 (A)

10.0 - Text

This section: WCAG 2.0 (A), Usability Priority 1

English Text
o Use open typeface; San-Serif, recommended fonts are Verdana or
Arial. If possible, avoid using Serif style typeface.
o Minimum Font size, CSS 100%, equivalent to 12 points
o Fonts must be able to scale to 200% without clipping or run off

Arabic Text
o Use Arabic Naskh Type, equivalent web font;
Comic Sans MS, Cursive, Arial or Tahoma as second choices
o Minimum Font size, CSS 140%, equivalent to 16 points
o Font must be able to scale to 240% without clipping or run off
o Use the Right to Left attribute for Arabic text; code: dir=rtl

Page | 17
 When using CSS fonts, always use scalable relative sizing (%)

Avoid using the following Font Styles;

italic, cite, emphasis, variable, strike through and drop shadows.
Use BOLD text instead.

Use the text underline style appropriately for hyperlinks only

o The links in menus do not have to be underlined as it is universally
understood by anyone. It would be very usable if the underline
appears on Mouse Over
o The links in the content body must always be underlined so it is
clearly distinguishable between read only text

Avoid using Scrolling, Blink or Flicker effects on text

If possible, avoid using Red or Orange text colour.

If RED text is used, make sure the minimum colour contrast is 8:1 or
better over the background colour

Text links on menus;

o Use bold link text on menus to emphasize the text
o If possible; on mouse over and on focus, display underline style.
This clearly lets everyone know that this is a hyperlink

11. 0 - Headings

Consistent use of Heading Elements are required on all visible

headings; Titles; H1, Main Headings; H2, Sub Headings; H3
WCAG 2.0 (AA), Usability Priority 1

Nest headings properly. Example; order heading elements in the proper

hierarchal structure based on content; <H1>, <H2>, <H3>, etc
WCAG 2.0 (AA), Usability Priority 1

Make sure header elements are not used only for bold text formatting
WCAG 2.0 (A)

Descriptive headings help users find specific content and orient

themselves within the Web page. Avoid repetition of headings.
WCAG 2.0 (AA), Usability Priority 1

Page | 18
12.0 - Links and Labeling

Create link phrases that make sense when read out of context.
Example: avoid using phrases like; Click Here, "More", Read More
and http://www.mada.org.qa, use simple concise descriptive link phrases
that describe link destination. WCAG 2.0 (A)

When using Images as links; the Alt text must be used at all times. Do
not describe the image itself, describe the link destination. Also avoid
repeating the link phrase from an image ALT and adjacent text link
phrase. Usability Priority 1

Links and Title attribute; WCAG 2.0 (A), Usability Priority 1

o Always use descriptive link phrases and avoid using link phrases
that start with; Link to:, Jump to:, Follow this link:, etc
o In addition, the title attribute can be used to further describe link
destinations or include special instructions for ONLY AT users
o Never repeat the link phrase in the link element title attribute
o Title attributes can also be used to describe unexpected behaviors
triggered by the link. As an example; if the link opens a
pop-up window, this behavior can be described here.
o The text in the title attribute must be brief, concise and no more
than 35 characters
o Good example of how Link and Title attribute should be used;
Link phrase reads; Mada News Email Service,
The Title reads;
Subscribe to Madas News Email, pop-up window

Repeating hyperlink labels is okay to use as long as it links to the same

URL and it is not repeated more than twice per page. Example: Avoid
repeatedly using link phrases like More Info that especially link to
different URLs. WCAG 2.0 (A) (AAA)

Links must be clearly identifiable and distinguishable from

surrounding read only text; Links in the content body of the document
should be Underlined and if possible, Bold style. Usability Priority 1

The reading (Tab) order of all links in the website should be consistent
and logical. WCAG 2.0 (A)

All links must always reference an accessible HTML, PDF or Word

file. WCAG 2.0 (A)
o When linking to downloadable documents or files; the descriptive
link phrase must also include the document type; the text link
phrase must end with the document type with optional file size.
Example; About Mada staff (PDF 300kb)

Page | 19
 o The file name itself must be descriptive for filing and retrieval
purposes. Name the file the same as the link phrase with the proper
file extension
o Avoid linking directly to an image without properly describing it in
the link phrase. If possible, as a best practice, avoid linking directly
to images. Instead, place the image on a webpage and describe it
in the ALT attribute.
Example; link phrase for images Mada logo (JPG image)

Separate adjacent links with more than just white space, use
characters like |. Example: | About | Services | Links |
Usability Priority 1

Text links should have sufficient space around it for the user to be
able to accurately select the link, especially when several links appear
together. There should be a minimum of four pixel padding around a link;
or equivalent. Usability Priority 1

If there are logical groups of links, make sure they are clearly
identified. As an example, create a page section heading and use the list
element to list underlined descriptive link phrases. Usability Priority 2

13.0 - Web Site Navigation

Website navigation is the most important function in a website.

Keep website navigation intuitive, clear, logical and consistent.
WCAG 2.0 (A)

Bypass blocks: A mechanism is available to bypass blocks of content

that are repeated on multiple web pages.
Example: Create a Skip to Content link and place the focus on the
web page title heading so AT users may skip over repetitive menus.
WCAG 2.0 (A)

Consistent Navigation: Navigational mechanisms that are repeated on

multiple Web pages within a set of Web pages occur in the same relative
order each time they are repeated, unless a change is initiated by the
user. WCAG 2.0 (AA)

Multiple Ways: More than one way is available to locate a web page
within a set of web pages. Example: Create a site map page with nested
hierarchal unordered list link navigation. WCAG 2.0 (AA)

NEVER cause a web page to refresh or re-direct to another URL

automatically. WCAG 2.0 (A)

Page | 20
 Avoid creating combo box Jump menus without instruction or
notification of such a behavior. WCAG 2.0 (A)

If possible, Script enabled pop-up windows should be avoided as a

best practice. If pop-up windows are used, notification of the behavior is
required in the link Title attribute; Pop-up Window WCAG 2.0 (A)

Use inline menus and named anchors to navigate within a webpage;

when a web page is over loaded with content; uses multiple headings and
paragraphs. This makes the page usable and navigable by people using
Assistive Technologies. Usability Priority 1

When linking to external websites; if possible, make sure they are

accessible and usable and comply to WCAG 2.0 (A and AA)

Menu, links and Content Reading / Focus Order Recommendations:

WCAG 2.0 (A)
1) Skip to Content / Skip Navigation
2) Corporate Logo links to home page
3) Search Field
4) Global Menu which may include; Arabic Site, Home, Site Map,
Contact Us, etc
5) Optional Accessibility features; Font Size Selector, Colour
Contrast Selector,
6) Login form fields, if applicable
7) Top of page - Level 1 main menu
8) 1st Column Left Navigation Menu; Level 2 and 3 sub-menus
9) 2nd Column - Content body
10) 3rd column - If applicable; content and links

14.0 - Web Site Menus

Create a simple, consistent and fully visible Main Menu and Sub
Menu system for the entire website. The Tab order must be consistent
and flow logically from level 1 menus to level 2 and 3 sub-menus.
WCAG 2.0 (A)

Main Menus; if Mouse over, reveal hidden Sub Menus are used,
also provide a fully visible text menu WCAG 2.0 (A)
o Make hidden sub menus accessible by keyboard in a logical Tab /
Focus order sequence
o When using mouse over to reveal hidden sub-menus; make sure
the menu interface area around the links have sufficient space /

Page | 21
 padding (2 character space)

Consistency of the layout and placement of the menus are very

important for usability. WCAG 2.0 (A)

Accessible and Usable Menus Summary

1. CSS, DIV and List element text links

2. Bold text and high contrast on all menu links
3. Visual cues (Bullet images) can also be used in addition to indicate the
significance of menu links.
Example; Graphics and Bullets placed on the left side, next to link phrases
4. For links, use prioritized, logical, consistent reading order sequence
5. Have no more than a 3 level menu system
6. Always visible, left aligned Level 1, 2 and 3 menu links
7. Skip Navigation link (used to by-pass menus)
8. Menu items and layout; Left align, minimal space and consistent
placement
9. In addition to all visible menus; if hidden sub menus revealed by mouse
event handlers are used, they must be accessible by keyboard in a logical
reading order sequence

15.0 - Using Forms

Forms must be navigable by keyboard and in logical tab order

WCAG 2.0 (A)

Forms: Info and Relationships WCAG 2.0 (A)

o Use label elements to associate text labels with form controls
Code: <label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
Important: All Label IDs must be unique, do not repeat on the page
o Use the title attribute to identify form controls when the label
element cannot be used.
o Use fieldset and legend elements when groups of form controls
are used. Example: Question with 4 checkbox button and labels
o Use combo boxes instead of radio buttons as it is more usable to
keyboard users

Error Identification: If an input error is automatically detected, the item

that is in error is identified and the error is described to the user in text.
Example; place all error messages grouped at the top of the page starting
the phrase with Error or Attention. Avoid using red text alone to convey
error messages. WCAG 2.0 (A)

Always provide a button for submitting forms whenever the form

element is used. As a best practice, avoid creating only input fields by
Page | 22
 itself.
If image buttons are used, describe the form process / action.
Example; if the image button is labeled Search, the ALT should read
Search, the exact text on the image button should be used
Usability Priority 2

Error Suggestion: If an input error is detected, provide suggestions for

fixing the input in a timely accessible manner. WCAG 2.0 (AA)

Meaningful Sequence WCAG 2.0 (A)

To make sense of complex forms, logical reading order of form controls
are very important to AT users.
o Use the TABINDEX attribute to control the reading order in complex
form fields.
Code: <input type=text TABINDEX=1 Name=Field1>

If CAPTCHAs are used, Provide a text version or alternate, audio of the

CAPTCHA image of text. The CAPTCHA interface must also be usable by
keyboard and AT devices WCAG 2.0 (A)
Examples of accessible CAPTCHA;
a) Accessible online Audio CAPTCHA Service: http://recaptcha.net/
b) Downloadable Text CAPTCHA PHP web application:
http://www.purple-dogfish.co.uk/free-stuff/accessible-captcha

Form Field Layout and Usability

o Avoid using tables for formatting layout of forms
o Form layout and placement is important, see the example in this
section
o ** TEST all form fields for usability with a keyboard and Screen
Reader
o Example of Fully Accessible and Usable Form field Layout
Usability Priority 1
The use of Asterisk characters is encouraged; it is
universally understood by all users
Place labels close and above their corresponding form
controls
If possible, place the asterisk character in front of the label, if
Red texted is used; use a darker shade of Red with a
minimum 8:1 contrast ratio
Asterisk character must be larger than normal; 150 % is a
good size

o Using asterisk to indicate required state

The asterisk meaning is defined using abbr element
The asterisk character can be difficult to see by people with
low vision. It can be styled to be larger defined by CSS code
as seen in the example below

Page | 23
 Example Code:

CSS:
.req {font-size: 150%}

HTML:
<p> Required fields are marked with an asterisk
(<abbr class="req" title="required"> * </abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname"><abbr class="req" title="required">*</abbr> First name:</label>
<input type="text" name="firstname" id="firstname" />

16.0 - Web Programming

Focus Order: Make sure all objects and elements that are dependant on
the TAB key are in a Logical reading order Sequence. WCAG 2.0 (A)

Avoid using scripts that will affect content or readability, especially

for screen readers. Usability Priority 1

Thoroughly test all web programs and functions for usability with a
keyboard and screen reader. Usability Priority 1

Avoid using Java script event handlers that require only the use of a
mouse. Example: Avoid using event handlers like onMouseOver
exclusively. WCAG 2.0 (A)

Keyboard: Make sure that all elements that have their own interface are
operable with a keyboard. WCAG 2.0 (A)

Page | 24
 Include keyboard shortcuts to important links so keyboard users will
be able to easily navigate around the website. Caution must be exercised
in assigning keys as the key assignment can conflict with existing keys
used in; Browsers, Windows and Assistive Technology (AT). Use the
accesskey attribute and use keys 0 to 9
Usability Priority 2

Browser Back function is important to AT users. Avoid

programmatically disabling or breaking this feature on pages.
Usability Priority 1

Make sure your web pages validate to current W3C coding practices.
Properly define the DOCTYPE element and use the appropriate HTML
markups. Mark-up content with the most current, good structural
standards compliant code (W3C). WCAG 2.0 (A)

Focus Visible: Any keyboard operable user interface has a mode of

operation where the keyboard focus indicator is always visible. Do not
programmatically disable or hide the Focus.
WCAG 2.0 (AA)

On Focus: When any component receives focus, it does not initiate a

change of context. Example: On focus from a keyboard or mouse reveals
hidden text somewhere on the page. WCAG 2.0 (A)

On Input: Changing the setting of any user interface component does not
automatically cause a change of context unless the user has been advised
of the behavior before using the component. WCAG 2.0 (A)

Web 2.0: Accessibility / Usability of hidden elements revealed by an

event handler, form control or link (Triggering Element)

o Avoid using only mouse over event handlers

o If possible, provide notification or instruction before or on the
triggering element of hidden content, and if applicable; provide
location of hidden content on the page
o Optionally; Use Links or Images to place instructions or notifications
in ALT or TITLE attributes
o An example of a triggering element can be a selected radio button
or a text / image hyperlink
o Do not cause the page does not refresh; this could cause focus
problems which result in orientation issues for Assistive Technology
users
o Reading order must flow logically from the triggering element onto
the revealed content
o The new revealed content should be immediately placed below the
triggering element with minimal spacing (1 space at the most).

Page | 25
 No Keyboard Trap: Ensure that keyboard users do not become trapped
in a subset of the content that can only be exited using a mouse or
pointing device. WCAG 2.0 (A)

Error Prevention (Legal, Financial, Data): For web pages that cause
legal commitments or financial transactions for the user to occur, that
modify or delete user-controllable data in data storage systems, or that
submit user test responses, at least one of the following is true:
Reversible: Submissions are reversible.
Checked: Data entered by the user is checked for input errors and the
user is provided an opportunity to correct them.
Confirmed: A mechanism is available for reviewing, confirming, and
correcting information before finalizing the submission.
WCAG 2.0 (AA)

Parsing: In content implemented using markup languages, elements have

complete start and end tags, elements are nested according to their
specifications, elements do not contain duplicate attributes, and any IDs
are unique, except where the specifications allow these features.
WCAG 2.0 (A)

Web 2.0 Programming

Applications created with Web 2.0 technology must be tested for Usability
with a Keyboard and Screen Reader.
o Programmers must use ARIA guidelines;
Web: http://www.w3.org/WAI/intro/aria
o Web 2.0 technology / content must also comply to WCAG 2.0
guidelines

Page | 26
Appendix A - WCAG 2.0 Guidelines
Note: These are active links to the W3C WAI WCAG 2.0 guidelines

WCAG 2.0 Quick Reference List

Principle 1: Perceivable

1.1 Text Alternatives: Provide text alternatives for any non-text content so
that it can be changed into other forms people need, such as large print,
braille, speech, symbols or simpler language.

1.2 Time-based Media: Provide alternatives for time-based media.

1.3 Adaptable: Create content that can be presented in different ways (for
example simpler layout) without losing information or structure.

1.4 Distinguishable: Make it easier for users to see and hear content
including separating foreground from background.

Principle 2: Operable

2.1 Keyboard Accessible: Make all functionality available from a keyboard.

2.2 Enough Time: Provide users enough time to read and use content.

2.3 Seizures: Do not design content in a way that is known to cause

seizures.

2.4 Navigable: Provide ways to help users navigate, find content, and
determine where they are.

Principle 3: Understandable

3.1 Readable: Make text content readable and understandable.

3.2 Predictable: Make Web pages appear and operate in predictable ways.

3.3 Input Assistance: Help users avoid and correct mistakes.

Principle 4: Robust

4.1 Compatible: Maximize compatibility with current and future user agents,
including assistive technologies.

WCAG 2.0 Conformance Requirements

Page | 27