Accessibility in Action: Your Portfolio

Goal

Improve your portfolio so it meets basic web accessibility standards. You will apply accessibility best practices using semantic HTML, meaningful text, and WCAG-aligned design choices.

This step ensures that your site is usable by:

• Keyboard-only users
• Screen reader users
• Users with visual, hearing, or motor impairments

What You'll Use

• Semantic HTML elements
• Image alt attributes
• Proper heading structure (h1–h3)
• Accessible links
• Color contrast awareness
• Keyboard navigation testing

Where You'll Work

project/index.html
project/about.html
project/contact.html
project/assets/css/style.css

Task A - Fix Your Images

For every image on your site:

• Add a meaningful alt description
• The alt text should describe the purpose, not just the object. Think about alt text as your way of describing the object (<img>, <area>, etc) in a few words to someone who cannot see it:

Good example: alt="Portrait of Jordan smiling in front of a bookshelf"

Weak example: alt="image" or alt="photo"

Pro Tip: If an image is purely decorative, use: alt="". This helps the browser understand that the image isn't an important part of accessibility, and therefore does not draw the attention of a user with accessibility needs to anything unnecessary.

Task B - Clean Up Your Headings

On every page:

• Use one <h1> only
• Use <h2> and <h3> in logical order
• Do not skip levels

Correct structure:

• h1 → page title
• h2 → major section
• h3 → subsection

Incorrect structure:

• h1 → h4 → h2

Task C - Make Your Links Accessible

Update all links so that:

• The link text makes sense by itself
• Avoid:
• "Click here"
• "Read more"
• "Link"

✅ Good:

• "View my GitHub projects"
• "Visit the MDN HTML documentation"

Task D - Check Keyboard Navigation

Using only your keyboard:

• Press Tab to move through your site
• Press Enter to activate links
• Make sure:
• You can reach every link
• You never get "stuck"
• The focus order follows the visual layout

If something breaks, fix it using semantic HTML first.

Task E - Improve Color Contrast

In your style.css:

• Make sure text stands out clearly from the background
• Avoid light gray on white and other low-contrast color combinations. Examples of this include pale yellow text on a white background, or red text on a green background.
• If needed, darken text or lighten backgrounds, or adjust the font color(s)

Low-contrast, or the opposite, harsh contrast (where the difference between colors is technically strong but visually uncomfortable) should be avoided at all costs when designing web content. High-contrast means good, crisp and easy on the eyes differentiation. If you have to squint, adjust your monitor, or tilt your head, the contrast probably needs adjusting.

Take a look at a website with low-contrast issues on your phone in the sunlight and you'll see how the concepts of accessibility are critical to good web design.

Task F - Make Your Forms Accessible

If your Contact page includes a form, review it carefully. Forms are one of the most common places where accessibility breaks down.

For every form on your site:

• Every <input> and <textarea> must have a properly associated <label> • The <label> must use the for attribute that matches the input's id

Correct example:

<label for="email">Email</label>
<input id="email" name="email" type="email">

Incorrect example:

<input type="email" placeholder="Email">

Placeholders are not replacements for labels. Screen readers rely on labels to describe form fields.

If you use radio buttons or checkboxes:

• Group related options inside a <fieldset>
• Use a <legend> to describe the group

Example:

<fieldset>
  <legend>Favorite Color</legend>
  <label><input type="radio" name="color" value="blue"> Blue</label>
  <label><input type="radio" name="color" value="green"> Green</label>
</fieldset>

Finally:

• Make sure form controls are reachable using the Tab key 
• Ensure focus styles are visible
• Avoid relying only on color to indicate required fields

You may also want to add this line to the Accessibility Checklist (Self-Audit):

• All form fields have properly associated labels
• Radio buttons and checkboxes are grouped with <fieldset> and <legend>

5.4 Accessibility Checklist (Self-Audit)

Complete this before submitting:

• All images have meaningful alt text
• Each page has exactly one h1
• Headings are used in logical order
• All links are descriptive
• Site can be fully navigated with the keyboard
• Text has strong enough contrast
• No content relies only on color to be understood

Common Fixes - Making Your Portfolio Accessible

• Images still missing alt text Every <img> must have an alt attribute - either a meaningful description or an empty value (alt="") for decorative images.
• Too many headings marked as <h1> Each page should have exactly one <h1> - use <h2> and <h3> for structure, not for visual size.
• Headings used out of order Don't skip levels (e.g., <h1> → <h4>). Screen readers rely on heading order to understand page structure.
• Links that don't make sense on their own Replace vague text like "Click here" with descriptive links that explain where they go.
• Keyboard navigation gets stuck or skips content Test with the Tab key - if you can't reach something, fix the HTML structure before trying CSS workarounds.
• Low text contrast after styling If text is hard to read against its background, darken the text or lighten the background - readability always wins over aesthetics.

Why This Matters

Accessibility is not an "extra" - it is:

• A professional responsibility
• A legal requirement in many cases
• A human-centered design practice

By making your portfolio accessible, you are building a site that works for everyone, not just some users on certain devices.

Source: Khalil Abdullah and Saylor University
This work is licensed under a Creative Commons Attribution 4.0 License.