Module ICL-1005:
Designing Accessible Websites

Module Facts

Run by School of Computer Science and Electronic Engineering

10 Credits or 5 ECTS Credits

Semester 1

Overall aims and purpose

This module introduces the rationale for designing websites which are accessible by as many users and on as many platforms as possible. Key concepts relating to how humans interact with computers (HCI) are covered together with how site navigation, page layout and visual aspects can be used to enhance accessibility / usability. Commercial considerations and legislative requirements relating to accessibility for people with disabilities are covered. The implications of increasing use of mobile devices to access websites are discussed together with the growing trend towards responsive web design which avoids the need to maintain separate desktop and mobile sites. Compliance with web standards such as HTML5 and CSS3 is introduced as a key method to ensure that websites can be viewed / used correctly.

Course content

● Benefits of designing sites to meet web standards (such as HTML5 and CSS) ● Introduction to latest HTML and CSS standards ● Difference between design and development roles ● Benefits of creating accessible websites for companies / organisations ● Factors that enhance or limit accessibility and how to address them ● Overview of accessibility legislation ● Basics of Human Computer Interaction (HCI) including affordances, constraints, metaphors, attention and workload, human information processing ● Website navigation. Flat v deep hierarchies. Implications for usability / accessibility ● Basic design theory (Contrast, Repetition, Alignment, Proximity) and how these principles can enhance the usability of websites ● Fixed v. fluid layouts ● Responsive web design (RWD). Benefits and drawbacks. Principle of progressive enhancement. ● Grid based layouts. 960 grid system ● Website design methods. Wireframe v. photorealistic storyboards. ● Search engine optimisation.

Assessment Criteria

excellent

There is evidence of extensive research which has been correctly referenced using the Harvard Referencing system. There is detailed explanation of how the proposed design meets the purpose of the site and the needs of the target audience. The site design includes the appropriate use of multiple types of rich media. Design decisions are made with reference to considerations such as design theory, HCI, usability/accessibility. Storyboards are detailed and comprehensive with few, if any, errors or omissions. The work is well structured and presented to a professional or near professional standard.

threshold

The purpose of the site / target audience is identified but there is little attempt to link this to elements of the site design. There will be some evidence of research into similar websites but this is mainly descriptive and may not be referenced correctly. Design documentation is adequate, containing enough detail to start the web development process. There may be some omissions or inconsistencies. Site navigation is adequate and clearly reflected in the proposal. The design includes at least one form of rich media content. The evaluation of the design is basic with little reference to basic design theory and accessibility considerations. The standard of presentation is adequate. The work may contain some spelling and grammar errors but these do not detract from the meaning.

good

Work is more detailed and shows clear evidence of more in-depth research. Harvard Referencing has been used mainly correctly. The purpose of the site / target audience is clearly defined and there is some attempt to link this to elements of the site design. The design includes rich media content that have required alterations / manipulations to fit the site. Story boards are reasonably detailed with no major omissions. They will be neatly and consistently formatted. The standard of presentation is good. Most spelling and grammar errors have been eliminated.

Learning outcomes

    1. Evaluate the website design with reference to basic design theory and accessibility considerations.
    1. Propose a website identifying its aim, target audience and navigation structure.
    1. Design an accessible standards compliant website based on the proposal.

Assessment Methods

Teaching and Learning Strategy

Hours
Tutorial

70 of the 100 notional learning hours - Tutor directed.

The tutor directed student learning will be supported by online learning materials hosted or signposted on the Grŵp VLE.

70
Lecture

30 of the 100 notional learning hours - Classroom based.

The classroom-based element will include student-centred learning methods such as interactive lectures, case studies, group discussions and practical workshops.

30

Transferable skills

  • Literacy - Proficiency in reading and writing through a variety of media
  • Numeracy - Proficiency in using numbers at appropriate levels of accuracy
  • Computer Literacy - Proficiency in using a varied range of computer software
  • Self-Management - Able to work unsupervised in an efficient, punctual and structured manner. To examine the outcomes of tasks and events, and judge levels of quality and importance
  • Critical analysis & Problem Solving - Able to deconstruct and analyse problems or complex situations. To find solutions to problems through analyses and exploration of all possibilities using appropriate methods, rescources and creativity.
  • Teamwork - Able to constructively cooperate with others on a common task, and/or be part of a day-to-day working team

Resources

Reading list

Castro, E. and Hyslop, B., 2011, HTML5 + CSS3: Visual Quickstart Guide .7 th ed.

Krug, S., 2013 Don't Make Me Think : A Common Sense Approach to Web and Mobile Usability

Marcotte, E., 2010, Responsive Web Design ,[online] http://alistapart.com/article/responsive-web-design

Niederst Robbins, J., 2012 , Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics . 4th ed. O’Reilly

Zeldman, J and Marcotte, E., 2009, Designing with Web Standards .3 rd ed.

Courses including this module

Compulsory in courses: