Navigating CSS accessibility: From font size to contrast standards

Considering the size and scope of accessibility guidelines, it helps to know and understand how to apply HTML, JavaScript, and CSS to ensure you incorporate accessible design into your websites, apps, or other products. But getting to the point where you feel confident that your designs are accessible, can be a long road, unless you have the right guides, accessibility checkers, and resources.

That’s what you’ll find in the following sections – a starting place to find out what you need to know about CSS accessibility.  

This article explores the basics of CSS accessibility, and includes resources for further information on accessibility, how CSS supports it and ways it contributes toward achieving it. You’ll also find resources produced by TinyMCE that are designed to provide the support you need to reach CSS accessibility standards.

Understanding CSS accessibility

Understanding CSS accessibility means seeing CSS as an important part of the wider accessibility guidelines. Looking closely at the WCAG Guidelines, there are four principles of web accessibility that require your content and site design to be:

1. Perceivable
2. Operable
3. Understandable
4. Robust, in terms of compatibility, code and role integrity, and exact status messages.

CSS plays an important role in all four areas.When CSS accessibility meets all four, it provides the best possible experience for everyone regardless of any impairments in regards to visual, auditory, or cognitive processing.

✏️ NOTE: It's worth taking time to understand the value of ARIA roles, states and properties since these attributes are similar to CSS accessibility technologies.

Mastering contrast for clear visibility

To achieve clear visibility for those with vision impairments, your site must have sufficient contrast between the background and foreground (text, HTML elements). When you’re making CSS style choices, compare the color value of the foreground and background, and make use of online contrast calculators to assist with your comparison:

• WebAIM
• Colorzilla
• WAVE Web Accessibility Evaluation Tool (also by WebAIM)

The exact contrast ratios to look for are 4.5:1 for text content, and 3:1 for interface elements. Ratios of this order ensures that your CSS design creates a perceivable and operable website. 

The importance of accessible font size

Accessible font size is where two of your CSS style properties (font size and font contrast), are used to create operable, perceivable, and understandable content. A common strategy to improve your CSS accessibility is to provide the option to increase font size so it's clear and readable on various devices.

Accessible font size helps everyone, and can positively impact someone’s life. There’s many considerations in selecting fonts that are readable and clear, which is why a resource on crafting an accessible font design can help – check through this Font Accessibility guide.

Creating accessible menus: CSS strategies

CSS strategies for creating accessible menus involve paying close attention to ARIA attributes, targeting them with CSS selectors to ensure the web content is perceivable and operable. CSS selectors can show whether a menu is shown or hidden with CSS pseudo element and pseudo classes. The ::after pseudo element styles menu content to make sure that the border styles have higher contrast across operating systems and browsers.

For example, check on the ARIA example of an accessible menu. The example provided demonstrates the CSS strategies available that could be applied to create an operable menu.

Utilizing CSS accessibility checkers

If you require a CSS checker, or a different kind of accessibility checking service, the Web Accessibility initiative maintains a list, which is kept updated each year. Checkers that include CSS accessibility in their scope, and specifically provide support for WCAG 2.0 and WCAG 2.1 Guidelines include (but are not limited to) the following CSS accessibility checkers:

1. a11y.css’, A CSS file you can incorporate into your project that evaluates a sites accessibility
2. The a11y, A color contrast Accessibility Validator, which can test for WCAG 2.1 color accessibility up to AA level 3
3. Accessi, A URL scanning tool and website accessibility validator, which includes CSS
4. accessibilitychecker.org, A comprehensive website checker that can provide reports on specific web pages
5. Equally AI, An accessibility auditing tool
6. Axe, An Accessibility Linter plugin for the Visual Studio Code text editor
7. Aditus, a button contrast checker
8. HTML Validator, which includes CSS validation checking
9. MAUVE, the Multiguideline Accessibility and Usability Validation Environment
10. Total Validator, for testing a single page or multiple pages depending on pricing level

💡NOTE: If you’re including TinyMCE as your project’s WYSIWYG, you can provide accessibility checking to your customers using TinyMCE’s Accessibility Checker (Premium) plugin. 

Navigating CSS accessibility, and other resources

CSS accessibility improves websites perceivability, operability, and understanding, and contributes to its robustness. It specifically contributes to focus, and the design of elements that can hold focus, thereby directly improving keyboard navigation. When it comes to fonts, you can make a viewer’s experience easier by knowing the essentials of CSS Accessibility and fonts by consulting useful resources.

For more on Accessibility, read the TinyMCE guide on accessibility and emoji, as well as the guide on how accessible product design helps everyone and learn from our infographic on How to write alt text for images.

Contact us today if you have any questions about how TinyMCE’s Accessibility Checker (Premium plugin) can support you.