Website accessibility is a large complex issue with design, technology, legal and content concerns to contend with. We have had many events and webinars on the subject to help educate nonprofits about website accessibility. In this blogpost you will find a small part of one of these webinars.
Breaking Down Accessibility Fundamentals
This section covers the fundamental areas of website accessibility and what to look for. This is a great place to start if you want to learn more about how to implement accessibility features in your website.
Website Platform and Structure
The platform your website is built on and it's basic structure can have a huge impact on website accessibility. Hopefully you have a website built on a platform that inherently has few out-of-the-box accessibility issues and is flexible enough to build a website that is both engaging and accessible.
The basic structure of your website should also contain some key accessibility features like defining the language, viewport, navigation and content areas. Pages should make use of navigation, section and heading tags to help screen readers easily navigate the site.
Key Website Platform and Structure Features
Website CMS platform with good support for accessibility features
No major accessibility issues baked into your CMS
Viewport / language definition
Skip to content feature
Clear definition of navigation VS content
Good use of heading tags
Website design is often the area nonprofits struggle with the most when it comes to accessibility. Most organization's brand colors and design aesthetic are not very accessible. You may need to add some additional colors to your website pallet to create a more accessible design, or limit the use of proprietary fonts, imagery, icons or other design elements.
The main areas you want to pay close attention to are site contrast, font usage, button and link design. Logos and any design element that aren't key to the understanding or usage of the website are exempt from accessibility standards but it's always a good idea to consider accessibility even for exempt items.
Key Website Design Accessibility Features
Meet minimum contrast requirements in design
Meet minimum font size and contrast requirements
Have high contrast buttons and links
Use descriptive button text and link anchor text
Having good accessibility for your website content is absolutely critical, as most visitors are going to your site for the purpose of consuming content. All your images should have good descriptive ALT tag content, videos and other multimedia should have closed captioning and transcripts, and external files like PDFs or other documents should be checked for accessibility issues.
Key Website Content Accessibility Features
Descriptive image ALT tags
Closed captioning and transcripts
PDFs and other file downloads should be accessible
How your website functions and it's interactive features is another important area of website accessibility. Forms, image sliders, popups, chat and other interactive features should all be checked for accessibility. All form fields should have the proper label coding and buttons or other forms controls need to have descriptive text. If your forms are very complex and have validation and other features that rely heavily on scripting code you may need to implement ARIA tags. Popups can be especially troublesome for accessibility if they don't receive "focus" on activation.
Key Website Functionality Accessibility Features
Label text / code for all form fields
Good button and form control text
ARIA coding for complex interactive forms
Proper focus coding for popups or other full screen elements