Adding an Accordion Menu

  • General
    • Reduce clutter on page. Format content to support scanning of pages for information.
    • Use a clear visual hierarchy. Information that is more important needs to be more prominent (i.e., closer to top). Nest information visually to show relationship to heading. Avoid using super-sized font sizes (i.e., shouting).
    • Use headings on page to organize content. Headings must be is a sequential order if nested. Begin with a Heading 2 (i.e., since the page title uses a heading 1). A web page may have more than one heading 2’s, 3’s, etc.
    • Keep paragraphs short. Avoid extra content when possible.
    • Avoid using “Click Here,” “Go Here,” etc. non-descriptive links. Instead use the words from title of web page or document being linked to.
    • Make clickable links obvious from text. Avoid underlining text for emphasis. Instead use italics, bold, or both.
    • Use bold, italic or both to emphasize text instead of underlining (Note: screen readers interpret underlined text as a hyper-text link that I not functional).
    • Create a definable contrast between text and background color in order to ensure readability, especially for individuals with a visual impairment.
    • If a web page requires a lot of interpretive text this means it is not intuitive or obvious to the visitor. Look to use words or images that convey function or clearly state purpose.
    • Use bulleted (i.e., unordered) or numbered (i.e., ordered) lists instead of commas or semicolons to separate content.
    • Avoid using blinking text or images as this may trigger a seizure in certain individuals.
    • Use the closed captioning feature for all YouTube videos posted to your website.
    • Create a definable contrast between text and background color in order to ensure readability, especially for individuals with a visual impairment.
    • Dimensions for top banner photo are 1200 (pixels wide) x 375 (pixels high). Note: this pertains to Drupal editors only.
  • Navigation
    • Group links together under a heading that describes their purpose or function.
    • Use a different colored link or underline/no underline after one clicks on it. This alerts the site navigator to know what links they have already selected (i.e., provides visitor with a sense of how much of site they have visited). Note: this is built into the system for Drupal editors.
    • Use page or document title for labeling links (i.e., consistency equals confidence).
    • Current page needs to stand out in navigation by using boldface font or a different color (i.e., if using side bar links)..
    • Make sure that the visitor is able to find their way back to your home page. This can be done by creating a “Home” link in your site navigation menu or by using breadcrumbs with a “Home” link. Note: this is built into the system for Drupal editors.
    • Visitor needs to be able to know where they are in relation to your site. A navigation menu or breadcrumbs serve this purpose. Note: this is built into the system for Drupal editors.
  • Tables
    • Tables with data require a caption and headings (i.e., first row or first column).  A summary is required for tables that need an explanation on how to use it (i.e., typically tables using both row and column headings).
    • Drupal websites: Insert class="no-sort" into <table> tag for responsiveness across platforms (i.e., desktop, tablet, and mobile). If allowing user to sort by headers, use class="generic-table" in <table> tag.
    • Instead of using layout tables for aligning content on page, use the <div> tag icon on toolbar along with alignment settings. See video plus step-by-step instructions under the Extra Credit section of the Drupal Blackboard Course.
    • If layout table needs to be employed, enter role="presentation" into <table> tag in Source mode. This will distinguish it as a layout table as opposed to a data one that is missing a caption and headers.
  • Images
    • Use alternative text for all images. If the image has words, those must be included in the alt text description as a sighted person would read them.
    • Avoid creating graphics with blocks of text, charts, graphs, etc. Instead place words on page or as part of caption for image. (note: graphics with titles or labels on them are fine).
    • Avoid using alt text descriptions that are the same as text adjacent to an image. An example would be a photo of a person where his/her name is placed adjacent to their picture.  (note: Wave will present an alert when this occurs).
    • Avoid using alt text description that exceeds one-hundred characters in length. Instead place text adjacent to image in those instances as part of image caption.
  • Documents

    (I.e., PDF’s, Word docs, Excel spreadsheets, PowerPoint docs, etc.)

    • All documents must be ADA compliant.
    • Convert Word documents and PDFs to web pages when possible (note: images must be uploaded separately)
    • If formatted PDF is desirable for printing purposes – create a web page using text from PDF and create link to PDF labeled as “Printable Version.”
    • Place asterisk* after link to documents (note: the asterisk is reference in the template footer as *Required Document Plugins
    • Resources: ADA Self-Paced Training | Desktop Tools | In-Person Training
  • Forms
    • Use descriptive text (i.e., description box for each component) when needed to assist person completing form field(s).
    • Form fields: Select list menus using the listbox setting do not require a Fieldset, all others do, however. When using a Fieldset, hide the form label by selecting None from Label display drop-down menu. (Note: Wave tool will indicate which form labels are not correctly associated with a form control. These require a Fieldset (i.e., or change from radio button (default) setting to listbox. Hide the label then by setting the Label display to None).
    • Add reCaptcha for forms that are submitted online. Note: Campus Web Editors using Drupal can also contact the YSU Web Team for assistance.
  • Accessibility Resources