HTML, CSS, & Accessibility
Joel Ross
Spring 2023
View of the Day
-
HTML Review (PollEv)
- git review as well?
-
CSS
-
HTML Semantics (Outlines)
-
Accessibility & Screen Readers
HTML Review
Updating Lecture Code
# switch to starter branch to get new starter code
git checkout starter
# download new starter code
git pull
# switch back to main branch for coding
git checkout main
# merge in new starter code
git merge starter --no-edit
# code and enjoy!
Get the starter code from the starter branch, but do all of your work on main.
Publishing to GH Pages
# do all your coding on `main`!
# switch to gh-pages to publish
git checkout gh-pages
# merge the changes from main
git merge main
# push to GitHub to publish
git push origin gh-pages
# switch back to main branch for more coding
git checkout main
# remember to push your souce code for grading
git push origin main
We use a similar process to "publishing" code to Github Pages. Do all coding on main. Never edit code on
gh-pages
Developer Tools

Course Style Guide
We have a web page...
...but how do we make it look good?
Not this...

(see also: https://websitesfromhell.net/)
...but this!

CSS
Cascading Style Sheets
A language that defines rules for styling
"use this color and font for the first paragraph in the article; this picture for the page's background..."
(kind of like Styles or Themes in PowerPoint, but way, way more powerful!)

CSS Syntax
List rules for formatting properties for a particular kind of element.
Rules list what values to assign to different formatting properties (variables)
Selectors tell which elements the properties apply to
/* A rule with many properties */
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
"font"
selector: apply to all <h1> elements
Hello CSS
Create a new file (File > New File)
Name it
style.css
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
<head>
<link rel="stylesheet" href="style.css">
</head>
Link stylesheet in your HTML's
<head>
relation between this page and reference
no content,
no closing tag
CSS Properties
What can we change with CSS?
-
font-family
: the "font" (list alternates separated by commas) -
font-size
: the size of the text -
font-weight
: boldness -
color
: text color -
background-color
: element's background -
padding
: the space around an element - ... and many, many, more!
Class Selectors
Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS
/* CSS */
.highlighted {
background-color: yellow;
}
<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>
dot specifies class name, not tag name
<div>
and
<span>
HTML elements that have no semantic or appearance meaning on their own.
Used to "group" or "label content for styling.
<div class="cow">
<p>Moo moo moo.</p>
<p>Moooooooooooooooooooo.</p>
</div>
<div class="sheep">
<p>Baa baa <span class="dark">black</span> sheep,
have you any wool?</p>
</div>
block element (line break)
inline element (no line break)
Practice
Add some styling to your page!
- e.g., style the font-family for the paragraphs in your page
- e.g., style the background-color for your page
- e.g., wrap each "section" in a <div> and give them unique styles or colors
CSS
Cascading Style Sheets
The Cascade
Multiple rules can apply to the same element (in a "cascade").
p { /* applies to all paragraphs */
font-family: 'Helvetica'
}
.alert { /* applies to all elements with class="alert" */
font-size: larger;
}
.success { /* applies to all elements with class="success" */
color: #28a745; /* a pleasant green */
}
<p class="alert success">
This paragraph will be in Helvetica font, a larger
font-size, and green color, because all 3 of the above
rules apply to it.
</p>
two classes (space separated)
Why two languages?


Separation of Concerns
Keep content separate
from appearance
Allows the same styling to apply to different content.
The same content can be presented in different ways to different users.
HTML vs. CSS
HTML specifies the semantics.
CSS specifies the appearance.
<!-- HTML -->
<p>This text has <i>emphasis!</i></p>
/* CSS */
em {
font-style: normal;
text-decoration: underline;
}
why is this italicized?
change what emphatic text looks like
HTML describes the meaning, not what it looks like!
<!-- HTML -->
<p>This text has <em>emphasis!</em></p>
says nothing about appearance!
Sectioning Elements
Use sectioning elements in place of <div> elements to give them semantic meaning ("a special div").
header | A "banner" for the page |
main | The main content of the page |
footer | Contact and copyright information |
nav | A navigation element (can be in the header; can have more than one!) |
section | "parts" that would appear in the outline of the document. Deserves a heading; can have their own <header> |
article | A self-contained, republishable section (may be embedded elsewhere). Less common. |
HTML Semantic Outlines
Use headings (h1, h2, etc) to create a "table of contents" for your webpage. DO NOT SKIP LEVELS!
<h1>My Hobbies</h1>
<p>These all are activities I love to do on a regular basis.</p>
<h2>Physical Activities</h2>
<h3>Playing Soccer</h3>
<p>Soccer is a team sport played between two teams of eleven players with a spherical ball.</p>
<h3>Dancing</h3>
<p>Dance is a performing art form consisting of purposefully selected sequences of human movement.</p>
<h4>Salsa</h4>
<p>Salsa is a popular form of social dance that originated in the Caribbean.</p>
<h4>Rock'n'Roll</h4>
<p>Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.</p>
<h3>Gardening</h3>
<p>Gardening is the practice of growing and cultivating plants as part of horticulture.</p>
<h2>Relaxing Activities</h2>
<h3>Watching Movies</h3>
<p>A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.</p>
<h3>Meditate</h3>
<p>Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.</p>


Designing for accessibility benefits everyone, whether or not they have a disability.
Example: Curb Cuts

VoiceOver
Screen reader built into Mac OS X.

Making Pages Accessible
Navigable: A screenreader can move around the page easily. Use headings, sectioning elements, etc.
Perceivable: A screenreader "see" all elements. Use alt on images, aria-label on other visual elements, etc.
Practice
Check that your page is accessible! For example:
- Do all of your <img> elements have descriptive alt attributes?
- Are your headings in the proper order?
- Do you have sectioning elements to organize the page?
Action Items!
-
Read: through Chapter 6
-
Problem Set 01 due Friday
-
Problem Set 02 due Wednesday
-
(mostly on today's material, accessible HTML & some CSS)
-
Next: CSS Selectors and Properties
info340sp23-html-css-accessibility
By Joel Ross
info340sp23-html-css-accessibility
- 359