zersiax

Umbraco 8 Basic Website Tutorial: Accessibility/UX notes

Intro

This is a stream of consciousness-style list of notes I put down while trying to go through the Umbraco 8 Basic Site tutorial. Accessibility hurdles will be noted, nitpicky as they may be. This test is run using the dev/v8 branch on the 18th of September 2019.

Installer

• In the first screen, the button to customize the installation is a link ( tag). This is confusing as links and buttons do different things and a user hopping from button to button will outright miss this control.
• On the page to select if you want a starter kit or not, the link to accept the starter kit has the link text of "Loading".
• On the installer progress page, the heading structure is broken; the progress is denoted by a heading 3, with a "Did you know?" heading level 2 above it. There's two things wrong with this, namely:

nathanwoulfe

/*    package.manifest...
 *
 *    {
 *	    "javascript" : ["~/App_Plugins/nunpublish/script.js"]
 *    }
 */
 
(function () {

    function directive(authResource) {

madsrasmussen

import axios from 'axios'
import _ from 'lodash'

const baseUrl = 'https://slave-eagle.s1.umbraco.io/'
const restUrl = 'umbraco/rest/v1/content/published/'

class Umbraco {
  constructor () {
    this.baseUrl = baseUrl
  }

samthor

// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.

/**
 * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
 * load <script nomodule> anyway. This snippet solve this problem, but only for script
 * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
 *
 * Again: this will **not** prevent inline script, e.g.:

vitalyfriedman

1. Highlight a recommended option,

2. Allow users to switch currency (€/$/£)

3. Allow users to switch pricing monthly/yearly

4. Keep the entire pricing plan area clickable

5. Use slider to calculate how much a user would save

6. Provide free first month for good engagement

7. Prominently highlight testimonials prominently

8. Repeating call to action on top and bottom

9. Sell benefits instead of features

10. Indicate that users can cancel any time


adewale

Common misconceptions about Progressive Web Apps

They have to be SPAs.
They have to live at pwa.*.com
They have to be mobile only.
They're not allowed to be responsive.
They have to use material design.
They only work in chrome.
They don't work in safari or on iOS.
They have to look like your android app.

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

jakearchibald

My reply to https://helloanselm.com/2016/open-service-worker-questions/, which sets a new record for false statements per word.

The first thing I noticed after making sure that Service Worker are enabled (Chrome is behind flags)

No they're not. They've been in stable for over a year now.

was that I found no user setting or any hint in the developer tools about service workers

There's a service worker panel in the sources tab and in the resources tab. There's also chrome://serviceworker-internals/. The script also appears in the context dropdown (as iframes do). The script itself also appears in the sources panel. You can also type navigator.serviceWorker.controller into the console to inspect the controlling service worker for the page.

jonathantneal

Practical ARIA Tabs

This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.

The Rules

1. Add tablist role to the <ul> to indicate it contains tabs.
2. Add presentation role to each <li> to bypass its list item state.
3. Add tab role to each <a> to incidate it is an actual tab.
4. Add href and aria-controls to each <a> to reference its tab panel.