UX Checklist Series: Accessible Design

2 years ago 436

ARTICLE AD BOX

This station is from our User Experience (UX) Checklist Series:

What is Accessible Design?

As designers, we person the powerfulness to marque choices that make our integer experiences amended for everyone. When we marque accessible plan choices, our designs not lone go much usable for those with disabilities but much usable for everyone.

Accessible design means designing to conscionable the needs of radical with disabilities. It’s plan that’s inclusive of each users, including users who person carnal oregon cognitive disabilities that are imperishable oregon temporary.

How mightiness a idiosyncratic who experiences colour blindness interact with your plan otherwise than a idiosyncratic who experiences proceeding loss? Or debased vision? What astir carnal disabilities? Dyslexia? Mobility impairments? Blindness? Users interacting done surface readers oregon keyboard-only navigation?

Who else’s needs are excluded from the accepted plan process? Accessible plan takes each of these experiences into consideration, and proactively provides plan solutions that are usable for everyone.

What’s the Difference Between Universal Design and Accessible Design?

Universal design, inclusive design, and accessible plan are often utilized interchangeably; truthful what’s the difference?

While these presumption each person roots successful expanding usability for a wider acceptable of users, determination are a fewer flimsy nuances to their definitions:

Universal design is the broadest of the bunch. This refers to designing for everyone successful a mode that’s the astir usable arsenic possible. A commonly utilized illustration of cosmopolitan plan is the instauration of the sidewalk ramp due to the fact that it increases usability for everyone crossing a street, not conscionable those successful wheelchairs.
Inclusive design is precise overmuch related but considers the afloat scope of quality diversity. Inclusive plan challenges america to see our ain biases and look astatine who’s being excluded. An illustration of inclusive plan would beryllium providing options for some communal and customized responses erstwhile asking for sex accusation connected a form.
Accessible design is specifically designing for those experiencing disabilities, yet it often results successful a amended idiosyncratic acquisition for everyone. Accessible plan meets the needs of those with imperishable oregon impermanent disabilities, but volition often conscionable the needs of those with situational limitations. For example, closed captions supply a amended acquisition for radical with proceeding loss, yet they besides travel successful useful for those softly watching a movie with a sleeping babe successful the adjacent room.

Designing for Accessibility and Inclusion

As UX designers, it’s our relation to deliberation astir however antithetic users with antithetic needs mightiness interact with our designs. We whitethorn deliberation we’re considering a ample bulk of the colonisation portion we design, but we’re often overlooking the one successful 4 adults experiencing disabilities. That’s 25% of the population, which grows to astir 40% for adults 65 oregon older.

As public consciousness for accessibility increases, it’s important we commencement actively reasoning beyond our ain biases and abilities portion we design. Besides conscionable being connected the incorrect broadside of morality and ethics, ignoring accessibility successful plan tin negatively impact your brand’s reputation, and adjacent pb to expensive lawsuits and ineligible battles. Not to mention, it makes it truly hard (if not impossible) for 25% of your customers to usage your merchandise oregon service.

The pursuing checklist walks done a database of plan tips to assistance you get started. While this does not (and should not) regenerate a afloat accessibility audit, it tin beryllium utilized for immoderate speedy wins to marque your designs a spot much inclusive.

UX Accessibility Checklist & Guidelines

Color

Text Color & Contrast: Use a opposition checker, specified arsenic WebAIM’s online tool, to guarantee the colour of your substance is readable against the inheritance color. The smaller your text, the higher the opposition needs to beryllium for the colour operation to walk accessibility standards. In my experience, colour opposition is simply a beauteous communal accessibility offender and tin beryllium a large mode to present accessibility champion practices to your clients.

Accessibility 01 Color Contrast

Messaging: Don’t trust solely connected colour to convey a message. Consider utilizing color, shape, and substance to further stress your message. For example, effort including iconography with your mistake messaging erstwhile visually communicating signifier tract errors, alternatively than conscionable colour alone.
Links: Link colors should beryllium visually antithetic from your assemblage text. However, akin to the above, don’t trust connected colour unsocial to benignant your links. Jakob’s Law also tells america that radical similar plan patterns that are acquainted to them. Underlining your links improves wide usability by utilizing a acquainted plan pattern, but besides improves accessibility for users with debased imaginativeness oregon colour blindness.

Text

Text Size: Make definite your substance is ample capable for radical to work without straining oregon squinting. According to Smashing Magazine, 16-pixels (or larger) is the size you privation your assemblage copy. Secondary oregon tertiary substance tin beryllium smaller, but support your main contented ample and readable.
Enlargeable Text: Let radical set and summation the substance size themselves. This goes for important icons arsenic well! If your fastener has a “download” icon, but that icon doesn’t summation successful size with your fastener label, radical whitethorn miss important context.
Clarity: Your leafage titles should beryllium clear, descriptive, and to the point. Additionally, usage the progressive dependable and beryllium nonstop successful your connection to lighten the cognitive load connected your users. For example, “Denise wrote a blog” is unfastened to little mentation than, “A blog was written.”
Scannability: Use bullets whenever imaginable to signifier your substance into smaller, digestible chunks. Avoid ample and overwhelming walls of substance by breaking up longer contented sections into smaller paragraphs with descriptive subheaders to assistance summation scannability.
Structure: Use HTML and heading tags (H1, H2, H3, etc.) to found a leafage operation that makes consciousness to surface readers. Fun fact: a wide leafage operation volition besides marque much consciousness to hunt engines. So too improving the acquisition for your users, a coagulated operation tin besides person a affirmative effect connected your technical SEO!

Accessibility 02 Header Levels

Alignment & Length: Left-aligning your substance tin assistance amended the readability for radical with cognitive disabilities. Avoid centering oregon right-aligning your text, particularly erstwhile your substance artifact wraps onto aggregate lines. Speaking of wrapping, enactment magnitude is besides important to consider. Baymard Institute recommends 50-60 characters per enactment (including spaces!). Lines that are excessively wide are hard to follow, portion lines that are excessively abbreviated tin origin fatigue and accent your scholar out.

Navigation

Breadcrumbs: Breadcrumbs tin beryllium utilized arsenic important navigational tools. Adding breadcrumbs tin supply much-needed discourse and assistance orient your users.
Keyboard Navigation: Make definite your leafage is accessible by surface readers and tin beryllium navigated by code oregon keyboard-only.
Focus Indicators: Taking that 1 measurement further, radical utilizing their keyboard to navigate trust connected absorption outlines connected buttons, links, and different elements to cognize wherever they are connected the page. You tin adhd immoderate styling to your absorption indicator to align with your plan styles, but NEVER region these!

Accessibility 03 Focus Indicator

Links, Buttons, and Labels

Link descriptions: Links are are typically navigational, truthful your nexus substance should beryllium descriptive and explicate wherever the nexus volition instrumentality you. For example, “Read much astir accessible design” is much adjuvant than, “Read more.”
Button labels: Similar to substance links, your fastener labels should acceptable due expectations by describing the enactment your fastener volition trigger. “Contact our team” primes america for what we tin expect amended than, “Click here.”
Spacing: Anything that tin beryllium tapped oregon clicked should person plentifulness of abstraction astir it. Don’t request precision oregon cram buttons intimately together. It’s nary amusive (for anyone) to effort to click a tiny nexus adjacent to 3 different tiny links with accuracy. For mobile, we effort to instrumentality to a minimum pat people of 44 x 44-pixels arsenic a regularisation of thumb for thing that tin beryllium tapped.
Form Labels: To assistance trim cognitive load connected your forms, marque definite your signifier tract labels are clear, descriptive, and ever visible. Your tract labels should ne'er beryllium replaced by placeholder text, oregon vanish erstwhile the idiosyncratic starts typing.

Accessibility 04 Form Headers

Images & Video

Alt Descriptions: Always adhd descriptive alt tags to your images, video, and different media. Remember, not everyone volition beryllium capable to spot your images truthful effort to marque your descriptions arsenic elaborate arsenic possible. In summation to improving accessibility, alt tags person important SEO benefits as well.
Communication: Use imagery to enactment your text, but ne'er usage imagery in place of text. Images are large to enactment analyzable oregon analyzable concepts, but those concepts should ever beryllium described successful plain text.
Video Transcripts: Videos are awesome and engaging forms of media content, but don’t hide important concepts successful your videos. If you are utilizing video, marque definite you see subtitles oregon video transcripts for users incapable to watch.
Clarity: Icons are large for scannability, but not each icons are intuitive. For further clarity, brace your icons with descriptive labels.
Overlays: Similar to colour accessibility, substance connected apical of images tin beryllium problematic arsenic acold arsenic readability. If you take to furniture substance connected your images, see adding a colour overlay that helps your substance conscionable colour opposition standards with the background.

When it Comes to Accessible Design, We Practice What We Preach

While putting this checklist together, we did a speedy accessibility audit connected our ain site. And arsenic you whitethorn person noticed, determination are immoderate issues close connected our precise ain homepage:

Accessibility 05 Seer Issues

As with immoderate project, plan and improvement updates necessitate clip and resources. You’ll request buy-in from your leadership, but it doesn’t person to consciousness similar an uphill battle. Here are the steps we program to instrumentality to code our ain accessibility issues:

Identify the problem: Use a checklist similar the 1 supra audit your tract and papers your known issues. Doing this tin assistance you recognize the level of effort needed to hole the issues.
Educate done Empathy: Advocate for accessibility and explicate wherefore this matters to your team! Build empathy for your users with the indispensable stakeholders. Fortunately for us, empathy is already astatine the bosom of Seer’s values.
Log issues and dainty them similar bugs: How would your squad spell astir addressing different bugs connected your website? Accessibility issues are usability bugs astatine their precise core. People can’t work your fastener labels? That’s a captious usability issue! Treat it similar 1 and prioritize accordingly.
Create a program for on-going optimizations: Websites are surviving things with galore moving parts, and scheduling periodic accessibility audits tin assistance you support tabs connected immoderate caller issues. Better yet, arsenic consciousness for accessibility grows connected your team, usage that momentum to marque accessibility a portion of your plan process from the precise start.

Note: The accusation provided successful this blog station does not, and is not intended to, represent ineligible proposal with respect to ADA-compliance oregon otherwise, and should not beryllium acted upon arsenic such.