Notes on HTML/CSS
Adapted from the W3C’s Easy Checks and CUNY Guidance.
Guidance:
- Page title (
<title></title>
)- should adequately and briefly describe the content of the page
- should be different from other pages on the same website
- Image alternative text (alt-text) (
<img alt="..."
)- Every functional image (e.g. figures) should have a descriptive alt-text
- Decorative image which do not need description, should have a null alt-text (
alt=""
)
- Text
- Use semantic headings (
<h1>
,<h2>
,…) rather than<div>
or<span>
- Aim for good contrast between different colors (7:1). Larger text is allowed to have a slightly lower contrast ratio (4.5:1). Test this with tools such as from WebAIM or Mozilla Firefox’s accessibility dev tools (F12).
- Text should resize well. Test zooming in to 200%.
- Use semantic headings (
- Structure
- Use semantic tags (e.g.
<header>
,<main>
,<section>
) where possible, rather than<div>
. Likewise, prefer<em>
and<strong>
rather than<i>
,<b>
or<span>
.
- Use semantic tags (e.g.
- Interactivity
- Tabbing order (tab) for links should be visible and follow a logical order through the page