What is Web Accessibility?

Web accessibility refers to the practice of making websites usable by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

Why does it matter?

  • It’s the law. As a public university and a federal contractor, the University of West Georgia is required to adhere to Sections 504 and 508 of the Rehabilitation Act of 1973 and Title II of the Americans with Disabilities Act.
  • Twenty-percent of the population has a disability, such as: vision, hearing, physical, aging, mild to severe.
  • It is the right thing to do. It resonates with the University’s culture, which embraces diversity and inclusion, recognizing the valuable contributions of each of our faculty, staff, and students.
  • Accessibility overlaps with other best practices such as mobile web design, usability, and search engine optimization (SEO).

Who is responsible for accessible content?

  • All faculty and staff who publish content on the University’s website are responsible to comply with accessibility standards.
  • ITS is responsible for providing an accessible content management system and web templates that are able to produce accessible webpages.
  • UCM’s Web Services team is responsible for providing accessibility training and support to OU Campus CMS users.
  • The ICT Accessibility Advisory Committee is responsible for creating an accessibility policy, interpreting accessibility regulations and standards, and defining procedures necessary to remove barriers to electronic information for people with disabilities.

Because the scope of accessibility is much larger than a website, everyone who communicates electronically and creates a digital document, such as an email, a PDF or a Word document, a video, or a presentation is responsible to comply with accessibility standards.

Web Accessibility Guidelines

  • Page Titles
    Page Titles
    1. About: Page titles help users determine where they are in relation to other sections of the website. In most web browsers, the page title appears at the top of the window tile. The page title is often the same as the main heading of the page.
    2. Accessibility: The page title presents a vital way for users of assistive technology to orient themselves. For example, screen readers announce the page title when they load web pages. When used correctly, the title element is an important tool for accessibility.
    3. Guidelines: For each web page, provide an informative, unique page title that describes the page content and distinguishes it from other pages.
      1. Examples: Don’t use the title “Admissions” for a page with admissions information for the School of Nursing. “Admissions” is most likely a title for the home page of the Admissions Office. Use “School of Nursing Admissions Information” instead.
    4. OU Campus CMS: When you create a new Interior Page in OU Campus, the Page Title is the first field from the top.
      1. For pages that already exist, you can edit the page title in the “Properties” tab. Check the page out, click on the “Properties” tab and edit the title in the “Title” field. Then Save.
  • Headings
    Headings
    1. About: Content headings (H1, H2, ...H6) group related paragraphs and clearly describe the sections. Increasing the text size is not the same as using the correct heading code!
    2. Accessibility: Good and properly ranked headings provide an outline of the content.
    3. Guidelines: Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 5 (<h5>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. Do not skip heading ranks.
    4. OU Campus: Since all page headlines in OU Campus CMS are rank 1 (H1), use ranks 2 (H2) and below in a text content area of a general content page.
  • Links
    Links
    1. Guidelines: Make link text meaningful. Write link text so that it describes the content of the link target. Avoid using ambiguous link text, such as 'click here' or 'read more.' Indicate relevant information about the link target, such as document type and size, for example: 'Application for Summer Study Abroad in France (PDF, 20KB).' Opening links in a new window should be avoided. If it can’t be avoided, then provide text that says: “Application for Undergraduate Admissions (Opens in a new window).”
    2. OU Campus CMS: Make sure that the “Title” field does not repeat “Text to display” as this is a duplication and may cause some blind people to hear the same text twice. You may leave it blank or provide more descriptive information about the link. Note that some screen readers may skip the title completely.
  • Images
    Images
    1. Guidelines: For every image, write alternative meaningful text (ALT tag) that provides the same information as the image. For purely decorative images, there is no need to write alternative text. Images used as links should have alternative text describing the destination of the link, not the image itself. While there is no official length restriction on the length of alt text, many experts recommend 125 characters or fewer because of restrictions within the JAWS screen reader. Many versions of JAWS break up longer text tracts into blocks of 125 characters, which can be confusing to users. For an especially complex image, such as a chart, equation or diagram, a link to an extended text description should also be included. You may also include a note about longer description being available under specific headline on the same page.
      1. Example: Use alt=“President Kyle Marrero” instead of alt=“Image of Kyle Marrero.”
    2. OU Campus CMS: Enter alternative text in the “Description” field on the “Insert/Edit Image” screen.
  • Images of Text
    Images of Text
    1. About: Images of text tend to display text that is intended to be read.
    2. Guidelines: Avoid images of text whenever possible. With the current CSS capabilities in most web browsers, it is a standard to use actual text that is styled with CSS instead. Genuine text is much more flexible than images. It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized, especially in mobile-friendly design. In those rare situations where images of text must be used (i.e., approved logos), the text alternative must contain the same text presented in the image.
  • Contrast
    Contrast
    1. About: An important aspect of color on the Web for both low vision and color blind users is sufficient contrast between foreground (text or graphics) and the background.
    2. Guidelines: The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, except for the following:
      1. Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
      2. Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
      3. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
    3. OU Campus: The UWG style guide, which can be found on UCM website, defines colors which are safe to use on the web and produce sufficient contrast combinations. These color combinations are implemented in OU Campus website templates.
  • Documents
    Documents
    1. About: Anytime you are preparing an electronic document that will be posted online, whether it’s an internal document or an external document, you need to follow the accessibility guidelines for electronic documents. This includes PDFs, Word docs, Excel files, PowerPoints and other document formats.
    2. Guidelines: We have guides on electronic document accessibility.
    3. OU Campus: All uploaded document assets must be made accessible. Please refer to the OU Campus CMS information on our website regarding how to remove and/or update an asset.
  • Audio and Video
    Audio and Video
    1. About: All audio and video files posted on the web must be accessible.
    2. Guidelines: For audio-only content, such a podcast, provide a transcript. For audio and visual content, such as training videos, also provide captions (open, closed). Include in the transcripts and captions all spoken information and sounds that are important for understanding the content. For example, 'door creaks.' For video transcripts, also include a description of the important visual content. For example, 'Teacher leaves the room.' Provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material.
    3. OU Campus: We recommend using Kaltura, a system provided by UWG Online to host videos and to create captions. Kaltura has better captioning capabilities then YouTube. There is a Kaltura Guide to help you with this. Once your video is in Kultura, you can generate an embed code in Kultura and insert it in OU Campus using the “Insert Video” icon and the “Embed Code” tab. 
  • Written Content
    Written Content
    1. About: Your text content should be clear and concise.
    2. Guidelines:  
      1. Use simple language and formatting, as appropriate for the context.
      2. Write in short, clear sentences and paragraphs.
      3. Avoid using unnecessarily complex words and phrases. Consider providing a glossary for terms readers may not know or link to an online dictionary.
      4. Expand acronyms on their first use. For example, Web Content Accessibility Guidelines (WCAG).
      5. Use the “lang” attribute to identify phrases in different language.
  • Tables
    Tables
    1. About: Tables must be presented in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed.
    2. Guidelines: Accessible tables need to indicate header cells and data cells and define their relationship. Header cells must be marked up with <th> and data cells with <td> to make tables accessible. Lists (ordered and unordered) can be used as a replacements for simple tables.
    3. OU Campus: The correct markup is implemented in OU Campus. Do not copy tables from other electronic documents. Do not insert images of tables into OU Campus. Do not recreate a complex table on a web page, include a link to an accessible excel spreadsheet or to an accessible PDF. 

     

  • Frames
    Frames
    1. Guideline:  Frames and iFrames shall have descriptive titles that helps frame identification and navigation.
      1. Example: <iframe src="ad.htm" title="Advertisement">

OU Campus CMS Accessibility Check

Remember to always check for accessibility before you publish a page in OU Campus.

When you’re ready to publish, select the green “Publish” button and then click on the “Accessibility” icon. To see any error details, click on the red number of problems. Correct all items related to the content that you entered. Always correct all known problems related to the content that you edited before you publish.

Other Accessibility Tools: