Blog

ACCESSIBLE FORMS: Phone Number Fields and Text Labels

Black Labrador Retriever Looking Up at Telephone Receiver

Many people with visual or cognitive disabilities can recognize phone number fields in HTML forms and usually understand what info needs to be provided to fill in the fields.

Phone numbers are frequently formatted in fixed, distinctive ways, and Web developers may feel that just providing visual formatting of the fields will be sufficient to identify them.

Not so fast

Even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number. The label alerts screen reader users about the content necessary to complete the form field correctly.

Best Practice in HTML5

In its most basic form, a telephone form input and text label can be implemented like this:

<label for=”telNo”>Phone number:</label>
<input id=”telNo” name=”telNo” type=”tel”>

===

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: How to Detect User Preferences for Minimal Animation Motion

Six motion icons

The vestibular system includes parts of the inner ear and brain, responsible for sensory information processing and spatial orientation.

According to the folks at Vestibular.org, “as many as 35 percent of adults aged 40 years or older in the United States (approximately 69 million Americans) have experienced some form of vestibular dysfunction.”

People with vestibular disorders experience symptoms like motion sickness, balance problems, chronic dizziness, headaches, and nausea when looking at large-scale motion on the screen.

Best Practice

Don’t use animations or transitions in interactions without giving the user a way to turn them off.

Possible Fix

Use the @media (prefers-reduced-motion) media query to respect user preferences.

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.

Read Eric Bailey’s excellent article Revisiting prefers-reduced-motion, the reduced motion media query to find out more about browser compatibility and to see code examples.

Additional Resource: A Guide to Creating Accessible Animations by Anna Monus

===

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

===

ACCESSIBILITY TOOLS: Take Trint for a Transcription Spin

Frowning manager reviewing secretary's work

Does the thought of manually preparing a text transcript for an audio or video file make you want to go do something else…like re-arrange your sock drawer?

Time to get Trint, the DIY online transcription tool for your audio/video files.

I use Trint for my own client work. Love this service.

Drop your audio/video files straight into Trint’s web-based AI transcription software to get searchable, editable transcripts in minutes.

Once your edits are complete, export your file in six different formats:

  • Microsoft Word (.docx)
  • SubRip (.srt)
    Universal subtitling format
  • VTT (.vtt)
    Subtitles for use with HTML video players and other software
  • Edit Decision List (.edl)
    Video editing post-production format for importing into Premiere and Media Composer
  • Interactive transcripts (.html)
    Customisable HTML player
  • Project (.xml)

Take Trint for a spin via their 30-minute free trial.

===

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 POWERPOINT: How to Set Real-time Automatic Captions and Subtitles

Three Microsoft Powerpoint Logos Against an Orange Background

PowerPoint for Office 365 can transcribe your words as you present and display them on-screen as captions in the same language you are speaking, or as subtitles translated to another language.

12 spoken languages are supported. Subtitles and captions can be written in over 60 languages.

This can help accommodate individuals in the audience who may be deaf or hard of hearing, or more familiar with another language, respectively. This version of PowerPoint can also create downloadable text transcripts from the live presentation.

See it in action

A group of Chinese students visiting from the University of Washington stopped by the Microsoft AI and Research offices to learn about Microsoft Translator’s speech translation technology. In this video, Will Lewis – Principal Technical PM for Microsoft Translator – demonstrated how the Translator live feature and Presentation Translator for PowerPoint can be used to provide live transcription and translation in the classroom.

Find out more:
Present with real-time, automatic captions or subtitles in PowerPoint

===

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 Set the Document Root

Human hands holding a young green plant

Every PDF document needs a “root.”

I get this question all the time from fellow PDF remediators:

“I am getting this error: ‘”Part” structure element used as root element.’ How can I fix it?”

You need to set the root of the PDF as “Document.”

HERE’S THE FIX

1) In the Acrobat Pro DC Tags pane, create a new Document tag and position it at the root under the Tags tree.

Accessibility Tag Pane Adobe Acrobat Pro DC

2) Select the rest of the tag structure and drag it inside (under) the root Document tag.

3) Save the file.

===

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

===

ACCESSIBILITY TOOLS: Take a Bite Out of Testing with A11ygator

Illustration of Smiling Alligator

Making online content available to every user is the most important requirement for a website. Accessible design takes effort.  You must learn about the specific guidelines and build these rules into your design and content. You must also be prepared to conduct a lot of manual testing.

How can a web developer test a website to get an initial baseline on the items that need to be fixed so they are accessible?

Check out A11ygator, a simplified dashboard where you can type a website URL to check and get an accessibility report.

a11ygator interface

A11ygator uses Pa11y under the hood. You can select the WCAG standard and the wait time – the time to wait before A11ygator actually starts to test, useful for websites that may take some seconds to render the content.

Also, you will get a screenshot of the actual page that A11ygator has tested, plus the ability to download the report in JSON format.

Take A11ygator for a spin.

RESOURCE

===

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: Required Fields and Screen Readers – Two Solutions

Cartoon Illustration of HTML Forms

How can you inform screen reader users that a form field is required? Here are two solutions.

Solution #1:
Include the word “required” in the form <label>.

<label for=”email”>Email (required)</label>
<input id=”email” name=”email” type=”text”>

According to the folks at Deque University:

“Sighted users see the word and screen reader users can hear the word when the label is read to them. Older screen readers that do not support HTML 5 or ARIA may not say ‘required’ if the word is not published in the <label>.”

Find out more about accessible required form fields at Deque University

Solution #2:
Create a CSS class that hides the screen reader message visually (off screen), then include it in a span where the message can be read out loud by the screen reader.

CSS
.screen-reader-only {
position: absolute;
left: -99999px;
height: 1px;
width: 1px;
overflow: hidden;
}

HTML Form Label

<label for=”email”>
Email <span class=”screen-reader-only”>Email address is required</span>
</label>
<input id=”email” name=”email” type=”text”>

===

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

===