Inclusive Design: Bring Web Accessibility to Your Nonprofit

Things You Can Do Today to Make Your Web Pages Accessible

In this section, we will explore some universal principles of creating accessible content. These principles apply for any content creator whether you are using a word processing program, a content management system, or any other tool.

Write Clearly

  • Use the simplest language appropriate for your content.
  • Use illustrations, icons, and other visuals to supplement text.
  • Check spelling, grammar, and readability.
  • Be careful with abbreviations, jargon, complex language, or anything that might confuse the reader.
  • AVOID THE USE OF ALL CAPS. IT CAN BE DIFFICULT TO READ. One exception is the use of all caps in headers.

 

Related Resources


Writing with Web Accessibility in Mind (Stanford)—Much of the guidance that makes writing on the web more accessible to people with disabilities makes content more accessible to everyone. This resource from Stanford has a nice section on “using plain language” and lists additional resources on the topic.

Grammarly—A popular grammar and spelling checker.

Use Good Semantics


  • Organize your content using true headings. The document title should be a first-level heading (usually labeled as “h1” or “Heading 1”), the next level should be Heading 2, etc. Avoid skipping levels (e.g., jumping from first-level to third-level headings).

Did you know?

You can press Ctrl + Alt + 1, 2, or 3 (or command + option on Mac) to quickly create the first three levels of headings in Microsoft Word.

  • Use true bulleted and numbered lists rather than just typing numbers or symbols at the start of a line.
  • Provide a table of contents for long documents.
  • Provide a document or page title that is descriptive.
  • If you want to create columns, use the tools in your applications. Avoid techniques like using the Tab key or spacebar to create space between columns.

 

Related Resource


Learning to Love Headings in Microsoft Word—Using true headings will also make life easier for the document creator.

Remember Users with Visual Disabilities

Related Resource


Contrast and Color Accessibility—This article pulls together the principles and techniques for understanding and evaluating WCAG 2 contrast and color requirements.

  • The use of color can enhance comprehension, but do not use color alone to convey information (e.g., “Items in red are due this week”). Using color is fine (e.g., “The items due this week have the red word ‘due’ next to them”), it just can’t be the only way information is provided.
  • Make sure that color contrast is strong, especially between text and background. This is true for images that include text as well.
  • Do not use descriptions that rely only on sight (e.g., “click on the square”, “the box on the left side of the page”, “The big blue text”).
  • Use adequate text size, usually no smaller than 16 pixels (1em).

Be Careful with Tables

  • In most tables, the top row describes the columns of information below it, and in some tables, cells in the first column describe the information to the right. If the tools allow, provide headers for data tables.
  • These headers should also be clearly identified visually. For example, the column and row headers below are bold and have a green background:

 

Example Table


 Plan Element      Yes/No   Supporting   Documentation  Additional   Notes
 An executive   summary  Yes  Summary is   attached  
 A   comprehensive   timeline  Yes  3-year timeline   in place  
 Assignment of   specific   responsibilities  Yes  List of   employee   responsibilities  
 Metrics,   milestones,   and   measurable   steps  Yes  Attendance   lists for the last   4 workshops   attended  

 

  • Use the simplest table structure possible. When possible, avoid cells that span multiple columns or rows.
  • Avoid using tables for visual layout when possible.

 

Provide Appropriate Alternative Text

  • Many tools allow you to provide alternative text for images. These boxes are sometimes labeled with phrases like “alt text,” “alternative,” or even “description.” If present, use this field to provide alternative text.

 

  • Alternative text should present the content and function, not necessarily a description, of an image. If you had to remove the image, what text would you put in its place?
  • If an image has no relevant content or function, is decorative, or the alternative text is provided in nearby text, then the image should have empty alternative text if possible (some tools have an option for “blank” or “empty”). If this is not an option, leave the field blank. You should not put empty spaces, empty quotes (except in HTML alt=""), or any other nonsense information in these fields.
  • Avoid words like “picture of,” “image of,” or “link to.”
  • Use the fewest number of words necessary. Less than 160 characters is ideal for search engine optimization.

 

Related Resources


Alt Text—This resource gives examples of appropriate alternative text, or "alt text," and shows how to add alt text in Moodle, Canvas, Microsoft Office, and Google Docs.

Alternative Text—Through the use of examples, this article presents the principles of creating equivalent alternative text.

Ensure Links Are Descriptive

clickhere

Avoid phrases like “Click here”, “Here”, “More”, “More information”, “Read more”, and “Continue.” Instead, use descriptive text that informs a user of the link destination (see below).

SigninwithWordPress

 

URLs as link text should usually be avoided, unless the document is intended to be printed or if the URL is relevant content.

Caption and/or Provide Transcripts for Media

  • Videos and live audio must have captions and a transcript. A transcript is sufficient for archived audio.
  • Captions should accurately reflect the text in the video. The text should be equivalent to the video content and identify speakers and non-spoken audio cues.

 

 


Next: Content Creation Tools ›


Stay Informed
Sign up for periodic news updates and event invitations.
Connect with us on social media or view all of our social media content in one place.