Of the five usability interviews we conducted with frequent screen reader users, some common patterns stood out to me.
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.
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.
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.
Be careful when customizing focus styles, don’t forget to test in forced color modes, and always remember that outline is your friend.
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.
I know carousels have not magically disappeared in the last 5 years, but they have come up yet again in (work) conversation.
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.
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.
Summing up each success criterion in WCAG 2.1 in as close to a single paragraph as I can manage.
Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.
Designing for chronic pain is just as important as designing for other disabilities.
To respect the reduced motion feature doesn’t necessarily mean removing the animation altogether.
An interesting feature of aria-hidden is that it hides stuff from screen reader users, but its effects are hidden from everyone else.
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?
Like other HTML elements, horizontal rules can be styled using CSS (and SVG).
When the title attribute is useful, and when it's not.
So you are starting or restarting that website or webapp from scratch, and you want to do things well.
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.
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.
For the web to be truly accessible, everyone who makes websites needs to care about accessibility.
Here is how I optimize my website for cognitive accessibility, taking guidance from users and the Web Content Accessibility Guidelines 2.1.
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.
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.
A neat trick for when you need an alternative to the outline property.
CSS techniques to improve site legibility.
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.
Lessons and core values gleaned from learning accessibility.
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.
Show and tell examples of making patterns and UI elements more accessible.
To create an equivalent experience, you must understand all the different ways people interact with technology, as well as common barriers they experience.
Comparison of static versus relative units with examples and why it’s still a big deal.
Just because you write code that uses ARIA does not mean the ARIA declarations will work as intended.
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.
15 things to improve website accessibility.
Considerations for opening links in new tab/windows.
Overview of when to use the name attribute.
Overview of how to and how not to use the tabindex attribute
Good overview of when to use ARIA in combination with semantic HTML.