1 / 12

Customizable Website Design for Improved Accessibility and Usability

Utilize CSS for customizable design, 'text-only' version, sitemap, news page, and structured layout. Enhance accessibility and compare current vs new style. Optimize with headings and lists for better navigation.

yosefu
Download Presentation

Customizable Website Design for Improved Accessibility and Usability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Overview

  2. Design Style Clean Contrasting Colours, Primarily Orange and Black with white background. Use of CSS to allow for customisable design and removal of design element completely leading to ‘text-only’ version. Addition of Sitemap, News Page, and structured layout affords increased usability.

  3. Comparison of Versions Current Style New Style - Structured

  4. Graphics vs Accessibility Sitemap in Graphics Sitemap in Text Only

  5. Accessibility • CSS can be switched off completely • Uses <h1> tag for page heading • Uses <h2> tag for page description • Uses <h3> tag for section description • <h1>,<h2>,<h3> only appear during no CSS to textually indicate section • All graphics and colours are specified in optional CSS file • Multiple CSS files could be used to give different look and feels – e.g. Seasonal

  6. Base Structure Home Page CSS OFF/ON MTLT Content Delivery Devices Research Sitemap News Terminology Resources Links Contacts

  7. Technical Structure • Default.asp – Server Side Index • \css • \css\basic.css • \css\style1.css • \html – content pages • \images – site images • \assets – images used with permission • \resources – downloadable PDF’s

  8. <DIV> General Layout • Oulogo • Wrap • Intro • Menu1 • Content • LeftNav • Maincontent • Footer

  9. Usage: Page Layout • Use <h4> for section headings • Use <h5> for further sub-headings

  10. Page Layout Heading Bar Top Navigation Side Navigation Section Header <H4> List using <hlink> Page Description Content from HTML file

  11. Adding new content • Store HTML file in \html • Place entry in Select Case in default.asp • Fill in values • strHTML = filename of html file • strTag = page header • strPurpose = section header • strURLsuffix = page where ‘up’ returns to

  12. Creating a ‘HTML’ page • No <html> tags • No <head> section • No <body> tags • Keep all paragraphs between <p></p> • Use <h4> and <h5> for headings • For lists use <ul><li> format • For URL lists use <ul class=“hlink”> • To include a URL within the site the keyword #URL# • E.g. the href=“default.asp?pg=devices” • Becomes #URL#&pg=devices” • Link pages (a href =“etc”) can have cues attached to them: • <a class=“url” href=“”> gives an external URL cue (also UL lists) • <a class=“inlink” href=“”> gives an internal URL cue (also UL lists) • <a class=“pdf” href=“”> gives an Acrobat PDF cue

More Related