Blog

ACCESSIBLE WEB: Designing for Brainpower Limitations

Concept illustration of four human brains

When a person experiences short-term memory loss, he or she can remember incidents from 10 years ago but is fuzzy on the details of things that happened 10 minutes prior.

According to User Advocate and UX expert Jakob Nielsen, Ph.D., “short-term memory famously holds only about 7 chunks of information, and these fade from your brain in about 20 seconds.”

Short-term memory limitations dictate a whole range of Web design guidelines. Nielsen advises:

  • “Response times must be fast enough that users don’t forget what they’re in the middle of doing while waiting for the next page to load.
  • Change the color of visited links so that users don’t have to remember where they’ve already clicked.
  • Make it easy to compare products, highlighting the salient differences on both the initial category page and in special comparison views. If you require users to move back and forth between separate product pages to deduce differences, they’ll get confused – particularly if the pages present the information in an inconsistent format.
  • Instead of using coupon codes, encode offers in special links embedded in your email newsletters and automatically transfer the coupon to the user’s shopping cart. This has two benefits:
    • The computer carries the burden of remembering the obscure code and applying it at the correct time.
    • It eliminates the “enter coupon code” field, which scares away shoppers who don’t have coupons (and who refuse to pay full price when the checkout flow blatantly signals that other users are getting a better deal).
  • Offer help and user assistance features in the context where users need them so they don’t have to travel to a separate help section and memorize steps before returning to the problem at hand.”

[SOURCE]

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE BUTTONS: 4 Built-in Benefits

Different Color Buttons

Ditch the <div> when creating accessible controls. The <button> element is a developer’s friend. Check out these four built-in benefits of using the <button> element:

  • Native keyboard focus.
  • Native role of button, which help AT users understand it’s an interactive element.
  • It can be triggered with Enter or Space without adding any extra JavaScript.
  • It can use the disabled attribute, for when the button shouldn’t be interactive anymore.

RESOURCE: Check out Rob Dodson’s just use buttons video as he demonstrates a few handy button features you might not have seen before.

[SOURCE]

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE VIDEO: The Five Second Rule

Video Play illustration drawn with white chalk on blackboard

A video on a web page that plays longer than 5 seconds, without a way to pause it, fails as an accessible user experience.

2.2.2 Pause, Stop, Hide

Moving, blinking, scrolling:
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.

Solution

Adjust the code that embeds the video by removing the AUTOPLAY attribute or by adding a CONTROLS attribute.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE CONTENT: How to Alert Screen Reader Users About Web Page Changes

Cartoon of human hand holding a megaphone reaching out from a cellphone screen

According to the WCAG 2.1 Level AA Guidelines (4.1.3 – Status Messages), folks who use screen readers need to be notified when changes occur on a web page.

aria-live Roles to the Rescue

Add aria-live roles to HTML page code so assistive technology users are notified when something on the page changes.

Example: Screen reader users who are visually-impaired can’t see changes or have trouble perceiving visible status messages on a page, such as shopping cart updates. Their assistive technology devices should announce the status message that was visibly added to the page.

Should you be polite or assertive?

There are different types of aria-live values you can use to announce changes.

  • aria-live=”polite”: Announces the change in a “polite” manner, like after a screen reader is done reading a sentence.
  • aria-live=”assertive”: Announces the change immediately. This should be used only if the change on the page is critical or imperative.

[SOURCE]

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ONLINE TOOL: Create an Accessibility Statement

Colorful blocks spelling out the word attention

Accessibility statements are important for several reasons:

  • Show your users that you care about accessibility and about them
  • Provide them with information about the accessibility of your content
  • Demonstrate commitment to accessibility, and to social responsibility

The W3C offers an online tool that can help you create an accessibility statement for your own website, mobile application, or other digital content. You can download the statement you created, and further customize, style, and brand it.

Click here to generate an accessibility statement

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE FILE NAMES: Please…No Spaces and/or Special Characters

Brick wall displaying dash pattern of bricks

Folks who use screen readers download documents so they can read them. The first piece of information they encounter is the file name. A unique, descriptive file name helps the user understand the information contained in the document.

Best Practice: To be accessible to screen readers, file names should not contain spaces and/or special characters.

File naming conventions are important for web pages and directories, as well as for downloadable files such as PDFs, Word documents, and Excel spreadsheets.

Here are some tips to remember when naming your files:

  • Don’t start or end your filename with a space, period, hyphen, or underline.
  • Keep your filenames to a reasonable length and be sure they are under 31 characters.
  • Always use lowercase.
  • Don’t use spaces and underscores; use a hyphen instead.

Don’t use the following special characters in your file names:

# pound
% percent
& ampersand
{ left curly bracket
} right curly bracket
\ back slash
< left angle bracket
> right angle bracket
* asterisk
? question mark
/ forward slash
blank spaces
$ dollar sign
! explanation point
‘ single quotes
” double quotes
: colon
@ at sign

SOURCE

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

WEB ACCESSIBILITY: The Problem with Popups

Vintage Jack-in-the-box toy isolated on a white background

Do you have a survey popup window on your home page that automatically opens?

This disorients low vision users who cannot see the new window appearing.

WCAG 2.1 bans all popup windows without explicit alert beforehand (On Focus 3.2.1 A).

New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of user interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE PDFs: How to Prevent Security Settings from Interfering with Screen Readers

Five PDF icons in a row

When creating a PDF file using Adobe Acrobat DC Pro, a document author can specify that no part of an accessible PDF is to be copied, printed, extracted, commented on, or edited.

Problem is this security setting can interfere with a screen reader’s ability to read the document, because screen readers must be able to copy or extract the document’s text to convert it to speech.

How to fix accessibility permissions manually

1. Open the PDF in Adobe Acrobat DC Pro
2. Choose File > Properties > Security.
3. Choose No Security from the Security Method drop-down list.
4. Click OK and close the Document Properties dialog box.

Is your screen reader a Trusted Agent?

From Adobe: “If your assistive technology product is registered with Adobe as a Trusted Agent, you can read PDFs that might be inaccessible to another assistive technology product. Acrobat recognizes when a screen reader or other product is a Trusted Agent and overrides security settings that would typically limit access to the content for accessibility purposes. However, the security settings remain in effect for all other purposes, such as to prevent printing, copying, extracting, commenting, or editing text.”

[SOURCE]

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE IMAGES: How to Handle ALT Text Acronyms

How to code ALT text acroymns

IMG ALT text with acronyms can cause problems when read by screenreaders.

FAIL: <img src=”mit-it-logo.jpg” alt=”ITS at MIT” />
(read by a screen reader as “It’s at Mit”).

SOLUTION: Include spaces in between acronym letters in the IMG ALT attribute

PASS: <img src=”mit-it-logo.jpg” alt=”I T S at M I T” />
(read by a screen reader as “ITS at EM EYE TEE”).

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE CONTENT: Don’t Use Color As Part of Your Instructional Content

Color Blindness - Illustration of Glasses

Are you using color as a way of instructing visitors about the next action to take on your Web site?

Think again.

Let’s say you have images of two buttons on your Web page.

Image of a red button and a green button

If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

WCAG 2.0 Guideline 1.4.1 warns Web designers, developers and content creators about depending solely on color when conveying instructions.

There are a number of color blindness conditions. Here are three you should learn about:

Protanopia: People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

Image of how a person with protanopia views red and green colors

Deuteranopia: People with deuteranopia lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum. Deuteranopia is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how people with deuteranopia see the red & green buttons:

Image of how people with deuteranopia view red and green buttons

Tritanopia: People with color blindness involving the inactivation of the short-wavelength sensitive cone system have tritanopia, a very rare blue-yellow color blindness. Tritanopia is a very rare form of color blindness, occurring in less than 0.003% of males and females.

Here’s how people with tritanopia see the red & green buttons:

Image that depicts how a person with tritanopia views red and green buttons on a Web page

Accessible Best Practice: Don’t use color as part of your instructional content. It will confuse and frustrate your site’s color blind visitors and is considered inaccessible according to WCAG 2.0 Guidelines.

WCAG 2.0 Guidelines covered in this post:

Level A Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Level AAA Guideline 3.3.5 Help: Provide detailed help and instructions.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===