Manual Web Accessibility Assessment Process

Transcription

1 STUDENT AFFAIRS & ENROLLMENT MANAGEMENT DISABILITY PROGRAMS AND RESOURCE CENTER 1600 Holloway Avenue, SSB 110 San Francisco, CA Office: 415/ Video Phone: 415/ Fax: 415/ Web: Manual Web Accessibility Assessment Process The Web Developer Browser Extension is used to assist you with the manual assessment process. You may download the extension for either Chrome or Firefox and it is available at Once installed, the Web Developer Extension looks like this (when installed on Chrome). Verifying Web Accessibility Checkpoints 1. Alternative text for Images If the page has images, then select images tab and click on display alt attribute. This should display any alt text you have with the images

2 Make sure the alt text describes the target and does not contain the phrase Image of or Photo of Things to check Should not use the phrase Image of or Picture of. Should not exceed 125 characters (otherwise use longdesc ). Should only be blank if used for decorative images. (alt= ) Should not be one word, unless the image only contains text. 2. Link Text Make sure the link texts are unique for the page and describes the targets. Click here or More these link texts are inaccessible since they do not describe the target and tend to be ambiguous if used more than once. 3. Pop-ups or new windows The links, which open in new tab or window, should warn user about it. A good way is to use a warning text as a part of link text or a small icon next to link, which suggest that it will open in a new window. Ex. Booklet (opens in new window) 4. Page Titles Make sure you have title of the page matches with the H1 of the page follows by department name.

3 Ideally, it should follow the pattern, [PAGE TITLE] [DEPARTMENT NAME] 5. Semantic Structure and Page titles Select outline -> outline headings The page structure should follow hierarchical order. For example,

4 If your page has lists, it should be marked as ordered or unordered list Select outline block-level elements to see the lists highlighted. 6. Tables Select outline and check all three options related to table cells, captions and table.

5 It should highlight the table and its rows and captions. Make sure you have marked the appropriate cells as headers or data. 7. Documents Make sure all the documents that you have on the page are accessible. If PDF or Word Doc, the page should have a note suggesting he appropriate viewer for the document. For example,

6 8. Multimedia and Videos Make sure all the videos or audios on the webpage have closed captions and transcripts associated with them. 9. iframes If you will use iframes on your website, please ensure you use a title for the iframe using the title attribute, which describes the iframe. 10. Information by Color Please make sure, there are no elements on the page and are identified by the color. For example, Click on red button or link highlighted in yellow. 11. Acronyms & Abbreviations All the uncommon acronyms and abbreviation must be defined at it first occurrences and then can be used later in the page. 12. Forms For forms, select forms tab and choose View Form Information

7 For example, if you have this small form. If you check form details, you should see a page link this in new tab or window, which should indicate all the fields in the form with its associated labels. The form details page might have more elements than in your form. Some of them might be from SF State template and or hidden. You only need to make sure that all the fields except for buttons and hidden elements have label associated with it.

8 13. Keyboard Make sure all the links and form fields are accessible using keyboard using the TAB button and they have the correct order in the page. 14. Skip Navigation Link Refresh the page and press TAB key on the keyboard without clicking anywhere on the page. There are two hidden links on top left corner of the page, which are part of the SF State template. The links become visible and selectable. Clicking these links should take you to the mentioned area. Make sure those links are working. Updated: 2/8/2017