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:
This is a guest post; a slightly modified letter from Lainey Feingold. Thank you Lainey!
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.
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,
Law Office of Lainey Feingold
Author, Structured Negotiation | A Winning Alternative to Lawsuits http://lflegal.com/
Follow on Twitter @LFLegal
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.
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
Missing form input labels
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.
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.
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:
Implementing an accessibility linter (such as Axe by Deque).
– Detectable WCAG failure rate rose from 97.8% to 98.1% in one year. – Average errors per page = 61. – Pages with ARIA present averaged 60% more errors. – 1/3 of images missing alt text. – Over 1/2 of inputs unlabeled.
Seriously, developers, get an HTML validation linter in your workflow (or check your static HTML templates) and catch a bunch of this low-hanging fruit.https://t.co/6YpraDJy1g This is an embarrassment to the entire software development industry and you should feel bad.
With the update to the @webaim's Millions report showing website accessibility getting demonstrably worse, I find myself once again wondering why @____lighthouse's #a11y score does not factor into search ranking scoring the way other metrics do. https://t.co/DVQreqax9g
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.”
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.”
<select> your poison by Sarah Higley @codingChaos.
“recreating the native behavior of a <select> element is impossible: its underlying semantics differ across platforms; its keyboard behavior is inconsistent; its mobile presentation and behavior is entirely different from desktop.”
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.”
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.”
“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.”
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”