The internet is calling January a trial period, and while we think that’s hilarious, we realize the benefit in having a trial period. Trial periods are nice because they give you room to make big goals and then see what your willpower is like, identify your shortcomings, and then see how practical the new process falls into the old routine. Your 30-days free buy-in began on January 1st, but even if accessibility is not on the list of company resolutions, we’re here to tell you it’s not too late. In fact, we want to see you succeed at this. So much so, we created a checklist of goals that if completed, can help see you and your team through one of your most accessible years yet.
- Have an accessibility statement and display it proudly on your website. It’s just as important as your “About Us”, “Resources”, and “Contact Us”, as it tells visitors your commitment to serve all people, and how they can get into contact with or give accessibility feedback to an accessibility specialist at your business.
- Share news that’s accessible. Here in our marketing department, we’ve decided our standard is 20 accessibility errors or less. If a social story has more than 20 errors in a website accessibility tool extension, and we can’t find that same story accessible elsewhere on the world wide web, then we just won’t share that story.
- Don’t get sued and don’t wait to get sued. I know you’re thinking “well, duh, that’s the goal right?” But we’ve heard of people waiting to get compliant after they’re sued. It’s not about your budget. You need to be compliant so that who you say you are and what you are lines up. Don’t create your own crisis.
- Choose a content management system (WordPress, Wix, etc.) that supports accessibility. Opt for a theme/template, plugins, or widgets that are accessible. Content management systems are important because they take on the bulk of content, blog posting, responsive design, and the way the website appears to visitors. For editing toolbars and video players, make sure that the system you commit to supports creating accessible content.
• Make WordPress Accessible
• Wix — Make Your Site Accessible
• Drupal — Accessibility
- Videos should include closed captioning and video transcripts for the hearing-impaired. Transcripts are different from captions. Captions appear onscreen in time with the audio and video. Moreover, one can’t reference it outside of the video. A transcript is the spoken content typed out as a separate document. Both allow access to content from alternate format and adds to its accessibility.
- Screen reader users can use the heading structure to navigate content. By using headings correctly, the content of your website will be organized and easily interpreted by screen readers. Good heading structure is great for accessibility. Be sure to stick to the correct order of headings, and not pick a header just because it looks good. You should only use one H1 on each webpage — usually as the page title. The page title is generally the big, bold text typically at the beginning of the content that describes what users can expect to find in your content. You can do this by starting with subheadings H2, then H3, followed by H4.
- Include alternative text for images and logos. Alt text shows screen reader users information in place of the images they cannot see. Every image that conveys content or has a function on your web site should be given alternative text. Describe the visual content by inserting the text as an attribute of the image. Users see it by hovering over the image, and screen readers say it aloud to tell the user. This is especially helpful when all of your media isn’t loading for some reason.
- When including links in your content, use text that properly describes where the link will go. Using “click here” is not descriptive, and is ineffective for a screen reader. In order to provide better information and orientate the user, use “Contact us here” instead of “Click here”.
- Be sure to also distinguish blocks of content from one another using whitespace, lines, or borders. People with cognitive disabilities, such as dyslexia, benefit from white space between headings, paragraphs, tables, etc. Long paragraphs can be more difficult and more overwhelming to read than shorter paragraphs.
- Color contrast matters. There are several tools you can use to evaluate color contrast to make your information usable to people with low vision or color blindness. Avoid using colors where the shades are too similar. Choose colors carefully and make sure you create contrast between the text content (foreground) and its background. You’re creating content for the millions of people who are not able to distinguish between colors and shades.
- Websites commonly have forms like logins, mailing list subscriptions, and site search. The point of putting your forms online is that it speeds up the intake process, and gets the information to the public. Forms are intended to be useful–if designed carefully. Make sure each field is clearly labeled near their associated fields. It shouldn’t be a guessing game to decide what type of content should go into the form field. Have you ever tried to fill out a form on your phone that wasn’t responsive so it did not resize correctly and you had to guess where your first name, last name, and personal information went? While a sighted user can match a label to the corresponding field, this may not be obvious for someone using a screen reader. And, while we’re at it– CAPTCHA is inaccessible. So, if you need to verify that the user is authentic and not a bot, try any one of these alternatives for your form.
- Use tables for data, not for layout/lists purposes. We understand the temptation to throw content in a table so that its all lined up correctly. Unfortunately, content put in a table doesn’t read in the order that matches its visual display.
- Long pages with lots of content, like your pillar page, should be broken up with anchor links (jump text), allowing keyboard-only users to skip to relevant portions of the page without having to negotiate through other content.
- If your site or social post contains a slideshow, make sure that each photo has alt text. For those using any unique tools like Hubspot for posting your social and images, make sure to include the alt text in the social post or the image description.
- The best way to fully understand and assess your website is to see an actual person access your site with assistive technologies (i.e., screen reader, magnification software, speech input device). If you don’t know of a person with a disability on your team, turn off your monitor and unplug your mouse.
- For a website to be accessible, it must work without a mouse because assistive technologies rely on keyboard-only navigation. So, use your own site without a mouse and try keyboard navigation with the Tab key. If you find that you can’t access parts of your website or that navigating is difficult, write those issues down and address them.
- With a number of ways that users access the web, creating highly-accessible designs with multiple viewing possibilities is critical to the success of a website. Offer multiple access points by removing the obstacles.
- WOAOYA. Acronyms are great if you speak the same language and you know what it means. Otherwise, it can feel a lot like listening to young people speak and having to search urbandictionary.com for the meanings. WOAOYA — Write out all of your acronyms. It keeps everyone in the loop, reduces communication barriers, and is a must if you’re in industries like ours that are inundated with legal language, jargon, and the like.
- Ensure that video players or pop-ups do not auto-play, and can be stopped with a keyboard. Automatically-playing music or videos that starts when a page loads is not only startling, but an issue for accessibility. Avoid media or subscription requests that start without the user’s prompt and can’t be closed with the ‘Esc’ key. Otherwise, the user will have to close out on the entire webpage and miss out on your information altogether.
This post was written by Clerise Phillip Samuel
Originally published at brailleworks.com on January 31, 2019.