Designing for accessibility: A checklist for designers

While accessibility should be on the table during the earliest planning stages of a web project, the “Design Phase” is often considered the first phase of a web project. Maybe it’s because it’s the first tangible phase – that’s when a web project starts becoming “real”. This makes the design phase one of the most important parts of a project because it can make or break the accessibility of a website.

When you design with accessibility in mind, you set the rest of the phases up for success. It allows you to include accessibility as part of the aesthetic and not something that has to retrofitted later (which is much more expensive, complex and time-consuming).

By keeping these things in mind when you’re designing a website and creating mockups, you’ll be setting yourself, your client, and their users up for success. Remember, accessibility is not just about making your website accessible for those with disabilities, but creating a better user experience for all users under any circumstance.

Liability prevention

The following items should be thought of as mandatory. These are issues that could potentially lead to a lawsuit if not considered.

• Animations
  • Motion should be avoided or as minimal as possible. These can create a poor user experience as well as drastically slow down the performance of your website.
  • If you feel you absolutely must include animation in your design, ensure you’ve included a “disable animations” toggle somewhere at the top of the page that allows users to opt out of animations on your website.
  • Absolutely no animations that flash more than three times per second (this can trigger seizures for those with photo-sensitive epilepsy)
• Clickable targets
  • Clickable targets (close buttons, links, really anything clickable) should be a minimum of 24px by 24px (for an even better user experience, 44px by 44px). This allows users a margin of error to hit a target without accidentally clicking on the wrong thing (say from a list of links). This doesn’t just apply to users with a motor impairment, say Parkinson’s, but users on a bumpy bus ride trying to navigate from a mobile device or someone holding a squirmy toddler in their arms.
  • My rule of thumb: If you can’t navigate a website using the tip of your elbow from a mobile device, you need to increase your target size.
• Color contrast
  • This is one of the most common violations websites have; it’s also one of the most easily preventable.
  • All color combinations should be run through a contrast checker, like WebAIM’s Contrast Checker and WebAIM’s Link Contrast Checker
  • Some clients will have notoriously difficult palettes to work with (such as pastels or neons). These colors could still be used in the design, but should be reserved for non-critical accents and decorations that wouldn’t impact a user’s ability to perceive content.
• Color dependency
  • Hover/focus effects for links and buttons and important notices should not rely on color alone. There should always be an element indications or prefix. “Element” is an umbrella term for something that changes other than color and can be a great creative opportunity.
  • Links and buttons:
    • For links, an underline appearing and disappearing depending on interaction is the most traditional. But that doesn’t mean it’s the only option! Backgrounds and highlights, subtly animated underlines, and box shadow insets are all examples of alternative methods that create an element change for links.
    • Buttons have more opportunities for creativity. Icons, outlines, and drop shadows with sufficient contrast are all examples of non-color dependent interaction methods.
  • Notices:
    • Notices should include a prefix (such as “Notice:” or “Important:“) and/or have an element indication such as an icon. Example:
      • Bad: Shipping is delayed due to storms.
      • Good: NOTICE: Shipping is delayed due to storms.
      • Good: ⚠ NOTICE: Shipping is delayed due to storms
• Consistent Navigation
  • Sometimes, changes in navigation are expected (such as whether or not a user is logged in, or adding a unique skip-link for specific templates). However, key navigation items should be the same and in the same place on every page. Main menu, sub-menus, and search fields should not change locations. This creates a predictable experience for users and prevents them from hunting down where they last saw it.
• Design for focus indication
  • It’s not uncommon to include hover effects in mockups. Do not forget about focus indication for keyboard users!
  • If you design for keyboard users, also, this makes focus indication part of the design and not something to be worked around later. Examples of elements that are impacted by focus:
    • Links and buttons (including image links)
    • Form fields
    • Skip links
• Heading hierarchy
  • Do not use heading levels (H1, H2, H3, H4, H5, H6) as a design tool. Headings have a navigation purpose and must be properly nested both for accessibility and SEO (for more information, read our blog post “Headings Are Vital for Accessibility and SEO“).
  • While it will be on the developer or implementor to retain this hierarchy, a lot of designers provide designated designs for headings levels in their branding mockup. Just keep this in mind that heading levels can be designed to look like anything, but their purpose is not for design.
• Interactive elements
  • Ensure interactive elements (buttons, links, forms, etc) are clearly distinguishable from non-interactive elements. Otherwise, this can become a confusing user experience.
• Link and button text
  • This will partially fall on developers to implement; however, designers should be aware of it, also. Links and buttons should have perceivable text that is identifiable outside of its content. This also benefits SEO. (For more information, see our blog post “Link Text Should Not be a Mystery“.) Here are some examples (these are all fake links that go to the AccessiCart homepage):
    • Bad: To learn more about us, click here to download our pamphlet.
    • Good: To learn more about us, download our pamphlet (PDF).
    • Bad: Continue Reading
    • Good: Continue Reading[screen reader text] about Blog Title[/srt]
• Reflow
  • Keep reflow (how website content auto-adjusts to different screen sizes and magnifications) in mind when creating your desktop and mobile experiences. Ensure the same things can be found in approximately the same locations. Many of your users will look at the site from different devices, and you want to ensure they have a similar experience without losing any content.
• Video and Media (AKA: “Where is that sound coming from?!”)
  • Media should not be auto-played on a website, which should be taken into consideration when designing a site. It’s not uncommon to include video backgrounds and such. At the very least, a pause/play function should be included in these sections. They can be extremely distracting for some people, and not in a good way.

Best practice consideration

The following items aren’t technically WCAG violations (yet), but can negatively impact a user’s experience and should still be considered.

• Font size
  • The standard minimum font size that should be on a website is considered to be 16px. This means the main body text should be larger to ensure text that is traditionally smaller than body text is no smaller than 16px. This ensures readability.
  • Typography is not a loophole: Some font families are designed smaller than others. These families can make 18px look like 14px or smaller. It’s not uncommon for people to use this as a loophole but if your content still isn’t readable, then it’s still creating a poor user experience even if it’s “technically” 16px.
• Images with text
  • Images with text should be avoided. They don’t scale or allow users to dynamically alter the font for their readability needs. Also, the text in the image is not available to be read out by screen readers (or indexed by search engines). Avoid designing with this practice in mind.
    • Logos are an exception to this rule
• Text justification
  • “Full justified” text should be avoided. This is the word for text that auto-spaces itself to fill the space its provided. This often leads to dissociated words, and users with reading disabilities get distracted by the “rivers of white”.
  • Avoid excessive “Center” justification, especially for long strings of text. This causes eye strain.
• Typography
  • Difficult to read fonts can create a poor user experience. Cursive is probably the largest offender of this as cursive is difficult to read for many users (especially younger users as it hasn’t been mandatory curriculum in most schools since 2005, at least in the United States). Excessively decorative fonts force users to concentrate more to understand what they’re reading. Monospace makes your content difficult for users with dyslexia who depend on letter variations tell them apart. Some slab and serif fonts can have ticks that make text blend together. Generally, sans-serifs are considered the most readable font family, but that’s still not a guarantee.
    • There’s no one answer. Some handwriting fonts are easy to read and some sans-serifs are difficult (for example, how easy is it to distinguish between a uppercase “i” and an lowercase “L”). Just keep it in mind when designing your website and study the readability of the typography you’re considering.
  • Keep in mind letter spacing. Too much disassociates words, too little for some fonts can cause words to blend together.
  • Avoid excessive italics. Long strings of italics are difficult for some users to read and strain their eyes. Avoiding using this as a default body style.
  • Avoid EXCESSIVE CAPS. You don’t need to avoid Caps altogether, but don’t make long strings. Some users, like those with dyslexia, depend on the casing of letters to differentiate between them. It also makes it more difficult for users to scan content. So by making excessive, long strings of Caps, you put some people at a disadvantage.
    • Caps should also never be hard-capped (as in using the Caps lock or Shift + Letter). Capped styles (for things like headings) should be implemented via the stylesheet so users can disable them.

Fun facts: From a developer to a designer

While designing can be great fun and a great outlet for creativity, at the end of the day there will always be variables that impact the design on the user-end. I’m here to share a few of those for you to keep in mind.

• Animation and JavaScript-heavy features
  • Not everyone browses with JavaScript (JS) enabled for a myriad of reasons, including:
    • Accessibility (in addition to auto-disabling most animations, turning off JS will also prevent any JS-related interference with assistive technology)
    • Performance (I swear, there are websites out there with so much excess nonsense on them that won’t load unless you have Business Fiber)
    • Privacy (it blocks ads and data collection)
    • Security (prevents JS-related vulnerabilities that may exist on the site)
  • Many users, able-bodied or otherwise, browse with JS disabled. So when you create an overly “dynamic” website, you put your own design at a disadvantage if it isn’t translatable for users who prefer to protect themselves or who need JS disabled due to a disability.
• Implemented typography
  • If you’re using a cursive font, the CSS for this is often font-family: [primary font], cursive;. cursive is generically set as a fallback font. What does that translate to? Well that depends on the operating system (OS):
    • Windows: Comic Sans MS
    • macOS/iOS: Apple Chancery
    • Linux: URW Chancery L
  • Yes, you read that right… your elegant cursive font will become Comic Sans on a Windows OS if the primary font can’t be loaded for any reason. Sometimes primary fonts aren’t loaded because:
    • The user has slow Internet or a weak signal (such as being in a rural area)
    • Hiccups in servers
    • Some ad-blockers and anti-virus software
    • User browser settings (it’s not uncommon for users to run tools that block a myriad of things, including custom fonts)
• Reflow
  • Not everyone keeps their browser at full width at all times. This especially includes blind screen reader users (also Mac users, what’s up with that?). They don’t know exactly how large their browser is at any given time. While developers definitely play a heavy role in reflow, the designers telling them what to build do as well. I’ve met with plenty of people who are blind who have their browsers set to near mobile sizes while on their computers, but another day it’s up to tablet or even full-width. So really keep your reflow in mind.

Accessibility design tools

Fortunately, many of the “big” design programs have tools and add-ons that can be a great companions when creating accessible designs.

• Adobe InDesign: “Accessibility Tools in Adobe InDesign” by Falmouth University
• Adobe XD: “Improve Accessibility with These Five Plugins for Adobe XD and Google Chrome” by Adobe
• Figma: “Best Figma plugins to design for accessibility” by story.to.design
• InVision Studio: “8 tools that make accessible design easier” by Inside Design
• DigitA11y has a good collection of tools for a wide variety of software, including Sketch: “Accessibility Tools and Resources for Designers“

The tools listed in these articles aren’t the only ones out there. So I encourage you to browse your design program’s library for other accessibility tools that suit your needs!

Some things to keep in mind

While this list is aimed at the “design phase”, there are many other considerations for accessibility that should be kept in mind throughout the journey of a web project. There are over one-billion websites out there and a lot of them are your competitors. If your site takes too long to load because of too many fancy features, a user struggles to read your content because of poor font or color choices, or because the layout is so confusing they’re just frustrated by the experience, they will go elsewhere. And “elsewhere” always exists.

Some folks take accessibility and universal access seriously, and others don’t. But the ones that do are creating a better user experience that people want to return to. I may not be a web designer, but I am an artist. And when I create art, I want to be able to share it. Web design is art. But when you create barriers for people, you limit their ability to enjoy it or even cause them to hate it – something you put your heart into. So from one artist to another, I would encourage you to shift your focus and ensure you’re putting your heart, sweat, and effort into something as many people are able to enjoy as possible.