Accessibility report

Transcription

1 Loughborough University Institutional Repository Accessibility report This item was submitted to Loughborough University's Institutional Repository by the/an author. Citation: WILKINSON, N., Accessibility report. Loughborough : Loughborough University Additional Information: This report was produced as part of the JISC Web Peer Assessment () project Metadata Record: Publisher: c Loughborough University Please cite the published version.

2 This item was submitted to Loughborough s Institutional Repository by the author and is made available under the following Creative Commons Licence conditions. For the full text of this licence, please go to:

3 Accessibility Report Author: Nicola Wilkinson Version: 1.2 Project lead by: engcetl, Loughborough University Project partners: The University of Hull Higher Education Academy, Engineering Subject Centre Higher Education Academy, Physical Sciences Subject Centre

4 Executive Summary This report describes the conformance of the System with respect to current accessibility guidelines. This report covers a brief background to the evaluation, the elements of the system being evaluated. There is information on the reviewer and the process for review. A lot of the background to this evaluation has been covered in the Accessibility Planning and Preparation documentation. This report concludes with the results of the testing, and the recommendations for the improvement of the systems accessibility. All of the testing documents are provided in the Appendices Test Reports, along with screen shots of the screens covered. Content Executive Summary...2 Content...2 Tables...2 Figures...2 Background about Evaluation...3 System Reviewed...3 Reviewer(s)...6 Review Process...6 Results and Recommended Actions...7 References...8 Web Pages...8 Appendices...9 Test Reports...9 Reports...9 Create Assessment...11 Edit Form...15 Editing Group...17 Reports...22 My Groups Page...26 Screen Shots...35 Preview Form...35 Edit Form...35 My Groups Page...36 Editing group...36 Reports...37 Reports...37 Create Assessment...38 Tables Table 1 - Screens tested as part of the evaluation...5 Figures Figure 1 - Preview Form Screen Shot...35 Figure 2 - Edit Form Screen Shot...35 Page 2 of 38

5 Figure 3 - My Groups Page Screen Shot...36 Figure 4 - Edit Group Screen Shot...36 Figure 5 - Marked Reports Screen Shot...37 Figure 6 - Reports Screen Shot...37 Figure 7 - Create Assessment Screen Shot...38 Background about Evaluation To ensure that the accessibility evaluation is completed to the highest standard and to ensure that all elements of accessibility has been taken into account, two types of reviews where conducted. Both review methods are summarised below. Preliminary reviews do not require an experienced reviewer and are mainly carried out as a visual inspection of the system. The preliminary review takes into consideration the basic accessibility issues. Conformance evaluation of Web accessibility requires a combination of semiautomated evaluation tools and manual evaluation by an experienced reviewer. For this report both forms of evaluation have been carried out, and both by the same experienced reviewer. More information of the reviewer is available further in the document. At no point will the device independence or browser compliancy testing be carried out. This is due to browser compliance being part of the system testing rather than being in the accessibility testing. The device independence conformance is tested within WCAG 2.0 and is not currently part of WCAG 1.0 and is therefore outside of the scope of this testing. It is also virtually impossible to test device independence on the budget of the project. The evaluation results in this report are based on evaluation conducted on the following date(s): 08 February to 13 February The system may have changed since that time. More information into the evaluation of the system is available and has been detailed in the Accessibility Planning and Preparation documentation. System Reviewed The system that has been reviewed is the online peer assessment tool. The version that has been tested is the 0.9 edition available to academics at Loughborough University. The area of the system that has been evaluated is the part of the assessment process, which is used by the academics. The section that the students uses, has not been evaluated. The preview of the form that the students would use has, however, been evaluated. This will give an impression as to accessibility of the system that the students use. There are also common design elements that are seen in the students section. The systems base URL (Universal Resource Locator) is and is only available to academics within the Page 3 of 38

6 university. The system also requires a staff login. Table 1 lists all of the URLs tested as part of the accessibility evaluation. As the majority of the system is not accessible a screen shot of the pages can be found in the Appendices as referenced in Table 1. Page 4 of 38

7 Screen Title URL Screen shot Preliminary Review Preview Form Figure 1 - Preview Form Screen Shot Edit Form Figure 2 - Edit Form Screen Shot My Groups Page Figure 3 - My Groups Page Screen Shot Editing group Figure 4 - Edit Group Screen Shot Reports Figure 5 - Marked Reports Screen Shot Reports Figure 6 - Reports Screen Shot Create Figure 7 - Assessment Create Assessment Screen Shot Table 1 - Screens tested as part of the evaluation Conformance Review Page 5 of 38

8 There are a large number of URLs that have been excluded from the review. The reasons for the exclusions are explored in the Accessibility Planning and Preparation documentation. None of the excluded URLs are listed within this document. Many of the pages within the system are dynamically generated therefore resulting in too many pages to list. The pages that have been selected form a base line, as they contain all the elements present on all of the other pages. The natural language used within the system is UK English. There are no immediate plans to internationalise the system. To evaluate the readability of the system the Flesch-Kincaid reading ease score is used for a section of text from each screen where appropriate. The Flesch-Kincaid reading ease score is measured in numbers from 1 to 100. On the scale a comic scores 10 and a legal document scores 90. Reviewer(s) The review was carried out by Nicola Wilkinson, elearning Systems Developer. Nicola is a member of the project team based in the engcetl at Loughborough University. Nicola has several years of knowledge in the area of accessibility and has been interested in adaptive technologies since completing research in to accessibility aids, as part of her Computing Degree. Nicola began specialising is online accessibility in Nicola s history as a Web Developer ensures her knowledge of the mark-up languages and the validation tools that are used to check online systems for compliancy to WCAG 1.0, and the developing WCAG 2.0. Nicola has also successfully developed a number of accessible compliant websites for both education and industry. She is also comfortable using a number of screen reading technologies and has been using Read and Write Text Help software for almost ten years, and pwwebspeak for four years, providing her with a unique insight into how screen reading software is used. As a result of Nicola s knowledge in accessibility, she has carried out both the Preliminary Review and the Compliancy Evaluation. The recommendations are based on her knowledge of the subject, and both the SENDA and DDA legislation. Review Process The review process is to help ensure that the system is compliant to WCAG1.0 Level A and to highlight how far from levels Double A and Triple A compliancy the system is. The developing WCAG 2.0 has also been taken into consideration and tested for. The way in which the review process and the tools to be used in the evaluation are all detailed in the document Accessibility Planning and Preparation. In summary the system is to be tested with Mozilla Firefox with Page 6 of 38

9 the Web Developers tool kit, pwwebspeak, ATRC Web Accessibility Checker and an online readability index calculator using the Flesch-Kincaid scale. Results and Recommended Actions From the preliminary review the screens tested for this report, there are very few issues that need to be highlighted. One reoccurring element is the use of the colours red and green to emphasise textural elements in the system. This may be an issue to any one suffering from one of the forms of red/green colour blindness (deuteranope or protanope). There is very little point in evaluating and correcting the system for the very rare yellow/blue form of colour blindness (tritanope). There are also one or two areas where, when the style sheet for the screen is removed, the document structure does not result in a completely linear manner. However, this should not be a problem to the average user. There is also the odd occasion within the system where using only the keyboard can be an issue. A lot of the images used within the system need to be reviewed and a decision made as to what if any alt descriptor is to be used. Although this is not a big issue it would improve the use of the system for some users. All of the pages as outlined in Table 1 have passed to the WCAG 1.0 Level A. There are no pages tested that conform to any of the higher levels for WCAG 1.0. The changes required to meet the standards are very small and should be easy to achieve in future releases of the software. The pages have also been checked against the draft version of WCAG 2.0, where the pages have conformed they have conformed to all of the levels or none at all. Although WCAG 2.0 is still in draft, it is important to find out where the system is lacking so that it can be corrected. However, for the system it is important that the WCAG 1.0 standard is maintained. There are a lot of issues that arise when the system is tested with accessible technologies (e.g. a screen reader). These issues would arise regardless of the level of standards compliance the system met. Many of the issues can be improved simply, but would add dramatically to the development time required to make enough improvements, for any real difference to be achieved. The system is usable for a visually impaired user, but the user would need to have more time to familiarise themselves with the system be fore using it. There is one screen that it is important to get right at the present and that is the assessment screen, the student would use. As the page is dynamically generated for each student, for each assessment, once the structure and the elements, are corrected and made more screen reader friendly then the problem of compliance with the SENDA legislation is greatly increased. All future releases of the system should be monitored and regularly assessed by the developer(s) for their compliance with WCAG and SENDA. The easiest methods are to check the screens visually with the Web Developers tool kit for Mozilla Firefox and ensure that the page has achieved at least WCAG 1.0 level A compliance using an automated checker. The Page 7 of 38

10 developer(s) should also ensure that both the HTML and the style sheets validate. References Wilkinson. N., 2007, Planning and Preparation Version 1.4. Web Pages Web Content Accessibility Guidelines 1.0 Checklist for Web Content Accessibility Guidelines 1.0 Techniques for Web Content Accessibility Guidelines 1.0 Evaluating Web Sites for Accessibility Evaluation, Repair, and Transformation Tools for Web Content Accessibility Selecting and Using Authoring Tools for Web Accessibility [draft] Review Teams for Evaluating Web Site Accessibility [draft] Vischeck TECHS/ s.html /software5.html ew/reviewteams.html Page 8 of 38

11 Appendices Test Reports Reports Preliminary Review Evaluators GUI Screen Name: Nicola Wilkinson Reports Name: Date: 12/02/07 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest of the system Turn off all of the images on the screen The screen layout follows the style of the whole system. If all of the images are no present then the screen is not affected. Turn off all css style sheets for the screen At the initial setting is the text at a level that is easy to read Increase the size of the text Decrease the size of the text The information makes sense, with all the navigation at the bottom of the page. The text size follows the rules through out the system. When the text is increased the layout is not broken until the font has been increase four times. The reduction in the size of the text does not effect the layout of the screen. Page 9 of 38

12 Evaluate visually the colours used on the screen Resize the screen to 800 x 600 There are no real problems with the colours used in general. However both red and green are used to give emphasis, which may be a problem if a user suffers from red green colour blindness. When the screen is resized the page becomes very long, therefore requiring vertical scrolling. However, there is no need for any horizontal scrolling. The effects are the same as for resizing the screen. Change the screen resolution to 1024x768 Can the site be moved around without The page can easily be moved around with out a mouse. The selection the use of a mouse. dropdown boxes can be accessed and changed with the arrow keys. Force images to be shown at full size There are no problems when the images are increased to full size. Check that all images have alt The only image that does not have an alt tag is the green return arrow. descriptions, by hovering over the All of the others have alt tags that are meaningful. image with the mouse. Take a sample of the text and get the readability score Text sample create mark sheet On this page you can setup the parameters for the Web-PA scoring algorithm. You can repeat this process many times, creating several mark sheets for the same assessment but using different parameters. Algorithm Parameters Enter the parameters to use below. When you've made your changes, click the create mark sheet button. For help with the parameters, and what they mean, check the help Page 10 of 38

13 on algorithm parameters. What percentage of the group's total mark should be peerassessed. If a student has not submitted any marks for the assessment, how much should they be penalised. Flesch-Kincaid reading ease score 38 Examine using the Screen Reader Action to be carried out Notes Pass Fail Is the information the same or equivalent to the information provided when viewing the screen Is the information provided in a meaningful way Is it possible to become disoriented on the screen Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) The information is the same as that provided for a visual user The information is liner and makes sense when read in the order presented. It may be possible to be come disoriented however in this instance I found the order straight forward and had no problems. There is no skip navigation so it is hard to get back to the beginning of the screen. There are also no access keys, there fore to get help on the page you need to navigate up the page to find the help link. Create Assessment Page 11 of 38

14 Preliminary Review Evaluators GUI Screen Name: Nicola Wilkinson Create Assessment Name: Date: 12/02/06 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest of the system Turn off all of the images on the screen The screen follows the same style as the rest of the system. There are no immediate problems when all of the images are turned off. Turn off all css style sheets for the There are no problems when the style sheet is turned off. The document screen structure and running order still make sense. At the initial setting is the text at a level The initial text level is fine and is uniform through out the system. that is easy to read Increase the size of the text The layout is fine when the text size increased. On the fifth increase then the layout breaks. Decrease the size of the text The layout is fine when the text size is decreased. However there is a point at which the text becomes unreadable. Evaluate visually the colours used on There are no problems with any of the colours on the screen. They are the screen consistent with the system as a whole. Resize the screen to 800 x 600 The screen becomes long and requires vertical scrolling. No horizontal scrolling is required. Change the screen resolution to The same effect as changing the screen size. 1024x768 Can the site be moved around without The screen can be moved around using a combination of tab and arrow Page 12 of 38

15 the use of a mouse. keys Force images to be shown at full size No problems occur when the images are viewed at full size Check that all images have alt descriptions, by hovering over the image with the mouse. There are no problems with any of the images, all have the required alt tags. Take a sample of the text and get the readability score Text sample Create a new assessment This wizard takes you through the process of creating a new assessment. When it is complete, you will have scheduled your assessment, and set the form and groups to assess. You are on step 1 of 5 in the create a new assessment wizard. To create a new assessment you must first give it a name. To avoid confusion, the name should be unique, but you can create assessments using the same name if you wish. Now choose a schedule for when, and for how long, this assessment will run. Now enter the text to use as the introduction to your assessment (optional). This text will act as a pre-amble to your assessment, and is an opportunity to instruct students on Page 13 of 38

16 how you want them to complete the assessment, and score each criteria. Do you want students to be able to view feedback for this assessment? Once an assessment is completed, students can login and view a report of their performance. The report simply shows whether they were rated as performing below, at, or above average for each criterion. Flesch-Kincaid reading ease score 49 Examine using the Screen Reader Action to be carried out Notes Pass Fail Is the information the same or equivalent to the information provided when viewing the screen Is the information provided in a meaningful way Is it possible to become disoriented on the screen The information is textually the same, however there is no clue what the text entry for the date is other than it starts and ends. The information is not always meaningful. An example of this is the date selection as mentioned above. There are also no labels for the text box/ buttons and therefore I spent 10 mins trying to find the assessment that I had set up as the cancel button came first. It is not easy to become disorientated in the system. Page 14 of 38

17 Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) The are no skip elements to get around the system. Edit Form Preliminary Review Evaluators GUI Screen Name: Nicola Wilkinson Edit Form Name: Date: 12/02/07 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest of the system Turn off all of the images on the screen The layout of the screen is the same as the rest of the system. There is not a problem if the images are turned off. Turn off all css style sheets for the If the style sheets are turned off the page flow is not effected and all the screen information is still present. At the initial setting is the text at a level The initial size of the font is set through out the system and is that is easy to read acceptable. Increase the size of the text The font brakes the style after the fourth increase. Decrease the size of the text The font is okay when reduced in size, however there is a point at which the type becomes unreadable. Evaluate visually the colours used on The colours used on the screen follow the style for the rest of the Page 15 of 38

18 the screen system. However, both red and green are used as accent colours to enhance what is being said in the text. This may cause issues for users with red, green colour blindness. Resize the screen to 800 x 600 The information can all be accessed by vertical scrolling. Change the screen resolution to As with the screen resizing. 1024x768 Can the site be moved around without the use of a mouse. It is possible to access all the elements of the screen with out the use of a mouse. Force images to be shown at full size The images are all shown at their full size to start with. Check that all images have alt descriptions, by hovering over the image with the mouse. All of the images that are vital to the use of the system have alt tags associated. However there are other images that do not have alt tags but this should not effect the accessibility of the system. Take a sample of the text and get the readability score Text sample Flesch-Kincaid reading ease score Form Name You can change this form's name using the box below. When you've made your changes, click the save changes button. Assessment Criteria The group will rate themselves and each other against the assessment criteria you specify. e.g. "Ability to communicate" or "Contribution to the analysis of the experimental data". You can edit a criterion by clicking on the button, or you can add a new criterion 34 Page 16 of 38

19 Examine using the Screen Reader Action to be carried out Notes Pass Fail Is the information the same or equivalent to the information provided when viewing the screen Is the information provided in a meaningful way Is it possible to become disoriented on the screen Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) The information is equivalent to that when viewing the screen. The information is meaningful as long as the repeated words are ignored. It is difficult to be come disorientated within the page. The are no skip navigation or access keys provided therefore it can be difficult to navigate around the system. Editing Group Preliminary Review Evaluators Name: Nicola Wilkinson GUI Screen Name: Editing group Date: 12/02/07 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest The layout is the same. However, there may be an issue with some of Page 17 of 38

20 of the system Turn off all of the images on the screen Turn off all css style sheets for the screen At the initial setting is the text at a level that is easy to read Increase the size of the text Decrease the size of the text Evaluate visually the colours used on the screen Resize the screen to 800 x 600 Change the screen resolution to 1024x768 Can the site be moved around without the use of a mouse. the text which is written in green. This may be a problem for people with colour vision problems. Where the icons for the main navigation around the screen are at the top, when there are no images the text runs together making it difficult to read The page flow works with the main site navigation all being at the bottom of the page. The document still makes sense when viewed The initial text level is fine to read. The screen only breaks when the page is made very large. Other wise the text increases fine, apart from where text has been included as part of the image. The text decreases with out problems, again the only issue is related to the text which has been included as part of an image. There may be issues with the colours used as red and green are the predominant colours. This will impact on any user with colour blindness. The screen resizes to 800 x 600 with out any real issues. The page does not cause any horizontal scrolling. It does cause vertical scrolling, which is not a problem as it does not effect the flow of the page. There are no problems altering the screen resolution. The effects are the same as the view port resize. It is possible to move around the screen without the use of a mouse. There is an issue with the radio buttons. There is no way of moving between the two options for each student. Force images to be shown at full size There are no problems when the images are viewed at full size. Check that all images have alt descriptions, by hovering over the image with the mouse. All the images apart from the logo have alt text which makes sense for the image used. Take a sample of the text and get the Text sample On this page you can change the Page 18 of 38

21 readability score name of this group, and add/remove students from it. back to Wind Coursework Groups Group Name You can change this group's name using the box below. When you've made your changes, click a save changes button. Group Members Below are all the students from the modules associated with this group. To add a student to this group select In, and to remove one select Out. When you have made all your selections, click a save changes button. Flesch-Kincaid reading ease score 54 Examine using the Screen Reader Action to be carried out Notes Pass Fail Is the information the same or The main instruction information is the same. However, the information Page 19 of 38

22 equivalent to the information provided when viewing the screen Is the information provided in a meaningful way Is it possible to become disoriented on the screen Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) for where the students are selected as in and out does not make sense when just listening to the page. This is the same with the student numbers. The radio buttons that are used to select the student as in or out are not labelled so the system reads student name, student number, radio button, radio button this makes it very difficult to work out if the student is part of the group or not. No as everything is just listed. Once at the bottom of the page there is no way to return to the top. To get the the navigation there is no access keys and no way to skip to the navigation or over the navigation. Conformance Evaluation Action to be carried out Notes Pass Fail Run the page through the ATRC checker WCAG 1.0 Level A Run the page through the ATRC checker WCAG 1.0 Level AA Run the page through the ATRC checker WCAG 1.0 Level AAA Warning: Content possibly not readable when stylesheets are removed (SCRIPT). Content may not be readable when stylesheets are removed. Errors: Document does not validate. input element, type of "radio", missing an associated label. Warning: Anchor that opens new window may be missing warning. Link text may not be meaningful. conditional Errors: Page 20 of 38

23 Run the page through the ATRC checker WCAG 2.0 Level 1 Run the page through the ATRC checker WCAG 2.0 level 2 Run the page through the ATRC checker WCAG 2.0 Level 3 input element, type of "text", missing a tab index. input element, type of "radio", missing a tab index. Adjacent links are not separated properly. 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 2.5 Help users avoid mistakes and make it easy to correct mistakes that do occur 3.2 Make the placement and functionality of content predictable 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from its background 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 2.5 Help users avoid mistakes and make it easy to correct mistakes that do occur 3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from its background 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it Page 21 of 38

24 2.5 Help users avoid mistakes and make it easy to correct mistakes that do occur 3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable Reports Preliminary Review Evaluators GUI Screen Name: Nicola Wilkinson Reports Name: Date: 12/02/07 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest of the system Turn off all of the images on the screen Uses the same basic layout however, alters to tabs for the selection of the different areas related to the assessment. There is very little change when no images are viewed. Turn off all css style sheets for the screen Some of the information becomes confusing when the presentation is removed. This is mainly the area where the report information and the links for the viewing of the report are. The information is a bit jumbled up, as the view report is next to the mark sheet terms, and can be miss read. Other wise the information follows the linear form as with the rest of the website. At the initial setting is the text at a level The initial text level is standard through out. Page 22 of 38

25 that is easy to read Increase the size of the text When the font size is increased the layout begins to be broken after the second resize. By the fourth resize the page is broken. Decrease the size of the text The size decrease works fine. Evaluate visually the colours used on The colours follow all of the site style. There are no problems with the the screen colours used on this page. Resize the screen to 800 x 600 There are no problems with the screen resize. Although vertical scrolling is required there is no horizontal scrolling so the information remains in an easy to read state. Change the screen resolution to The effect is similar to the window being resized to 800 x x768 Can the site be moved around without The page can be moved around by keyboard only fairly well. the use of a mouse. Force images to be shown at full size There are no problems when the images are viewed at full size Check that all images have alt All the images on the screen have meaning full alt tags, apart from the descriptions, by hovering over the image with the mouse. tick used to show that the assessment is finished. Take a sample of the text and get the readability score There is not sufficient text to carry out a readability score on this screen. N/A N/A Examine using the Screen Reader Action to be carried out Notes Pass Fail Is the information the same or equivalent to the information provided when viewing the screen Is the information provided in a meaningful way The information is the same as on the visual screen. All the information is provided. It is a bit confusing as words are repeated, and there are missing gaps between the words. Page 23 of 38

26 Is it possible to become disoriented on the screen Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) It is easy to be come disorientated as elements on the page for each assessment are the same and are just read. There is no match between the assessment and the editing facilities. There is an image called Finish which is not really explained and is out of place, as it is not the end of the screen, but gives the impression that it is. There are no skips to reach the navigation, and there are no access keys. Conformance Evaluation Action to be carried out Notes Pass Fail Run the page through the ATRC checker WCAG 1.0 Level A Run the page through the ATRC checker WCAG 1.0 Level AA Run the page through the ATRC checker WCAG 1.0 Level AAA Run the page through the ATRC checker WCAG 2.0 Level 1 Warning: Content possibly not readable when style sheets are removed (SCRIPT). Content may not be readable when style sheets are removed. Error: Document does not validate. Warning: Anchor that opens new window may be missing warning. Link text may not be meaningful. Error: Adjacent links are not separated properly. Warning: 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 2.4 Provide mechanisms to help users find content, orient themselves conditional conditional Page 24 of 38

27 Run the page through the ATRC checker WCAG 2.0 level 2 Run the page through the ATRC checker WCAG 2.0 Level 3 within it, and navigate through it 2.5 Help users avoid mistakes and make it easy to correct mistakes that do occur 3.2 Make the placement and functionality of content predictable Warning: 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from its background 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 2.5 Help users avoid mistakes and make it easy to correct mistakes that do occur 3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable Warning: 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from its background 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 2.5 Help users avoid mistakes and make it easy to correct mistakes that do occur 3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable conditional conditional Page 25 of 38

28 My Groups Page Preliminary Review Evaluators Name: Nicola Wilkinson GUI Screen Name: My Groups Page Date: 08 Feb. 07 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest of the system Turn off all of the images on the screen There are no dramatic changes in the colours used. Also the common element are in the same location as in the rest of the system With Firefox and the Webmaster tool bar, when all of the images are turned off the page still makes sense. The images used as buttons are replaced by the underlying alt text. However, the text that is present is out of context and may loose the mean with out the images. Turn off all css style sheets for the screen At the initial setting is the text at a level that is easy to read Increase the size of the text The explanatory text alt tag for the image needs to be changed as at present it says questions not group Breadcrumb navigation falls right to the bottom of the page. This may be of more use at the top. In general the document flow seems to be OK, and uses the style of system navigation at the bottom of the page. There is no problem with the starting level of the text size. The text size increases OK and only breaks the layout of the screen when the text is extremely large. Page 26 of 38

29 Decrease the size of the text Evaluate visually the colours used on the screen Resize the screen to 800 x 600 Change the screen resolution to 1024x768 Can the site be moved around without the use of a mouse. There is text built into some of the images that does not increase. This may cause some problems for partially sighted users. The text decreases OK, but the same issue of the text usage in images is evident. There is sufficient contrast in colour on the screen between the text and the screen design. The layout of the page is maintained. The page becomes long, requiring vertical scrolling, but no horizontal scrolling is required. Only vertical scrolling is required with the browser at full screen It is possible to access all the elements of the screen. The location jumps around a bit due to the order of the page. There is no positive feed back to the user to display which element is under the selection of the tab. Force images to be shown at full size Check that all images have alt descriptions, by hovering over the image with the mouse. Take a sample of the text and get the readability score There also appears to be no formalised tab order for the elements causing the jumping around the screen. Edit Groups image becomes enlarged, but it does has not cause any problems with the page. Only the edit image has an alt tag. All others are missing. Text sample my groups Here you can edit your groups, and organise how students are allocated to the individual groups. Page 27 of 38

30 Existing Groups These are your groups. To view or edit a collection of groups, click on in the list below. Please Note Any changes you make to your groups here will not affect any assessments you may have created. If you want to change the groups in use with an assessment, then please view the related help on creating assessments. Flesch-Kincaid reading ease score 42 Wind Coursework Groups Associated Modules : 05ELP034, 05ELP041 Number of Groups : 6 Examine using the Screen Reader Action to be carried out Notes Pass Fail Is the information the same or The information is the same but there are issues with the physical Page 28 of 38

31 equivalent to the information provided when viewing the screen Is the information provided in a meaningful way Is it possible to become disoriented on the screen Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) spacing of the items and the lack of while space so that you become very disorientated, as words run into each other The information is not very meaningful when you get to the modules as the numbers and letters do not make sense as they are run into each other. However the rest of the information appears to be meaningful, but words are often repeated multiple times. Yes, as there are a lot of links repeated in a very short space of time, often in a row one after another when words are repeated. There is no method for getting back to the start of the page or for jumping great chunks of text or links such as the menus. It would help to have skip navigation. There are no access keys present to help access elements like help Conformance Evaluation Action to be carried out Notes Pass Fail Run the page through the ATRC checker WCAG 1.0 Level A Run the page through the ATRC checker WCAG 1.0 Level AA Warnings Content may not be readable when stylesheets are removed.. Document may not be readable when stylesheets are removed. Words or phrases that are not in the document's primary language may not be identified. Image may contain text that is not in Alt text. image element may require a long description. Errors: Document does not validate for HTML Warnings: conditional Page 29 of 38

32 Run the page through the ATRC checker WCAG 1.0 Level AAA Run the page through the ATRC checker WCAG 2.0 Level 1 Run the page through the ATRC checker WCAG 2.0 level 2 Anchor that opens new window may be missing warning. Link text may not be meaningful. title might not describe the document. h1 may be used for formatting. h2 may be used for formatting. Errors: Adjacent links are not separated properly. Warnings: Abbreviations may not be marked with abbr element. Acronyms may not be marked with acronym element. Document may be missing a "skip to content" link. Warnings: 1.1 Provide text alternatives for all non-text content 1.2 Ensure that information and structure can be separated from presentation 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 3.2 Make the placement and functionality of content predictable Warnings: 1.1 Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from its background 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable Run the page through the ATRC Warnings: conditional conditional Page 30 of 38

33 checker WCAG 2.0 Level Provide text alternatives for all non-text content 1.3 Ensure that information and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from its background 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it 3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable conditional Preview Form Preliminary Review Evaluators GUI Screen Name: Nicola Wilkinson Preview Form Name: Date: 12/02/07 URL: Examine using graphical browser Action to be carried out Notes Pass Fail Does the screen layout follow the rest of the system Turn off all of the images on the screen The screen is a preview and therefore follows only the basic elements of the system. There are no images to view on the screen N/A N/A Turn off all css style sheets for the screen When all of the style sheets are turned off there are no problems with the layout of the page as it does not change. Page 31 of 38

34 At the initial setting is the text at a level The text level is set for the whole of the system. that is easy to read Increase the size of the text The text can be increased with no problems to the layout. Decrease the size of the text The text can be decreased without any issues. However it is possible to decrease the text to the point where it is unreadable. Evaluate visually the colours used on the screen The colours used on the screen follow the system as a whole. However, both green and red are used as accent colours, this may be a problem for people with colour blindness. Resize the screen to 800 x 600 The screen becomes long and requires vertical scrolling. No horizontal scrolling is needed. Change the screen resolution to The same effect occurs as the resizing of the screen. 1024x768 Can the site be moved around without The screen can be moved around easily with the use of the keyboard the use of a mouse. Force images to be shown at full size There are no images to view on screen. N/A N/A Check that all images have alt There are no images to view on screen. N/A N/A descriptions, by hovering over the image with the mouse. Take a sample of the text and get the readability score There is not enough constructive text on the screen to carry out this test. N/A N/A Examine using the Screen Reader Action to be carried out Notes Pass Fail Can the screen be navigated to easily It is not possible to navigate to the page, at it is activated via java script. The screen reader, as with most screen readers can not access java script. In order to assess the page the URL was entered directly. Is the information the same or The information is not equivalent to what is shown on the screen, as the Page 32 of 38

35 equivalent to the information provided when viewing the screen Is the information provided in a meaningful way Is it possible to become disoriented on the screen Are there any helper functions you would expect that are missing ( e.g. skip navigation or access keys) user told the element that is present but is not told in what context the element is in existence. The information is not meaningful. As a user you become very disorientated very quickly, as the information just appears to be repeated over and over again. There are no helper functions provided. Conformance Evaluation Action to be carried out Notes Pass Fail Run the page through the ATRC Warning: checker WCAG 1.0 Level A Content may not be readable when style sheets are removed. conditional Run the page through the ATRC Error: checker WCAG 1.0 Level AA Content missing address of page author. SCRIPT not keyboard accessible - onclick missing onkeypress Warning: Link text may not be meaningful. Run the page through the ATRC Error: checker WCAG 1.0 Level AAA input element, type of "radio", missing a tab index. Run the page through the ATRC Error: checker WCAG 2.0 Level 1 Form missing field set and legend to group multiple radio buttons. input element, type of "radio", has no text in label. Run the page through the ATRC Error: Page 33 of 38

36 checker WCAG 2.0 level 2 Form missing field set and legend to group multiple radio buttons. input element, type of "radio", has no text in label. Run the page through the ATRC checker WCAG 2.0 Level 3 Error: Form missing field set and legend to group multiple radio buttons. input element, type of "radio", has no text in label. Page 34 of 38

37 Screen Shots Preview Form Figure 1 - Preview Form Screen Shot Edit Form Figure 2 - Edit Form Screen Shot Page 35 of 38

38 My Groups Page Figure 3 - My Groups Page Screen Shot Editing group Figure 4 - Edit Group Screen Shot Page 36 of 38

39 Reports Figure 5 - Marked Reports Screen Shot Reports Figure 6 - Reports Screen Shot Page 37 of 38

40 Create Assessment Figure 7 - Create Assessment Screen Shot Page 38 of 38