code css

We Don’t Need A Native .visually-hidden

Some web professionals say that The Web Needs a Native .visually-hidden. I respectfully disagree, particularly as a matter of priority.

A visually-hidden CSS class, as it’s often named, is used to visually hide textual content from sighted users but expose it to screen reader users. This is a common practice in web development, too common in my opinion. Another name for the class you’ll come across is “sr-only” (which I believe stemmed from Bootstrap but was modified in version 5). The properties of the class are complex and implemented in different ways.

So technically, this may be true—a native HTML attribute for the same functionality would be somewhat useful. But it’s not anywhere near the importance of other, more foundational needs. My point is that, in the big picture, a native visually-hidden should be much, much lower on the priority list. So low that it’s a bit discouraging to hear folks requesting it.

What the web really, greatly needs is the following:

  • Web developers who practice semantic HTML.
  • Designers who don’t want to customize every single UI element.
  • VPs who prioritize usability and accessibility.
  • Designers and VPs who prioritize usability and accessibility over the latest visual design trends (which most of the time cause accessibility problems).
  • A lot less adverts, pop-ups, notifications, and other UI shyte.

These fundamental needs will go tremendously further for usability and accessibility than any HTML attribute, ARIA attribute, automated testing tool, Figma plugin, etc.

Also, as web professionals, we don’t want to encourage the use of visually hidden text but discourage the use — in favor of universal design, creating the same design and experience for all users. This will also save a lot of time and hassle during the SDLC.

Further reading:

css heading javascript presentations

Slides from DC meetup: How To Build An Accessible Web Application

Web Axe author Dennis Lembree presented “How To Build An Accessible Web Application” last week (via Skype) at the Accessibility DC meetup (on Twitter at @AccessibilityDC). Examples from the Easy Chirp website are given throughout the presentation. Here are the slides.

How To Build An Accessible Web Application

View more presentations from Web Axe

conference css event jobs law podcast twitter

Podcast #91: Game Plan, CSS, Lawsuits & Events

Dennis and Ross discuss the “Accessibility Game Plan”, a couple good CSS tips, upcoming events, and a few lawsuits, and more!

Download Web Axe Episode 91 (Game Plan, CSS, Lawsuits & Events)

Transcript of podcast 91

What’s New

The Game Plan

Careful with CSS


Conferences & Events


color css javascript podcast twitter wcag2 yahoo

Podcast #73: Bandwidth & Download Time

Dennis and Ross provide nearly an hour of news, knowledge, and fun!

Download Web Axe Episode 73 (Bandwidth & Download Time)

Michigan and Web Dudes, Lab, and Accessible Twitter

Web Accessibility News

Main Segment

The Issue & Statistics
  • Web accessibility is about providing content for everyone; even if the user is unable to have access to a broadband internet connection.
  • Economic issue; many people simply can’t afford broadband.
  • Mobile–light and fast web sites can be more easily viewed on you phone!
  • Average Web Page Size Triples Since 2003 (study from 2003-2008 data)
  • In the U.S. in March 2008, users connecting at 56Kbps or less now make up 11.18% of active Internet users.
  • CWA Communications reported that the “median real-time download speed in the U.S. is a mere 2.3 megabits per second (mbps). The best available estimates show average download speeds in Japan of 63 mbps, in South Korea of 49 mbps and in France of 17 mbps.

Growth of Average Web Page Size and Number of Objects

Chart shows that from January 1995 to January 2008, there was a tremendous growth of average page size and average number of objects. The average page file size went from 14.1k in 1995, to 93.7k in 2003, to over 312k in 2008. The average number of page objects went from 2.3k in 1995, to 25.7 in 2003, to nearly 50 in 2008.

Related WCAG Guidelines

WCAG 2.0 Principle 4: Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

WCAG 1.0 Intro states:

user may have a text-only screen, a small screen, or a slow Internet connection and users may have turned off support for images (e.g. due to a slow Internet connection)

Greatly outdated web portion of Section 508 doesn’t mention internet connection speed.

What You Can Do
  • Use progressive enhancement.
  • Optimize images; use sprites.
  • Write clean code.
  • Use external CSS and JavaScript files. For CSS, use not @import.
  • Combine multiple CSS files into one. Same for JavaScript.
  • Use media domains.
  • Minify CSS and JS files.
  • Setup your server to send pages and files compressed.
  • Cache dynamic data and Ajax when appropriate.
More from the Big Boys