Tips for Improving Your Site

Accessibility Tips

Content & layout

  • Make your text scannable. 
    Succinct, structured text benefits all users. Use headings, bullets, and concise, action-oriented language, keeping in mind that most users spend less than ten seconds on a page.  See more tips from University Communications.
  • Review your site on a phone. 
    Note how your content stacks and scales on a small screen, since one out of three site visits is from a mobile device. 
  • Use headings for structure, not just because you want a large font. 
    Headings are used only to divide a document into hierarchical sections, starting with Heading 2 for the major sections, Header 3 for sub-sections, and so on. This helps users find the content they need, and it helps search engines and people using screen readers understand the page's structure and most important content.
  • Avoid "click here" links. Linked text should describe its destination. 
    For example, it's better to say, "Learn about our Master of Health Administration program" than "Click here to learn about our Master of Health Administration program."
  • Use tables only when necessary.
    Tables can be difficult for mobile users and users with disabilities to use. Use tables only when they are the clearest, most concise way of presenting data, and be sure to define header rows using the Cell Properties option.

Organization & menus

  • Every page needs one home in the menu. 
    Placing pages in the menu structure improves accessibility, usability, and search engine optimization. See the Menu Settings section of the Drupal help site to learn how. 
  • Choose user-friendly menu labels.
    "Search Internships" is better than "Professional Development Opportunities Database."  

Images and media

  • Avoid placing text in your images or using images as buttons. 
    It's not accessible or mobile-friendly. Web Services can help you set up text blocks (text block example) or slideshows (slideshow example) instead.  
  • Information conveyed through images and/or color should be conveyed through text as well. 
    For example, statistics presented in an infographic or via color-coding should also be provided in plain text. 
  • Provide text-only alternatives for media, including closed captions for video and transcripts for spoken audio.
    This helps users with visual, auditory, and learning disabilities and improves search engine visibility. The Center for Academic Excellence (CAE) provides help with captioning and transcripts. If you must embed media from third-party services not officially supported by the university, please contact CAE or Web Services for help evaluating the accessibility of those services. 
  • When linking to files, indicate file type and size. 
    Mobile users with limited data plans and people using assistive technologies need to know if a link will lead to a large download and/or launch a new program.  For example: "Printable Volunteer Registration Form (PDF, 1 MB)." 

General Tips

Security & Privacy

  • The following should not be collected via webform:
  • When conducting personnel searches, contact Web Services before posting candidate résumés on a Drupal site.
    We can help you restrict these materials to Appalachian users by posting them on our Searches site and requiring a login for access.

Mobile users

  • Check your site on a phone.
    Approximately one third of the users visiting Appalachian's Drupal websites are using their phone, not a computer. View your site on various devices to see how content 
  • Put your most important content in the main content area as well as the menu .
    Most mobile users navigate using the main content area, not the menu links, so be sure that your most important content is easily accessible from both places.

Examples

 

Example of text as image, with poor contrast between text and background image

The text in the image above is not accessible to users with visual disabilities or to search engines. Rather than highlighting important information, placing text in images hides that information from many users.

 

Comparison of what a color-coded subway map looks like for viewers with and without colorblindness

The image above shows how a color-coded subway map looks to users with normal vision (left) and users with deuteranopia, the most common form of color blindness. 7% of American men have some form of color blindness.

 

Headings menu on appstate.edu that a screen reader user would use to navigate

In addition to reading page content, screen reader software allows users to navigate a site through a list of headings, links, and landmarks on a page. The outline above shows the heading list a screen reader user heard when visiting the appstate.edu homepage. Headings are also used by search engines to understand the structure of your site and identify the most important content, so proper use of headings can improve your site's search engine optimization as well as its accessibility.

 

In the video above from SLCC Universal Access, a person demonstrates how he uses JAWS, a popular screen reader, to navigate a website.

login button example with proper ARIA role

The image above shows a login button that can be found and used by people with visual disabilities and people who use a keyboard rather than a mouse to navigate. The white-on-black text at the bottom of the image shows what a screen reader user hears when this section of the site is read. Contact Web Services if you need a button for your website and you are not sure how to create an accessible one; there are better options than using a linked image.

Resources

  • Accessibility at Appalachian
    Campus resources and support for creating and using accessibility 
  • WAVE Extension
    Browser extension available for Firefox and Chrome that can help you identify potential accessibility issues on a website
  • The A11Y Project
    Clear how-tos, tests, and tips for creating accessible web content