Skip to content

Development & Testing for Diverse Abilities: Cognitive

This blog series, Development & Testing for Diverse Abilities, will explore the needs of users with auditory, cognitive, visual, and mobility impairments and equip you with the knowledge and tools to create digital experiences that are more accessible and enjoyable for all. Each post will focus on a specific disability, highlighting website development best practices and suggestions for testing for compliance.

This is the second post in the series. You'll find the first post here Development & Testing for Diverse Abilities: Auditory, and the third post here Development & Testing for Diverse Abilities: Mobility.

Cognitive 

When a disorder affects things like organization, regulation, and perception, it can be considered a cognitive disability. This can make navigating a website daunting, especially for those with challenges in reading comprehension, memory, or focus.

What Can Web Developers Do?

Since there is such a wide range of cognitive disabilities that web developers need to consider, we will focus on development strategies for four of the most frequently impacted cognitive areas.

  • Memory: Users should not be forced to memorize information. Doing so can burden their cognitive load - the amount of working or short-term memory they use to interact with your content. 
    • Develop simple, consistent, and easy-to-use navigation and page layout.
    • Markup your content semantically. "Valid semantics create content that is reusable and more meaningful to assistive technologies."
      See       "Page Structure Tutorial, Content Structure" from the World Wide Web Consortium.
    • Keep instructions simple and straightforward, removing jargon and acronyms.
    • Use descriptive link text. Don't use links labeled just 'Next' or 'Back.' Instead, use 'Back to mailing address' and 'Next for credit card information.'
    • Use field labels instead of placeholder text on your web forms. Placeholder text disappears when the user begins to key in the response, requiring the user to either memorize it or delete their input to be reminded of it.
  • Problem-solving 
    • Keep the navigation consistent. When navigation is consistent, it is predictable; therefore, the user does not need to re-learn your site's wayfinding.
    • For complex tasks, guide users through the task with step-by-step, plain-language instructions. This helps users stay focused and complete the task more efficiently.
    • Use well-constructed error messaging that includes possible solutions and support contact phone number and email address. See the DubBot blog "Error Messages and Making Them Accessible" for more details.

  • Attention
    • Use of explicit visual cues to help emphasize important sections of content. For example, a high-contrast "Submit" button or increased white space around a paragraph of text. Visual cues, such as relevant images or graphics, can also be inserted into long-form text to help provide additional context and break it into smaller chunks.
    • Eliminate animation, advertisements, and sponsored links. At a minimum, give the user control to turn off or pause animations and hide advertisements and sponsored content.
    • Use headings and properly structured lists to help chunk your content.
    • Use best practices for adding ALT text to any images or graphics. Many users with cognitive difficulties often use screen readers to reinforce content comprehension.

  • Reading and Verbal Comprehension
    • Use an accessible font. Take a look at this article from Penn State titled "Font Face" for a list of accessible fonts.
    • Use plain language throughout your website. For more information, use the resources available at The Center for Plain Language.
    • Whenever possible, eliminate jargon and difficult, unfamiliar words.
    • Write in small chunks of text with proper heading structure. Determine the number of sentences that make up a "small chunk" and use it as a best practice and metric to test against.
    • Use the active voice. For example, "Billy builds the houses." is clearer and more easily understandable than "The houses are built by Billy."

What Can Website Managers Do?

As a website manager, your role extends beyond maintaining a website's functionality. You ensure that your website offers an inclusive user experience by championing the implementation of best practices that help serve users with diverse cognitive needs.

The following testing strategies and suggestions will help make sure those best practices are in place and working for your users.

  • Memory: 
    • Simple, consistent navigation: A visual review of each page is required when testing for consistent navigation and page layout. Identify each navigation element and page section and look for each to be located in the same relative position on every page.
    • Markup your content semantically: This test can be conducted using an automated testing solution like DubBot.
    • Keep instructions simple and straightforward: Testing for plain language can be accomplished using DubBot’s "Readability Scoring." This test includes readability scores for Flesch Reading Ease, Gunning Fog Index, and others, as well as word count, sentence count, and average word per sentence. Custom Policies can be written to check for jargon and acronyms. See the blog post titled "What does readability have to do with accessibility?"
    • Use descriptive link text: You can test this using manual and automated means. Manual testing would include screen reader software to assess how links are announced. An automated solution like DubBot will uncover links associated with icons or images that may not be descriptive. Read "The Crucial Role of Discernible Text in Links" for more details.
    • Use field labels instead of placeholder text on your web forms: A quick visual review of your web forms will reveal whether you have placeholder text or labels for the form fields. But that is only the first step. You want to ensure the label is explicitly associated with the form field. To test that, click the label text, and if the form receives focus, the field is associated properly.

  • Problem-solving: 
    • Keep the navigation consistent: Identify each navigation element and ensure it is located in the same relative position on every page.
    • Complex tasks: Guide users with step-by-step instructions. This is a manual test and would best be conducted with real users. Ask your users to go through each step and identify any unclear instructions, words, or phrases.
    • Use well-constructed error messaging: Run your error message text through a writing app like Grammarly or Hemingway for an initial evaluation. After making any suggested edits, compare the text to the checklist in the blog "Error Messages and Making Them Accessible."

  • Attention:
    • Use of explicit visual cues: Conduct a visual evaluation to ensure that visual cues are appropriate for the content they are intended to support. Also, ensure the cue is located in the proper proximity of the supported content.
    • Eliminate animation, advertisements, and sponsored links: A visual evaluation is needed. If user controls are used, ensure they meet SC 1.4.3: Contrast (Minimum) (Level AA) for text-based controls and SC 1.4.11: Non-text Contrast (Level AA) for non-text controls. Either control type must meet SC 2.5.8: Target Size (Minimum) (Level AA).
    • Use headings and properly structured lists: An automated solution like DubBot can easily help you ensure proper document and page element structure. 
    • Use best practices for adding ALT text to any images or graphics: An automated solution will test to ensure ALT text is included for all of your images. However, a manual test can determine the quality of that ALT text. Is the text truly descriptive? Is it too long or too short? For more specifics on quality ALT text, read Tips and Tricks in the Image Tutorial from the World Wide Web Consortium .

  • Reading and Verbal Comprehension:
    • Use accessible fonts: To ensure you are using accessible fonts, compare the font(s) on your website to the fonts included in this chart from Penn State.
    • Use plain language throughout your website: With DubBot, your text content is tested using several different readability scoring tools. Use those results to edit your text as needed.
    • Eliminate jargon and difficult, unfamiliar words whenever possible: Custom policies in DubBot can be used to test for and identify any unwanted or unnecessary jargon and phrases.
    • Write in small chunks of text with proper heading structure: This would be a visual test based on your definition of a small chunk. Proper heading structure can be tested with an automated solution.
    • Use the active voice: Grammarly is an excellent tool for evaluating your text for active voice, grammar, punctuation, etc.

Websites developed with clear structure, easy-to-read text, and predictable navigation make the experience smoother for everyone. Imagine a website that's easy to understand and navigate and avoids overloading you with information. That's the kind of user-friendly experience that benefits all visitors, not just those with cognitive challenges.

WCAG Succes Criteria for Cognitive Disabilities

Resources

The first post in this series can be found here Development & Testing for Diverse Abilities: Auditory and the third post can be found here Development & Testing for Diverse Abilities: Mobility.

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot