Accessibility


Introduction

Web Accessibility

As a public institution in the State of Kansas, all KU websites are required to comply with the State of Kansas Web Accessibility Requirements. Please review these guidelines for a complete set of requirements, which include:

KU website administrators should ensure that every page on their sites meet the guidelines. If you have questions or concerns, please contact KU Web Services at webservices@ku.edu to request a review of your site.

Information and Validators

All KU Websites must be accessible. Please follow the following guidelines for making your KU CMS website accessible.

Alt Text for Images

Alt tags provide text to describe images on your web page. When a user of screen reader technology encounters an image, the alt text is what they will hear so it is important to provide an alt tag for all images. Make sure to convey any meaning in the alt tag that the picture would provide for a sighted user. Also avoid redundant wording such as “Picture of” or "Image of” in your alt tags as the screen reader technology will handle that for you.

If the image contains text, include that in the alt attribute so the screen reader technology can access and convey it.

For images that are purely decorative and add no additional information to your web page, use a null alt tag like this: alt=” “. This will tell the screen reader to skip the image entirely.

If your image is a link, do not describe the image but instead use the alt text to describe what will happen when the user clicks the link.

See Alternative Text for information, including guidelines and best practices.

Correct Use of Header Classes

Headings should be used properly to assist screen readers as well as sighted users.

There should only be one H1 per page and the rest of the headers ordered logically.

Header classes (<h1><h2> etc) should not be used for aesthetics. Header tags are essential for organization and tell users, screen readers and search engines the order of importance of the information on the page. Header classes should be used instead of style elements like font size and bolding. If you want to change the appearance of the headers, use CSS to modify while retaining the header elements themselves.

See Headers and Sub-Headers for information, including guidelines and best practices.

Links

Links should accessible for all users who are not using a mouse so make sure you can both navigate to and activate a link on your page using only the tab and enter keys.

When creating your links, it is best to use words that convey briefly but in a meaningful way what the person will get if they click the link. “Click here” or “more” are not terribly meaningful. Also do not use the url as the link text. Screen reader technology will read the entire link if you do this and that can be very annoying depending on the length of your link. Also know that screen reader technology will announce to the user that they are on a link so you do not need to say “link to…” in your link text.

If you are using an image as a link, the alternative text for that image should not describe the image but should instead describe what will happen if the person clicks it.

See Links for more information, including guidelines and best practices.

Tables

Tables that are used to present data in a column and row format must be appropriately marked up in the html. Include a caption and column headers when you create your table as shown below.

Without the appropriate markup, a screen reader would read the resulting table from left to right and line by line which would not make much sense, particularly in a large data table. With the markup, users of screen readers will hear the information presented in a logical way.

If you are using a table strictly for layout purposes and not to present tabular data, do not use the caption, table header, and scope markup described above but do know that the screen reader software will read it as people read a book, left to right and top down. Be aware that your layout might not make sense and consider using CSS rather than table html.

See Tables for more information, including guidelines and best practices.

Focus

Users of screen readers cannot use a mouse to access links and other interactive elements on a web page. Likewise, users with mobility issues may use keyboard commands alone to access those interactive elements. You should ensure that, without using your mouse, you can successfully navigate your webpage and perform all functions including selecting all links. To do this, use only the tab and shift-tab keys to move around the screen and the enter or space bar to activate a link or button. If you are using a Mac, use Safari and enable this preference first: Safari > Preferences > Advanced > Check "Press Tab to highlight each item on a webpage".

If you cannot tell what link you are on when you test like this, the focus indicator has probably been deactivated, most likely with CSS. You may need to remove the code that deactivates it or use CSS to provide focus in a more creative way using a:focus.

Lists

HTML list elements - numbers and bullets - should be used when creating lists on your webpage to assist people using screen reader technology.

When creating lists manually, use the bulleted or numbered list feature in the WYSIWYG editor to ensure proper list formatting for screen readers.

Color Considerations

Communicate Meaning with More Than Just Color
Take into consideration people with colorblindness when choosing images and colors on your website. Make sure that color is not the only means of conveying something (such as “choose the green button to go to the next page”).

Color Contrast
Also make sure you have enough contrast on your page in accordance with WCAG 2.0 guideline 1.4.  It is best to check your color choice using a color checker such as the WebAIM Color Contrast Checker.

Accessible Images and Video

Accessible Images

When adding images and graphics to your site, you must account for users who will be interacting with those assets via screen readers.

  • Alternative text
    • Alternative text (alt text) is required for all images on KU CMS sites.
    • Images that are purely decorative and add no additional information should use a null alt tag (alt=“”), which tells a screen reader to skip the image entirely.
  • Captions - Use captions to add additional context for screen reader users to understand the value of the image in relation to the content on the page.
  • Image choices - Select high-quality images that allow all users the best opportunity to perceive the content.

Accessible Videos

Videos hosted on your KU CMS site must meet accessibility standards.

See KU Content Accessibility's Accessible Video for more information, including how to make your video content accessible.

Accessible Documents and Webforms

Accessible Documents

All documents hosted on KU CMS sites must be accessible. This includes PDFs, scanned documents, and Microsoft Word, Excel and PowerPoint files. KU’s Content Accessibility site provides information and resources to make your online content accessible.

To be considered accessible for KU CMS sites, PDFs must have no issues via Adobe Acrobat’s Accessibility Checker tools. This includes issues that are automatically identified by Adobe (e.g., alternative text, tagging, tables, etc.) and the two issues that must be checked manually: 1) Logical reading order; and 2) Color contrast.

See Documents on KU Content Accessibility for instructions on how to make your documents accessible prior to posting them on your site.

Accessible Webforms

All webforms hosted on KU CMS sites must be accessible. See Forms on KU Content Accessibility for instructions on how to make your webforms accessible prior to posting them on your site.

Only Qualtrics forms can be embedded on your KU CMS Sunflower site. Qualtrics forms have basic accessibility built in. In addition to the built-in accessibility features of Qualtrics forms, we encourage you to use the Qualtrics Accessibility Checker. See Check Survey Accessibility to learn about Qualtrics’ Check Survey Accessibility feature.