Blog

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

===

WEB DEV ACCESSIBILITY TIP: Add Title Attributes to iframe Tags

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

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

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

===

17 Website Adjustments You Can Make Today for Better Accessibility

Hand writing the word Accessibility

Here are 17 adjustments you can make to your website now to make it more accessible:

Images

1. IMG ALT text must not be the same as the image file name.

The ALT text should summarize the purpose of an image. The source filename of the image should not be included because generally it is just not useful to the visually-impaired user.

Black Labrador Retriever puppy named Gracie

FAIL: <img src=”gracie.jpg” alt=”gracie.jpg” />

SOLUTION: Change the ALT text to a description of the image.

PASS: <img src=”gracie.jpg” alt=”Black Labrador Retriever puppy named Gracie” />

===

2. 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 MIT”).

Links

3. Website links that are not underlined can cause problems for some users.

FAIL: Removing the underline from links makes it difficult for color-blind users to see them.

SOLUTION: Remove the text-decoration:none property from your link styles, or introduce the link underline style on both mouse hover and keyboard focus actions.

PASS:

CSS: Here is the basic declaration to add to your CSS stylesheet to activate all link underlines throughout your website:

a {text-decoration:underline;}

CSS: Here is the basic declaration to add to your CSS stylesheet to underline the link when a user hovers over a link with a mouse or activates keyboard focus when “tabbing” to the link:

a:hover, a:focus {text-decoration:underline;}

===

4. Links that use general text like can cause problems for folks using screen readers.

FAIL: <a href=”instructions.html”>Click here</a>

When a screen reader comes across a link that reads as “click here” or “learn more,” the visually-impaired person listening to the content may not have sufficient information to determine if the link is worth following or not.

SOLUTION: Use an “action” phrase that alerts the user what to expect if he/she follows the link.

<a href=”instructions.html”>How to use the new accessible web tool</a>.

===

5. Provide a Skip Navigation link that allows keyboard and screen reader users to skip over groups of links.

FAIL: The inability to skip repetitive links can be a problem for those with mobility disabilities who use the keyboard to navigate instead of a mouse.

SOLUTION: Add a simple hyperlink at the very beginning of your HTML page:

<a class=”skiptomain” href=”#main-content”>Skip to main content</a>

To prevent sighted users from seeing the Skip to main content link at the top of the page, add this declaration to your CSS file:

.skiptomain {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}
a.skiptomain:active,
a.skiptomain:focus,
a.skiptomain:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}

This will position the Skip to main content link 1000px off the screen for sighted users, without hiding it from screen readers. When you hit the tab key the first time, the link will receive focus and be visible at the top left corner of the page.

Color

6. Don’t Use Color As Part of Your Instructional Content

Image of a red button and a green button

FAIL: If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.

One color blindness condition is called protanopia. People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.

Here’s how individuals with protanopia see the red & green buttons:

protanopia-color-example

SOLUTION: Change the instruction so it does not make use of color.

PASS:

Press the button on the left for more information

Learn about the different types of color blindness affecting some users.

===

7. Ensure that foreground and background colors have enough contrast.

Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.

FAIL:

color-contrast

SOLUTION: Use the WebAIM Color Contrast Checker to ensure the colors you are using are accessible.

PASS:
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text

CSS

8. Justified text causes “rivers” that make text difficult for dyslexics to read

FAIL:

River Effect in Justified Text

IMAGE SOURCE

SOLUTION: Align all text to the left

===

9. Use relative rather than absolute units in CSS property values.

Absolute units are CM, MM, IN, PC and PT. When used with fonts PX is also considered an absolute unit, because it isn’t relative the user’s preferred font size. Low-vision users, and a lot of people over 50, increase the browser default font size to make text easier to read. Absolute units ignore this user choice.

FAIL:
p {font-size: 16px;}

SOLUTION:
Relative units like EM and percentages re-size according to the screen size and/or user’s preferred font size, and work on a large range of devices.

PASS:
p {font-size: 1.000em;}

Convert pixels to EMs with online converter at PXtoEM.com

===

10. Use semantic markup like STRONG instead of using the CSS font-weight property.

FAIL:
<span style=”font-weight: bold;”>This is text</span>

SOLUTION: Use the STRONG element instead of the SPAN element for bold text.

PASS:
<strong>This is text</strong>

===

11. Use italics sparingly.

FAIL: People who are dyslexic have a difficult time reading italicized characters.

SOLUTION: Use the STRONG element for emphasis instead .

PASS:
<strong>This is text</strong>

===

Data Tables

12. Identify row and column headers in data tables using TH elements.
Data tables allow screen reader users to understand column and row relationships.

FAIL: Without TH, screen readers apply heuristics to decide whether a table is a layout table or data table. These heuristics vary greatly between screen readers, and are affected by browser being used, window size, and font size (so the outcome is very unpredictable without TH).

SOLUTION: If a data table has headers marked up using TD, then change these to TH. If a data table has no headers, add TH elements describing each row and/or column. What does scope attribute do? This attribute specifies the set of data cells for which the current header cell provides header information.

PASS:

employee-table

<table class=” alignleft”>
<tbody>
<tr>
<th scope=”col”>Employee Name</th>
<th scope=”col”>Employee Code</th>
<th scope=”col”>Project Code</th>
<th scope=”col”>Employee Designation</th>
</tr>
<tr>
<td>Mary Smith</td>
<td>31454</td>
<td>453781</td>
<td>Web Developer</td>
</tr>
<tr>
<td>Bob Jones</td>
<td>76901</td>
<td>454489</td>
<td>Copywriter</td>
</tr>
</tbody>
</table>

===

Lists

13. Mark up lists and list items properly.

FAIL: Avoid using images as bullets in lists in the HTML file.

SOLUTION: Remove the image bullets from HTML and use CSS to generate bullets

PASS:

list-style-image:url(‘images/bullet.png’);

===

Forms

14. Avoid using select menus that allow the user to choose multiple items.

FAIL: Not all browsers provide intuitive keyboard navigation for multiple select menus.

SOLUTION: Long select menus with more than 11 options should be coded with option groups and labels.

PASS:

<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>
</select>
<select name=”favfood”><optgroup label=”Bread”>
<option value=”5″>Sourdough</option>
<option value=”6″>Wheat</option>
<option value=”7″>Rye</option>
<option value=”8″>White</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Entree”>
<option value=”9″>Beef</option>
<option value=”10″>Chicken</option>
<option value=”11″>Fish</option></optgroup>
</select>
<select name=”favfood”><optgroup label=”Cheese”>
<option value=”12″>American</option>
<option value=”13″>Swiss</option></optgroup>
</select>

===

15. Don’t use a select list if it contains less than 5 options

SOLUTION: Select lists with less than 5 options should be coded as radio buttons.

PASS:

Radio button choices for a purchase

<fieldset>
<legend>Choose a purchase method:</legend>
<input id=”creditcard” name=”purchase” type=”radio” value=”creditcard” />
<label for=”creditcard”>Credit Card</label>
<input id=”check” name=”purchase” type=”radio” value=”check” />
<label for=”check”>Check</label>
<input id=”cash” name=”purchase” type=”radio” value=”cash” />
<label for=”cash”>Cash</label>
</fieldset>

===

Content Design

16. Long paragraphs of text are difficult for some users with disabilities to read and comprehend

SOLUTION: Keep your sentence length down to an average of 15 to 20 words. Don’t start a new sentence at the end of a line, as that makes it more difficult to follow.

===

Keyboard-only Access

17. Test to be sure all your Web content is accessible using only the keyboard.

FAIL: Users with visual disabilities and limited movement cannot use a mouse to navigate a Web page, as this requires hand and eye coordination.

SOLUTION: Be sure your website is coded so that users can navigate all content on a page via keyboard “tabbing”.

===

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: 59 tests covering 15 guidelines.

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

WEB DEV ACCESSIBILITY TIP: Use Relative Rather Than Absolute Units in CSS Property Values

abstract pixel art design wallpaper background backdrop

Low-vision users, and a lot of people over 50, need to increase the browser default font size to make text easier to read.

If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text.

Relative units like EM and percentages “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

Using relative units helps satisfy the WCAG 2.1 Guideline 1.4.4 Resize text Level AA.

Need to convert pixels to EMs?

Use this handy online tool, developed by Brian Cray: http://pxtoem.com

===

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

===