Web development is a powerful medium for connecting people and sharing ideas. As developers, we possess the incredible responsibility to create online experiences that are accessible and inclusive to all users, regardless of their abilities. This is where the fusion of CSS and accessibility principles becomes vital to shaping a better, more empathetic web.
CSS, or Cascading Style Sheets, is the cornerstone of web design (also my sometimes nemesis), enabling us to transform raw HTML content into visually appealing and engaging interfaces. However, its potential extends far beyond aesthetics. When coupled with accessibility best practices, CSS holds the key to breaking down barriers for users with disabilities, ensuring they can navigate and interact with websites and applications effortlessly.
In this post, we will explore the relationship between CSS and accessibility in web development. We will look at some practical techniques to empower developers to create inclusive websites. From optimizing color contrast and managing focus states to implementing responsive layouts for diverse devices, we will dip our toe into the nuances of crafting a web application that includes all users. Finally, we will learn about some useful resources for testing accessibility.
Why is accessibility important in web development?
Before we delve into specific practices, let’s take a minute to consider why accessibility is important in web development. Why is inclusive design important for web developers?
According to the Web Accessibility Initiative (WAI), “the Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.”
It’s very possible to build applications that do not consider diverse users. And builds that ignore accessibility, or only consider it in passing, neglect a broad swath of users. WAI explains that accessibility is an essential piece of creating high-quality websites and applications for users. When accessibility principles are applied, applications do not exclude potential users from using their products and services. From a business perspective, this is really important. No one wants to create unnecessary barriers for their users.
From a human perspective, accessibility is also key. Web applications are built for users. And users are humans with diverse backgrounds and abilities. Integrating accessibility principles into web development and design allows ALL users to engage meaningfully with content. This all ties in with UX (user experience) as well.
Basics of accessibility in web development
Alright, so let’s dig into some specific things we can do while using CSS to integrate accessibility and make our web applications available to all users.
Readability
Readability, in the realm of web development and accessibility, refers to the ease with which users can comprehend and consume content on a website. This vital aspect encompasses not only visual clarity but also contextual coherence. Let’s explore the significance of prioritizing readability to ensure an inclusive and user-friendly online experience.
Scale
The first element to consider when building with readability in mind is scale. Scale refers to sizing relationships among the elements on a page. For instance, font-size, line-height, and letter-spacing are specific CSS properties that can make or break readability with regard to scale.
When considering these properties, the following guidelines are a good place to begin:
- The minimum font size should be between 18 and 20 pixels for smaller screen sizes. Any smaller, and the text can be difficult to read.
- The default value of the line-height property in browsers is usually around 1.2, but increasing this value to 1.5 within paragraphs can make the text much more readable.
- The value of the letter-spacing property is normal in browsers, but by providing a value to this property, we can expand or contract the space between letters. Using a value of 0.05em allows users to easily read text.
An example paragraph styling in your style sheet that considers these guidelines might look something like this:
p {
font-size: 20px;
line-height: 1.5;
letter-spacing: 0.05em;
}Structure
You can also address structural readability with properties like text-align and width:
- Generally, it is recommended to align text using left, right, or center values. The justify value can also be used but can cause a decrease in readability because it creates uneven word spacing to create equal line lengths.
- Paragraph width can also impact readability. It is recommended to have 45 to 85 characters per line, with the ideal being suggested as 65 characters.
p {
text-align: left;
width: 400px;
}
Another option is to use the ch unit (or another relative length unit) to allow the text to resize according to screen size.
p {
text-align: left;
min-width: 45ch;
max-width: 85ch;
}Color
Colors wield immense power in accessibility and web development. Let’s discover how contrasting colors, positioned opposite each other on the color wheel, play a pivotal role in ensuring content readability and aiding users as they engage with your web application.
As web developers, we don’t always have the opportunity to handpick colors for a website’s design. That’s often the job of a designer. However, armed with accessibility principles, we can guarantee equal access to content for all users. By embracing inclusive design practices, we can ensure that every individual can navigate and enjoy the web without encountering unnecessary barriers.
It can be useful to keep the following tips in mind when choosing colors for your designs:
- Providing adequate contrast between foreground and background elements ensures users can read content more easily.
- The contrast ratio can range from 1:1 (both colors are the same) to 21:1 (black and white).
- The recommended minimum contrast ratio between background color and text is 4.5:1.
- You can use this contrast checker to see whether your color choices have a high enough contrast to ensure readability.
Another way color can be used to improve readability is related to the context in which the content is situated. For example, to let users know they have visited a link from your site previously, you can use the :visited selector in your style sheet.
a:visited {
color: purple;
}
You can also the :focus selector to indicate where a user is positioned within your application. This is really useful when considering users who may be navigating your site with a keyboard or other means (not with a mouse cursor). It can be easy to assume that all users will engage with your application as you would, but this is just not likely to be the case. Using styling with the :focus selector can assist users when they are navigating your site.
input:focus {
border-color: blue;
}
A final example of how color can be useful to demonstrate the context in which a user finds themselves is through success and failure indicators. For instance, with form validation, users might see green fields when values are accepted and red when values are not accepted.
Color plays a crucial role in crafting accessible web applications. By ensuring high contrast for readability, leveraging colors to indicate usage with the :visited and :focus CSS selectors, and employing them thoughtfully to signify success and error states, developers create a more inclusive digital environment, enhancing user experience for all visitors.
Interactivity
Readability related to visual elements, how well a user can see the elements, is important. But another important aspect to consider with regard to accessibility is interactivity. We can give context clues to users to show them how they might interact with content on our web applications.
For example, information or ideas made up of multiple words are often abbreviated (e.g., CSS stands for Cascading Style Sheets). One way you can make this information more accessible to users is to provide a full definition of terms using the <abbr> HTML element. With this element, when a user hovers over a term in the text, the alternative text will display.
<abbr title='Cascading Style Sheets'>CSS</abbr>
Another way to indicate interactivity is with the cursor CSS property. With this property, the cursor can be changed to show the potential for interactivity. For example, when a user hovers over a link, the cursor might change from the default arrow to a pointer.
Incorporating interactivity while maintaining accessibility is important in web development. Leveraging <abbr> HTML elements to provide concise, meaningful explanations and judiciously using the cursor CSS property for intuitive cues, we can create inclusive web experiences.
Visibility
Another aspect of design to consider when working with accessibility in mind is visibility. Your web application can be visible to all users through the monitor display. But it can also be visible to users through screen readers. This is useful to take into account because some information, repetitive navigation elements, or decorative icons, for example, might not be necessary for users with screen readers.
To hide content from everyone:
- display: none;
- visibility: hidden;
To hide the content semantically, hiding it from screen readers only but displaying it visually:
- Use the HTML attribute aria-hidden
<p class='hidden-sentence' aria-hidden='true'>This is hidden from screen readers!</p>
By strategically hiding elements through proper techniques like aria-hidden attribute or CSS, we harmonize the user experience for all visitors. This cohesive approach ensures that screen readers and other assistive technologies perceive content accurately, fostering an inclusive digital space that empowers every user.
In the pursuit of accessible web development, prioritizing readability emerges as a cornerstone for creating an inclusive digital landscape. By carefully considering the scale of fonts and elements, organizing content with clear and logical structures, ensuring sufficient color contrast for readability, implementing interactive elements with discernible cues, and thoughtfully managing visibility for assistive technologies, we lay the foundation for a user-friendly experience for all. Keeping these considerations at the forefront of design and development processes empowers users of diverse abilities to effortlessly engage with and access the wealth of information and services available on the web, fostering a more inclusive and welcoming online environment for everyone.
Design and Structure
One important factor to bear in mind while implementing CSS on a web application is the connection between the CSS stylesheet and the underlying structure of the HTML document. Although this link might appear insignificant, neglecting or mishandling it can significantly affect the accessibility and usability of the web page. Understanding and properly managing this relationship is vital for ensuring an inclusive and easily navigable online experience.
One example of when the order of content might cause trouble for user experience might be with an image grid.
This grid was created in this fun FreeCodeCamp demo.
While grids like this are visually appealing, they can create challenges for users engaging with content with the assistance of screen readers. Screen readers process the order of the DOM, so it is possible to have a mismatch between what is visually presented and what is being read. In short, it’s valuable to order the content of your application to make sense in the absence of styling. This can help create a uniform experience for all users.
Accessibility Resources
Alright, we’ve covered a lot of ways we can use CSS to ensure accessibility in web development. But this is just the tip of the iceberg! If you’d like to keep learning about accessibility and how to integrate these principles into your work, the following resources might be of use.
The A11y.coffee website has TONS of useful information about accessibility and resources for testing accessibility in your work.
Accessible University by the University of Washington is a fun site intentionally designed to highlight common accessibility errors.
The Learn CSS: Accessibility course on Codecademy has tons of great information and practice related to these concepts. In fact, this course was my inspiration for putting this post together.
Additional Resources
What is accessibility? – MDN web docs
Introduction to web accessibility – Web Accessibility Initiative (WAI)
Design for Readability – Digital Accessibility, Harvard
Web Accessibility: The Ultimate Guide – HubSpot
In conclusion, the intersection of CSS and accessibility in web development is a vital aspect of creating an inclusive and user-centric digital world. CSS empowers developers to transform raw HTML content into visually appealing and engaging interfaces, but its true potential shines when coupled with accessibility principles. By ensuring high contrast for readability, leveraging colors to convey information, providing meaningful interactivity cues, and thoughtfully managing visibility, developers can break down barriers and open doors for users with diverse abilities.
Incorporating accessibility considerations from the outset of the development process not only adheres to ethical design practices but also enhances the user experience for all users. As we strive to build a web that is accessible to all, we embrace a philosophy that celebrates diversity and empowers users of varying backgrounds to access information, engage with content, and interact with digital experiences seamlessly.
As technology continues to evolve, web developers hold the power to create an inclusive, empathetic, and accessible digital landscape. By continually refining our CSS skills, staying up-to-date with accessibility guidelines, and fostering a culture of inclusivity, we can collectively contribute to a future where the internet is a space that truly welcomes and caters to every user.