call us now!

08 9459 5730

0402 142 559

Cheap web design services in Perth! Your local web designer in Perth. Quality low cost web design that you can afford.

Build an accessible and usable website

Building an accessible and usable website is a challenging task for web designers and web developers. It is a complicated task that involves many aspects of web design process such as the aesthetics of the design, the accessibility, the usability, the effectively and so on. Can visitors find what they are looking for quickly and easily on a website? Is the website easy to navigate? Even without a mouse? Are the pages download quickly? Is the information easy to retrieve?

Anyone can build a website without knowing about html, CSS, JavaScript, or any other programming languages. There are hundreds of WYSIWYG html editor available on the Internet and you just build a website like typing in the word processing. The question is are these websites accessible and usable for users. I doubt it! To build an accessible and usable website you must have knowledge about HTML semantic mark-up, CSS, and other tools such as JavaScript etc.. Most websites on the Internet today are not met the guidelines of accessibility and usability set by W3C (World Wide Web Consortium). In this article I will explain about the process of building an accessible and usable website according to W3C standard compliance. A website that is truly accessible for all users regardless of a disability

Developing Navigation

The website navigation is very important. Members and other visitors will use the navigation to find information on the site and know where they are on the site. The navigation model should be constructed as simple as possible using standard XHTML tags and CSS. The navigation should be placed horizontally right under the header and will appear in all pages. JavaScript and Macromedia Flash menus are not recommended as it is problematic for some users. Text-based navigation is recommended. Headings

To make all the headings readable to screen reader, all heading elements should be constructed hierarchically, i.e. if there is an h2 element on the page it should be preceded by an h1 element somewhere on the same page, if there is an h3 element on the page it should be preceded by an h2 element and so on.

Paragraphs

All paragraphs and other text in all pages should be constructed semantically using semantic XHTML 1.0 Transitional mark-up and use external and inline CSS to style all the paragraphs. If there is a quotation on the page, use quotation block and text boxes to highlight the text elements. If there is an emphasis or bold in some words in a paragraph, use the html tag (em) and (strong) to mark-up the text. Do not underline any words or sentences in the paragraph because users might think that an underline text is a hyperlink.

Lists

All lists should be created using valid list types: ordered list (ol) and unordered list (ul) to make it easy for screen reader to read the list.

Tables

Tables should only be used for displaying tabular data, not for presentational (layout). If you use a table for the layout, it can cause significant accessibility issues for readers. Any tables on the page should consist of valid XHTML tags:

  • The (summary) of the table – to help screen reader users to understand the table
  • The (caption) of the table – is the title of the table.
  • The head of the table (thead) and (th)
  • The body of the table (tbody)
  • Rows of the table (tr)
  • The foot of the table (tfoot)

Links

There are two types of links on every page; the internal links to link internal pages and external links to link to other websites that are related to your website. All external links must be labelled as such and must always open in a new browser window, and should make it clear that the user is leaving your website. As most users know that an underline is a hypertext link, do not use CSS to remove the default underline in all hypertext links.

Still Graphics

Images are important elements in a website. Without them, the website will look plain and boring. Before putting all the images to the website, they have to be resized on Photoshop so that the page will download quickly. All images must have an “alternative text” or “title” description, often referred to as “ALT Text”, this information is essential for sight-impaired users. The use of high-resolution images results in download delays for many users and should not be used. If large images are needed, use a thumb-nail version to click through to the enlarged image.

Multimedia

Use the standard XHTML code (object) to integrate this video into your website, do not use a non-standard code (embed), because embed has been deprecated in HTML 4.

Forms

The basic purpose of any form is to collect information from a user. As a printed form, an online form will also have a user name, address, telephone, email address, etc. There are several key aspects to be considered when developing a form; usability, accessibility and processing method. For usability and accessibility reasons, the forms must be constructed using valid XHTML ordered list, fieldset, label, legend, and input tags. The reason to use ordered list (ol) inside the main fieldset is to provide additional information for some screen readers that announce the number of the list-items when they first encounter the list.