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?
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.
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.
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 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)
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.
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.
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.
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.