Skip to main content

Web Unit Studio / Accessbility and Layout

Texts to have read
Work to have achieved
  • Compose and push a first preview draft of your website portfolio project: mobile-first content, minimal styling, to get the gears turning. This should include:
    • A multifile project folder – probably the pre-built folder named docs, for ease of use with GitHub Pages – containing a combination of HTML and CSS, even if it's not well-developed.
    • A static screenshot (.png or .jpg) of your website-in-progress, as rendered in a local web browser (for comparison later to subsequent drafts: this is your "flat" export).
    • A screenshot of your text editor setup, too, with the navigation pane showing: this can sometimes help me give feedback more quickly.)
    • At least an initial update to your README.md file, introducing your site (as opposed to this assignment). Feel free also to ask questions or lay out next steps for yourself!
    • An updated list of assets, now with any files or fonts you've actually obtained. As you go, add TASL documentation for any outside sources – title, author, source (e.g. url), and license (e.g. Creative Commons, fair use rationale).

Plan for the day:

  1. Accessibility checks: check on your own, work with a neighbor to fix what needs fixing
    • document outline
    • alt text
    • contrast ratios
  2. Thoughts for studio
  3. Studio: toward a laid-out second preview
    • Set Goals
    • Go forth!
    • Exit note

1. Accessibility checks

The best way to make sure you’re building a website that people can access is to work with accessibility in mind from the beginning, and checking periodically along the way. We already talked about alternative text representation of images: every image needs to declare alt text, or leave alt="" to signal that the image is purely decorative. We also talked about the importance of a sensible document outline, created by heading levels, with exactly one h1 and levels governed by content, not appearance. Another is contrast: the Web Content Accessibility Guidelines (WCAG) recommends a minimum luminosity ratio of 4.5:1 between text and background, and ideally the ratio is even higher: 7:1.

Today I want to introduce a tool you can use to catch yourself making mistakes – or doing well! – with these and other accessibility concerns. It’s called the Web Accessibility Evaluation Tool, or WAVE, and you can find it at wave.webaim.org/.

There, you can download an extension or add-on for either Chrome or Firefox (or Edge) that will run a quick inspection of the current page your browser has open – including local pages.

Please take a minute to install the plugin on your browser of choice, if you don't already have it.

UPDATE: To make this work with local files, you’ll need to change the permissions of the extension. After installing, right-click on the icon and choose “manage extension” (or the equivalent for your browser). A new page will open with options; look for “Allow access to file URLs” and toggle that to on.

Quick demo

I’ll give you a brief tour, using my own site.

  • Errors, alerts, and features
  • Page structure
  • Reading order
  • Contrast errors

Your turn!

Start by analyzing the preview draft you brought in for today. What’s working? What do you need to fix?

Then share your findings with a partner. Work together to celebrate your wins and correct any outright errors.

2. Thoughts for studio

Keeping it brief this time:

  • After your accessibility check, layout is probably next: start with tonight’s HW reading / tutorials.
  • NB: You may need to add HTML to achieve your layout, because you may need containers or groups. Divs can act as a first pass for both those things! But sometimes a semantic element like main, section, article, etc is a good improvement on a generic div.
  • Some layouts take several rules to get working. Don’t panic; work iteratively. Stuff may look weird for a sec (as when you first turn on flexbox) – or nothing may change at first (as when you first turn on grid).
  • Use your commits to give yourself safe-spots in history, where you know it’s not broken; then press forward.

3. Studio: toward a laid-out second preview

Set Goals

As usual, please write down some goals in the shared google doc, setting a concrete plan for today: what do you need to do to level up on HTML, CSS, and resource gathering to move toward your specific project?

For my sake and yours, please be as specific as possible: e.g. rather than “working on my site,” you might say, “choosing images for photo gallery” or “building grid for layout with top menu and featured image” etc.

EXT: Already feeling done? Ask yourself:

  • Are you repeating the same CSS rule in multiple places? Instead, see if you can reuse CSS classes in multiple places, extending them where you need to.
  • Does that div need to be there? If it’s not for layout or semantic grouping, it might not be necessary: remember that you can apply classes directly to elements.
  • Do you have style or presentation directly in the HTML? See if you can extract it out to the stylesheet for consistency, flexibility, and ease of maintenance.
  • Would it help to define colors relative to starting values? See css-tricks.com/a-complete-guide-to-custom-properties/.

Go forth! And Don’t forget to document your process

Don't forget to save periodically as you go:
  • as a project file
  • as a screenshot, showing your process
  • as a git commit, saying what you've just achieved

Exit note

Before you leave, just as a way for me to check in, I’d like to hear more about what happened today: Did you decide on your navigation? Block out the html? Make some progress on a stylesheet? Work through a tutorial or two (and which)?

Reply to your note in the google doc.

Homework for next time

  1. Work through a tutorial on layout:
    • Kevin Powellists, do Module 6: Layouts.
      • NB: when you get to the section on Flexible layouts with Flexbox, there’s a typo in the first interactive code block: he says there are two layouts, one using grid and one using flex, but the HTML only has one. You can fix it with a little copy-paste! Just edit the class on the outer div so you have one <div class="flex"> and one <div class="grid">.
    • If you’ve been doing Interneting is Hard, skip the layout chapters and instead read two pieces by Josh Comeau:
  2. Everyone will also probably benefit if you watch Powell’s Useful & Responsive Layouts, no Media Queries required (11:02 runtime at full speed).
    • It’s got a bunch of ready-to-roll layout solutions that will apply broadly. Do the reading above first, though: it will make much more sense if you’re already familiar with Flex and Grid layouts.
  3. Armed with all that info, compose and push a second preview draft, now adding or updating layout for larger screens (i.e. desktop).
    • On Wednesday we’ll talk about criteria and aspirations, getting ready to spend next Monday workshopping your full website drafts.
  • EXT for enthusiasts:
    • If you’re doing Powell’s tutorial, check out the two Josh Comeau resources above, which get into more depth than Powell’s Layouts chapter does.
    • If you haven’t yet done so, try the MDN Test Your Skills pages for Flexbox and for Grid.
    • Want even more layout templates and examples? Try Rachel Andrew’s Grid By Example, which also has video tutorials.