Resources for developing accessible cards/tiles

The card pattern (also know as tiles and blades) has become quite popular over the last several years. There are many accessibility challenges that may arise quickly when web developers attempt to build them including:

  • Providing keyboard access
  • Providing an adequate visible focus indicator
  • Link text that’s not overly verbose for screen reader users
  • Using correct semantic markup, especially for the heading
  • Maintaining proper reading order
  • Not duplicating content

Here are a several great resources on building accessible cards/tiles and address these issues:

collage of 3 tiles

Digital Accessibility Jobs, June 2020

Many more tremendous opportunities in the field of digital accessibility.

As always, watch out for more job listings on Twitter via @a11yJobs, @EasyChirp, and me @WebAxe.

Jobs written on newspaper with magnifying glass

Accessibility Resources for Challenging Times—a letter from Lainey Feingold

This is a guest post; a slightly modified letter from Lainey Feingold. Thank you Lainey!

Dear Web,

I hope this message finds you, your families and colleagues, and all those you love safe and as well as possible during these challenging times, the COVID-19 (Coronavirus) pandemic. I write to share some upcoming accessibility learning opportunities and resources.

  • A Future Date Conference is a free three day virtual gathering on April 21-23 offering many accessibility sessions cancelled this past spring. It will include the Digital Accessibility Legal Update that didn’t happen at CSUN.
  • John Slatin AccessU will be virtual this year, with four packed days of accessibility goodness in May. You can catch the Digital Accessibility Legal Update on May 14.
  • The free Introduction to Web Accessibility Course from the Web Accessibility Initiative of the W3C and Unesco has been extended on edX through May 30. So valuable!
  • I’ve had the (great) opportunity this past year to serve as a subject matter expert on accessibility issues for Disability:In. In this role I helped with a just-released resource titled Digital Accessibility and Remote Work. It is part of the organization’s COVID-19 Response series. Feedback welcomed.

For years I have said in my talks and trainings that digital accessibility is a civil right of disabled people. The truth of this has never been clearer.

This pandemic teaches that remote work, distance learning, and social connection is not possible without accessible information, software and technology. And this global health crisis underscores that accessible information can be a matter of life and death.

The global pandemic is frightening. Yet every day I am reminded of the importance of the work we all do to make the digital world inclusive. Thank you for the part you play.

Stay safe and stay well,

Lainey

Law Office of Lainey Feingold
Author, Structured Negotiation | A Winning Alternative to Lawsuits
http://lflegal.com/
LF@LFLegal.com
Follow on Twitter @LFLegal

Law Office of Lainey Feingold | Structured Negotiation | Disability Rights

The WebAIM Million—Updated

The WebAIM Million report, an accessibility analysis of the top 1,000,000 home pages, has been recently updated. Here’s a summary of the update from WebAIM. Sadly, per the report data, the state of web access hasn’t improved much, and has actually worsened overall.

The number of errors increased 2.1% between February 2019 and February 2020.

Below are key points, notes, a call to action, and related tweets.

WebAIM web accessibility in mind

Key Data Points

  • Detectable WCAG failure rate rose from 97.8% to 98.1%.
  • The most common errors:
    • Low contrast text
    • Missing alternative text for images
    • Empty links
    • Missing form input labels
    • Empty buttons
    • Missing document language
  • Home pages with ARIA present averaged 60% more errors than those without.
  • 56% of the 3.4 million form inputs identified were unlabeled (either via <label>, aria-label, or aria-labelledby).
  • Only 128,054 (6.8%) of the tables had valid data table markup.
  • Website homepages using Vue.js had a whopping 76.2 errors per page.
  • 10.8% of home pages had a “skip” link present. However, 11.1% of these links were broken.

Notes

  • This study was done using an automated tool which is capable of detecting only a portion of actual accessibility issues/errors. Actual accessibility errors is certainly much higher. (Even after considering that there may be some false positives from automated testing.)
  • When we should be simplifying content, home page complexity increased 10.4% in 12 months, from an average of 782 elements per page to 864.
  • I wrote about the first report and related issues last year — About the HTML Epidemic, WebAIM “Million” Report, and Teach Access (March 2019).

Call for Action

Developers need to do better with accessibility, and using semantic HTML. The poor results of this report are just not acceptable; it’s poor craftsmanship and poor quality of work. Devs can start improving by:

Tweets

Digital Accessibility Roundup February 2020

So many great articles around digital accessibility lately! Here are some (with author and quote/summary) which I thought were very useful.

  • Link Targets and 3.2.5 by Adrian Roselli @aadrian.
    “Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text.”
  • [ARIA] Roles and relationships by Sarah Higley @codingChaos.
    “even small mistakes in using these roles can take a user on a very bad trip”
  • Squarespace, Wix, & Weebly: Accessibility Review by @TerrillThompson.
    “For accessibility, avoid Weebly. Both Squarespace and Wix are capable of creating accessible sites, but the user has to be looking to do so—it isn’t gonna happen by default.”

  • On custom select dropdowns:
  • Studies/statistics on current state of web accessibility:
    • Higher Ed in 4k Project by PopeTech.
      “…93.331% of pages had detectable WCAG violations. There were a total of 7,464,465 detectable errors found or 23.8 errors per page.”
    • Click-Away Pound Survey (2019) by @CAPsurvey.
      “In 2016, the survey found that more than 4 million people abandoned a retail website because of the barriers they found, taking with them an estimated spend of £11.75 billion. In 2019, that lost business, the ‘Click-Away Pound’, has grown to £17.1 billion.”
  • My Priority of Methods for Labeling a Control by Adrian Roselli @aadrian.
    Adrian explains why explicit HTML label association is best.
  • Operating System and Browser Accessibility Display Modes by Eric Bailey @ericwbailey.
    “Five such modes are Dark Mode, Increased Contrast Mode, Inverted Colors Mode, Reduced Motion Mode, and High Contrast Mode. Following is an explanation of each of these mode, who can benefit from it, how to enable it on your device or browser (if supported), and how to work with it in code.”
  • Checking 3rd Party Vendors’ Product Accessibility by @vavroom via @knowbility.
    • “You may have difficulty finding a fully accessible solution. Do take the time to run some simple tests to get a better feel for the product. The more precise your questions and requirements about accessibility, the more likely you are to be able to determine if a product meets your needs. And the more protected you’ll be should the product fail to meet expectations.”
    • Also: Vendor Responsibilities for Accessibility by Jay Wyant @jay_wyant.
  • Pixels vs. Relative Units in CSS: why it’s still a big deal by Kathleen McMahon @resource11.
    “Remember, users really do change their settings under the hood, and we should be maintaining users’ control over their own browsing experience. If you use relative CSS units for your typography styles, you can maintain the fidelity of your layouts without negatively impacting the needs of your users.”
  • How accessible is the HTML video player? by Scott Vinkle @svinkle.
    “relying on native video players should be used with caution…I found most to have poor keyboard and screen reader support, which may lead to frustrated users”
  • And finally, congrats @WebAIM on your 20-year anniversary! Thank you for your tremendous leadership in web accessibility.
dog herding group of sheep
Sheepdog “rounding up” some sheep.