Basic Accessible Design Principles for Web Pages

Basic Accessible Design Principles Here are some key principles of accessible design. You can implement most of these very easily, and without impacting the overall “look and feel” of your web pages. Most will improve your website’s usability for all users.

Provide appropriate alternative text Provide headings for data tables Ensure users can complete and submit all forms Ensure links make sense out of context Caption video, provide transcripts for audio Make file downloads (e.g., PDFs) accessible Allow users to skip repetitive elements on the page Do not rely on color alone to convey meaning Make sure content is structured, clearly written and easy to read Make JavaScript accessible Design to standards Accessible Design Principles2 Here are some key principles of accessible design. You can implement most of these very easily, and without impacting the overall “look and feel” of your web pages. Most will improve your website’s usability for all users. Each is covered in more detail in the next parts of this workshop. To explore how these and other parts of this workbook match up with the Section 508 policies that Cornell intends to adopt, please see the Section 508 Appendix on page 54.

a) Provide appropriate alternative text Alternative text provides a textual alternative to non-text content in web pages; for example, it describes the content of a photo. It is especially helpful for people who are blind and rely on a screen reader (which reads pages aloud) to have the content of the website read to them. b) Provide headings for data tables Tables should have appropriate table headers (in HTML, this is via the element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. c) Ensure users can complete and submit all forms Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated with the correct form element using the tag. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields. d) Ensure links make sense out of context Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided. e) Caption video, provide transcripts for audio Videos and live audio need synchronized captions. All audio – whether as part of video, live or archived – should also have a text transcript. f) Make file downloads (e.g., PDFs) accessible Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, Excel spreadsheets, and PowerPoint presentations. Usually you can do this in the files themselves, though sometimes it might be easier to use HTML instead of these file types. g) Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip Navigation” or “Skip to Main Content” link at the top of the page which jumps to the main content of the page. h) Do not rely on color alone to convey meaning The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users. i) Make sure content is structured, clearly written and easy to read There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately. Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function. k) Design to standards HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content. This list does not present all accessibility issues, but by addressing these basic principles, you will ensure greater accessibility of your web content to everyone.