Accessible curricula and tools for K-12 computing education

The web should be universally accessible, but the multimedia nature of the web and the poor design of some websites make it inaccessible to many Internet users.

Some users:

  • cannot see graphics because of visual impairments
  • cannot hear audio because of hearing impairments
  • cannot quickly download large files because of a slow Internet connection or outdated equipment
  • cannot navigate sites that are poorly organized because they have learning disabilities, speak English as a second language, or are younger than the average user

Speech output systems and Braille keyboards are just two examples of the various assistive technology people use to access the web. To create resources that can be accessed by the widest spectrum of potential users, web pages should employ universal design principles. This means considering the needs of individuals with disabilities, older people, people for whom English is a second language, and those using outdated hardware and software when designing web resources.

Accessibility Guidelines

Building web content that is consistent, accessible, and usable can be a challenge for web development teams and authors. Adopting accessibility guidelines and standards will help ensure organization-wide development of accessible web pages.

Accessibility guidelines and standards include:

It is important to disseminate information about accessibility standards to all web page developers in the organization and provide resources, training, and technical support on an ongoing basis.

Getting Started: How to Make a Website More Accessible

  • Maintain a simple, consistent page layout throughout your site.
    A consistent design and look makes it easier for users to locate the specific information they seek. For example, a feature presented on every page, such as a standard navigation menu or logo, should always appear in the same place. A clear, consistent presentation will especially assist people with visual impairments or learning disabilities who have difficulty using disorganized navigation schemes.

  • Keep backgrounds simple. Make sure there is enough contrast.
    People with low vision or colorblindness, or those using black and white monitors, can have difficulty reading information at sites with busy backgrounds and dark colors. Some background images and colors obscure text and make reading difficult. Make sure that there is enough contrast between your text and the background of the page. Choose background, text, and link colors carefully, and always test your site by viewing it at different resolutions and color depths. For example, you can change your monitor settings to a resolution of 640x480 and 16-bit color for one test, and change to 1024x768 and 24-bit color for another.

  • Use standard HTML.
    Hypertext Markup Language (HTML) is the standard code used to create websites. The code works via tags that tell a web browser where to find and how to display information. While nonstandard tags exist, using standard HTML, as defined by the W3C, will ensure that your content can be accessed by all browsers. Avoid tags, features, and plug-ins that are accessible to only one brand or version of a browser.

  • Make links descriptive so that they are understood out of context.
    People who use screen-reading software can adjust their software to read only the links on a page. For this reason, links should provide descriptive information when read out of context.. For example:
    <a href="https://www.washington.edu/accesscomputing/about.htm">Click here</a> for information about our company. will present "Click here" as the link. However,
    <a href="https://www.washington.edu/accesscomputing/about.htm">Information about our company. </a> will display "Information about our company" as the link.

  • Include appropriate ALT/LONGDESC attributes for graphical elements.
    ALT attributes work with HTML image tags to give alternative, text-based descriptive information for graphical elements of a web page. The alternative text helps users understand what is on the page if they can not see the graphic. The bold text in the following example shows what an ALT attribute looks like in HTML: <img src="https://www.washington.edu/accesscomputing/doitlogo.large.gif" alt="DO-IT LOGO">

    When a sighted person views the page with a graphical browser, he will see a picture of the DO-IT logo. When someone who is blind visits, his voice output program will read “DO-IT LOGO.” This gives him a clear idea of what is on the page. In addition, anyone using a text-based browser will understand that there is a DO-IT logo there instead of the more ambiguous "image," the default result when no ALT attribute is used. ALT attributes should be short (less than five words), since browsers sometimes have difficulty displaying lengthy ALT text.

    When using text to describe complex elements, such as graphs or charts, or to transcribe sound files containing speech or lyrics, summarize the information next to the element, or consider using the LONGDESC attribute, which provides more detailed text than ALT. Lengthy descriptions can also be linked to an external document.

  • Caption video and transcribe other audio.
    Multimedia formats that include audio can present barriers to people with hearing impairments, visual impairments, and to people with less sophisticated computer systems. Provide captions and text transcriptions for these resources so users who cannot hear or see have an alternative method for accessing the information. [MAGPie], from the National Center for Accessible Media (NCAM), is a free tool that allows developers to add captioning to streaming content.

  • Include a note about accessibility.
    Notify site users that you are concerned about accessibility by including a web access symbol on your page (see [Resources list]) and by encouraging them to notify you with their accessibility concerns. For example, the DO-IT home page includes the following statement:
    The DO-IT pages form a living document and are regularly updated. We strive to make them universally accessible. You will notice that we minimize the use of graphics and photos, and provide descriptions of them when they are included. Video clips are open-captioned, providing access to users who can't hear the audio. Suggestions for increasing the accessibility of these pages are welcome.

Accessibility Tests

Test your website with a variety of web browsers, including multimedia browsers with graphics and sound-loading features turned off and with at least one text-based browser. This way, you will see your website from the many perspectives of your users. You should also view the resources at your site using a variety of computing platforms, monitor sizes, and screen resolutions. Make sure you can access all of the features of your website with the keyboard alone, simulating the experience of users who cannot use a mouse. Make use of [accessibility testing software]; it will point out elements that could be inaccessible and allow you to make revisions.

Related Links

Consult the AccessCSforAll Knowledge Base

The AccessCSforAll Knowledge Base contains Q&As, Case Studies, and Promising Practices.

Acknowledgment

The content of this web page was adapted with permission from Burgstahler, S. and Comden, D. (2012). World Wide Access: Accessible Web Design. Seattle: UW.