Author: Mary Gillen

ACCESSIBLE FORMS: A Select “Jump Menu” Tip

Posted on by Mary Gillen

Illustration of HTML Select Menus

“Jump menus” are select drop down menus that automatically submit once an option is selected. This occurs due to use of the JavaScript onchange event handler.

Problem is these types of select lists cannot be operated from the keyboard if they have an onchange handler that performs navigation. Why? Because the handler fires as the user moves the selection up and down using the keyboard. Moving through list items using the arrow keys will jump to another page or website location unexpectedly. This does not comply with WCAG 2.1 Guideline 3.2.2 – On Input (Level A).

SOLUTION: To make the select menu keyboard accessible, allow the user to trigger the navigation via a Submit button. This way the user has access to all the options in the menu using the up/down arrow keys, and, when ready, can press the Go (Submit) button that will trigger a processing script for successful navigation.

Select Jump Menu with Go Button

===

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 Embed Missing Fonts

Posted on by Mary Gillen

Five PDF icons in a row

I have written about the importance of adding a PDF/UA identifier to your PDF files to help with accessibility.

The PDF/UA flag in the document informs screen readers and AT software that the PDF’s structure elements are logically ordered and semantically correct. This enables the AT apps on different devices (desktop, mobile, tablets) to process correctly-tagged PDF content consistently for a multitude of users.

Let’s talk about why you should embed missing fonts

Embedding missing fonts ensures reliable presentation of the PDF document’s text because the AT viewer is not forced to substitute fonts that may not match the usage specified in the document.

Fonts that are embedded can also help speed up the editing process. Let’s say you discover a typo and need to fix it via Adobe Acrobat Pro DC. You should be able to fix the text in the document using the original font.

How to embed missing fonts

1. Open the PDF document in Adobe Acrobat Pro DC.
2. Go to Print Production > Preflight.
3. Make sure the Adobe Acrobat Pro DC 2015 Profiles is selected.
4. Select PDF fixups.

Adobe Acrobat Pro DC screen shot how to embed fonts
5. Select Embed missing fonts.
6. Press the Analyze & Fix button.
7. Save and replace the file.
8. Test in PAC 3.

===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

ACCESSIBLE CSS: Don’t float:right

Posted on by Mary Gillen

Illustration of text layout aligned to the right

Careful when using float:right.

Why?

Used to place content on the right side of a Web page layout, it can be an accessibility mistake!

It can leave screen readers in the dust.

When text is floated to the right, the code is often placed BEFORE other text to its left in the HTML code. The visual order may look correct left to right (with the floated item second) while a screen reader will read the floated item first. Screen readers read files in code order, not in layout order.

Exceptions

You can use float:right if the text is still understandable in the HTML order. Or if you are positioning a decorative image to the right of the text in the layout.

===

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: Readability Analyzer

Posted on by Mary Gillen

Illustration of different types of printed books

Here are three tips to follow when creating accessible website content:

– Keep it simple.
– Keep it short.
– Keep it clear.

To accommodate users with learning disabilities, reading disorders, or who speak English as a second language, it is suggested that you write content at an 8th grade reading level.

How can you test the readability of your content?

Use Readability Analyzer, a free online tool that can help you estimate the readability of a passage of text using the Flesch Reading Ease, Fog Scale Level, Flesch-Kincaid Grade Level, and other metrics.

===

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 MAPS: Color Advice for Cartography

Posted on by Mary Gillen

Color coded countries on world map

Need help determining the correct color contrast for maps?

ColorBrewer to the rescue!

Created by Cynthia Brewer, Mark Harrower and other pros at The Pennsylvania State University, ColorBrewer is a diagnostic tool for evaluating the robustness of individual color schemes in maps.

Full use of the tool can benefit your map designs because colors (even very similar colors) are easy to differentiate when they appear in a nicely ordered sequence (such as a legend). The task of differentiating the colors, however, becomes much harder when the patterns on the map are complex, such as in the lower left corner of the diagnostic map.

Screenshot of ColorBrewer diagnostic color contrast tool

Here are two tests you can conduct with ColorBrewer:

TEST #1: Can you easily distinguish every color in the random section of the map (the lower left)? If you have a ten-class map, you should be able to see clearly ten unique colors.

TEST #2: Within each large band of color on the map, we placed several polygons filled with each map color (‘outliers’). For example, if you have a seven-class map, there will be six outlier colors per band, demonstrating the appearance of all map colors with each as a surrounding color. Can you see each outlier clearly? Do all pairs of outliers in the band look different? If not, perhaps you should choose a different scheme or fewer classes.

ColorBrewer also lets you determine color schemes that are colorblind-safe, print-friendly and photocopy-safe. You can also download a Microsoft Excel file with all 165 color schemes in one master file. Color schemes are also available for use on the web as CSS, JSON, and JavaScript.

Try ColorBrewer now.

===

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

===

HTML5: Check the Current Accessibility Support Across Major Browsers

Posted on by Mary Gillen

Illustration of Web Development Tools

Check out HTML5 Accessibility, a website that tests which new HTML5 features are accessibly supported by major browsers. This includes if they are keyboard accessible, mapped to the platform accessibility APIs, and if any accessibility related features are supported. An accessibly supported feature means it is usable by people who rely on assistive technology, without developers having to supplement with ARIA or other additional workarounds.

Each feature has its own test page, including the pass criteria, and spec references for the required mapping from HTML feature to the platform accessibility layer.

Go to HTML5 Accessibility now.

===

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 WEB: Designing for Brainpower Limitations

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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

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

===