Web Accessibility Workshop Demo Page

Kaltura embed

YouTube embed

Color Contrast Example

I have poor color contrast.

I have better color contrast but do not meet WCAG standards.

I have adequate color contrast.

Sensory Information

Do not rely on color or placement alone to convey information

Examples:

  • All Red Fields are Required
  • Click on the leftmost button

Content Fixes

Section headings

Use headings step-wise.

Example: H1, H2, H2, H3, H4, H2

Links and user controls

Give links meaningful text.

Example: View the IT Accessibility Website instead of click here

Images

Use strong, descriptive alternate text for images

Example:

Jordan Pond view, facing the Bubbles in Acadia National Park

Required plug-ins

If your site has information that requires a plugin to view it, direct people to the appropriate plugin

Example:

Adobe Acrobat Reader is required to view this PDF.

Data tables and lists

Data Tables

Use programmatic data tables for tabular data.

Example:

In-State Out-of-State New England Regional
Tuition 13,789 36,466 22,816
University and Student Fees 3,428 3,428 3,428
On-Campus Housing 7,238 7,238 7,238
On-Campus Meal Plan 6,020 6,020 6,020

Lists

Use programmatic lists.

Example:

  1. What is a FAFSA?
    1. What is FAFSA on the Web?
    2. When should I complete and submit the FAFSA on the web?
  2. How do I get an FSA ID?
    1. What else can I use my FSA ID for?
  3. How do I complete the FAFSA?

Tools

ANDI (Accessible Name and Description Inspector)

Aurora Text Editor or browser's Inspect tool

Code Fixes

Language

Language signals to screen readers how a page's text should be pronounced.  While the site's language is preset in Aurora, in independent websites the language needs to be set.

Page titles

Page titles are what is seen in the browser tab.  In Aurora, editors are prompted to enter a name for each page.  In independent websites, page titles must be added.

Style sheet dependence

This is related to sensory information in that CSS is often used to position page elements.  However, some users with disabilities disable sites' CSS so that they can use their own CSS templates on websites.

While Aurora users have the option to add custom CSS, they are not required to create CSS.  Positioning is handled through page templates and the Page Builder tool.

For independent websites, be careful not to rely solely on CSS to position elements.  Elements should be coded in a logical order.

Consistent identification

Keeping meaning consistent throughout a website is helpful to all users, not just to users with disabilities.  For example, if an icon means "print" on one page of the website, and the icon is reused on other pages, the meaning should be the same.  This also applies to navigation items: If a navigation link references a page and is reused, it should still reference the same page.

Multiple ways

Make sure that there is more than one way for users to get to pages in a website.  This can take the form of a sitemap or an A-Z index, or webpages may be accessed from multiple points.

Auto-updating content

Automatically updating or playing content can pose problems for users with disabilities. It includes content that automatically plays audio, moves, blinks, scrolls, or updates.  The key of making this accessible is to provide a method to pause, stop, hide, or control automatic content and provide notification of each automatic change of content.

Audio content that auto-plays for more than 3 seconds can interfere with screen reader users' ability to hear their screen readers.  To make it accessible, include controls to stop the content.  An example of auto-playing audio content is a YouTube video that plays when a page is opened.

Content that moves for more than 5 seconds can be distracting for some users and inhibit their ability to interact with other sections of page content.  To make it accessible, include controls to stop the content.  An example of auto-updating moving content is a counter ticking off the time until an event that updates every second.

A change notification is another way to make auto-updating or playing content accessible.  In this method, the user receives notification of that change and can correlate the change with equivalent programmatic or textual information.  An example of this is a counter that audibly notifies the user every time a donation is made.

Time outs

Time outs include a page that refreshes after a specific amount of time, or when the user is logged off after a period of inactivity.  This can be challenging for users who require more time to read or interact with a webpage.  An example of this is a banking account page that logs the user out after 20 minutes.

To make time outs accessible, notify the user that there is a time limit and provide them with the option to extend, turn off, or adjust the time limit.  An example of this is a dialog box that notifies the user that they will be logged out of a site unless they activate the "Extend Session" button.

Keyboard accessibility

One of the most fundamental points of accessibility, keyboard access, makes websites available to people who do not use a mouse.  People who do not use a mouse typically use the tab and arrow keys to move around webpages, and they activate elements using enter or space.  Screen reader users and users with limited mobility may be keyboard-only users.

Not all users who use a keyboard to navigate have limited vision.  Some users have limited mobility but can see the screen.  For this reason, it is important to include visible focus on elements.  Just as :hover is included for elements, :focus should also be present.  This lets users know where they are on the webpage.

Forms

Forms can be difficult for keyboard-only users and screen reader users if they are not coded correctly.  Clear, descriptive visual labels or instructions must be provided for form elements.  Form input elements must also have programmatic associations.  This is necessary for assistive technology users, like screen reader users.  The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) needs to describe each input field and include all relevant instructions and cues).  It is also important that when a user modifies a form field element, no unexpected changes of context occur.  For example, an unrelated web page displaying after exiting an input field, a new window launching after a checkbox is selected, and the size of the screen changing after entering text in a detail box are all changes of context.  An unexpected change of context can cause significant confusion for users.

If a change in content happens as a result of interacting with a form element, the web page may notify users to expect this through a variety of techniques, including the text of the form element, pop-up message, or modal dialog box that includes text notifying users of the change.  If an error occurs as a result of interacting with a form element, users need to receive instructions to understand what is incorrect and how to correct it, when possible. Finally, errors should be prevented when possible.  Web pages should allow the user to check, reverse, or confirm a submission in any instances where the submission of a form results in legal commitments or financial transactions (such as an airline ticket purchase), modifies or deletes user-controlled data in storage systems (such as updating contact information for a bank account), or submits user test responses.  This helps users with disabilities avoid serious consequences as the result of a mistake when completing a form that cannot be reversed or altered afterwards.

Request Website Accessibility Testing

  • If you are requesting testing for a single page, please input the page's URL. If you are requesting testing for a website, please input the home page URL.
  • This field is for validation purposes and should be left unchanged.

Tools

ANDI (Accessible Name and Description Inspector)

Aurora Text Editor or browser's Inspect tool

Gravity Forms (Aurora)