Guide to Making a Website Accessible

The following is a basic list of guidelines to follow for site designers and content contributors who are implementing content into any given MUSC Web page to assist in making their pages Section 508 compliant and overall more accessible.

Top Priority

1. Any images that can be construed as content should be accompanied by relative alternative text using the alt attribute that briefly states what is being shown.
   1. Alternative text should not match a caption. If the alternate text would match, you should use an empty alt attribute (alt="").
   2. Images that do not convey content (such as a decorative or background image) are not required to have alternative text. An empty alt attribute would also be used in this case.
   3. For background images that contain important text or other visual cues, the HTML should be rewritten so that the image is in the foreground so that you can apply the proper alt text.
   4. For images that are dynamic, make sure that the alternate text changes accordingly.
   5. Examples:
      i. <img src="AshleyRiverTower.jpg" alt="nighttime view of Ashley River Tower">
      ii. <figure><img src="AshleyRiverTower.jpg" alt=""><figcaption>A nighttime view of Ashley River Tower</figcaption></figure>
      iii. <img src="box-corner.gif" alt="">
2. Within the content of a page, links should be underlined. In the navigation or sidebar areas of a page, it is acceptable to use a clear, consistent, non-underlined link format such as a specific and distinct font, style, and size.
3. Text and graphics should make sense without color. People who cannot differentiate between colors or who are using devices that do not display color will not fully comprehend information that relies on color for its meaning. Use high contrast text/background combinations with little or no pattern in the background so as not to interfere with readability of content. Avoid use of red/green combinations.
4. When adding a link to a page, encode the link in a word or phrase that shows where the link will redirect the viewer. For example, use “Medical University of South Carolina” instead of “www.musc.edu”. Try to avoid using phrases such as “click here” or “follow this link”.
5. The heading elements <h1> through <h6> are meant to give web documents structure. Main topics of a Web page should be represented by <h1> elements. Sub-topics should be represented by <h2> elements and the remaining HTML headings should be used to denote additional topics in descending order of importance. The list of headings enables screen-reader users to navigate around the Web page by selecting headings for topics in which they are interested. Designation of headings by simply changing font size or type and/or bold formatting is not appropriate.
6. Always avoid blinking or flickering text and images.
7. Keep navigational elements in the same location on every page.
8. Avoid use of Flash content.
9. Avoid using deprecated tags and attributes.
10. Use tables for tabular data only. Tables should not be used for layout purposes. Use CSS instead.
11. Table column and row headers should be used to identify data relationships.
12. Use the <caption> tag and summary attribute with tables to give readers an overview of the table contents. The <caption> tag, which will be viewable on screen, is used to give the title of the table, while the summary attribute gives non-visual browsers a broader description of the table's purpose, thus removing the need to dredge through the actual table cells to figure out the table’s intent.
    Example:
    <table summary="This table contains a list of items to be bought, along with quantities and prices.">
    <caption>Shopping List</caption>
    <tr><td>...</td></tr>
    </table>
13. Form input elements should all have associated labels.
14. Related form elements should be wrapped in fieldsets with legends.
15. Form elements that are standard types should have the type attribute set as well as placeholder text.
16. PDFs ….

View Secondary Priority