This is a quick reference cheat sheet for understanding and writing A11Y files.
Accessibility ensures digital content is usable by individuals with disabilities or sensory impairments. It follows standards like the Web Content Accessibility Guidelines (WCAG) 2.1.
Proper contrast improves page navigation, draws user attention, and ensures accessibility for users with vision impairments.
To enhance accessibility through contrast, focus on:
HTML defines six heading elements (<h1> to <h6>), decreasing in importance and size from h1 to h6.
Accessible websites use real text, ensure high contrast, and choose legible font sizes to optimize readability and compatibility with assistive technologies.
Follow WCAG 2.1 guidelines:
Choosing accessible color combinations ensures that content remains readable and understandable for users with vision impairments or color vision deficiencies.
Maximum contrast (e.g., black #000000 on white #ffffff) improves readability but can cause eye strain over time. Moderate contrast is often preferable for prolonged reading.
Red-green color blindness is the most common, but blue-yellow deficiency and total color blindness also exist. Colors can appear differently or become indistinguishable.
Use tools like the Toptal Color Blind Web Page Filter to test your designs for different types of color blindness.
Design trends should never compromise accessibility. Always prioritize clarity, contrast, and compatibility with assistive technologies.
Overlaying white text on images often fails contrast standards. Use a dark transparent overlay behind the text to improve legibility.
Do not rely on placeholder text alone to identify input fields. Labels are essential for screen readers and users with low vision. Placeholder text is often low contrast and may not be read aloud.
Flat/minimal designs can reduce clarity. Ensure buttons and links are visually distinct with borders, icons, or underlines — not color alone — to ensure clickability is clear for all users.
Using semantic elements helps screen reader users understand and navigate a web page more efficiently. For example, wrap a navigation bar in a <header> instead of a generic <div> with a class.
<header>
<nav>
...
</nav>
</header>The role attribute provides additional context to web elements, affecting how screen readers announce them
ARIA role
Some elements, such as <ol> and <div>, are used solely for organizing content. Setting role="presentation" instructs screen readers to skip announcing the element’s name, allowing users to focus directly on the meaningful content.
<ol role="presentation">
<li>List Item 1</li>
<li>List Item 2</li>
</ol>In the example below, the container’s role prevents unnecessary announcements:
<div id="container" role="presentation">
<p>I'm content you want to hear!</p>
</div>ARIA role
The complementary role signals that the content supports the primary information on the page.
<div id="code-editor" role="complementary">
...
</div>ARIA role
Gives screen readers extra information without affecting the visual layout
<img src="#" alt="A painting of the Shenandoah Valley" />
<p aria-label="Artist">Armand Cabrera, 2010</p>This enhances the relationship between the image and its caption. For a full list of ARIA properties, see the ARIA Techniques.
ARIA property
The alt attribute is vital for accessibility, providing a text alternative to images. Screen readers announce this text, and it is displayed if the image fails to load.
<img src="#" alt="a kitten snuggling a puppy" />Screen readers convert on-screen text into speech or braille, making it accessible for visually impaired users. Common examples include: