Blog

ACCESSIBLE CONTENT: Letter Spacing and Screen Readers

Colorful wooden blocks showing letters A through E

Did you know that screen readers cannot pronounce words correctly if there are spaces between letters in a word?

Solution

Remove spaces between letters in the same word.

Example

apple instead of  a p p l e

===

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 DEV: Designing to Accommodate Folks with Hand Tremors

Illustration of Human Hands Holding Mobile Phones

There is an accessibility design flaw on most responsive websites that affects users who experience hand tremors.

Problem: There is not enough space between touch targets on mobile devices for folks who suffer hand tremor issues. These users need some un-clickable screen space between touch targets…an area where they can place a finger to steady their hand so they can successfully scroll the screen without activating a link by mistake.

Why is this important?

According to UX and accessibility specialist Hampus Sethfors of axess lab:

“For a lot of people with hand tremors – caused by for instance Parkinson’s disease or essential tremor – unintentional clicks happen all the time. Especially while scrolling on a touch screen. If you think about it, touch screen scrolling requires a lot of fine motor control. You need to place your finger on the correct part of the screen, flick it at the right speed and in the right direction, and most importantly: keep it on the screen at all times during this gesture. Many web and app interfaces are designed in a way that causes big problems for users who have a hard time with this scroll gesture.”

Advice to all website designers and developers of responsive websites from a user with Parkinson’s disease

“Add some space between the different objects so that I can put my finger down without activating something.”

Solution: Add a bit of unclickable space between each touch target on the page.

Example that fails: Difficult mobile layout for user with hand tremors to navigate

Mobile phone screen layout that is difficult for user with hand tremors to navigate

Example that passes: 60 pixels of vertical space between content objects makes it easier for the user with hand tremors to anchor a finger so they can scroll the mobile screen.

Mobile screen layout that's easier for the user with hand tremors to navigate

[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 PDFs: When Bookmarks Are Required

Five PDF icons in a row

If you have a PDF document that has 21 or more pages, you need to include bookmarks that parallel the accessible document structure. This allows folks who use assistive technology an easier way to navigate a PDF document.

NOTE: Bookmarks are best added after the document structure tags are finalized.

How to add bookmarks based on a document’s structure via Adobe Acrobat Pro DC:

1. Select Bookmarks icon on the Accessibility Checker panel
2. Select the Options icon
3. Select New Bookmarks from Structure

Adobe Acrobat Bookmark Menu
4. In the Structure Elements dialog box, select the element(s) that you want to use as bookmarks.

5. Click OK.

[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 WEB DEV: Beware the Automatic Refresh

Four multi-colored refresh buttons

Do you have a web page that uses a script to periodically refresh the entire page so the latest news articles can display?

If so, you are out of compliance with WCAG 2.1 3.2.5 Change on Request (Level AAA).

Why? A script like this causes screen readers to re-read the entire page with every refresh.

SOLUTION: Remove the script causing the automatic refresh. Provide an “Update now” button that the web page visitor can use to request a refresh of the content.

===

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 FORMS: A Select “Jump Menu” Tip

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

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.

===

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 CSS: Don’t float:right

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

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

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

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

===