Web Development - Common Accessibility Issues
Missing or Incorrect Alt Text for Images
Alt text (alternative text) provides textual descriptions of images for screen readers and users who have images disabled. It's essential for conveying the meaning and context of images to users who cannot see them.
Best Practices for Alt Text:
- Descriptive: Accurately describe the image's content.
- Concise: Keep it brief (ideally under 125 characters).
- Contextual: Consider the image's context within the surrounding content.
- Avoid Redundancy: Don't repeat text already present nearby.
- Null Alt Text for Decorative Images: Use
alt=""for purely decorative images that don't convey meaning. This tells screen readers to ignore them.
Bad Example (Missing alt text):
<img src="chart.png">Bad Example (Redundant alt text):
<img src="chart.png" alt="Image of a chart">Good Example:
<img src="chart.png" alt="Bar chart showing sales growth in Q3 2024.">Good Example (Decorative image):
<img src="decorative-line.png" alt="">Poor Color Contrast
Sufficient color contrast between text and background is vital for readability, especially for users with low vision or color blindness. Insufficient contrast makes text difficult or impossible to read.
Checking Contrast: You can use browser developer tools (like Chrome's Inspect element) or online contrast checkers like contrastchecker.com to verify if your color combinations meet accessibility standards (WCAG). These tools will give you a contrast ratio. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Bad Example (Low Contrast):
This text has poor contrast.
Good Example (Sufficient Contrast):
This text has good contrast.
Incorrect Use of Heading Tags
Heading tags (<h1> to <h6>) structure content hierarchically, creating a logical outline for screen readers and improving navigation for all users.
Key Points:
- Use only one
<h1>per page (the main page title). - Use headings in sequential order (
<h1>,<h2>,<h3>, etc.). Don't skip levels (e.g., going from<h1>directly to<h3>). - Don't use heading tags for styling purposes only. Use CSS to style text.
Bad Example (Skipping heading levels):
<h1>Main Title</h1>
<h3>Sub-section</h3> Bad Example (Ignoring headings):
<p><strong>Main Title</strong></p>
<p><strong>Topic 1</strong> is a process that ...</p> Good Example (Correct heading structure):
<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Sub-section</h3> Use of Blank Lines for Spacing
Empty paragraphs or multiple <br> tags are read as "blank" to assistive technology (AT). Use of CSS for spacing results in a cleaner reading experience for AT users.
Key Points:
- Avoid using empty paragraphs or repeated <br> tags.
- Use CSS styling or Bootstrap classes (if available) to create space.
Bad Example (Empty paragraphs):
<p>Lorem ipsum dolor sit amet</p>
<p></p>
<p> </p>
<p>consectetur adipiscing elit</p> Bad Example (<br> tags):
<p>Lorem ipsum dolor sit amet<br>
<br>
<br>
consectetur adipiscing elit</p> Good Example (Vanilla HTML):
<p style="margin-bottom: 1.5em;">Lorem ipsum dolor sit amet
<p>consectetur adipiscing elit</p> Good Example (Bootstrap):
<p class="mb-2">Lorem ipsum dolor sit amet</p>
<p>consectetur adipiscing elit</p> Provide descriptive link labels
Link labels should describe the destination of the link even if pulled out of context.
Key Points:
- Avoid using raw URLs as the link text.
- Avoid vague language like "click here" or "this document".
- Provide a label that aids in understanding the link behavior.
Bad Example (Raw URL):
<p>Visit our Who to Ask page at:<br>
<a href="https://www.busfin.uillinois.edu/who_to_ask/">https://www.busfin.uillinois.edu/who_to_ask/</a></p> Bad Example (Click Here):
<p><a href="https://www.busfin.uillinois.edu/who_to_ask/">Click here </a> to visit our Who to Ask page</p> Good Example:
<p>Visit our <a href="https://www.busfin.uillinois.edu/who_to_ask/">Who to Ask</a> page</p> Be careful when copy/pasting
Care should be taken when copying text into a rich text editor (RTE) from a formatted document like Word, as it may include inline styling that could overwrite the site's CSS.
Key Points:
- Shift + Ctrl + V will paste without formatting in many RTEs.
- Otherwise, copying the content first to a plain text editor will remove any unnecessary data.
- Check the HTML code generated by the RTE prior to page publication.