Accessibility is about designing for users with disabilities. Philosophically, it isn’t so much about designing for disability as it is about designing for everyone . (Accessibility compliance is also legally required.)
Accessibility involves two key areas: (1) how users with disabilities access electronic information and (2) how website owners enable websites and files to function with assistive devices used by individuals with disabilities.
Approximately 15 percent of the world’s population experience some form of disability. When designing for digital platforms, we must consider the potential accessibility issues users will have. Barriers include
- visual (e.g., color blindness),
- motor/mobility (e.g., wheelchair-user concerns),
- auditory (hearing difficulties),
- seizures (especially photosensitive epilepsy) and
- learning (e.g., dyslexia).
We should also design to maximize ease of use when users of any ability are in stressful/mobile situations. By designing to reach all ability levels, we can produce output virtually anyone can use and enjoy (or find helpful/calming), whatever the context.
Designing for accessibility helps all users.
Section 508 and WCAG 2.0 are both standards by which the web is made accessible to persons with disabilities. Section 508 is mandated by the federal government as part of the Rehabilitation Act of 1973, as amended by the Workforce Investment Act of 1998. Although the law applies only to federal agencies, its guidelines should ideally be followed by all websites. Additionally, WCAG was implemented in 1999 by the Web Accessibility Initiative (WAI), which was formed by the World Wide Web Consortium (W3C) to bring accessibility considerations into development. These two sets of rules and guidelines are very similar, and this guide will assist you in making your website compliant.
Vanderbilt strives to comply with the WCAG 2.0 standard.
If you are interested in reading further on this topic, a list of sources and resources is provided at the end of this section. We can help you implement any of these requirements on your site.
Use an accessible color palette.
The Vanderbilt gold can be used as a background only with black text, or you can use gold text on a black background. Gold text on a white background, or white text on a gold background is not accessible.
Gold can be used in graphical elements against white, as long as it isn’t a text element.
R:216 G:171 B:76
- Your site must provide a text equivalent for every nontext element. This includes graphics, animations, scripts, buttons, sounds, audio and video. Vanderbilt’s OmniUpdate Content Management System requires users to do this when uploading images or multimedia. If your site is in WordPress, you must do this manually. We encourage users to think about the text they are using to describe the images they upload in order to make it as descriptive and informative as possible. The exception to this rule is if the nontext content is for decoration or visual formatting or is invisible.
- If you are having a video uploaded to YouTube or an audio file uploaded to SoundCloud, please supply captions for the content. If the video is a longer lecture, there are some automated programs that can capture the audio for you and convert it to text. (Services we recommend: ScriptoSphere; SpeechMatics)
- Other examples of text identification include notifying the user when the natural language for a document’s text is changing (for example, if your website contains a paragraph in German, this should be noted).
- Have a link strategy. Describe the link before inserting it, e.g., “Read more about the Provost's Office. ” Do not use "click here" as link text or "here", because that is not descriptive of the content the user will encounter after they click. Offer visual cues (e.g., PDF and Word icons), underline links, and highlight menu links on mouseover.
- If you have a slideshow on your website, and the images include text, the alt text must exactly match the text that is within the image itself. (Even better - do not use images that have text included as part of the image; use a live-text caption instead.)
- If you are working with tables, charts or graphs, you must either identify the row and column headers, or provide a link to the raw data that is used for chart creation.
- Ensure that your page is accessible to users with color blindness. One reason we carefully restrict color choices for headers, links, etc. is so that we can be sure the contrast between the foreground and background is sufficient for those with low vision or color blindness. (There are tools that will allow you to view your page as a color-blind user. Example here: Experience Color Blindness >>)
- Beware of animations that flash; the guidelines call for not using anything that flashes more than three times in any one-second period. (An example of what not to do can be found here: Don’t Do This >>)
- When organizing content, make sure that page titles, section headings and links are clear (e.g., if the link simply says “click here,” it is unclear where the user will be going; if it reads “contact us,” then the context is clear).
- If there is a form on your page, make sure that labels and instructions are clear and informative. Consider what a form would be like within screen readers. Label fields and give descriptions to screen readers via tags. If you are using our supported form system, your forms are automatically accessible.
- If your page contains a lot of scripts or programmatic objects that will be unusable or not supported with certain accessibility programs, or your page is simply not accessible despite best efforts, consider having an alternative page that users can be directed to that is text only. (Please note, if you are using Vanderbilt templates, our scripts and tools are compatible. Otherwise, elements that may not be compatible can include sliders, embedded tickers/moving graphics/interactive games or forms.)
- When a webpage requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in, applet or application. For example, if you provide links to PDFs, Word docs, or Excel files, then you should also provide a link to the program that the user can download, or else provide an alternative means of accessing equivalent content.
- When posting images to social media, if the platform supports providing alt text, you should provide appropriate alt text for the images posted.
PDFs and Other Digital Documents
Vanderbilt recommends delivering your content on a webpage. Websites are more accessible (and more easily made accessible) than digital documents such as PDFs, Word documents, PowerPoint presentations, Excel spreadsheets and digital flipbooks.
If you must deliver your content through a PDF or other digital document, you must ensure it is accessible and compliant with Section 508 and WCAG 2.0 standards.
In order to make a PDF accessible, we advise the following remediation steps:
Use an accessible color palette.
(See Color Usage above. Any text or graphic elements containing text are restricted to the five colors shown and
must be used on a white background.)
- Use a remediation service for tagging and alternate text. Users can add the necessary tagging and alternate text to charts, images and graphics using Adobe Acrobat Pro. However, depending on the complexity of the document, it could be more efficient to use a professional remediation service, such as Common Look. (Note: Vanderbilt University has no affiliation with Common Look or any other accessibility remediation service.)
- w3.org WCAG Quick Reference
- w3.org WCAG Intro
- Section508.gov Laws and Policies
- Section508.gov Quick Reference Guide
- UX Planet Primer for Web Accessibility
Additional resources for ensuring accessibility in specific platforms: