HTML, CSS, & Accessibility

Tim Carlson
Spring 2024

View of the Day

  • HTML Review (PollEv)

    • git review as well?

  • CSS Intro

  • HTML Semantics 

  • Accessibility & Screen Readers

HTML Review

https://pollev.com/timca

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

https://info340.github.io/code-style-guide.html

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!

(http://www.w3schools.com/cssref/)

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

The same content can be presented in different ways to different users.

 

example: http://www.csszengarden.com/

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>

example source

Designing for accessibility benefits everyone, whether or not they have a disability.

Example: Curb Cuts

VoiceOver

Screen reader built into Mac OS X.

Screen reader Demos

Screen Reader Demo for Digital Accessibility

Mark Sutton UCSF

https://www.youtube.com/watch?v=dEbl5jvLKGQ

 

SLCC Universal Access

Jason Holt

https://www.youtube.com/watch?v=q_ATY9gimOM

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 Thurs 3/28 (today)

  • Problem Set 02 due Thurs 4/4

    • ​(mostly on today's material, accessible HTML & some CSS)

 

Next: CSS Selectors and Properties

AI Policy (Summary)

While the task maybe to implement a program, the work you need to do for this class is to learn the material. AI can help you with the task, it cannot help you with the work. recognition != recall

  • ❌ Don't use AI tools for problem sets
  • ✅ Use AI tools to support your project work
    • ✅ Scaffolding, code templates, etc 
    • ✅ Finding and solving bugs
    • ❌ Generating entire features for you
  • Cite your usage of these tools:
    1. Briefly in the code or the git commit message
    2. In a statement submitted with project deliverables (form)

 

For full details, see the syllabus on Canvas

info340sp24-html-css-accessibility

By Tim Carlson

info340sp24-html-css-accessibility

  • 124

More from Tim Carlson