Find a checklist below in Q&A format that you may find useful as you review your website pages for ADA compliance. Most pages are comprised of verbiage, images, and links (to both documents and other URL's). Often, they will also include buttons, tables, online forms, and videos. Use the information below to ask yourself if you have handled all that you can on any given page.


Text

  • While the text of a page should be ADA compliant (if you've used the styles that have been created for your site,) the following are several questions that you should ask yourself while reviewing a page:
    1. How are the headings styled?
      There should on be only one use of the H1 header style and that should be applied to the primary heading at the top of your page. Any headers below that should be H2 or smaller depending on how the text is structured and the importance of that section. It is best-practice to use the headings in order with none of them being skipped. So if you have used an H4, then you should have first used H1, H2, and H3.

    2. Is the page structured correctly?
      The structure is also considered when reviewing a page for ADA compliance. Several things you can quickly check while reviewing a page are listed below:
      • Is the text broken into paragraphs?
        The use of paragraphs make text more readable and provides more natural reading breaks for screen readers.
      • Are there any sets of simple instructions or lists?
        If there any sets of simple instructions or lists, it is best that they use an ordered or unordered list instead of manually entering a bullet or number. The use of an ordered or unordered list makes it easier to display necessary steps to assistive technology.
      • Is any text underlined that is NOT a link?
        Underlining text on a web page should be illegal. If the text is not a link, DO NOT apply the underline style. It adds confusion to both readers... and even regular browser users. Links are the only items on a page that should have an underline so they more visually stand out.
      • Is there any text that is using the strikethru style (a line through the middle of it)?
        If so, it is best to remove this text since it does not add any value to users.

  • Please review the following articles for more information on page structure and headings.



Images

  • While reviewing images located on a page, make sure they have ALT text. When a visitor using a special screen reader or similar device visits your site, the ALT text will be read to them giving them indication about what that image is. Listed below is a series of questions that will help you ensure your images are ADA complient:
    1. Do all of the images have ALT text associated with them?
      For images that are placed using the HTML WYSIWYG widget, confirm it has ALT text by selecting the image and then clicking the Image tool at the top of the editor. Check the Alternative Text field. Decorative or background images that have no other meaning on the page do not need to have ALT text... and this only distracts from the other content on the page. For images that are placed using the Image widget, edit the widget and verify if something has been entered in the ALT TAG field. For icons that are placed using either the Icon or the Icon widget group, check to see if anything has been entered in the Alternate Title/Label field.

    2. Is the page a gallery module page or has a widget that uses that data, did you remember to add Alt information to the images in the galleries?
      You can verify if an image in a gallery has an ALT tag while editing the gallery by clicking on the pencil icon under the image and select Edit Details from the options given and then check the ALT TEXT field.

      Please note that the ALT text for an image that is placed in the Image field for News articles, Blog posts, People profiles and Calendar events are not necessary for anything other than the detail page. This is due to the placement of the title and the image and how close they are making the alt tag redundant. For the detail page, the ALT tag for the image is created by using the title of that item.

  • For more information on images and ADA compliance, see the following article.

Now review the other elements that may be on a page. This includes the following; tables, forms, links, files, video and miscellaneous. 


Tables

  • Are all tables set up correctly for special screen readers while browsing your website? While it is not necessary for ADA compliance, we recommend that each table is within its own HTML WYSIWYG widget for better responsiveness.
    1. Is the table being used for page structure?
      If the table is being used for page structure you should consider rebuilding that section of the page using a mix of the Row and other available widgets. While it will take some additional work, tables should only be used in the presentation of data/information and nothing else.

    2. Does the table have a row or column that is set as a header?
      All tables need to have either a row or column that is specifically set as a header. You can check this by editing the widget and press CTRL and click on the table, select Table Properties from the menu that appears. Verify on the next menu that First Row, First Column or Both is selected in the Headers field.

    3. Is the table complex, containing a lot of information?
      If the table is 'complex' and contains a lot of information, a summary should be included for ADA compliance.  You can check this by editing the widget and press CTRL and click on the table, select Table Properties from the menu that appears. Verify on the next menu that the Summary field contains a summary of the data that is in the table.

  • For more information on tables and what to take into consideration to make them ADA compliant, please see the articles listed below:



Forms

  • All form fields should use a Title attribute that can be read to the screen reader. If you use the Machform solution provided by Campus Suite, then you are all set. 
  • For other forms such as Google, Wufoo, be sure to check to see if the forms fields have Title attributes. 
  • Please review the following articles for more information on forms and a checklist that you can use to review any form on your site. 



Links

  • Links are a tricky thing in the new ADA-age. Traditionally, it was best-practice to launch a third-party web link or a link to a PDF document in a new window. When you need to launch a new window when a link is clicked, we recommend that it be noted with text on the screen so that it can be read by the screen reader. For example,

    Click here to read our policy (opens in a new window)

    While it's always been a best-practice to launch external web links or documents in a new window, screen readers do not like them as it makes it so the user cannot go back. You will have to decide how to handle this on a case-by-case basis.
    1. Does a link that opens a document in a new window or leaves the website have the Title or Advisory Title attribute specified?
      For each link that opens a new window or leaves the site, a short description of either the document or the external link should be given followed by (opens in new window).

      Listed below, you will find a list of widgets that allow a link to be created and where to enter the necessary information for ADA compliance. 
      • HTML WYSIWYG -  in the Advanced tab in the Link Editor in the Advisory Title field.
      • Side Navigation (Secondary Navigation) - the label of the navigation element and the target which can be found in the Advanced tab. 
      • Button - Title field
      • Owl Carousel, Carousel Editable, Feature Slider and Slider - Alt text
      • Image - Alt field
      • Icon and Icon Group - Alternate Title/Label field

  • Please review the following articles for more information on links:

Files 

  • Much like your website, the files you link to should be ADA compliant too. While it takes extra work, taking the additional time to make files compliant moves you closer to a smooth experience for your screen-reader users. 
    1. Are linked files ADA compliant?
      There is only one way for you to verify and fix any issues with files that are linked on your site. That is by checking them in either the program that created them or something similar. The guidelines that are listed above for images, forms, links and etc. should be followed for all linked files.

      Remember to re-upload the files after they been made compliant and replace the ones that are there by using the Replace existing files command at the bottom of the File Manager.

  • Please review the following articles for more information on page structure and headings:



Video

  • While reviewing your site you may come to a page that contains video(s). While videos help with communicating, extra steps need to be taken to make them available to screen readers. 
    1. Do any linked/embedded videos have closed-captioning and transcripts?
      All videos must have closed-captioning and should include any relevant sound effects. Videos should have textual transcripts as well. This will enable people who have a have a hard time understanding the language more easily follow the subject of the video. Campus Suite includes one (1) hour of video captioning and transcription per year with our ADA Service Plan.

      As an aside, captioned videos also assist with SEO, because the text can be found by search engines.

  • Please review the following articles for more information on making your videos ADA compliant:

Miscellaneous

  • There are some items you may find as you review your site/pages that do not fall into the categories that are listed above. Listed below are several questions that may help in these cases:
    1. Is there flashing or blinking text or anything animated?
      There should be no flashing or blinking elements on a page in consideration of Photosensitive epileptics. Also, any animations must have at least one version that is not animated.
    2. Are there audio files linked to or embedded on the page? 
      If there are any audio files they must be accompanied by a text transcript.
    3. Are frames being used on the page?
      Frames are used to divide the browser window into individual frames where other web pages can be shown. The code that is used to do that is old and is no longer supported by later browsers. Don't use frames. It's a trend that is dying and they make pages non-compliant. Let's not confuse Frames with iFrames. To be clear, below is the HTML syntax used to divide a browser window into frames, and then load files a, b and c into each of the frames.

      Below you will find an example of a frame that you can use to look for it in the source.
       <frameset cols="15%,50%,35%">
        <frame src="frame_a.htm">
        <frame src="frame_b.htm">
        <frame src="frame_c.htm">
      </frameset> 

  • Please review the following articles for more information on Flash, audio, frames and etc.:



Wrap-up

  • If you have additional questions that were not answered on this page, please let us know by submiting a ticket to support! We're here to help!