Accessibility

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.

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 Contrast

All elements on your page must have sufficient color contrast to pass WCAG 2.0 guidelines at a level AA. 



Check color choices by using the WebAIM Color Contrast Checker or another accessibility color checker.

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”).

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.
  • 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 Accessibility KU'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. Accessibile KU 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.

IMPORTANT:
See Documents for extensive information about PDFs/documents on KU CMS sites including instructions for managing and remediating inaccessible PDFs/documents, recommended strategies for common use cases and more.

Accessible Webforms

All webforms hosted on KU CMS sites must be accessible.

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.

Linking to Inaccessible Content on KU Sites

All KU CMS sites will be required to address all inaccessible content (PDFs/documents, videos, etc.) during the migration to KU Sunflower. If you discover you are providing a link to inaccessible content on a KU website, including Drupal 7 sites, please reach out to the site owner and kindly request they remediate the document or webpage. Doing so will help the site owner prioritize inaccessible documents and pages that others in the KU community are pointing to.

KU CMS Sunflower sites will not be allowed to launch if they provide links to inaccessible content on other KU CMS Sunflower sites. Links to inaccessible content on Drupal 7 sites will not prevent your KU CMS Sunflower site from launching.

Linking to Inaccessible Content on External Sites

KU CMS sites are responsible for the journeys they provide their users. That includes linking to inaccessible PDFs/documents and webpage content on external websites (i.e., outside the ku.edu domain). As a site admin, you should do your due diligence to review any PDFs/documents or webpages you are linking out to for accessibility issues that could impact your users.

If you discover you are linking to inaccessible content on a KU website, see “Linking to Inaccessible Content on KU Sites” above.

If you discover you are linking to inaccessible content on an external site (i.e., not in the ku.edu domain), here are our recommendations:

  1. Unless the linked content is mission-critical, remove all links to inaccessible PDFs/websites. See CMS Guide: Documents for instructions on how to check the accessibility of PDFs.
  2. If the linked content is mission-critical, we strongly recommend working to find accessible alternative materials that serve the same purposes and link to those instead.
  3. If you have no other options and must continue to host the links to inaccessible PDFs/websites, we strongly encourage you to reach out to the external content owner and ask that they update their PDFs/websites for accessibility. 

Third-Party Widgets

Third-party widgets of any kind on KU CMS Sunflower sites must first be pass KU IT accessibility testing. This goes for third-party widgets that were previously on Drupal 7 sites as well as any new widgets.



Most PDF publishing and flipbook services (e.g., ISSUU) are not accessible for screen readers. To host a document on the KU CMS it must be accessible. The use of inaccessible publishing/flipbook services is not allowed on the KU CMS. You must be able to demonstrate your third-party service meets accessibility requirements before posting a link on your site.



IMPORTANT: Social Media Third-Party widgets are not allowed in KU CMS Sunflower. See Social Media for details.

Creating Accessible Content: Remediating PDFs for Web & Communications

Session recording: 

You can find the recording for this session and all other past sessions at howto.ku.edu/create-accessible-content.

Additional resources and links:

CMS Guide Resources:

Color Contrast Tools: 

Videos: 

Contact:

LinkedIn Learning Courses: 

Cheatsheets by Application: 

Conferences: 

Peer Groups - Troubleshooting/Crowdsourcing: 

 

Specified Non-Descriptive Link Titles Allowed on Select Sections

A feature has been added that makes it possible to use a specified list of approved non-descriptive link titles on select KU Sunflower sections. See Specified Non-Descriptive Link Titles Allowed on Select Sections for details.