Some people think that creating an accessible website limits the ability for the design to be impactful and creative, but usually the opposite is true — prioritizing website accessibility can actually inspire creative site design. Using elements with sufficient color contrast or thoughtfully integrating images, for example, can offer designers the creative spark that can help make a website both beautiful and accessible.
4 tips for creative site design with accessibility in mind
1. Examine use of color
Color choices can help your site and brand stand out, and can also be a powerful tool for creating accessible content. There are several points to consider regarding color use on your website.
- Color contrast refers to the difference in light between font (or anything in the foreground) and its background. Using sufficiently contrasting colors ensures your website’s font visibility can be distinguished, meaning your content can be read by everyone. You’ll want to adhere to the Web Content Accessibility Guidelines (WCAG) standards for users with low vision, low contrast vision, or color vision deficiency. WCAG 4.3is the key success criterion to know, since it dictates the minimum contrast that is accessible.
- Integrate into your brand — from the start. Color should never be an after-thought when building your visual identity. You’ll want to make sure your brand’s color palette includes combinations that are both attractive and accessible. Try an online tool like Color Safe, which helps designers choose color palettes based on WCAG Guidelines of text and background contrast ratios.
- Consider other information-highlighting techniques. Since not everyone can detect color, it’s important not to rely solely on it. There are many other ways to convey information, such as underlining or italicizing. Other visual elements, like asterisks or a message in text, can also be important ways to highlight information for users.
2. Use beautiful (and accessible) imagery
One common misconception is that pictures must be avoided for a website to be accessible. Omitting photos for the sake of it does little to improve accessibility, although it can lower a website's aesthetic appeal. Use beautiful imagery to help tell your brand's story — just make sure to be thoughtful in its use and include adequate text alternatives.
Include alt text
Alt text refers to a text-based description of an image or other non-text content. Because assistive technologies like screen readers and refreshable Braille displays can't inherently tell what s picture depicts, they need text alternatives to communicate that information.
Use pictures to break up or accompany text
This can be very helpful for people with cognitive disabilities or dyslexia, but really this practice can be great for everyone. Breaking up lengthy paragraphs helps content become more digestible and understandable. It also gives people a different way to process information, as people may more-easily understand or prefer visual material.
Avoid images of text when possible
This refers to readable text presented inside an image, including text that has been presented in a fixed image form in order to achieve a certain visual style. Images of text present some unique accessibility considerations — the images require alt text like any other image that isn't purely decorative, but also are unlikely to maintain their quality when magnified and don't offer users the ability to adjust the font, color, and size to meet their needs. Images of text can also hinder SEO. Remember that if you do need to use an image of text to still consider color contrast ratios.
3. Use videos to keep people interested
Incorporating video into your site design can be a creative and fun way to present content. It can also be an extremely effective way, as videos generate 12 times more shares than images and text combined.
In order to ensure the accessibility of your videos, add captions and transcripts.
Captions
Captions, usually "closed," are the visual display of the audio in the video. On-screen captions, which must be in-sync with the audio as it changes, provide people who are deaf or have hearing loss the same information that someone receives by listening to the sound. They also help you reach a wider audience beyond that, such as people watching in silent environments.
YouTube and Facebook, the most popular video platforms on the web, let you add auto-generated or manually-created captions to your videos.
- YouTube Closed Captioning for Accessibility: Why and How
- A Guide to Facebook Closed Captioning for Accessibility
Transcripts
Transcripts are essentially the text-based versions of your videos. Transcripts should usually include the spoken word and also important on-screen information. They allow people who can't or prefer not to watch the video to receive the information in text form.
Check out the complete Checklist for Creating Accessible Videos.
4. Keep your structure simple
Many of the most popular websites today are clean and easy to navigate. Complicated or cluttered page designs confuse users, sometimes inadvertently navigating them away from the information they want. Google's home page, for instance, is simply a search bar — and it's the most-used website in the world.
Keeping things clear and clean helps ensure that the highest number of users will have the easiest time using your site.
- Create clear and easy-to-find menus.
- Don't over-link — and make links descriptive.
- Follow best practices for headings, meaning headings don't just look large or bold but are coded as headings and nested properly.
Interested in learning more about website accessibility?
Contact us for a free consultation, or get started with a free and confidential website accessibility scan.
If you found this article helpful, be sure to subscribe to our blog and newsletter — we're always creating new content to bring accessibility awareness to all.
