Accessibility Best Practices
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:
- Compliance with the W3C Web Accessibility Initiative, Web Content Accessibility Guidelines 2.0 (priority 1 and 2 checkpoints)
- Federal Section 508 Guidelines (Subpart B - 1194.22)
KU website administrators should ensure that every page on their sites meet the guidelines. If you have questions or concerns, please contact email@example.com to request a review of your site.
Information and Validators
- WAVE accessibility check
- Neilson Norman articles on accessibility
- Accessibility Management Platform (for advanced/programmer-level users)
All KU Websites must be accessible. Please follow these 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.
Refer to the Photos and Graphics Instructions page for information about adding Alt tags.
PROPER USE OF HEADINGS
Headings should be used properly to assist screen readers as well as sighted users.
The header tags (<h1><h2> etc) 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.
Headers must also be used logically with only one H1 per page and the rest of the headers ordered logically.
Refer to the Fonts Instruction page for information about selecting Headings.
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.
Refer to the Links Instruction page for more information about creating links.
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.
Refer to the Tables Instruction page for more information about creating tables.
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.
Make sure that the entire form can be navigated and completed using only the keyboard to make sure that people who do not use a mouse (which includes people who use screen readers and people with limited mobility) can use the form.
The html list elements should be used when creating lists on your webpage to assist people using screen reader technology. Use these WYSIWYG tools to create your lists.
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”).
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 color contrast checker provided by WebAIM.