Blog

ACCESSIBLE FORMS: Don’t Forget to Use Explicit Form Field Labels

Sample HTML form fields with labels

Did you know that most screen readers don’t recognize placeholder values in form fields?

Your website visitors who use screen readers navigate through your forms using the Tab key. The <label> elements are used by screen readers to announce/identify each form control and the type of info to be collected. Placeholder text is bypassed by the screen reader. Plus placeholders are usually more difficult to read by sighted visitors due to color contrast issues.

Example:

White email <label> vs. dark grey “enter your email address” placeholder:

Email form field placeholder text

Use Explicit Form Control Labels

An “explicit” label is created using the HTML label element with a “for” attribute that has the same value as the matching input “id” attribute.

Here is an example:

<label for=”firstname”>First Name: </label>
<input type=”text” name=”first_name” id=firstname”>

The label “for” and the input “id” attributes can be used with any of the form fields: text inputs, text area, select menus, check boxes and radio buttons.

IMPORTANT NOTE: The “id” attribute for each form element in a document must be unique.

[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

===

FORMS: Accessible Select Menu – Get the Code

Select box - website elements - web design UI

Select menus with more than 11 options should be coded with option groups and labels in order to be accessible.

Here’s the code:

<form>
<label for=”favfood”>Choose your favorite food</label>
<select name=”favfood”>
<optgroup label=”Fruit”>
<option value=”1″>Apples</option>
<option value=”2″>Oranges</option>
<option value=”3″>Pears</option>
<option value=”4″>Bananas</option>
</optgroup>
<optgroup label=”Bread”>
<option value=”5″>Sourdough</option>
<option value=”6″>Wheat</option>
<option value=”7″>Rye</option>
<option value=”8″>White</option>
</optgroup>
<optgroup label=”Entree”>
<option value=”9″>Beef</option>
<option value=”10″>Chicken</option>
<option value=”11″>Fish</option>
</optgroup>
<optgroup label=”Cheese”>
<option value=”12″>American</option>
<option value=”13″>Swiss</option>
</optgroup>
</select>
</form>

===

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

===

TOOLS: Testing for Color Blindness Accessibility

Types of color blindness. Eye color perception. Vector illustration on isolated background.

According to the National Eye Institute, there are three main kinds of color blindness, based on photopigment defects in the three different kinds of cones that respond to blue, green, and red light. Red-green color blindness is the most common, followed by blue-yellow color blindness. A complete absence of color vision —total color blindness – is rare.

Most Common: Red-Green Color Blindness

The most common types of hereditary color blindness are due to the loss or limited function of red cone (known as protan) or green cone (deutran) photopigments. This kind of color blindness is commonly referred to as red-green color blindness.

Protanopia: In males with protanopia, there are no working red cone cells. Red appears as black. Certain shades of orange, yellow, and green all appear as yellow. Protanopia is an X-linked disorder that is estimated to affect 1 percent of males.

Deuteranopia: In males with deuteranopia, there are no working green cone cells. They tend to see reds as brownish-yellow and greens as beige. Deuteranopia is an X-linked disorder that affects about 1 percent of males.

Photoshop Testing Resource

Adobe Photoshop allows you to view protanopia and deuteranopia versions of your images. With the image to be tested open in Photoshop, select View → Proof Setup > Color Blindness – Protanopia-type to activate the Protanopia test. Select View → Proof Setup > Color Blindness – Deuteranopia-type to activate the Deuteranopia test.

Photoshop menu open to View → Proof Setup to test an image for color blindness

Make Use of  This Excellent Online Tool

Take the Corblindor Coblis (Color Blind Simulator) for a spin to see how an individual with a color vision handicap will visually interpret your images.

As all the calculations are made on your local machine, no images are uploaded to the server. Therefore you can use images as big as you like, there are no restrictions. Be aware, there are some issues for the “Lens feature” on Edge and Internet Explorer. All others should support everything just fine.

Screenshot of Corblindor Coblis (Color Blind Simulator)

Additional Resource:

Read Alex O’Neal’s excellent article Beautiful, accessible traffic light colors

===

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: Export Microsoft Excel Data to Accessible Responsive HTML Tables

Excel - preparation of a balance sheet

Need to export Excel data to accessible HTML tables?

Make use of the Penn State College of Agricultural Sciences’ Convert Excel Tables to HTML tool.

Simply cut and paste data from Excel, add captions and summary text, then convert it all to accessible HTML table code.

===

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

===

HEADINGS: Two Accessibility Tips You May Not Know

HTML Heading 1 Tag on Blue Background

TIP #1: <h1> headings should not contain other <h1> headings.

EXAMPLE CODE:

<h1>Sample Heading Text<h1>Subtext</h1></h1>

REMEDIATION:

Remove the nested headings, or replace them with SPAN elements.

<h1>Sample Heading Text<span>Subtext</span></h1>

====

TIP #2: Use HTML headings instead of applying CSS heading styles to non-headings.

EXAMPLE CODE:

<div style=”font-size:1.5em; color:#cc0000;”>Sample Heading Text</div>

REMEDIATION:

Change the element to an appropriate heading element (H1, H2, H3, etc) and apply CSS styles if necessary.

<h1 style=”color:#cc0000;”>Sample Heading Text</h1>

===

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

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

===

FYI: Accessibility Problem with Popup Windows

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?

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 COLOR CONTRAST: Icons Now Included

Low Vision Icon

The official WCAG 2.1 – 1.4.11 Non-text Contrast (Level AA) Guideline states:

“People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.”


WHAT IS LOW VISION?

Low vision is the term used to describe significant visual impairment that can’t be corrected fully with glasses, contact lenses, medication or eye surgery. [SOURCE]

EXAMPLE

More from the W3C:

“Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.”

TRANSLATION: When you follow this color contrast guideline, it assists people with low vision so they can more easily recognize icons and graphical objects on a web page.

Here are some examples:

Three check mark icon graphics appear below. Each one uses a different green color on top of a white background.

Checkmark Button Icon in Light Green ColorCheckmark Button Icon in Darker Green ColorCheckmark Button Icon in Green Color

The icon on the left (light green #6cbf7e) has a failing contrast ratio of 2.29:1.

The icon in the middle (darker green #469156) has a passing contrast ratio of 3.86:1.

The icon on the right (even darker green #487651) has a passing contrast ratio of 5.27:1.

BEST PRACTICE

If the icon helps the individual to perform an action on the web page, or to understand the content around it, then the graphic must meet the minimum color contrast requirement of 4.5.1 so that folks with low vision can use it.

===

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

===

MOBILE ACCESSIBILITY TIP: Touch Target Size Can Also Affect Google Indexing

Interface elements for mobile apps development

The WCAG 2.1 – 2.5.5 Target Size (AAA) Guideline states that “the size of the target for pointer inputs is at least 44 by 44 CSS pixels.” There are exceptions, of course. But did you know that ignoring this guideline can have negative affects when Google indexes your mobile website?

WHAT GOOGLE WANTS

When Google checks the mobile usability of your website, it looks to see if “clickable elements are too close together.” If so, this means that your responsive website may be negatively affected in Google Search results.

From Google:

“A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport. For example, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. The 48×48 pixel area corresponds to around 9mm, which is about the size of a person’s finger pad area. Touch targets should also be spaced about 8 pixels apart, both horizontally and vertically, so that a user’s finger pressing on one tap target does not inadvertently touch another tap target.” [SOURCE]

THE PROBLEM MAY BE MORE THAN MOBILE BUTTONS

Here are some other items to check as well:

– Breadcrumbs that don’t display with enough line-height when the text wraps to the next line
– Footer links
– Social media icons that appear in a row

===

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

===

MICROSOFT WORD: Accessibility Tips

Microsoft Office Word logo on a cellphone screen. Microsoft Word is a computer program for free-form information gathering and multi-user collaboration.

FILE FORMAT

Be sure the file format is .docx in order to preserve accessibility features. Other formats that can be produced by Microsoft Word (RTF, DOC, TXT, and ODF) may not be accessible.

FILENAME

a) The filename needs to be descriptive, identifying the document or its purpose.
b) The filename should be no longer than 30 characters.
c) The filename should not contain spaces and/or special characters.

FILE PERMISSIONS

Be sure the Restrict Editing function is turned off. Document protections can make sections of the document inaccessible.

TRACK CHANGES

The document’s Track Changes functionality needs to be accepted or rejected, then turned off.

===

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

===