The Office of Diversity, Inclusion, and Belonging is dedicated to ensuring that all Harvard Graduate School of Design (GSD) community members can access and engage with digital content seamlessly and with the same ease of use.
Whether you're a student, faculty member, or staff, this resource provides valuable tips and guidelines for making your digital content, including websites, documents, and multimedia, accessible to all individuals, including those with disabilities.

Digital Accessibility Resource Guide

The Web Content Accessibility Guidelines (WCAG) 2.1 is an internationally recognized criterion for creating accessible web content. WCAG 2.1 covers a wide range of recommendations spanning the many types of disabilities, including accommodations for “blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations.” However, implementing such practices will not address every user need for people with these disabilities, so we must remain committed to continuous growth and understanding.

The following guide draws from WCAG recommendations and the “Digital Accessibility for Content Creators” training (presented by Harvard’s Digital Accessibility Services) but is not the full extent of what we may be capable of as digital collaborators.

What is digital accessibility?

Digital accessibility is making electronic content available to and usable by everyone—simultaneously, with the same ease of use—including people with disabilities.

Why is digital accessibility important?

Promoting digital accessibility is essential for creating a truly inclusive world for everyone. For people with disabilities, it generally means equal access to education, housing, and employment. In the age of social media, it translates to equal access to social capital.

Consider the ways accessible accommodations have improved everyone’s lives for the better (e.g., ramps, elevators, subtitles, etc.). Moves toward accessibility on all fronts improve every user’s life for the better.

How are people affected?

Depending on users’ ability and experience, they may need to interact with technology differently. Each disability has specific causes and symptoms which vary across different conditions. Regardless of their vision level, motor and hearing abilities, and cognitive processing, users should be able to access the same content with the same ease of use.

What is "assistive technology" (AT)?

The phrase “Assistive Technology (AT)” includes the tools and services necessary for helping individuals access digital information. The types of AT available are as diverse as the needs behind them. Once content creators can understand the various Assistive Technologies available and optimize their web pages and documents for optimum maneuverability, those who depend on these tools will be able to better access information.

Examples of various AT tools are as follows:

  • Visual: screen readers, screen magnifiers, and high-contrast settings.
  • Hearing: captions, transcripts, and sign language.
  • Motor: wands, eye tracking, and trackball mouse.
  • Cognitive: font selection, text highlighting, and dictation.

WCAG Accessibility Principles

WCAG promotes four primary principles for inclusive content creation (POUR):

  • Perceivable: Information and user experience components must be presented so all users can recognize and understand them.
  • Operable: Interactive elements, such as navigational buttons or controls should be accessible and usable.
  • Understandable: Content should be able to be comprehended, learned, and remembered.
  • Robust: Content should be available and functional on any device typically used for accessing digital content.

10 Essentials for Digital Collaborators & Content Creators

Page Title

Page titles must be distinct and descriptive as they are typically shown in browser tabs, and search results, and are incredibly important for visibility in Search Engine Optimization. Be sure to use titles that completely contextualize the page for users. Otherwise, users may only understand a portion of what the title is meant to convey.

Information Structure

All page content should exist in logical groupings. Organize all page content thematically and format them accordingly. There should not be huge blocks of text on a page. They should be broken into separate sections with subtitles and bullet points to make information readily consumable.

Headings

Headings are meant to mark a content grouping meaningfully and logically. For instance, there should be a Heading 1 style dedicated to the top page title, a Heading 2 style dedicated to the next subtitle, and so on and so forth. This allows individuals to scroll through the page with ease and enables screen readers to readily navigate the content hierarchy of a page.

Semantic Markup

Semantic markup is a way of writing and structuring your HTML (Hypertext Markup Language) to reinforce the content’s semantics or meaning rather than simply its appearance (e.g., <footer>, <header>, and <article>). This detailing communicates to screen readers the layout of items, and it is beneficial for those with low vision.

Legibility

The text color on a web page should have a contrast ratio of at least 4.5:1 for normal-size text (including text overlay on images).

  • WebAIM offers a free color contrast ratio checker to see if your page’s colors pass accessibility requirements. Additionally, avoid using color as the only indicator of meaning (e.g., red and green are commonly used to convey opposing meanings like “stop”/”go” and “good”/”bad”). Try utilizing shapes alongside color to convey meaning (e.g., check marks, crosses, circles, etc.).

Note: If a visual reference is desired, there is a PDF available above with diagrams included.

Readability

Users often scan websites instead of reading them. As opposed to “Legibility,” “Readability” refers to the presentation of information. To make pages more readable, consider keeping paragraphs short (less than 150 words), use bulleted lists when appropriate, and use headings/subheadings.

Language

To remain as inclusive as possible, make sure to write clear headings, use plain language (or language according to your audience), and define acronyms upon their first use. Superfluous text, jargon, or figures of speech may be enticing (particularly in academic settings), but to make information more understandable to broader audiences, consider using more simplistic language when trying to convey basic ideas.

When including links on your pages, make sure links are distinct from other text, using both color and underlines. Additionally, write clear and unique link text so that the user knows where the link is going. This is especially important for those who utilize screen readers because they need context for their browsing. For instance, if the link text simply read “Resource Guide” as opposed to “Digital Accessibility Resource Guide,” a screen reader user might be very confused without context.

Image Alternatives (alt-text)

Whether developing a website or authoring a report, alternative text is essential for creating accessible content. Text alternatives for pictures should be short and concise (about the length of a Tweet[WE1] or 140 characters). Alt-text should be written for an image if the image is a logo, illustration, painting, etc., but should be left blank when the image is purely decorative. Furthermore, alt-text should always end with a period for the sake of screen reader legibility.

  • Social media: When collaborating on social media, make it a regular practice to add alt-text to images prior to posting or include image descriptions in captions.

Media Alternatives

There are three primary media alternatives for videos: captions, transcripts, and audio descriptions.

  • Captions: Synchronized text of the audio material provided on screen with the video. This is helpful for those who may have low hearing.
  • Transcripts: Non-synchronized text of the audio material provided adjacent to the video or audio file. This is particularly useful for audiences with low hearing and different processing styles.
  • Audio description: A separate spoken audio track of what is visually happening in a video. This is particularly useful for audiences with low vision.

Testing Accessibility

Once you have created content, how can you tell if it is accessible? Luckily, many automatic tools and non-technical tests are available to check various aspects of the above-listed essentials for digital creators.

Explore options for tracking and checking digital accessibility via the Accessibility Testing Tools and Practices webpage by the Digital Accessibility Services (DAS) Office.

Harvard's Digital Accessibility Policy

Harvard University is committed to making University Information Technology and University Digital Content accessible.
In interpreting this policy, “accessible” indicates a person with a disability is afforded the opportunity to acquire “the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally effective and equally integrated manner, with substantially equivalent ease of use.”

Want to learn more?

Explore the Accessibility for Managers page for resources on supporting your team, hiring practices, and project planning. You can also email DAS to schedule an appointment or stop by DAS office hours.