Category: Accessible Website Design Best Practices

ACCESSIBLE WEB DEVELOPMENT: How to Allow Pinching to Zoom Text

Posted on by Mary Gillen

Illustrations of human hands pinching text on mobile phones to increase the type size

According to the WCAG 2.1 – 1.4.4 Resize text (Level AA) Guideline, a user should be able to resize text to 200% without loss of content or function.

The action of “pinching to zoom” text on a mobile phone or tablet is often used by older individuals or users with low vision.

Question
How can you make sure that users can use the “pinching to zoom” technique when viewing your responsive website content?

Answer
Use the correct viewport META tag within the HTML5 header code.

The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a desktop monitor screen.

Here is the standard meta tag code for a viewport:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>


===
width=device-width: width of the screen in CSS pixels at a scale of 100%
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Flag which allows the device to zoom in or out. (value= yes/no).

===

Here are the attributes NOT to use in the viewport META tag as well as the values to change:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes“>

By eliminating the minimum and maximum scale attributes and setting the user-scalable value to “yes”, the user can then pinch and zoom the text content to a size they can comprehend.

===

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

Posted on by Mary Gillen

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

===

HTML5: Check the Current Accessibility Support Across Major Browsers

Posted on by Mary Gillen

Illustration of Web Development Tools

Check out HTML5 Accessibility, a website that tests which new HTML5 features are accessibly supported by major browsers. This includes if they are keyboard accessible, mapped to the platform accessibility APIs, and if any accessibility related features are supported. An accessibly supported feature means it is usable by people who rely on assistive technology, without developers having to supplement with ARIA or other additional workarounds.

Each feature has its own test page, including the pass criteria, and spec references for the required mapping from HTML feature to the platform accessibility layer.

Go to HTML5 Accessibility now.

===

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: Designing for Brainpower Limitations

Posted on by Mary Gillen

Concept illustration of four human brains

When a person experiences short-term memory loss, he or she can remember incidents from 10 years ago but is fuzzy on the details of things that happened 10 minutes prior.

According to User Advocate and UX expert Jakob Nielsen, Ph.D., “short-term memory famously holds only about 7 chunks of information, and these fade from your brain in about 20 seconds.”

Short-term memory limitations dictate a whole range of Web design guidelines. Nielsen advises:

  • “Response times must be fast enough that users don’t forget what they’re in the middle of doing while waiting for the next page to load.
  • Change the color of visited links so that users don’t have to remember where they’ve already clicked.
  • Make it easy to compare products, highlighting the salient differences on both the initial category page and in special comparison views. If you require users to move back and forth between separate product pages to deduce differences, they’ll get confused – particularly if the pages present the information in an inconsistent format.
  • Instead of using coupon codes, encode offers in special links embedded in your email newsletters and automatically transfer the coupon to the user’s shopping cart. This has two benefits:
    • The computer carries the burden of remembering the obscure code and applying it at the correct time.
    • It eliminates the “enter coupon code” field, which scares away shoppers who don’t have coupons (and who refuse to pay full price when the checkout flow blatantly signals that other users are getting a better deal).
  • Offer help and user assistance features in the context where users need them so they don’t have to travel to a separate help section and memorize steps before returning to the problem at hand.”

[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

===