Accessibility Best Practices
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web & contribute to the Web. This encompasses all disabilities that affect access to the Web, including auditory, cognitive, neurological, physical, speech, and visual.
Accessibility also benefits people without disabilities, for example mobile phones and other devices with small screens, different input methods, or even slow internet connectivity.
Why Should My Site be ADA Compliant?
Several reasons. First, it makes your site more accessible to everyone. Instead of having a site that some people can access, you are creating a site that everyone can access.
Second, an ADA compliant site is more search engine friendly. Search engine robots are not human and essentially access and read your site the same way a screen reader for a visually impaired person works. Making your site more search engine friendly means more visitors to your site.
Third, it's the law! If the first two reasons did not convince you, this third one should.
Accessibility in the WYSIWYG
For most items you will not need to worry about anything. The CMS templates including the main navigation, footer, and surrounding content are already accessible and always receiving updates. Any web elements provided by WKU Web Development will be optimized for accessibility as well. That means using components, snippets, and other tools are also accessible.
When using the WYSIWYG to insert headings, images, icons, and links you may need to add some extra context.
Headings
Page structure is important when it comes to accessibility. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. See our Heading Best Practices to learn more about ordering and styling.
Images
When adding an image always remember to add a meaningful Alternative description. This is helpful for multiple reasons, it aids a non-sighted user in understanding the image and what it is displaying, as well as provides text if an image fails to load.
Be as descriptive as possible. Rather than a short description like "students walking", describe the entire scene. e.g. "Two WKU students walking through a shaded part of main campus on a sunny day."
Try to avoid using images with text in them. If you must use an image with text, be sure that all text contained in the image is typed out in the description.
Icons
When icons are purely decorative they need no extra context. When using an icon to represent something (e.g. using a car icon to represent "travel time by car" and a train for "travel time by train"), that context will need to be added using the Icon Meaning field of the Icons - Font Awesome Gadget.
Links
Use the Title attribute for your links when you can provide additional information about that link and/or the page it goes to. This text also displays in a tooltip when hovering over a link. A good title for a link with the text "Knowledge Base" would be "Step-by-Step Instructions". The title and link text should not match.
Do not use non-informative link text like Click Here, Learn More, Read More. In fact, the phrase "click here" is unnecessary, even if it precedes a more meaningful phrase. For example, a link that says "click here to access today's weather" can be shortened to "today's weather."
Show Blocks
When working in the WYSIWYG editor each new line uses what is called a "block" item. Blocks are selected using the first dropdown in the WYSIWYG toolbar. The most common blocks are paragraph and headings 1-6. When fixing accessibility issues identified in the Final Check it can be difficult to know what block is being used.
To highlight blocks, use the Show Blocks button in the WYSIWYG toolbar (the dotted box around a paragraph icon). This will add a thin border around every block and small tag identifying which block it is. Use this to track down accessibility issues that might need fixed such as heading order.
Compliance Standard
Our goal is to meet the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards. All templates have been designed to be compliant and are always being updated for improvements in accessibility.
Accessibility Scan
In addition to the using the WYSIWYG best practices the Final Check feature scans the code on your page for any accessibility issues. Final checks also verify links and check spelling.
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.