facebook

Welcome to fall quarter! Visit the fall quarter overview page for helpful links and resources.

Apply Now

Developing Accessible Websites

Home/Accessible Technology/Developing Accessible Websites
Developing Accessible Websites 2022-06-28T11:59:22+00:00

Developing Accessible Websites

In order to assure that websites and web applications are accessible and usable by everyone, it’s important that web accessibility guidelines are followed. The features listed are not intended to replace or map to formal standards within the World Wide Web Consortium’s (W3C’s) Web Content Accessibility Guidelines.

WCAG is organized around four key principles (P.O.U.R.):

  1. Perceivable – making sure users can perceive content. This helps us keep in mind that just because something is perceivable with one sense, such as sight, that doesn’t mean that all users can perceive it.
  2. Operable – can users use UI (user interface) components to navigate the content. For example, something which requires a hover interaction cannot be operated by someone who can’t use a mouse or is using a touchscreen.
  3. Understandable – can users understand the content? Also, can all users understand the interface and is it consistent enough to avoid confusion?
  4. Robust – is it robust enough for the content to be consumed by a wide variety of user agents? Does it work with assistive technology?

Features of Accessible Websites

  • Good use of HTML headings.
  • Ensure pages can be navigated with a keyboard.
  • Provide alternative text descriptions to images.
  • Use accessible menus.
  • Design accessible form controls using labels, instructions, and validation/error messages.
  • Use tables for data and use column headers.
  • Use sufficient color contrast. Don’t convey content with color alone.
  • Ensure link text makes sense on its own. Avoid ambiguous link text.
  • Format lists as ordered or unordered lists.
  • Limit the use of caps. All caps can be difficult to read and can be read incorrectly by screen readers.
  • Identify document language.

Creating an Accessible WordPress Site

Getting started

Before ITS can start a site, you must reach out to Marketing to get approval for the site. They will reach out to the helpdesk on your behalf.

Next Steps

Once you have a site please do the following:

  • Format your site heading and paragraph styles
  • Add alternative text to images and tables
  • Designate a header row in any tables
  • Do not merge or split cells in tables
  • Use descriptive hyperlink text
  • Ensure color is not the only means of conveying information
  • Use colors that have appropriate contrast with the background
  • Videos need to have captions
  • Have Marketing check for accessibility issues using Siteimprove and fix any issues they find

 

Web Accessibility Tips

  1. Add proper alt text to images. Use alt text to provide access to the content of images for individuals who cannot see them, including people using screen readers or Braille output devices. Alt text is supported by most document formats, including HTML, Microsoft Word, and Adobe PDF.
  2. Use headings properly. Use headings and subheadings to form an outline of the page. They help non-visual users (including search engines) to understand how the page is organized, and make it easy for screen reader users to navigate.
  3. Create accessible PDFs. Tag content in PDFs, and take steps to ensure that the content will be read in the correct order.
  4. Know when to use PDF. PDF preserves a document’s appearance across operating systems and devices. If this characteristic is not essential, consider using an alternate format such as HTML.
  5. Use a color contrast checker. Be sure foreground and background have adequate contrast. There are many free tools that can help with this.
  6. Avoid using tiny fonts. Since users may be unaware they can increase font size using browser hot keys, use a reasonably large font size by default; then, users can make it smaller if desired. Note that a font size of 1em uses the default browser font size.
  7. Respect white space (between lines, between paragraphs). Providing plenty of space between lines and blocks of text can help users who have difficulty tracking text horizontally. Adequate white space also contributes to a cleaner, more aesthetically pleasing interface for everyone.
  8. Use text, not pictures of text. Use text instead of pictures of text, and control its appearance using CSS. Pictures of text become blurry when enlarged, take longer to download, and are inefficient for the website author to edit.
  9. Think twice about the words you choose. Keep your content simple to read and understand. Often web authors use larger words and longer sentences than is really necessary.
  10. Caption video. Captions provide benefits to all users. There are many free, easy-to-use tools available that support the process of transcribing and captioning, videos.
  11. Describe video. For people are unable to see video, create a script that includes brief descriptions of important visual content, then provide that as a separate description track, either as timed text or recorded narration.
  12. Provide a transcript. Provide a transcript for video and audio so individuals who are deaf-blind and those with low Internet bandwidth can access the content. Transcripts benefit all users by allowing them to access content quickly.
  13. Test web pages with a keyboard. Try navigating the web page and controlling all its features using the tab key on a keyboard; don’t touch the mouse. This simple test is typically a good indicator of accessibility.
  14. Test pages with high contrast color schemes. All major operating systems have high contrast color schemes available. When it is enabled, make sure that all important page content is still visible.
  15. Test pages with assistive technologies. There are free screen readers and other AT available that can be used for testing. You don’t have to become an expert user, but simple tests with AT can provide valuable insights into whether certain features in a document might present accessibility problems.
  16. Test pages on mobile devices. Growing numbers of users, including users with disabilities, are accessing the web using phones, tablets, and other mobile devices. Test your website using several mobile devices.

Download the full 30 Web Accessibility Tips PDF.

“30 Web Accessibility Tips ” by Access Computing, University of Washington is licensed under CC BY-NC-SA 3.0