When I first started to design websites to meet accessibility requirements, the first objective was improving color contrast ratios. This seemed like something I could easily manage to do. I also thought it could be very restrictive, which felt uncomfortable. I sort of feared we might be limiting creative options. But I learned to expand my work, embraced tints and shades, new tools, and proactively started measuring contrast ratios as part of my workflow. I soon realized this was opening up a whole new level of high-quality work that made using the web easier and more compelling for everyone. Furthermore, designs are now more beautiful and easier to use on mobile in high glare scenarios. For our clients, this means their sites convert better!
“I am trying to make you a better designer, I’m not putting limitations on you.”
-Rian Rietveld
Here are 6 easy ways to improve accessibility in website design. I am not talking about code and you need to work with an authority to meet legal requirements internationally. This is a good place to start and I have some tools and resources to share as well.
Collectively we can design for accessibility by including the following scenarios with which people are working within:
1. Color contrast for low vision and engagement
Provide enough contrast between text color and the background color so that content can be easily read and scanned by people, including those with moderately low vision (who do not use contrast-enhancing assistive technology).
W3.org guidelines recommend that contrast be calculated in such a way that color is not a key factor so that people with color vision issues will also have adequate contrast between the text and the background. Additionally, this benefits people using mobile devices in high glare scenarios and makes content more visually scannable too.
Tools:
- Axe DevTools website the Chrome extension for Axe DevTools -great for auditing sites!
- WebAIM color contrast checker -includes insights on font sizes with WCAG AA & AAA pass/fail results at a glance
- Color Contrast Checker for Windows or Mac by the Paciello Group
- Figma has a large range of plugins that check the contrast of your designs
2. Typography design to emphasize immersively readable experiences on the web
Select font sizes for body text that are large enough so that people can comfortably read on your website. Depending on the specific font, use at least 16px, but this can vary the depending scale of the design of a particular font.
Use a line with character length that is comfortable for reading. Content with 45-75 characters per line is ideal and approximately 66 characters per line is the most comfortable. Choose a typeface that offers clarity and legibility.
Consider using sans-serif faces for user interfaces and serif faces for long-form reading.
For more information, the U.S. Web Design Standards (USWDS) Typography page includes a set of open-source typeface recommendations that prioritize legibility.
The larger the type size and line width, the larger the line height should be. For running/body text, that’s usually around 1.4-1.65, headings at around 1-1.3, and captions or short lines at around 1.3.
Tools and links:
- Type Scale – A Visual Calculator
- Free web typography lessons -Better Web Type
- A Guide to Combining Fonts
“Perfect typography is more science than art.”
– Jan Tschichold
3. Help people avoid anxiety by explaining what will happen next
Give people support where they need it and never make support hard to access. When attempting to log in or to complete a form or survey always provide people with the ability to check their answers before they submit them and give them time to complete tasks or actions. If we are clear about guiding people through tasks, we can avoid confusing people about the next steps coming up as they try to accomplish their goal through your website, form, or product.
Write descriptive links and headings. These measures help people consume your content easily and they are critical to success for people using screen readers. Designing for mouse and touch screens is not enough. Build sites for keyboard use, a site should be navigable using keyboard-only mode as well. Keyboards are used by people using screen readers, by advanced users leveraging shortcuts, and when motor skills are not available.
4. Make large areas for any tappable or clickable sections & design with touchscreens in mind
Physical complications like holding a baby while working on a device, trying to prepare a recipe while following a digital recipe, or motor disabilities generally mean people need large, tappable, or clickable areas to interact with. Cluttered, complex, or overly precise layouts make a site more difficult to interact with, especially if your hands are full or unavailable.
Website page speed performance impacts user experience too. If a site has a lot of ads or large imagery causing the screen to jump around and become slow to load it’s not usable. Using Core Web Vitals and other tools to measure page speed and usability/accessibility for a website is critical to improving the on page experience for people. Most often, people use various mobile devices and less than optimal internet connections from tappable devices. Designing with this mobile experience in mind from the beginning of the website design process is critical to our workflows.
Tools and links for touchscreens, performance, and accessibility insights.
5. Produce content in multiple formats (video/audio/written) for people including those with dyslexia
Dyslexia is also a common issue we can design for. People using the web generally need to be able to easily scan content. People scan the web! By making a website easy to scan we make our sites easier for everyone to use. Additionally, making content jargon-free is more inclusive and it helps with both anxiety and autistic use cases. Aligning text to the left, keeping content short, with a consistent layout makes consuming content more effortless for everyone. Producing content in different formats, video, audio, Web Stories (mixed media) as well as the traditional text format are great ways of keeping audiences engaged and improving the discoverability of your content while helping those of us with dyslexia simultaneously. Use support text with images and diagrams to help people gain an understanding of what is being presented visually.
6. Do not use overlays!
Learn more about the ineffectiveness and misinformation regarding overlays (also knowns as plugins) from our recent article: Accessibility isn’t magic that comes from tools.
Want to learn more about accessibility? Listen to our podcast with Rian Rietveld: Spotlight on Accessibility.