WEB DEV ACCESSIBILITY: 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

===

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

===

ONLINE TOOL: Create an Accessibility Statement

Colorful blocks spelling out the word attention

Accessibility statements are important for several reasons:

  • Show your users that you care about accessibility and about them
  • Provide them with information about the accessibility of your content
  • Demonstrate commitment to accessibility, and to social responsibility

The W3C offers an online tool that can help you create an accessibility statement for your own website, mobile application, or other digital content. You can download the statement you created, and further customize, style, and brand it.

Click here to generate an accessibility statement

===

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 FILE NAMES: Please…No Spaces and/or Special Characters

Brick wall displaying dash pattern of bricks

Folks who use screen readers download documents so they can read them. The first piece of information they encounter is the file name. A unique, descriptive file name helps the user understand the information contained in the document.

Best Practice: To be accessible to screen readers, file names should not contain spaces and/or special characters.

File naming conventions are important for web pages and directories, as well as for downloadable files such as PDFs, Word documents, and Excel spreadsheets.

Here are some tips to remember when naming your files:

  • Don’t start or end your filename with a space, period, hyphen, or underline.
  • Keep your filenames to a reasonable length and be sure they are under 31 characters.
  • Always use lowercase.
  • Don’t use spaces and underscores; use a hyphen instead.

Don’t use the following special characters in your file names:

# pound
% percent
& ampersand
{ left curly bracket
} right curly bracket
\ back slash
< left angle bracket
> right angle bracket
* asterisk
? question mark
/ forward slash
blank spaces
$ dollar sign
! explanation point
‘ single quotes
” double quotes
: colon
@ at sign

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

===

WEB ACCESSIBILITY: The Problem with Popups

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?

This disorients low vision users who cannot see the new window appearing.

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

===

WEB DESIGN: Be Sure To Accommodate the Dyslexic Reader

''Dyslexia'' word with wooden letters on dark background

Dyslexia is a general term for disorders that involve difficulty in learning to read or interpret words, letters, and other symbols, but that do not affect general intelligence. It is the most common cause of reading, writing, and spelling difficulties.

Of people with reading difficulties, 70-80% are likely to have some form of dyslexia. It is estimated that between 5-10% of the population has dyslexia, but this number can also be as high as 17%.

Here are some CSS tips to consider when designing web content to accommodate the dyslexic reader.

Beware Italics
Italicized characters can be difficult for dyslexics to read.

Column Widths
Use narrow column widths (60 to 80 characters). Tracking lines of unbroken text across a page can be difficult.

No Justification
Never use justified text. It causes “rivers” that make text difficult for dyslexics to read.

River Effect in Justified Text

Use Sans-serif Fonts
Serif fonts (like Times Roman) have “feet” at the end of the letter strokes. This can be a nightmare for dyslexics to read because the letters look like they are all connected. Use sans-serif fonts.

See the difference between Serif vs Sans-serif typefaces

===

Resource:  OpenDyslexic

OpenDyslexic is a new open source font created to increase readability for readers with dyslexia. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from dyslexic users. OpenDyslexic is free for Commercial and Personal use.
Download: http://opendyslexic.org/

===

Read More Accessible Website Design Advice: Accessible Best Practice: Don’t Use Color As Part of Your Instructional 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

===

WEB DEV ACCESSIBILITY TIP: Text Display Direction Switcheroo

Multi-colored arrows pointing right to left

The dir attribute is used to set the base direction of text for display. It is essential for enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana. Numerous different languages are written with these scripts, including Arabic, Hebrew, Pashto, Persian, Sindhi, Syriac, Dhivehi, Urdu, Yiddish, etc.

The lang attribute specifies a language written right-to-left, so dir=rtl is needed to change the text layout direction.

SOLUTION: Add dir=”rtl” to the html tag any time the overall document direction is right-to-left. This sets the base direction for the whole document.

EXAMPLE FOR CONTENT DISPLAYED IN ARABIC:

<!doctype html>
<html dir=”rtl” lang=”ar”>

[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

===

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

===