Use the Accessible Web Content Checklist to double-check your web content. This checklist is meant to remind you to include accessibility best practices in your web content and help you develop good content creation habits.

Hierarchy and Structure

Heading levels should represent the structure of the web content and are vital to conveying that structure to screen reader users. The Heading 1 is used for the Page Title and is not available to select within Drupal as it is automatically assigned to title of the page. A Heading 2 is a major section heading on the webpage. A Heading 3 is a sub-section of the Heading 2. A Heading 4 is a sub-section of the Heading 3, and so on. Note that if your content is simple and does not require any headings beyond the Heading 1, you do not need to build in headings. Also note that you should never skip a heading level because you prefer the style of another heading level better - this breaks the structure for screen reader users and makes the content non-compliant with the Web Content Accessibility Guidelines (WCAG).
Using the built-in bulleted and numbered list styling in Drupal ensures that screen reader users receive key semantic information about the list. For example, if you use built-in bullets, screen reader users will hear “item 1 of 5.” If you just put dashes or asterisks, all a screen reader user will hear is ”dash” or “asterisk.” The number of items will not be conveyed. This is even more critical for step-by-step instructions where a screen reader user would like to know the total steps provided for a process.
Tables are meant for data comparison only. Using tables to provide columns on a page creates the following issues: Blind and low vision visitors to the site using a screen reader will have an inefficient and confusing experience as the visual layout will not be conveyed. Rather the table will try to compare data that is not meant for comparison. In addition, low vision users that use browser zoom will experience issues with the layout of the content as tables can not reflow based on browser zoom. Instead, always use one of our paragraph types to layout your content. For example, if you would like two columns within a section of your page, use the Columns paragraph type. When you are not sure which paragraph type to use, contact the Digital Experience team. 
Merging cells creates accessibility issues for screen reader users.
Always include N/A, 0, or Blank when data is not available for a given cell.

Content Accessibility Best Practices

You should always develop content with the following plain language guidelines in mind: 

  • Use an active voice and present tense. 
  • Focus on what users want to know, address them directly, and make your information easy to follow. 
  • Use lists to highlight a series of steps, requirements, or pieces of information in a visually clear way.
  • Make users’ top tasks the priority content on your website. 
  • Use simple words and phrases. Avoid using abbreviations, jargon, and complex language. When using abbreviations, remember to spell out what the abbreviation means the first time you use it on a page. 

You can find additional information on the Plain Language Guidelines website.
Bold is the best way to emphasize content in a sentence. Italics is harder for the low vision and dyslexic communities to read. Underline indicates a hyperlink and should only be used for hyperlinks.
 
If you have an important note or alert that you need draw assistive technology uses, you can add appropriately nested heading that emphasizes there is an important note on the page. Example of an Important Note using a Heading to alert all users: PDF Remediation Guide - Remediation Options page. 
Do not use "here," "click here," or "learn more" for links. In addition, do not just add a hyperlink as a long hyperlink creates an inefficient and frustrating experience for screen reader users. Provide context by using descriptive links. In most cases, the exact name of the page, document, or other media you are pointing the person to will be the best name for the link. For example, in the following sentence, Understanding Disabilities is the descriptive label for the link as it matches the page the user is being sent to: "Learn about the social model of disability on the Understanding Disabilities page."
 
Anchor links often do not provide the needed context to assistive technology users and can trigger a vestibular disorder or motion sensitivity. When are anchors okay to use? When proper context has been given and it is the standard way in which users would engage with that content. A good example is when footnotes are used in an article. People know the numbered link will send them to the bottom of the page. They then have the option to use that link or to scroll to the bottom of the page on their own (user choice is best). Never use anchor links when context has not provided and the behavior is not expected. For example, do not use anchor links on a separate page that sends people to a section of another page and do not use them in main user navigation elements (i.e., department navigation). 
Using color as the only way to convey meaning will create issues for people who are color blind and people who are blind, deaf-blind, or have low vision. ​In the case of someone who is color blind, they may not be able to distinguish between certain colors such as red and green, or they may not see colors at all. If using red, yellow, and green to denote statuses, use a text equivalent of that status in the status field, such as high risk, medium risk, and no risk. You can use icons such as a checkmark to show an item as complete but always provide alt text and always ensure the icons clearly convey the intended meaning for neurodivergent employees. 
 

Images, Emojis, Animations, and Videos

Alternative text describes the visual information that the blind, low vision, and deafblind community would miss without a description. Alternative text is hidden visually and can only be picked up by a screen reader. Note that alternative text is not the same as a photo caption. A photo caption usually provides important identification info in the photo that everyone needs to know, such as the location of the photo or the person or people included in the photo. A photo caption should be provided for all site visitors when applicable. 

It’s always best to work with the Digital Experience team to implement any content you may want to convey in a more visual way, such as providing infographics or a marketing banner. When our team is engaged, we can work with you to implement the content in an accessible and mobile responsive design. 

What are the issues with images of text? 

  • An image of text can often not be resized with zoom/magnification tools. 
  • Complex images of text cannot be conveyed meaningfully via alternative text. 
  • The text is not searchable and cannot be translated into other languages.
  • Prevents any user from copy pasting that content for personal notes or other purposes.

When you are designing a splash image to draw people's attention to a call out box, it’s important to design your graphics with color contrast in mind. When designing a graphic, you should always ensure the foreground elements have enough color contrast up against the background of the graphic. This can be tested by using the Web AIM Contrast Checker. 

Please note that you should work with the Web team if you would like to add icons to your site. Icons often have a transparent background and are not designed with high contrast or dark mode in mind. The Digital Experience team can work with you to ensure your icons support high contrast mode and dark mode. 

You may choose to add supplementary images to draw site visitors to a specific call out section. When selecting an image, ensure it conveys the same meaning as the text in the content. For example, if the section you are drawing folks to is about deadlines, the image should convey that same meaning. 

Why? 

Some people are visual learners. This includes some ADHDers, Autistics, and Dyslexics. If the meaning of the supplementary image does not match the context of the text, this can create cognitive confusion. 

Note that not all neurodivergent people prefer supplementary visuals – it all depends on the person’s neurodivergence and their preference for auditory versus visual content. 
Emojis are for social media posts, not for University websites. Emojis dispersed throughout content on a website create accessibility issues for screen reader users. Note that emojis are fine for social media or Slack, when added to posts in an accessible way. 
 

Animations can trigger various health issues, including migraines, vertigo, and seizures. Never use the following animated content regardless of if a site respects reduced motion as these animations can trigger a health condition for the first time.

  • Do not use flashing, blinking, and strobing effects.
  • Do not use any disorienting movement (for example, handheld video shake, spinning movements, pinch and zoom effects, or horizontal slide effects).

If animations are needed and essential for a specific marketing campaign, please work directly with the Digital Experience team to incorporate accessible animations into the website. We would need both the animation and a still photo so we can respect reduced motion settings. 
 

Webforms and Data Analytics

The following form tools can be used to build forms that are linked to from the website. Note that in all three cases, you should ensure you follow the associated training to develop a form that meets accessibility guidelines: 

  • DocuSign
  • Drupal Webforms
  • Form Assembly

Form tools you should not use:

  • Smartsheet Forms: At this time, Smartsheet forms are not accessible and anyone using assistive technology would run into barriers. We ask that no one link to Smartsheet forms on the website. 
  • Qualtrics: Qualtrics is meant for communicating research surveys and requires significant work to ensure the surveys are accessible. Please do not use Qualtrics for intake forms. 

Highchart charts and graphs meet the web content accessibility guidelines and provide more advanced support, such as sonification. The Digital Accessibility team can provide anyone interested in adding data analytics charts to the website with Highcharts training and support. 

Do not use the following data analytic tools on the website:

  • At this time, Tableau dashboards can not meet the Web Content Accessibility Guidelines and thus can not be made accessible to disabled employees, students, or the public. 
     
Bar and pie charts are often the easiest charts for anyone to follow. 
 
Provide clear data labels and, when applicable, axis titles. 
 
Provide a chart description below the chart for anyone that needs the data delivered in a text-based format. Note that Highcharts is accessible to assistive technology users but based on universal design, the chart description is for anyone that prefers to learn through text rather than visuals. 
The current brand colors are not considered an accessible color palette when combined as many of the colors are the same contrast. Please work with the Digital Experience team to identify an accessible monochromatic color palette for any charts you add to the site. 
 

Please ensure you have completed the relevant document accessibility training that is listed on the Inclusive by Design website. 

If you have any questions about how to properly remediate a specific document or to discuss a better solution, please set up time with the Digital Experience team.

Do not use Canva to create documents 

Note that Canva-generated documents cannot meet accessibility guidelines at this time. No Canva files other than actual basic marketing graphics should be uploaded to the website. 
For departments that use Canva to generate graphics, please do not use it to generate documents to post to the website.
Canva can not produce accessible documents. 

Redesigning Inaccessible Content

Sometimes the way content was originally designed will never meet accessibility standards. The Digital Accessibility team has developed various options for creating accessible content, including:

  • Data Visualization Charts and Graphs
  • Decision trees
  • Interactive checklists
  • Organizational charts
  • Web-based Forms

However, making a choice on what solution to use depends on how the content itself will be redesigned from a usability and accessibility standpoint. Please reach out to us to work on the best solution for your content. 

Monitoring Content with DubBot

Content editors should fix any issues DubBot identifies. DubBot identifies about 30% of accessibility issues. DubBot measures these issues up against the Web Content Accessibility Guidelines (WCAG), the compliance standard for Section 504 of the Rehabilitation Act and Title II of the Americans with Disabilities Act. 

Do not rely on DubBot to catch all issues. 

There is no way to automate the detection of all accessibility issues. 

  • Example 1: There is no way to automatically measure whether the alt text for an image is accurate. 
  • Example 2: There is no way to detect if a video has captions, transcripts, or audio descriptions. 

Ensure you are using this checklist to confirm you have met all the requirements of the Web Content Accessibility Guidelines.

Optional: Send a Copy of the Completed Checklist to Yourself

Note that your submission will not be saved in a database. The only copy will be the copy you receive via email.