This sample webpage's aim is to will serve most of the audience including elder people and people with disabilities. It will provide some functions to help users to use webpage more effectively.
The webpage must have several menus about country Azerbaijan such as "About Azerbaijan" "History" "Geography" "Landscape" and "Accessibility" menu.
The main aim of website is not giving information about Azerbaijan, it is about showing people accessibility and usability of website.
Project Specification and Requirements
The target audience is people who are interested with country named Azerbaijan and looking for information about this country.
The main specifications and requirements that webpage has to meet is indicated below with their specification id, priority and description.
|
ID: Home page
|
Priority: High
|
|
Description:
|
Sample home page to provide overview and intend of website
|
|
ID: About accessibility
|
Priority: Medium
|
|
Description:
|
The "Accessibility" menu to give information about all features that is implemented in webpage to make it accessible.
|
|
ID: Contact us
|
Priority: Medium
|
|
Description:
|
The page that includes contact details of website administrator in order to make it easy for user to contact about webpage
|
|
ID: Site Map
|
Priority:High
|
|
Description:
|
A page with site map to show the overall structure of website and to link all possible pages of website.
|
|
ID: Navigation
|
Priority: High
|
|
Description:
|
Easy to distinguish, easy to use navigation bar or navigation menu should be included in all pages.
|
|
ID: Accessibility
|
Priority: High
|
|
Description:
|
The site must comply with the standards of accessibility that is mentioned in W3C WAI WCAG 2. (World Wide Web Consortium Web Accessibility Initiative 2)
|
|
ID: Code validation
|
Priority: High
|
|
Description:
|
All site codes should be validated with W3C (World Wide Web Consortium) specifications.
|
|
ID: Features
|
Priority: High
|
|
 Description:
|
Feature to control font size
- Feature that zooms any particular menu when
- pointing mouse on it and underlines that menu
Feature that changes any particular menu color whe when pointing mouse on it
Feature to use keyboard shortcuts in order to navigate in web webpage without using mouse
- Feature to invert webpage colors
Feature to change colors of webpage to high contrast
- Breadcrumb feature to show where is the user exactly
|
all these features are for making accessibility and usability criteria of website high.
Inexperienced developers suppose that all visitors of web pages are able to see all wonderfully presented graphics, nice looking animations and etc. Whereas most users are having different kinds of disabilities and they are compelled to use different programs or devices which blocks images, keeps only text and makes everything look different than original. Webpage design standards are not for only disabled people, it also surrounds wide range of devices and peoples with different desires and limits. For instance:
- Some visitors turn off images (because of low bandwidth)
- Some visitors use portable or mobile devices (especially old ones rely on text based web sites)
- Some visually impaired visitors rely on screen reader technologies
Website design
Final version of website implementation must follow these accessible webpage design standards that is emphasized below.
Fonts: use standardized or popular fonts.
- Different things such as browser settings, monitor size and etc. affect font sizes. Georgia (serif) and Verdana (serif) are specially designed for Webpage use.
- As it is mentioned in WCAG, the minimum font size should be 10 for PC, 12 for MAC, or generally speaking it should be at least size of 3. It should be avoided using more than 2 fonts in one page.
Images:
- Images in the page should not exceed 75 pixels. This is widely accepted Internet limit.
- Use .jpg format for images.
- Add alternative text to describe the content or meaning of images. Such as
- .
- Avoid using images as links.
- Avoid using images as text.
Tables
- Avoid using tables in accessible webpage unless it is important.
Links
- Describe the link content as much as possible.
- Use "SPACE | VERTICAL BAR | SPACE" format if links are close to each other.
- Avoid using general words such as "click here", "press here", "go", and "enter"
- Do not use aesthetic menus such as drop-down, rollover.
Colours
- Colours are important thing to consider. The decision that has been made after research is that the blue colour is most useful and more broadly used colour in the World Wide Web. This colour is easy to see for people with or without visual impairments. Most popular web pages are based on blue or variations of blue colour such as Facebook or twitter. Considering these facts, my final implementation will also use blue colour.
- Another points to consider is:
- Use high contrast background and text colour.
- Do not use text-obscuring backgrounds.
Avoid
- Frames
- Java, flash and this kind of animations
- Moving, blinking, bouncing, scrolling texts.
Navigation
- Make navigation easy to distinguish
- Avoid having long scrolling pages
- Put "go to top", "go to bottom" links.