Creating Accessible Websites

New Accessibility Compliance Date

The compliance date for the new rule on聽Accessibility of Web Content and Mobile Apps Provided by State and Local Governments听颈蝉听April 24, 2026.

To comply, all web content and mobile apps must meet the technical standard of the聽Web Content Accessibility Guidelines (WCAG) Version 2.1, Level AA.

For more information view:聽

Information on Website Accessibility

People with disabilities should not be excluded from all the benefits the Internet has to offer. This is especially relevant for students with disabilities who would like to enroll in online courses. One of the benefits of distance education is that it allows students with disabilities and students who experience difficulty commuting to classes the ability to take courses online while at home. However, this convenience can easily turn into a problem for students with disabilities if the online classes are not accessible.

In general all images should have alt text, form fields should be labeled correctly, and focus outlines should be shown for keyboard navigation. Also, correct header order should be followed, proper contrast ratio should be used (of at least 4.5:1 for normal text and 3:1 for large text), and videos should be captioned, and/or audio clips should have transcripts. View more information about techniques and WCAG Guideline.

View a good list of resources to help you identify and fix problems here.

You can view the Siteimprove Dashboard聽to get an overview of how accessibility scores have changed over time.聽 Utilize the options on the dashboard to see all sites or those for a specific campus.聽 If you are a Siteimprove user you can also see the scores for just your site as well.

Accessibility Considerations for 驶艑lelo Hawai驶i and other Languages

Assistive technology, such as screen readers, may not know how to handle different languages, such as Hawaiian words that have diacritic marks. This section explains best practices based on what is defined in. For screen readers, unless Hawaiian is supported by the end user鈥檚 software, the words and phrases will more than likely be mispronounced.

  • Ensure the proper language <lang> attribute is defined in the HTML header of your webpage. This markup helps assistive technology, like screen readers, identify the language of the media. For example, if your website is predominantly in US English, please define <lang=”en-US”>. If your webpage is predominately in Hawaiian, please define <lang=”haw”>. Other ISO 639 language codes can be found on the .
    • Example:
<html lang=鈥漞n-US鈥>
  • If you have a mixed language webpage, use the above <lang> attribute on paragraphs <p>, and other formatting tags where the language changes. Setting the <lang> attribute will tell the assistive technology how to handle the text.
    • Example:
<p lang=鈥漢aw鈥> Ua Mau ke Ea o ka 驶膧ina i ka Pono </p>
    • Example:
<em lang=鈥漢aw鈥>Maluna a驶e o n膩 l膩hui a pau ke ola ke kanaka</em>
  • In order to use Hawaiian characters and have the 鈥榦kina and kahak艒 show properly, you should define <meta charset=”utf-8″> in the HTML header of your webpage. This code lets the browser know that the page contains UTF-8 content.聽
    • Example:
<html lang=鈥漞n-US鈥> 
<head> 
<meta charset=鈥漸tf-8鈥> 
<body> 
<p lang="haw">Hawai&#699i</p>听听 
<p lang="haw">Kahak&#333</p> 
</body> 
</html>
  • 驶Okina and vowels with kahak艒 may be coded in HTML with the following escape sequences:
驶okina鈥&#699
膧鈥&#256
膩鈥&#257
膾鈥&#274
膿鈥&#275
墨鈥&#299
莫鈥&#298
艑鈥&#332
艒鈥&#333
弄鈥&#362
奴鈥&#363
  • Error messages, and popup alert messages should be in the same language that the page or piece of content containing them uses.

WordPress Accessibility

Wordpress Logo
Websites made with WordPress are quickly becoming the new standard for content management and web design. This is due, in part, to the ease in which individuals with little to no coding knowledge can create and edit content using WordPress’s powerful tools. However, while WordPress sites may look flashy, they often require additional work to make them accessible. WordPress offers many first and third party themes that make your site look flashy, but aren’t always accessible. If you purchase a theme, make sure it is accessible first. If you can’t find accessibility information, email the developer of the theme.

Here you will find tools to assist in making your WordPress site more accessible to all who may view your site.

ITS now offers a WordPress multisite service for UH System (www.hawaii.edu/<sitename>) and UH Manoa (manoa.hawaii.edu/<sitename>) departments. This service features an ADA compliant theme. All WordPress updates are managed by ITS. This option is especially ideal for departments who may not have the necessary funding to have a dedicated IT specialist manage the backend of the website, but would still like to have an online presence in the UH community. WordPress offers a user-friendly interface that allows its users to easily create and edit content without requiring any coding experience. Please visit the ITS FAQ for the 麻豆传媒Hosted Website Service for more information on this multisite service.

Drupal Accessibility

Drupal Logo
As with WordPress, Drupal sites often require additional work to make them accessible. Drupal also offers many first and third party themes that make your site look flashy, however they aren’t always accessible. If you purchase a theme, make sure it is accessible first. If you can’t find accessibility information, email the developer of the theme.

Here you will find tools to assist in making your Drupal site more accessible to all who may view your site.

Google Sites

Google Sites Logo
Google Sites is a WYSIWYG editor that can be used to create simple web pages through the Google’s G Suite of software. Web pages created with Google Sites are largely not accessible. However, there are some steps that you can take to make your Google Site as accessible as possible:

  • Include alt text for images
  • Organize your site using proper heading order <h1> through <h4>
  • Use a color contrast ratio of 4.5:1 for large text and 7:1 for other text and images
  • Use informative link text
  • Use large, left-aligned text when possible
  • Use numbered and bulleted lists
  • Use a theme that allows you to see the focus outline as you tab through links on the site

For information on how to perform these tasks in Google Sites, please check out Google’s help .