Jump directly to: Content Table of Content Navigation
C

Cognitive

Accessibility

Cognitive accessibility covers every user having difficulties to read, write and/or concentrate. He may use ad/image blockers or other noise reducing tools and/or custom styles to overwrite the default styles. According to Dyslexia International more than one out of 10 people and according to the ADHD Institute ~6% of all children and ~3% of all adults have Attention Deficit Disorders. Every aspect of accessibility and especially the cognitive accessibility, improve general usability.

Contribute to this section

Headings

Contribute to this section

Tables

Contribute to this section

Text / Typography

Contribute to this section

Navigation

In-page navigation

  • It is a good practice for longer text to have some kind of table of content. It helps the users to orientate themselves, quickly find the content they seek and to be able to socially share the exact part of the website.

  • If possible, give a visual clue that there are anchor-points. I.e. on this website they are indicated with the anchor symbols, giving the user an easy way to store and share specific parts of the website.

Breadcrumbs

  • It is a good practice to provide breadcrumbs on websites that have more than one or two levels of navigation.

  • Links in a breadcrumb navigation show a trail from the front page to the current page, with a link to every page on the way. Usually separated by arrows. The current page should not be linked and be the last item in the list. Here is how an accessible breadcrumb could look like (as seen on Visual Accessibility)
  • skip code example to next item
    <nav class="breadcrumb" role="navigation" aria-label="You are here:">
      <a href="#link">Home</a>
      >
      <a href="#link">About Sharks</a>
      >
      <span class="visuallyhidden">Current:</span> Hammerhead Shark Facts.
    </nav>
    
    Visual output:

Sitemap & Search

  • Providing a sitemap is usually a good practice for complex websites. It can help users to understand what the site contains and how content is organized. It should list all links and their relation. A good example, is the WAI Sitemap.

  • The possibility to search for content on your website should be available if possible. It helps users to find content and is often more efficient than going through the navigation. The ideal search provides suggestions that allow synonyms and check the spelling. This is how an accessible search-bar could look like (as seen on Visual Accessibility):
  • skip code example to next item
    <header role="banner">
      <img alt="Google" style="height:70px" src="logo.png">
      <div role="search">
        <input type="search" aria-label="Search">
        <button type="submit">Search</button>
      </div>
    </header>
    Visual output:
    Google
Contribute to this section

Images & Patterns

Contribute to this section

Advertisements & Sound

Contribute to this section

Forms

Placeholders

  • While placeholders are very helpful, they are not replacements for labels. Make sure to clearly differentiate placeholders from user input as users might confuse placeholders with pre-filled input.

  • Repeating the labels in your placeholders is redundant. I.e. instead of email: [email], rather provide an example like email: [example@email.com].

Errors

  • Provide an error/success feedback while typing or on blur (when focus on that particular element is lost). Sometimes a feedback while typing is necessary, but as it might be distracting, consider having a feedback on blur only.

  • It has become a standard to add an asterisk (*) to required fields. This asterisk should be explained somewhere. Alternatively, just add the keyword “required”.
  • Users should be able to check their own input and correct it if necessary.
  • Show errors not only with colors. I.e. add a big border around fields with errors or a check-mark for success and a cross or exclamation mark on errors.
  • Have a summary of all errors on top of the page as a list. Explaining the error and ideally linking to the respective fields. This way the errors are not overseen. That there were errors should also be indicated in the page title.

Anti-Spam

  • Generally avoiding anti-spam increases usability. For every layer of complexity you add to your forms, you might lose users on the way.

  • If you use captchas make sure to also provide voice checks. Ideally add an alternative way that the user can still reach his goal, even if the captcha fails. I.e. a special email address for direct contact.
  • Simple tests as “write ‘Hello World’ into this field:” are o.k. just make sure not to ask for things a person with disabilities could not answer, i.e. asking for colors.
  • Always make sure that your anti spam solutions are usable for everyone. Google did an o.k. job with their newest captcha.
Contribute to this section

Instructions

Contribute to this section

Testing & resources