August 5, 2024
14 Steps to an Accessible Website
When former President George Bush signed the Americans with Disabilities Act (ADA) into effect on July 26, 1990, he proposed the first of many regulations to protect the rights of people with disabilities. One such regulation pertains to online accessibility. Websites must comply with the Web Content Accessibility Guidelines (WCAG) Level 2.1 AA or their owners could possibly face legal action. Since 2018, web accessibility lawsuits have risen by 300%.
- Create an accessiBe account and register your domain
This step is necessary for the accessWidget plugin to work.
- Upload accessiBe’s accessWidget to your website
The accessWidget is available on all websites accepting third-party JavaScript Code. (Such as WordPress.org)
- Use HTML Headline Tags in your Website
Headings are screen-reader friendly and allow visitors to scan content more easily.
- Use contrasting colors for text and background
Your contrast ratio should be at least 4.5:1
Use the webAIM (Web Accessibility in Mind) Contrast Checker. Simply enter your text color and your background color. - Use size 14 font sans serif
Sans serif means font without the “feet” such as this example from VistaPrint
- Avoid using abbreviations
If you use abbreviations, provide the complete text as well. (As in the example above in step four.)
- Use Alternative (Alt) Text for images
Alternative text should describe the image.
Do not use text ON images because screen readers can’t read it. - Provide Accessible Rich Internet Applications (ARIA) attributes in addition to HTML.
ARIA attributes provide additional explanations about the types of links visitors will be accessing. accessiBe explains ARIA attributes, and they are provided with an accessIBe account.
- Use Descriptive Links
Rather than “click here”, provide a link that explains where the visitor will be taken. (As in the example above in step eight.)
- Links That Open in a New Window
The text, ‘opens in a new window’ should precede the link – allowing the screen reader to warn the visitor.
- Do Not Use Flashing Images or Text
Flashing images or text can prompt a seizure for someone with photosensitive epilepsy.
- Charts Must Be Accessible by Using Just the Tab Key
Test this out for yourself. Find a chart on a website and place your cursor before the first letter in the first box. Now press the Tab key. If the chart is accessible, your cursor will move to the next box in the chart.
- How to Make Videos Accessible
– Provide Closed Captioning
– Provide Audio
– Provide an Alternative Transcript as provided in (this World Wide Web Consortium (W3C)
article, and this W3C article. OR provide an SRT (SubRip Subtitle) file by following these directions from accessiBe. - Test your site’s accessibility with accessScan
Wait 48 hours after creating your website using the accessWidget plugin. Test your site’s accessibility with accessScan.