A guide to troublesome UI components (opens in a new window or tab)
Accessibility is not expensive if you discuss it as a team early in the process.
Accessibility Links
Component library accessibility audit (opens in a new window or tab)
The format I used in my report was to provide a bulleted list of accessibility issues I found. I did not note the specific WCAG success criteria affected because I didn’t think the team needed to know that information.
24 Semantic Terms Web Pros Should Know (opens in a new window or tab)
A quick overview of 24 important semantic terms to know and understand.
5 takeaways from screen reader usability interviews (opens in a new window or tab)
Of the five usability interviews we conducted with frequent screen reader users, some common patterns stood out to me.
Your Accessibility Claims Are Wrong, Unless… (opens in a new window or tab)
I offer some approaches you can and should take before you set expectations about the accessibility of your thing — code or article or talk or whatever.
Research insight: accessibility of images (opens in a new window or tab)
When conducting usability testing with disabled users, we observed how well images performed from both a visual and non-visual perspective when it came to finding and understanding content.
Mac VoiceOver Testing the Simple Way (opens in a new window or tab)
Learning VoiceOver can feel overwhelming, so I’m here to give you a simple, repeatable process you can follow to make testing with VO as easy as possible.
Color accessibility: tools and resources to help you design inclusive products (opens in a new window or tab)
Resources, tips and tools I regularly use to build and check the color accessibility of my products in one single place for future reference.
outline is your friend (opens in a new window or tab)
Be careful when customizing focus styles, don’t forget to test in forced color modes, and always remember that outline is your friend.
Style with Stateful, Semantic Selectors (opens in a new window or tab)
In web development, we frequently need to style elements to visually indicate some state they're in.
Use transparent borders and outlines to assist with high contrast mode (opens in a new window or tab)
This is a quick win, for everyone: the visual design is left almost untouched and it’s accessible.
Carousels: No one likes you (opens in a new window or tab)
I know carousels have not magically disappeared in the last 5 years, but they have come up yet again in (work) conversation.
Using the Increased Contrast Mode CSS media query (opens in a new window or tab)
Giving visitors to my website who require increased contrast the ‘enhanced’ level of contrast, and all others the ‘minimum’ level in both Light and Dark Mode.
Respecting Font Size Preferences: Rems and 62.5% Base Font Size (opens in a new window or tab)
Let's understand why rem is the ideal unit for font size and how setting the root font size to 62.5% can make our lives easier.
WCAG, but in language I can understand (opens in a new window or tab)
Summing up each success criterion in WCAG 2.1 in as close to a single paragraph as I can manage.
Accessible SVGs: Perfect Patterns For Screen Reader Users (opens in a new window or tab)
Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.
Digital Accessibility and Chronic Pain (opens in a new window or tab)
Designing for chronic pain is just as important as designing for other disabilities.
Using CSS Variables for reduced motion on a global scale (opens in a new window or tab)
To respect the reduced motion feature doesn’t necessarily mean removing the animation altogether.
The hidden world of aria-hidden (opens in a new window or tab)
An interesting feature of aria-hidden is that it hides stuff from screen reader users, but its effects are hidden from everyone else.
What’s the right font size in web design? (opens in a new window or tab)
If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web design?
Not Your Typical Horizontal Rules (opens in a new window or tab)
Like other HTML elements, horizontal rules can be styled using CSS (and SVG).
Using the HTML title attribute (opens in a new window or tab)
When the title attribute is useful, and when it's not.
Accessibility from the Ground Up (opens in a new window or tab)
So you are starting or restarting that website or webapp from scratch, and you want to do things well.
On the <dl> (opens in a new window or tab)
The <dl>, or description list, element is underrated. It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile.
Writing great alt text: Emotion matters (opens in a new window or tab)
Good alt text means that screen reader users get the same 'meaning' from the page as a fully sighted user. But sometimes that's easier said than done.
My Accessibility Journey: What I’ve Learned So Far (opens in a new window or tab)
For the web to be truly accessible, everyone who makes websites needs to care about accessibility.
How I Optimize My Website For Cognitive Accessibility (opens in a new window or tab)
Here is how I optimize my website for cognitive accessibility, taking guidance from users and the Web Content Accessibility Guidelines 2.1.
When CSS Isn’t Enough: JavaScript Requirements For Accessible Components (opens in a new window or tab)
To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
Design for reading: tips for optimizing content for Reader modes and reading apps (opens in a new window or tab)
Our content will not always look the way we expect it or want it to. Many apps, tools, and environments that people use to browse the Web strip our content of our CSS and apply their own styles to it.
Accessible icon links (opens in a new window or tab)
Examples of how to implement accessible icons.
5 most annoying website features I face as a blind person every single day (opens in a new window or tab)
Good list of accessibility issues and how to address them.
Create better, accessible focus effects (opens in a new window or tab)
A neat trick for when you need an alternative to the outline property.
Modern CSS Techniques To Improve Legibility (opens in a new window or tab)
CSS techniques to improve site legibility.
Inclusively Hiding & Styling Checkboxes and Radio Buttons (opens in a new window or tab)
Different techniques for hiding elements, how each of them affects the accessibility of the content, and how to properly hide checkboxes and radio buttons taking their own accessibility and usability considerations into account to make sure we aren’t leaving any users out.
What a Year of Learning and Teaching Accessibility Taught Me (opens in a new window or tab)
Lessons and core values gleaned from learning accessibility.
How to Build HTML Forms Right: Semantics (opens in a new window or tab)
In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way.
Making Our Patterns More Accessible (opens in a new window or tab)
Show and tell examples of making patterns and UI elements more accessible.
Equivalent Experiences: What Are They? (opens in a new window or tab)
To create an equivalent experience, you must understand all the different ways people interact with technology, as well as common barriers they experience.
Pixels vs. Relative Units in CSS (opens in a new window or tab)
Comparison of static versus relative units with examples and why it’s still a big deal.
Myth: ARIA Has Perfect Support (opens in a new window or tab)
Just because you write code that uses ARIA does not mean the ARIA declarations will work as intended.
How to Build HTML Forms Right: Accessibility (opens in a new window or tab)
Overview of how to ensure forms are accessible.
Progressively enhancing radio buttons with SVG whilst staying accessible (opens in a new window or tab)
In-depth look at how to accessibly use SVGs with radio buttons.
Website Accessibility Checklist (opens in a new window or tab)
15 things to improve website accessibility.
External Links, New Tabs, and Accessibility (opens in a new window or tab)
Considerations for opening links in new tab/windows.
What's in a name? (opens in a new window or tab)
Overview of when to use the name attribute.
Using the tabindex attribute (opens in a new window or tab)
Overview of how to and how not to use the tabindex attribute
Why, How, and When to Use Semantic HTML and ARIA (opens in a new window or tab)
Good overview of when to use ARIA in combination with semantic HTML.