Category: WCAG 2.1 Level AA

ACCESSIBLE VIDEO: The Five Second Rule

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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

===

WEBSITE ACCESSIBILITY: 4 Tips for Text Spacing

Posted on by Mary Gillen

Illustration of Text Height Spacing

WCAG 2.1 – 1.4.12 Text Spacing (AA)

Here are four tips for designing and producing website content controlled by CSS text style properties:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

[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 DEV ACCESSIBILITY TIP: Add Title Attributes to iframe Tags

Posted on by Mary Gillen

Illustration of iframe

Using an iframe to hold content on a web page? Be aware that iframe elements must have title attributes in order to meet accessibility guidelines (WCAG 2 2.4.1 Level A and Section 508 1194.22 (i)).

Without a title attribute, some screen readers read out the iframe filename, which usually does not provide a meaningful description, and is meaningless to the individual who is listening to the content.

FAIL: <iframe src=”acme.html”></iframe>

SOLUTION: Add a title that describes the kind of content the user will discover.

PASS: <iframe title=”Go to the Acme Company FAQ Page” src=”acme.html”></iframe>

===

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 DEV ACCESSIBILITY TIP: How to Handle ALT Text Acronyms

Posted on by Mary Gillen

KEY acronym - KEEP EDUCATING YOURSELF. Educational concept with different color sticky notes and white chalk handwriting on a blackboard.

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

===

WEB DEV ACCESSIBILITY TIP: Don’t Lock the Screen Orientation on Mobile Devices

Posted on by Mary Gillen

Wheelchair on tablet,isolated on white background

WCAG 2.1 – 1.3.4 Orientation AA:
“Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.”

When it comes to accessibility, locking a mobile phone or tablet screen orientation doesn’t help folks who need to use a device with a fixed orientation.

EXAMPLE 1: Users with dexterity impairments. An individual who has a mounted device bolted to the arm of a wheelchair needs to be able to use the website page content in their fixed orientation.

EXAMPLE 2: Users with low-vision. These individuals need to be able to view content in the orientation that works best for them. Example: a person who needs to increase the text size by viewing content in landscape orientation.

===

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

===