California State University, Fullerton Campus Information Technology Desktop Technology Training Checking your website for accessibility It is important to remember that the automatic scans the university performs only checks for the most basic accessibility. To ensure your site and content is accessible it is essential to check your site and evaluate its accessibility. Below is a checklist of points you can use to help evaluate your sites accessibility. Structural Accessibility 1. Is the site layout accessible? Are you using DIVs for containers or is your site layout created with tables? Tables should only be used for actual data or simple two column forms (label and field) that you create. DIV’s allow for a linear presentation of content. 2. Is the appearance (positioning and presentation) of the page content implemented with external CSS? CSS allows designers to separate content and structure from visual presentation. This allows for the full use of DIVs for layout and removes clutter from your pages and allows adaptive technology to more easily access the content. 3. Have you removed all spacer gifs? Spacing on a webpage should always be done with CSS. 4. Does the HTML and CSS code on your site validate to a standard? Checking the code behind your site for valid syntax will ensure that adaptive technology can access the structure of your site without problems. Browser specific code should be avoided if possible. 5. Have you removed all frames from your pages? Frames are a way of allowing multiple web documents to appear in a single window. Frames should only be used when there is no other alternative. If frames are used, they should be labeled with descriptive text so that the user is aware of the area of the page they are on. 6. Is the width of your site fixed or elastic? Elastic layouts allow for the content of a page to fit into screens with lower resolutions. If you are using an elastic layout, have you limited the text line length? 7. Has another developer familiar with ATI concepts and development reviewed your site for accessibility? Navigation Accessibility 1. Are your hyperlinks accessible? The link text should be descriptive enough to tell a visually impaired individual where the link will take them. 2. Have you created a Skip Navigation link to take users past the navigation areas and to the main content? Your Skip navigation link should become visible and active when it has keyboard focus. 3. Is the navigation on your pages consistent and logical? Did you include breadcrumb navigation for content more than three levels deep? Consistent and logical navigation assists all users in quickly finding and accessing information. 4. Do you set links to open new windows only when logical and necessary? New windows present difficulty in navigating back to the link source for some users. Generally links should only open in new windows if the content type is different from the source, for example a PDF document or mp3 audio file. Content Accessibility 1. Is your text marked up with semantic tags? Semantic tags such as headings and lists, em and strong give the visually impaired user more information about the content they are accessing. For additional details about this and other courses, contact Timothy Benbow 714.278.4417 California State University, Fullerton Campus Information Technology Desktop Technology Training 2. Do all of your images have alternative text or long description files? Alt text should be used for simple images that can be described in 128 characters or less. Complex images should be describe with long description files. 3. Are your tables tagged and accessible? Simple tables should use the appropriate tags to distinguish headings and data. In addition if there are multiple row or column headings, scope should be used to define the headings. For very complex tables, a text description of the structure that is linked to the title of the table may be useful. Data tables should always present information in the simplest way possible. 4. Does the use of color on your site improve or hinder accessibility? Text and Backgrounds should have as much contrast as possible and the background should not interfere with reading the text in any way. Patterned or textured backgrounds should only be used very selectively and only when the pattern does not negatively affect readability. Color should also not be the only way information is referenced or highlighted. For example, links can be a different color, but they must also have another non-color based visual clue that the text is a link, such as an underline. Hover effects are not enough to make the link accessible. 5. How accessible is your text? The font used should be clear and easy to read. The font size should be readable and should indicate what kind of text the user is looking at (heading, body text, list, etc.). Text spacing should be enough to clearly show separations between text elements (for example between body text paragraphs), Font sizes and spacing should be coded in proportions not fixed units. Does the color of your text contrast as much as possible enough with the background. 6. Are changes in language indicated in the document? If the document is all one language, no language declaration is needed. If the language changes, this must be indicated. For example a Spanish language version of a web page on a site that uses English as its main language but have a language declaration. 7. Are your form elements all labels descriptively? Is the tab order of the fields on your form logical and consistent from form to form on your site? Is the structure of your form accessible? If your form has multiple parts or has more than 20 fields, can the user save the form data and complete it later? 8. Are the documents that are linked to your pages (Word, PDF, PowerPoint, etc) structurally and content accessible? 9. Are audio and video elements on your pages captioned / transcribed? Did you include descriptive audio for visual video tracks without audio? Can the user control the media playback (play, pause, etc). If you have an interactive element on your page, have you eliminated any time limits for a response? 10. Do you have links to any players or viewers needed to access content? For example Adobe Acrobat Reader or Flash player. 11. Have you removed all Flash content from your site? Flash has many accessibility issues and should only be used if you are certain you know how to make it accessible to all users. Are using JavaScript only when needed? JavaScript should not be used for navigation unless it is accessible. 12. Have you removed any flickering or flashing elements from your site? Flickering or flashing elements may cause issues for individuals prone to seizures. 13. Have you presented your content and navigation in the simplest most direct way possible? Could simplifying the organization, structure or navigation of content make the material more accessible? 14. If you site has frequent updates, have you considered using an RSS feed to allow users to subscribe and have new content sent to them rather than relying on them finding the new material? 15. Is all of your content clearly dated? Have you removed all expired material from your site? Sometimes we rely on visual clues to estimate the age of content and how current the information is. 16. Has another content author familiar with accessibility reviewed your content for accessibility? For additional details about this and other courses, contact Timothy Benbow 714.278.4417