Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
University Guidelines for Creating Accessible Web Pages Created By: IS Page 1 of 17 Last Updated: 07/05/2017 16:25 Document Control Change Record Date Author Version Change Reference Issue1 First Release 04-JAN-2005 Julie Adams, Ian Jones (Marketing), Janet Weaver Urszula Rayner Created By: IS Issue2 Page 2 of 17 Last Updated: 07/05/2017 16:25 Table of Contents Introduction................................................................................................................... 4 How people with disabilities use the web ................................................................ 4 The World Wide Web Consortium Guidelines ........................................................ 5 Staffordshire University Guidelines .......................................................................... 6 Accessibility and Usability ...................................................................................... 6 What to consider...................................................................................................... 6 Background, text and colours ............................................................................ 6 Links and navigation ........................................................................................... 8 Frames .................................................................................................................. 8 PDF Documents .................................................................................................. 9 Shockwave, scrolling text, JavaScript, plug-ins, etc .................................... 10 Tables.................................................................................................................. 10 User interaction.................................................................................................. 10 Testing .................................................................................................................... 12 Creating text-only sites ......................................................................................... 13 More advanced testing ......................................................................................... 14 Using Style Sheets ................................................................................................ 14 Web site design for Dyslexic users .................................................................... 15 Getting further help ................................................................................................... 16 Resources .................................................................................................................. 17 Created By: IS Page 3 of 17 Last Updated: 07/05/2017 16:25 Introduction Designing an accessible web site is not only about making sure disabled people can access your information. Although this is important, you must also make sure everyone can access the information no matter what ‘device’ they are using to get to it. People can now access the web in many ways: Using personal computers and a variety of web browsers, Internet enabled TVs WAP phones Hand-held computers How people with disabilities use the web Users with disabilities may use a variety of technologies to help them access information on the web. A standard web browser + ‘access technology’ such as: o Magnification software o Screen reader software Desktop braille display Specialist browser Other platforms (e.g. text only browser such as Lynx) + access technology Other input devices (foot-controlled mouse, etc.) No access technology, but o the user may change settings in their browser to control the size of the text o the user may change settings in their browse to control the colours displayed o the user can use the keyboard only o the user applies an individual style sheet to personalise the pages Created By: IS Page 4 of 17 Last Updated: 07/05/2017 16:25 The World Wide Web Consortium Guidelines The definitive guidelines for accessible web design are those published by the Web Accessibility Initiative (WAI). The WAI are part of the World Wide Web Consortium (W3C). The W3C is the recognised standards organisation of the World Wide Web. Their guidelines (the Web Content Accessibility Guidelines) are available on the W3C web site at http://www.w3.org/TR/WAI-WEBCONTENT. The WAI categorise the guidelines as follows: Priority 1: A page must satisfy this point. Otherwise, one or more groups will find it impossible to access information in the document. Priority 2: A page should satisfy this point. Otherwise, one or more groups will find it difficult to access information in the document. Priority 3: A page may address this point. Otherwise, one or more groups will find it somewhat difficult to access information in the document. They also specify levels of conformance: Created By: IS Level "A": all Priority 1 points are met Level "Double-A": all Priority 1 and 2 points are met Level "Triple-A": all Priority 1, 2, and 3 points are met Page 5 of 17 Last Updated: 07/05/2017 16:25 Staffordshire University Guidelines The Staffordshire University guidelines are based on the WAI guidelines. These guidelines should be applied to all on-line material whether this is standard web pages or within an application such as Blackboard or COSE. Depending on what type of material you are producing not all of the guidelines may apply. There is currently no requirement within the University for on-line material to meet a particular standard of accessibility as defined by the WAI. However, it is likely to become a requirement that pages meet a certain standard before they can be put on the University web server. Double A conformance (as mentioned above) is likely to become the recommended standard in most cases. Implementing the guidelines below will help meet this level. Accessibility and Usability Accessibility is generally related to the technical aspects of a site (the WAI guidelines). Usability is related more to the overall experience of using the site – how it looks and feels. What to consider The tips given here are an introduction to some of the issues that should be considered when designing for accessibility. Some of the recommendations involve making changes in the way you code the pages in HTML. Others recommendations are concerned with the design aspects of the page. Design issues should be considered at the planning stage. The guidelines are divided into sections covering different aspects of web sites structure and design. Depending on the style and complexity of your pages not all may be relevant to you. Background, text and colours Choose a background that is a single, solid colour. Avoid loud textures, patterns or images. The choice of background and foreground colours is not as important as the contrast between the background and the text. Contrast is important as this affects the readability of the information on the page. Ensure that your chosen colour scheme can be over-ridden by the user's browser settings. Created By: IS Page 6 of 17 Last Updated: 07/05/2017 16:25 Avoid, if possible, the use of graphics in place of actual text. Text size and colour can be changed by the user's browser settings, but a graphic is fixed, and can't be changed in this way. Avoid large blocks of italic text. It is not necessary to use a large font size on your page. Standard (medium) size text is fine but avoid very small text. However, you must enable users to change the font settings themselves within the browser. Ensure that you use relative font sizes in your code (i.e. %), not absolute font sizes Don't underline large blocks of text. Underlining usually indicates hyperlinked text. Capitalisation of whole sentences should be avoided. Use HTML headings appropriately. Don't use headings just to increase text size, and don't use bold or a larger font size to simulate headings. Images The alternative text attribute (ALT text) of the image tag is used to provide a description of the image for people accessing the page in a non-graphic way (e.g. text only browser or with a screen reader). The ALT text should describe what is important or relevant about the image: o If what is important is the actual content of the image, the ALT text should consist of a brief description of the image, e.g. "Staffordshire University logo". o If the image is essentially functional (e.g. a hyperlink or a button) the ALT text should reflect the function e.g. ‘Search’, ‘Submit’, ‘Home page’ . o If the image is a bullet or a horizontal section divider, the ALT text should be a text representation of the same thing, e.g. " - " or " # " for bullets, or " - - - " for a divider. o If the image is used only for visual layout (e.g. "spacer" images), the ALT text should be set to read "*". This will let the user know that the image contains no information and performs no relevant function. They are not left in the position of knowing the image exists but being unsure of what it might contain or do. The use of a space (ALT=” “) or empty ALT tag (ALT=””) can also be used. The only problem with this is that some older screen readers ignore this, although newer versions accept this. Longer descriptions of more complex images can be provided by using the LONGDESC tag, or by placing a "d" next to the image and Created By: IS Page 7 of 17 Last Updated: 07/05/2017 16:25 linking that to a page containing the detailed description. Images which are likely to require this include graphs and maps. The linked areas of image maps should always have meaningful ALT text, and text versions of the links should always be provided. Some screen readers will be able to make use of the ALT text, but not all software can handle image maps. This is why additional text links should be included. Links and navigation All links should contain enough useful information about their destination that they make sense on their own. Do not use the same link text more than once on a page when the destination of the link is different. Links should not be located directly next to each other. Separate groups of links with text (e.g. the bar character " | ") or a graphic. If you have used graphics of text as links, provide text based links as well. Always include a meaningful title on every page and never leave the title at the default ‘untitled’ setting. For users of screen reader software and text-browsers the page title is the first item they hear or see. If there are a lot of identical links repeated at the start of every page, the title becomes a very important indicator as to which page is being accessed. If many pages share the same title, it becomes more difficult for the user to build a clear mental map of the site and to orient themselves within the site. A text based site map will help visitors to get an impression of the layout of the site quickly, and will make it easier to navigate. Fully sighted people become lost on large sites too, so all users will benefit from this. Site maps can be particularly useful for dyslexic users. Frames Some people have difficulty navigating within frames, either because the frames are confusing or because the software they are using simply cannot read frames. Screen readers often have problems using frames. When using frames, always offer meaningful NOFRAMES content for those people who cannot read framed information. Use NOFRAMES properly. A message saying "upgrade your browser" is of no help to someone using the most up-to-date version of a Created By: IS Page 8 of 17 Last Updated: 07/05/2017 16:25 browser that simply doesn't handle frames. The NOFRAMES section should contain meaningful content with links to the other pages in your site, so that they can be accessed without frames. Ensure that each frame has a sensible TITLE (in addition to the NAME) which gives a clear indication of the content to be found in that frame. If possible, avoid using frames. PDF Documents Portable Document Format (PDF) is a popular way to make formatted documents available on the web. It is widely used in the University for staff and student information. The advantage of this format is that the design and formatting of the document is retained. It is also a quick way to get large and complex documents on-line. However, PDF files are not accessible to some screen readers. Also as Acrobat Reader software must be installed to read PDF files, the files are inaccessible to those who do not have this installed. If documents are provided as PDFs ensure that HTML or plain text versions are also available. PDF documents are readable by blind people using screen readers in one of two ways: o Use the latest full version of Acrobat – version 7 – to create ‘tagged PDF’ files. These include HTML tags around the text, and ALT tags for images, enabling the screen readers to read these like normal HTML pages. Ideally all new PDF files should be created in this format. However, it should be noted that tagged PDFs are only created properly when the styles within applications such as MS Word are used. This may require a change in the way that software is used if it is known that a PDF file is to be created. o Created By: IS With the help of a utility called 'Access Adobe'. Access Adobe translates PDF into HTML or into a text email, making it readable by someone unable to access PDF in the usual way. You can use this to make existing PDF files accessible. Ensure that you give the URL of each PDF file and that a link to the Access Adobe website at http://access.adobe.com/ is available. Page 9 of 17 Last Updated: 07/05/2017 16:25 Shockwave, scrolling text, JavaScript, plug-ins, etc If you create web pages in which the content and functionality is presented in formats other than plain HTML, you may be excluding some people from your site. Not everyone has the desire or capability to download and use all scripts and plug-ins. Always provide plain HTML alternatives so that everyone can access the information and services on your site. If you use a Flash movie as the way into a site, ensure that any meaningful content is available to users who can't access Flash, and make sure that a plain text link is available to enable users to access subsequent pages of your site. Embedding a "Skip intro" link in the Flash movie itself is of little use to anyone who can't access the movie! Some browsers can't read JavaScript and may tell the visitor only that there is 'an unsupported script' on the page. Wherever JavaScript is used, ensure that the page functions correctly without the script, or that a parallel page which is JavaScript-free is available. Take care with browser detection scripts. For example, don't automatically present a Flash version of a page because the script detects a user has a recent version of Internet Explorer 5 with Flash installed. They may still not be able to access the material in the movie. Some screen reader software works in conjunction with a "standard" browser but is unable to translate everything that the browser itself is able to handle. Always ensure that the user can select themselves how a page will be presented (e.g. by offering a choice between a Flash and a non-Flash version of a page). Moving, blinking and auto-refreshing text is hard to deal with if you have poor sight and for dyslexic users - avoid all of these if you can. Tables Text based browsers generally can't display tables in the same way as graphical browsers. Usually, they will display the content cell by cell and row by row. As a result of this, it is important that you ensure that the page makes sense if the table content is presented in this "linear" way. User interaction Not everyone can use a mouse. If you can't see, you can't see where the mouse cursor is positioned on the page. If you have impaired mobility, you Created By: IS Page 10 of 17 Last Updated: 07/05/2017 16:25 may not be able to hold the mouse, or manage the fine degree of control required for some mouse movements. Don't require users to be able to click on a small or moving target in order to move to another page. Offer additional plain text links. Give some thought to the tab order of the various links and items on the page. The default is the order in which these appear in the HTML code. In most cases, this is appropriate, but in some instances, it may make more sense for a different TAB order to be set up - you can do this using the TABINDEX attribute Created By: IS Page 11 of 17 Last Updated: 07/05/2017 16:25 Testing There are a number of tests you can carry out on your pages to make sure they are accessible to a range of users 1. Turn off images from within the web browser. This will show whether images are clearly labelled with meaningful ALT tags. If there are no or poor alt tags then your page will not be easily accessible to someone using a screen reader. 2. Try to change the colour and font settings within the browser preferences. Users with a number of visual impairments may need to change these settings to best meet their own needs. They may need a larger font size, a different font face, or perhaps a different background colour to make the information easier for them to read. 3. Check the tabbing order of pages For some users, using a mouse is either uncomfortable or impossible. The main way to navigate a page without using a mouse is to move around it using the keyboard. In Internet Explorer or Netscape, pressing the Tab key moves you from one link to the next. To move back, press the Shift key and the Tab key at the same time. To activate a link, press the Enter key. If a page is easy to navigate in this way, it is likely to work with screen readers as well. 4. Run your pages through an accessibility tool such as A-Prompt or Bobby. A number of tools have been developed that will check your pages against key recommendations and give advice on the changes needed to make the page more accessible. The two main tools that are recommended are Bobby which is available at http://bobby.watchfire.com/ or A-Prompt at http://aprompt.snow.utoronto.ca/ . Both these sites have guidelines on how to use the tools, as well as lots of additional information on accessibility. Bear in mind, however, that these are automated programs and can only test for some accessibility errors. The fact that a page passes the Bobby test does not guarantee that it is fully accessible. 5. Validate your pages. Although writing valid HTML doesn't guarantee that your pages will be accessible, it is an important step in the process. Use the W3C validation service at http://validator.w3.org/ Created By: IS Page 12 of 17 Last Updated: 07/05/2017 16:25 6. Install a text only browser e.g. Lynx which is free and can be downloaded from the Web at http://lynx.browser.org and test your pages in that. 7. User testing Whenever possible, ask a range of people with various abilities/ experience and disabilities to test your pages and give you Creating text-only sites If you follow these design guidelines then there should be no need to create a separate text-only version of your site. There can also be a problem with textonly sites as the text and graphic versions could contain different information, unless great care is taken. Using a database to store the text would prevent this, but this is complex to set up. However, as there are already many pages in existence on the University web-site it will not be possible to amend all of these immediately. The guidelines should be followed whenever new sites are created or major changes made to existing ones. In order to make material on existing pages more accessible it will be necessary to use text-only pages, at least in the short term. When you do add a text-only link make sure it is located in the top left of the page so that it is the first link a screen reader finds. To save having to create text only pages yourself you can make use of a utility called Betsie, which will produce a text only version ‘on the fly’. This uses software created by the BBC and used on their own site. Betsie stands for BBC Education Text to Speech Internet Enhancer. You can add a link from your page to a section on the University web site that will connect to the Betsie software. This has been tested on the University site by Learning Development, who you can contact for further information and guidance. See http://www.staffs.ac.uk/services/ldc/betsie.html. You should note that Betsie should not be seen as the final solution, but a way of making your pages more accessible in the short term. Betsie will also not work on all pages, and there can be particular problems with some JavaScript and some forms. Created By: IS Page 13 of 17 Last Updated: 07/05/2017 16:25 More advanced testing More comprehensive checking can be undertaken by testing pages with screen reader software used by visually impaired users. The screen reader software used within the University is JAWS. This is installed on selected PCs within the main IT Centre in the Octagon, Brindley and Cadman. Information Services Support Desk staff can show you which machines to use and how to start the software. Further information on specialist software used within the University can be obtained from Disability Services. Unfortunately, there are few free software packages to use for testing your web pages. However, demonstration versions of some talking web browsers can be downloaded from the web. These include IBM Home Page Reader (http://www-3.ibm.com/able/hpr.html). The W3C pages on Alternative Web Browsing (http://www.w3.org/WAI/References/Browsing) also have information and links to a number of assistive technologies. Using Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (for example fonts, colours, spacing) to Web documents. It is now the recommended way to create web pages. It allows a single change to be made to a style sheet which is then reflected on all pages which use that style sheet – ie it cascades down to all pages. Style sheets are useful for accessibility as they allow users to override the font and colour set by the page author to apply those which best meet their needs. All web page authors should try to start using style sheets on their sites. Although style sheets can be difficult to learn at first, there are lots of on-line tutorials available. The W3C "learning CSS" page is a good starting point (http://www.w3c.org/Style/CSS/learning) The Netskills training materials, for which the University has a site licence, also have modules on using style sheets (http://www.netskills.ac.uk). Training in the use of style sheets is also available within the University from Information Services. Created By: IS Page 14 of 17 Last Updated: 07/05/2017 16:25 Web site design for Dyslexic users Many of the guidelines above will apply to dyslexic users. However, there are a few additional points provided by the British Dyslexia Association which should be considered. Research shows that readers access text at a 25% slower rate on a computer. This should be taken into account when putting information on the web. When a web site is completed, check the site and information for accessibility by carrying out these simple checks. Navigation should be easy and consistent. A site map is particularly useful. Do not include too much text on a single page – split this over several shorter pages. Use some graphics and pictures to break up text. However, bear in mind that graphics and tables may take a long time to download and large graphics make pages harder to read. Where possible design web pages which can be downloaded and read off-line. Try to ensure your pages print out clearly and fit easily on an A4 page. Moving text creates problems for people with visual difficulties. It also creates a difficulty for text-reading software. Contents links should show which pages have been visited. Wherever possible try to use hyperlinks at the end of sentences, rather than in the middle of block of text. There is much variation in the colour preferences of dyslexic users. However, often for many the use of a dark text on a pale background can be helpful - for example dark blue on cream. Avoid green and red/pink as these are difficult for colour-blind individuals. Created By: IS Page 15 of 17 Last Updated: 07/05/2017 16:25 Getting further help Some of the guidelines above may make recommendations which you are not sure how to implement on your pages. Do not worry about this, as there are ways to get further help. Any searches on accessibility on the web will give many references to sites with further information. Some sites which have been found to be helpful are listed in the Resources section below. Tech-Dis has been set-up to help support staff in FE and HE on issues surrounding accessibility and usability. They offer resources, training and information which all staff creating any on-line material will find useful. There is also a JISCmail mailing list which you can subscribe to. Details of the sites are in the resources section below. Within the University support for staff is provided by Information Services. In particular, the Learning Development team offer a range of workshops which you may find useful. These include: Accessibility and Usability Cascading Style Sheets Web Design using Dreamweaver Learning Development staff have the expertise to provide detailed guidance on producing accessible on-line learning materials as well as standard webpages. The IT Support team can assist with purchases and installation of software which you may need to create your pages. If you require assistance or are unsure how the guidelines apply to you should contact Information Services on ext 3800 in the first instance. Created By: IS Page 16 of 17 Last Updated: 07/05/2017 16:25 Resources The following links can be used to learn more about various aspects of accessible web design and support tools available. RNIB Accessible web design site www.rnib.org.uk/access/welcome.htm Web Accessibility Initiative (WAI) guidelines - www.w3.org/WAI/ WAI resources - www.w3.org/WAI/Resources/ W3C validation service for HTML - validator.w3.org/ W3C Cascading Style Sheets pages: o Tutorial - www.w3c.org/Style/CSS/ o Validator - jigsaw.w3.org/css-validator/ W3C - Alternative Web Browsing: www.w3.org/WAI/References/Browsing Bobby accessibility checker - bobby.watchfire.com TechDis – JISC funded service supporting FE/HE in all aspects of technology and disabilities - www.techdis.ac.uk TechDis mailing list archives www.jiscmail.ac.uk/lists/TECH-DIS.html Staffordshire University Betsie page www.staffs.ac.uk/services/ldc/betsie.html BBC Betsie Pages - www.bbc.co.uk/education/betsie Adobe Accessibility pages - http://access.adobe.com Web design for dyslexia - www.dyslexia.com/qaweb.htm IBM Home Page Reader - http://www-3.ibm.com/able/hpr.html. [Reproduced with permission from the "See it right" pack published by Royal National Institute of the Blind (RNIB). Copyright RNIB 2001. To purchase the "See it right" pack in full visit the RNIB website www.rnib.org.uk/seeitright or email cservices@rnib/org.uk ] Created By: IS Page 17 of 17 Last Updated: 07/05/2017 16:25