Creating Accessible Websites

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.

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 WCAG 2.1 Guideline 3.1 Readable. For screen readers, unless Hawaiian is supported by the end user’s 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 Library of Congresses website.
    • Example:
<html lang=”en-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=”haw”> Ua Mau ke Ea o ka ʻĀina i ka Pono </p>
    • Example:
<em lang=”haw”>Maluna aʻe o nā lāhui a pau ke ola ke kanaka</em>
  • In order to use Hawaiian characters and have the ‘okina 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=”en-US”> 
<head> 
<meta charset=”utf-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 UH 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 article.