The fourth week

Here's what we're going today

  1. Another test?
  2. Moving forward with OCAS
  3. What would you like to go over from last week?
  4. Theory
    1. Dark patterns
  5. Praxis
    1. Linting!
    2. An accessible accordion

Would you like to participate in a test?

We have been asked to use this site and fill out this survey.

OCAS is a great case study in requirements

Let`s see what some people missed...

...last week

Dark Patterns

Dark patterns are design patterns that are meant to manipulate the user.

Dark patterns are not bad design - they are good design for bad reasons.

Psychological Insight Applied Honestly (benefits users) Applied Deceptively (benefits business)
“We don’t read pages. We scan them” —Steve Krug Aid rapid comprehension: ensure key content is shown in headings, subheadings (etc), using a strong visual hierarchy. Hide key information: Bury facts within paragraphs of text, so some users will proceed without fully understanding the transaction.
“People tend to stick to the defaults” —Jakob Nielsen Prevent mistakes: Default to the option that’s safest for the user. In important contexts, don’t use defaults and require the user to make an explicit choice. Benefit from mistakes: Ensure default options benefit the business, even if this means some users convert without meaning to.
“People will do things that they see other people are doing” —Robert Cialdini Show unedited feedback: Allow real customers to share their experiences, so they can make accurate pre-purchase evaluations. Bury negative feedback: Hand-pick positive feedback and display it prominently. Bury negative feedback so it is hard to find.
https://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design

Amorality

Dark patterns test really well.

Dark patterns could be in legacy code, they could be given to you to develop, or they could even come from you.

Hooray for linting!

Clone https://github.com/simonborer/a11y-linting

We will be looking at both an html linter (htmllint) and a command line auditing tool (lighthouse).

HTMLLint

  1. Open the project in your text editor
  2. Look at package.json under "dependencies" and "devDependencies"
  3. Open your command line client
  4. Go to the project folder
  5. Run <code>npm install</code>
  1. Look at package.json under "scripts" - this is where we define the node scripts the will get called by <code>npm run</code>
  2. <code>npm run build</code>
  3. htmllint options are defined in .htmllintrc - try getting rid of one of the tag bans to clear an error
  4. Now try fixing the html to clear the rest
  5. Tell me why we put htmllint under the "build" script

Lighthouse CLI

  1. Look at package.json under "scripts", at the "audit" script. Read me this script in non-technical terms.
  2. Run <code>npm run audit</code> and view the output file.

Exercise: an accessible accordion

Build an accessible accordion and submit it as a pull request. Feel free to pair-program.