WordPress Accessibility Day 2024 kicked off on October 9th and ran for 24 consecutive hours. This free annual conference provides educational talks from a global, diverse community of speakers for making the web more accessible for everyone. In 2024 there were 2,248 registrants from 79 countries. These counts continue to grow each year as accessibility conformance becomes increasingly more relevant due to national governments introducing new legislation each year.
This fall I attended nine talks on behalf of Razorfrog’s team. Similar to last year’s WPAD 2023 roundup, my goal for this post was to share a few insights from each session to help process this sea of information. Below you’ll find presentation titles linked to their their respective WPAD 2024 overview pages that include video recordings and transcripts. I highly recommend watching the ones that interest you as there’s lots of content covered beyond what I’ve prepared below. Let’s begin!
Key takeaways from this year’s talks
Accessibility is a Civil Right: The Digital Accessibility Legal Landscape for the WordPress Community
Speaker: Lainey Feingold (she/her), Disability rights lawyer, author and public speaker, Law Office of Lainey Feingold
On April 24, 2024, The Department of Justice passed a new rule to update regulations for Title II of the ADA regarding accessibility of web content and mobile apps provided by state and local governments. This includes public schools, public higher education colleges and universities.
WCAG 2.1 AA is set to become mandatory for all state and local government websites and third-party services (including social media) based on their sizes. For larger states/governments with 50k people or more, the deadline is set for April 24, 2026. For smaller states/governments with less than 50k people, the deadline is April 26, 2027.
The ADA’s fact sheet specifies exceptions which include archived web content, pre-existing static resources, password-protected documents and pre-existing social media posts. It will not be necessary to go back and revise these items.
This rule took fourteen years to achieve. Unfortunately, accessibility regulations may be rolling back beginning in 2025 as the head of all these agencies are appointed by the president.
Read Lainey’s article for more details and ongoing updates on this ruling.
How to Remediate Accessibility Issues in WordPress
Speaker: Cam Coulter (they/them), Digital Access Specialist, Santa Clara University
Cam addressed ways to approach accessibility remediation for plugin-level and theme-level issues.
Plugin remediation often require changing default settings or using CSS overrides when necessary. If a plugin is fundamentally inaccessible, it’s best to file an accessibility bug with the developer. If this doesn’t work, it’s time to find a replacement.
Themes may have a variety of issues. These include insufficient color contrast ratios, inline links that only use color to indicate they’re interactive, or issues within the header or footer. They advise reaching out to the theme developer to address these instances or to switch to an accessible theme to avoid ongoing problems. In general it’s ideal to use a child theme to resolve commonly occurring CSS selector issues.
When deciding between :focus and :focus-visible pseudo-selectors, the latter is preferable as the styling doesn’t show when the element is clicked/tapped. If it is not specified, the user agent (assistive technology) styling applies :focus to interactive elements on the page. This adds an outline or “focus ring” which some folks find to be undesirable.
Agile Accessibility: Building Inclusivity into the Product Roadmap
Speaker: Nasah Kuma (she/her), Front-end engineer
Nasah outlined various methods of accessibility requirements gathering which include user reviews, accessibility personas, focus groups, surveys and questionnaires and usability testing.
She mentioned everyone on a team can contribute to accessibility, regardless of their role, and that accessibility is easiest to achieve from the start as it takes times to incorporate into your product.
For further reading, Nasah recommends the Agile Accessibility Handbook by Dylan Barrell.
Practical Text Accessibility Tips for Content Creators
Speaker: Alice Orru (she/her), Freelance Content Writer
Accessibility writing is necessary for those with visual impairment, cognitive disabilities, dyslexia or specific neurodevelopmental conditions, other physical cognitive and social conditions and folks that are in a hurry.
Alice outlined the 4 principles of accessibile writing according to POUR (Perceivable, Operable, Understandable, Robust; the main principles of web accessibility):
Perceivable – write quality alt text for images, video captions should be legible, high contrast and in short sentences.
Operable – use table of contents for navigating long content, avoid unclear anchor text such as “here”, do not use “read more” for buttons.
Understandable – concise, plain language with familiar words, active voice, simple sentence structure, short sentences, simple lists.
Robust – use sequential heading structure for screen reader-friendly heading maps, assistive technologies cannot read text created by fancy font generators (due to using unicode characters rather than actual fonts), emojis do not convey any meaning and should not be used to replace words.
During the Q&A, someone inquired about how to describe maps in an accessible way. Alice mentioned details should be included within the page to supplement the map, and that finding a balance of how much to write is important.
Accessible Firebrand: “Why can’t I use my brand color there, and if not there, then where?”
Speakers:
Mark Alvis (he/him), Brand + UI Designer, SeaMonster Studios
Deneb Pulsipher (he/him), Captain Accessible, SeaMonster Studios
A branding professional’s priority is to deliver a unique, memorable and consistent brand experience primarily through color. In contrast, an accessibility professional’s priority is to create fully accessible content for all users equally.
It’s problematic to use some brand colors in most situations for accessible content. Brand colors are for packaging, products and images, whereas content colors are for website text. Separating the two strategically is important.
Statistically, 49.75% of the population has standard eyesight. More than half of the population (50.25%) has some kind of visual impairment: 16% aging retinas (leads to decreased contrast sensitivity), 30% Myopia (nearsightedness or blurry vision at a distance) and 4.25% color blindness (1-in-12/8% of men; 1-in-200/0.5% of women). The data shows it’s crucial to cater to these customers. Color step ramps that utilize tints and shades are very useful for converting brand colors to content colors.
Original brand colors may be used anywhere that’s not content-bearing (separate from website text). This is generally up to your brand team’s discretion to define. The end goal should be to keep the content color fully accessible.
During the Q&A, someone asked if you can add text shadow or strokes behind text to make it accessible. Mark mentioned from a design school perspective this isn’t something that’s encouraged. Deneb said technically from an accessibility perspective it does pass. It’s better to not have text over an image that’s too light or dark to be legible, and best to separate them.
Captchas and Other Gotchas: Make Sure Your Secure Website is Accessible
Speaker: AmyJune Hineline (she/her), Certification Community Architect, The Linux Foundation
It’s important to remember there are many different types of disabilities. They can be situational (bright lights), temporary (dilation by an eye doctor), permanent (amputations) or episodic (depression).
The problem with CAPTCHAs is that no single type works for everyone. Timer versions typically do not provide enough time for people with disabilities. For time-based one-time passwords versions, it would be better to turn off or adjust the timing as authentication apps create many issues for disabled folks.
Identify verification is also problematic. Multi-factor authentication (MFA) via SMS messages, emails, apps and tokens can be very difficult for disabled users to shuffle between.
It’s best to always provide your users with alternatives. They should be able to copy and paste, use external references for their details and enter in data from documents. Culturally-specific CAPTCHAs should be avoided.
WordPress authentication alternatives include Two-Factor and Login by Auth0.
WordPress captcha alternatives include Advanced Google reCAPTCHA and honeypot for Gravity Forms and Contact Form 7.
“When you call something an edge case, you’re really just defining the limits of what you care about.”
– Eric Meyer
CSS Tiny Tips: Collection of CSS Tips for Making Websites Easier to Read
Speaker: Gen Herres (she/her), Developer, Easy A11y Guide
There’s many CSS basics and overrides to be aware of when developing websites.
The CSS:has() pseudo-class is helpful for targeting specific selectors, properties and values. How it work is this: if the parent element has the specific child, then execute the CSS that follows. Note that it does take on the specificity of the most specific selector in its arguments similar to :is() and :not(). Below is an example:
html:has(body.text-size:large;)The !important property is a valuable tool and last resort measure that is reserved for overriding all previous styling rules for a specific property on an element. It is typically used for inline styles. Only javascript can override an inline !important. Developers should be more intentional about CSS specificity and refrain from using !important whenever possible as it makes CSS code more confusing and debugging harder.
Browser defaults exist for a reason. The browser is best left alone and should look the same as what users know and trust. People arrive at your website in the context of all the other websites they’ve visited. They expect the browser’s scroll bar, rate of scroll speed and cursor to have a specific look and user experience. Leave them be. If your website doesn’t meet these expectations, the user usually leaves.
Developers should be mindful of making text easier to read. When setting your line-height, you should use a reasonable relative line height. Pixels should not be used. The relative value specified is used to multiply the font-size to determine the resulting line height. This way, if a user adjusts the browser’s zoom level, the line height scales proportionately with the adjusted font size.
body, button, input, select, textarea {
line-height: 1.5;
}Making links easier to see is a great practice. Adding an underline offset to text links can be helpful to avoid the underline being broken by letters’ descenders. The underline color itself can also be changed to provide more contrast with the link’s text color.
a {
text-decoration: underline;
text-underline-offset: 8px;
text-underline-color: purple;
}Lastly, helper classes are recommended to help speed up your workflow. They are custom CSS classes that are pre-defined and readily available to use in any element on your site. Examples of helper classes:
.white-text {color: #fff;}
.extra-large-text {font-size: 4rem;}
.z0 {z-index: 0;}Navigating Neurodiversity: Creating Websites with Inclusivity in Mind
Speaker: Christina Workman (she/her), Frontend Technical Manager, americaneagle.com
Neurological disabilities affect our nervous system, including our brain, nerves and spinal cord. The term “neurological” refers to the brain’s structure and activity, and encompasses cognitive disabilities.
Cognitive disabilities are impairments in mental processes like memory, thinking, language and reasoning. The term “cognitive” refers to how the mind processes information and experiences via the systems involved.
Neurodiversity encompasses all of the following conditions:
ADHD – difficulty focusing, easily distracted, short-term memory, challenges with decision making.
Autism – literal thinkers, direct to the point communication, sensory processing overload, preferring consistency, dependability and uniformity.
Learning disabilities – reading (dyslexia), writing (dysgraphia), processing numbers (dyscalculia).
Memory impairments – short or long term, dementia, concussion, PTSD, working memory.
Mental health – our cognitive, emotional and behavioral well-being (how we think, feel and act). Conditions include paranoia, schizophrenia, depression and anxiety which cause difficulty focusing and processing/understanding information. Medication side effects may lead to blurred vision, hand tremors, etc.
Seizure and vestibular (inner ear/brain) disorders – epilepsy, migraines, nausea, dizziness.
It’s best to stick to WCAG technical standards and norms to ensure your website is usable by neurodiverse individuals. Christina advises designers and developers not to be over-creative and not to expect users to understand novel designs.
Accessible Design: WCAG or Trendy? No, WCAG AND Trendy!
Speaker: Zsolt Edelényi (he/him), Certified Professional in Web Accessibility, Precognox LLC
With accessible web design, it’s best to know your users and understand their user stories. What are their capabilities and how do they access content? Understand your role is to create solutions that are mindful of those with different abilities.
An accessible design process involves constructing the best processes and tools. Organizations should adopt the shift left concept which means having accessibility in mind from the start. Designers need to be trained and have the right knowledge in order to reduce costs. Bringing in an accessibility expert is also an option.
Trendy design and accessibility can coexist. Accessibility is a new way of designing a website that can incorporate many of the same concepts. While inclusive color palettes are essential, designers are still welcome to use trendy web design elements such as gradients, shadows, high quality photos, parallax scrolling and even animations (to an extent). Basic UX principles still apply, such as full responsiveness.
During the Q&A, someone asked: “If you have to do a major brand redesign, which element of accessibility would you implement first as the most important one?” Zsolt responded with this fantastic answer: “Nothing is the most important because everyone is important.”
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim-Berners Lee (inventor of the world wide web)
Cheers to another great WPAD event!
We are grateful for this opportunity to continue learning about web accessibility and applying what we’ve learned to improve upon our services. WCAG conformance makes the web a friendlier place for people with diverse abilities and has become a primary goal for successful businesses and organizations globally.
Razorfrog would like to give a HUGE shoutout to the amazing organizers, presenters and volunteers who came together to make this incredible event happen for folks all over the world. Thank you so much for sharing your time, talent and passion with everyone!
If you’re interested in attending a WPAD event, please visit the WordPress Accessibility Day website for more details. An archive of past events is also available. We also highly recommend checking out the WordPress Accessibility Day YouTube channel for recordings of all WPAD talks given.
