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 Omni 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.
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.
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.
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.
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."
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.
Our goal is to meet the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA standards. All templates have been designed to be compliant and are always being updated for improvements in accessibility.
In addition to the using the WYSIWYG best practices the Omni CMS Final Check feature scans the code on your page for any accessibility issues. Final checks also verify links and check spelling.