ACCESSIBLE CSS: Focus on the Outline

Square focus on one button in a row of buttons

Visible focus is an integral part of website accessibility.

Note the WCAG 2.1 Guideline:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Who Does Visible Focus Help?

  • People who navigate by keyboard only.
  • People with visual or cognitive impairments who need a clear indication of where they are on a web page, regardless if they use a keyboard or mouse.

Visible focus should always be active, and is indicated via a visible border that surrounds web page objects, such as links, form fields, etc.

How to Test

To check your website’s current visible focus indicators, use the tab key to navigate to all page elements. As each element receives focus, there should be a clearly visible outline around the element.

Solution:

1) Adjust your CSS

Go through your CSS files and delete all declarations that shut off outlines:

{outline: none;} or {outline: 0;}

2) Re-style the focus declarations in your CSS.

Here is an example on how to add visible focus to your website links:

a:focus { outline: thin dotted; }

===

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

===

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 BUTTON CODE: Check Out the Button Pal

Different Color Buttons

Want to use simple, standard accessible button functionality on your website? Andy Bell provides all the HTML, CSS and JavaScript you need to reset the default button styles for all browsers. It’s a great head start for styling accessible buttons.

Check out Andy Bell’s CodePen for a great start when creating accessible button 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

===

WEB DEV ACCESSIBILITY TIP: Underline Those Text Links

Sign with word necessary

Hypertext 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 style sheet to activate all link underlines throughout your website:

a {text-decoration:underline;}

CSS: Here is the basic declaration to add to your CSS style sheet 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;}

===

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

===

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

===

ACCESSIBLE CSS: Strong vs Font-Weight – Which to Use?

Decorative Floral Print

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

EXAMPLE CODE:

<span style=”font-weight:bold;”>Sample Heading Text</span>

REMEDIATION:

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

<strong>Sample Heading Text</strong>

===

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: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints

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

===