Unit 4: Web Development for Accessibility
In this unit, we'll get into a little more detail on the web development front. We'll both study some existing websites, looking for accessibility features and obstacles, and we'll do some basic web design (by working with HTML directly, as well as possibly CSS--don't worry, you don't need to know what those are). The main goals here are for you to
- Acquire some basic skills/tools/knowledge around web design
- Acquire deeper knowledge about how design choices affect accessibility
For Day 11 [Monday, May 11]
For this unit, we'll draw from part of the Mozilla Developer Network curriculum (Mozilla are the people that bring you the Firefox browser, and other useful tools).
In particular, we'll dip into parts of their "Learn web development" tutorial. To prepare, from Monday, please:
- Create a (free) account on github.com (that's "git-hub" not "gith-ub"), if you don't have one already. Be sure to choose a username that you'd be comfortable sharing in a professional context.
Download and install Visual Studio Code (if you already have a code editor you like, you can probably use that; VS Code is nice because it's pretty stripped down)Install Atom, a code editor that makes working with HTML, CSS, and github pretty easy.- Read this short item on "How the Web Works"—it's a quick overview of the important ideas. (Some CS majors may have seen this stuff before, but not necessarily all!)
- Read
and annotate the two introductory pages posted in this unit. (The annotation is
mainly so we all have a sense of the different previous experience we're coming
with.)
- If you like, read around the tutorial website; don't
do anything yet, though, beyond what I list here.
Annotation Activity 1
Read the page on "Dealing with Files" carefully. If you like, follow along with the instructions—particularly if this feels a little unfamiliar to you. I'm sure you know, like, what a file is, but this article talks about how and why we need to think about their organization a little more carefully. In "normal" life, we mostly don't have to think too much about how the files on our computers are organized, but when we start doing web development (or software development in general), the arrangement of our files becomes very important.
Annotate anything you read that makes you think
- uhhh I don't really know what they're talking about, or
- oh, I didn't know that before (but I get it).
Please be sure to
tag the first kind of annotations as question so I know to talk
about it in class (if there aren't any question tags, I'll not waste class time
on this). Don't be bashful about questions....
Annotation Activity 2
I know there is a range of previous experience with HTML in this class. If you have no previous experience, this might be a little bit challenging; if you have a lot of experience, it will probably be a quick read. Both of those are totally normal/expected. This article on "HTML Basics" is intended for beginners, but it still uses some technical language that's not always perfectly defined.
Again, you might want to follow along (starting with the section "Anatomy of an HTML document," but if it's not working for you, we'll do some similar stuff in class.
Annotate anything you read that makes you think
- uhhh I don't really know what they're talking about, or
- oh, I didn't know that before (but I get it).
Please be sure to tag the first kind of annotations as question so I know to talk about it in class (if there aren't any question tags, I'll not waste class time on this). Don't be bashful about questions....
For Day 12 [Tuesday, May 12]
Indeed, as promised, there are two things I'd like you to work on before class on Tuesday. (If you get stuck, let me know; I'm more interested in getting people "up to speed" before class than in whether you can figure everything out by yourself.)
First, set up a nearly empty website on github. To do that:
- Follow this lesson on setting up github. You should already have an account created, so pick up after that point. Note there are a couple new terms floating around (which you may have already seen before), like repository and commit and maybe Markdown. For now don't worry about the deep meanings of those terms, and just follow the instructions obediently :). (What you see on github maybe be slightly different from what's described, but I think you'll be able to follow along. Again, let me know if something gets confusing.
- Then continue with this lesson on publishing web pages with Github Pages. You can skip over the discussion on "Web Publishing 101," if you like, as we kinda talked about it in Monday's class. Pick up with the chunk that starts, "To get a proper webpage, with real HTML and all that..." Once your Github Pages homepage is up and running, you're good (you can read about "Web publishing with ease and brevity if you like, but it's not directly relevant to us!
Now, open Atom and make sure you have your GitHub account pulled up in a browser, because we'll be connected Atom with your GitHub website. Follow these instructions to get that done.
For Day 13 [Wednesday, May 13]
To prepare for today's class, I'd like you to read more about HTML from the "MDN web docs" lessons. As before, I'd like you to annotate these with questions and so forth, so that I can shape Wednesday's class to advance your understanding. Because there are a handful of pages in this lesson, and it feels a little unnatural to set up a separate "annotation activity" for each one, please use the "Discovery" group for your annotations. (So, you'll just follow the links below, as usual, but that make sure that hypothes.is is "turned on" in your browser for your annotations.)
Specifically, we'll go through most of the "Introduction to HTML" lesson:
- "Getting Started with HTML" starts off a lot like the "HTML Basics" we looked at for Monday, but it goes into some more depth.
- "What's
in the head? Metadata in HTML" touches on some important accessibility
considerations (and other nifty things). The "Active learning: Inspecting a
simple example" section is a waste of time and not very helpful; we'll cover
that section in class.
- "HTML text fundamentals" is where it all starts happening. Pay attention to the use of the word semantics, which you may have used in other kinds of classes; it has a similar meaning here but it's not quite the same.
- "Creating
hyperlinks" is a more complex topic than you might think ;)
The rest of the articles in this lesson are super-useful and clear, but we don't have time to look at every part of HTML. I definitely encourage you at least to skim them, especially if you think you might be doing more web design kinds of things in the future.
But, do look at this part of the MDN Accessibility lesson:
- "HTML: A
good basis for accessibility". This article does use some HTML elements from
the articles I just told you to skim, so don't panic when you encounter
something unfamiliar. It's got some great examples of good and bad HTML (from
an accessibility perspective), as well as some very good
guidance.
You might also get something out of their introductory "What is accessibility?" article (if you haven't read it already). We've already seen a lot of these ideas, but there are some interesting new points.
Summary of Atom and GitHub concepts
Here's a quick summary of the steps for working with GitHub in Atom. For our purposes, you can stop after "Publish and push," though I might talk about "Fetch and pull" today.
https://flight-manual.atom.io/using-atom/sections/github-package/
A short video (featuring some kind of Bob Ross guy) that goes over the Atom
stuff we did in class (you can ignore the stuff he's showing in the
bottom-middle of his Atom screen).
https://www.youtube.com/watch?v=sb5o2WiNb-A
And finally, a couple slightly longer videos (~25 minutes total, unless you speed them up) that talk about why git is useful, and goes over some of the concepts like "commit."
(A couple notes: github is a web-based software collaboration system that uses the tool called git as its "engine." This is why in Atom we see both "Git" and "GitHub" tabs. Most of our actions are actually git actions, but they're acting on our GitHub repository (which causes our github.io website to be published. These two videos focus on the git aspects, and don't talk about either GitHub or Atom—but I think they do a pretty good job explaining what commit, etc, mean—and you also see a little bit of web-design-person work in action.)
Part 1: https://www.youtube.com/watch?v=9GKpbI1siow
Part 2: https://www.youtube.com/watch?v=n-p1RUmdl9M
By Monday
By 9am Monday, you should have (a) posted your github username in the forum, so I know where to find your webpage, and (b) successfully published a basic professional-presence website for yourself. It should include at least one image, at least five links, and have an external stylesheet that gives the page a reasonable professional appearance. I'll give you further instructions about reviewing everyone's sites before Monday's class.
For Day 14 [Thursday, May 14]
As I said, there's actually a lot to CSS, and a lot of fairly deep understanding required in order to really know how to work with it (I do not have sufficiently deep understanding). For our purposes, even the "CSS First Steps" module is more than we quite need--but if you're interested in web design, you might want to read all the way through.
Anyway, please read and annotate the first three parts of the module:
- "What is CSS?" is a brief description (and helps get at why CSS is distinct from HTML).
- "Getting Started with CSS" focuses on the different ways you can select the elements of a page that a rule applies to. Give yourself some time with this; as usual, focus on getting a handle on the concepts and worry less about the details of the CSS language. This is the 'heaviest' of the three readings, I think.
- "How CSS is Structured" reviews some of the stuff I discussed (like external stylesheets), and adds a few extra concepts (like "shorthand" and "at-rules").
Also read and annotate the CSS discussion in
- "CSS and JavaScript accessibility"--some of the accessibility concepts will be pretty clear, and relate to CSS discussed in the readings; some concepts refer to more advanced CSS usage, which is at least interesting to see and think about.
You do not need to read "How CSS Works," but some of you might be interested in this behind-the-scenes discussion.
Finally, the discussion of "Images in HTML" may be helpful to you, but you don't need to annotate it. I'm happy to talk about in class on Thursday, though.
HTML and CSS Resources
The main thing: experiment like crazy! Try stuff; if it doesn't work, see if you can figure out why. This is the process by which you're actually going to learn stuff about HTML and CSS. If things don't work the way you expect, try to get curious instead of frustrated. (Which can be difficult, believe me.)
If your HTML is not behaving the way you think it should, it could because you have a punctuation/spelling problem somewhere. One useful tool is the Markup Validation Service: put in the address of your page (or any page), and this will tell you all the problems it can find.
MDN provides a useful set of HTML reference pages. They're organized both by element and by attribute (many elements use the same kinds of attributes). You can use this both to get a deeper understanding of the elements we've discussed and to discover useful elements we haven't discussed.
They also have a comprehensive set of CSS reference pages. There is a lot here. You might find the alphabetical index of properties useful (like, what are my options for the font-family property?) Also, the summary of selectors. (Again, there's a lot of stuff here; certainly more than I have a grasp of. So, "Wow, that's amazing, glad I don't have to wrap my head around all that this weekend," is a good attitude.)
If you want your page to have a non-default structure--which is to say, if one column doesn't suit your needs--you may want to look through the article on "Document and website structure." This article also has some tips on planning a website that you might find useful. Note that they also have example HTML and CSS in this article; they've shared it on Github here; you might find both the HTML and the CSS interesting. (And yes, there is more HTML/CSS here than we have explicitly discussed--this is all totally optional, but you're very welcome to explore it, and I'm happy to do my best to answer questions.) But I'll caution that getting full control over your layout requires a pretty sophisticated understanding of CSS.
If you want to display tables of information, check out the module on "HTML Tables" (note that there's a 'basic' and 'advanced' article; be sure you check out the advanced one for accessibility tips). Again, you may want to check out the example code they've shared to Github.
For Day 16 [Monday, May 18]
Use the questions below to review three classmates' webpages, and post your responses to the forum.
HTML and CSS
Does the site use HTML correctly—that is, to create the structure of the page? If not, what problems do you see?
Did the site designer use any HTML the assigned readings didn’t use?
Is CSS used to control the
What kinds of CSS selectors does the designer use? (e.g. element/type, class, id, or various “combinators”)
Accessibility
Do all images have “alt text”?
Does the CSS enhance (rather than mess with) the site’s accessibility?
Could any of the accessibility guidelines in the MDN Accessible HTML article be applied to this site? Explain.
Summary
In general, does the site have a professional appearance? What is the strongest aspect of its appearance?
In general, what improvements could you suggest to the site?