need help for logic challenge(junior dev position)
Strategy

need help for logic challenge(junior dev position)


need help for logic challenge(junior dev position)

Hey guys, I've been give this logic challenge for a junior developer position but I'm not sure how to tackle it. Could someone shine a light on how I should go about this challenge?

https://preview.redd.it/aqs69hx5ban41.png?width=700&format=png&auto=webp&s=df2de5e9063fc10ce418822b9dbfd128aa053e53

Many thanks!

submitted by /u/testnary
[comments]



Source link

A Complete Guide to calc() in CSS
Strategy

A Complete Guide to calc() in CSS


CSS has a special calc() function for doing basic math. Here’s an example:

.main-content {
  /* Subtract 80px from 100vh */
  height: calc(100vh - 80px);
}

In this guide, let’s cover just about everything there is to know about this very useful function.

calc() is for values

The only place you can use the calc() function is in values. See these examples where we’re setting the value for a number of different properties.

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

It could be used for only part of a property too, for example:

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

It can even be a part of another function that forms a part of a property! For example, here’s calc() used within the color stops of a gradient

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

calc() is for lengths

Notice all the examples above are essentially numbers-based. We’ll get to some of the caveats of how the numbers can be used (because sometimes you don’t need a unit), but this is for number math, not strings or anything like that.

.el {
  /* Nope! */
  counter-reset: calc("My " + "counter");
}
.el::before {
  /* Nope! */
  content: calc("Candyman " * 3);
}

There are many lengths of CSS though, and they can all be used with calc():

  • px
  • %
  • em
  • rem
  • in
  • mm
  • cm
  • pt
  • pc
  • ex
  • ch
  • vh
  • vw
  • vmin
  • vmax

You can also not perform any calculation and it is still valid:

.el {
  /* Little weird but OK */
  width: calc(20px);
}

Nope on media queries

When calc() is used correctly (length units used as a value to a property), it sadly calc() won’t work when applied to media queries.

@media (max-width: 40rem) {
  /* Narrower or exactly 40rem */
}

/* Nope! */
@media (min-width: calc(40rem + 1px)) {
  /* Wider than 40rem */
}

It would be cool someday because you could do mutually exclusive media queries in a fairly logical way (like above).

Mixing units 🎉

This is perhaps the most valuable feature of calc()! Almost every example above has already done this, but just to put a point on it, here it is mixing different units:

/* Percentage units being mixed with pixel units */
width: calc(100% - 20px);

That’s saying: As wide as the element is, minus 20 pixels.

There is literally no way to pre-calculate that value in pixels alone in a fluid width situation. In other words, you can’t preprocess calc() with something like Sass as an attempted complete a polyfill. Not that you need to, as the browser support is fine. But the point is that it has to be done in the browser (at “runtime”) when you mix units in this way, which is most of the value of calc().

Here’s some other examples of mixing units:

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

Those probably could be preprocessed as they mix units that aren’t relative to anything that is determined at runtime.

Comparison to preprocessor math

We just covered that you can’t preprocess the most useful things that calc() can do. But there is a smidge of overlap. For example, Sass has math built into it, so you can do things like:

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; // processes to 3rem;
  margin-bottom: $padding * 2; // processes to 2rem; 
}

Even math with units is working there, adding same-unit values together or multiplying by unitless numbers. But you can’t mix units and it has similar limitations to calc() (e.g. like multiplying and dividing must be with unit-less numbers).

Show the math

Even you aren’t using a feature that is uniquely possible only with calc(), it can be used to “show your work” inside CSS. For example, say you need to calculate exactly 17th the width of an element…

.el {
  /* This is easier to understand */
  width: calc(100% / 7);

  /* Than this is */
  width: 14.2857142857%;
}

That might pan out in some kind of self-created CSS API like:

[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }

The Math operators of calc()

You’ve got +, -, *, and /. But they differ in how you are required to use them.

Addition (+) and subtraction (-) require both numbers to be lengths

.el {
  /* Valid 👍 */
  margin: calc(10px + 10px);

  /* Invalid 👎 */
  margin: calc(10px + 5);
}

Invalid values invalidate the whole individual declaration.

Division (/) requires the second number to be unitless

.el {
  /* Valid 👍 */
  margin: calc(30px / 3);

  /* Invalid 👎 */
  margin: calc(30px / 10px);

  /* Invalid 👎 (can't divide by 0) */
  margin: calc(30px / 0);
}

Multiplication (*) requires one of the numbers to be unitless

.el {
  /* Valid 👍 */
  margin: calc(10px * 3);

  /* Valid 👍 */
  margin: calc(3 * 10px);

  /* Invalid 👎 */
  margin: calc(30px * 3px);
}

Whitespace matters

Well, it does for addition and subtraction.

.el {
  /* Valid 👍 */
  font-size: calc(3vw + 2px);

  /* Invalid 👎 */
  font-size: calc(3vw+2px);

  /* Valid 👍 */
  font-size: calc(3vw - 2px);

  /* Invalid 👎 */
  font-size: calc(3vw-2px);
}

I imagine it has to do with negative numbers somehow, as using negative numbers (e.g. calc(5vw - -5px)) is OK. I suppose that makes something like calc(5vw--5px) weird, especially in how custom properties use double-dashes (e.g. var(--padding)).

Multiplication and division do not need the whitespace around the operators. But I’d think good general advice is to include the space for readability and muscle memory for the other operators.

Whitespace around the outsides doesn’t matter. You can even do line breaks if you’d like:

.el {
  width: calc(
    100%     /   3
  );
}

Careful about this, though: no spaces between calc() and the opening paren.

.el {
  /* Invalid 👎 */
  width: calc (100% / 3);
}

Nesting calc(calc());

You can but it’s never necessary. It’s the same as using an extra set of parentheses without the calc() part. For example:

.el {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
}

You don’t need those inside calc() because the parens work alone:

.el {
  width: calc(
   (100% / 3)
    -
   (1rem * 2)
  );
}

And in this case, the “order of operations” helps us even without the parentheses. That is, division and multiplication happen first (before addition and subtraction), so the parentheses aren’t needed at all. It could be written like this:

.el {
  width: calc(100% / 3 - 1rem * 2);
}

But feel free to use the parens if you feel like it adds clarity. If the order of operations doesn’t work in your favor (e.g. you really need to do the addition or subtraction first), you’ll need parens.

.el {
  /* This */
  width: calc(100% + 2rem / 2);

  /* Is very different from this */
  width: calc((100% + 2rem) / 2);
}

CSS custom properties and calc() 🎉

Other than the amazing ability of calc() to mix units, the next most awesome thing about calc() is using it with custom properties. Custom properties can have values that you then use in a calculation:

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

I’m sure you can imagine a CSS setup where a ton of configuration happens at the top by setting a bunch of CSS custom properties and then letting the rest of the CSS use them as needed.

Custom properties can also reference each other. Here’s an example where some math is used (note the lack of a calc() function at first) and then later applied. (It ultimately has to be inside of a calc().)

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

Custom properties can come from the HTML, which is a pretty darn cool and useful thing sometimes. (See how Splitting.js adds indexes to words/characters as an example.)

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>
div {
  /* Index value comes from the HTML (with a fallback) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

Adding units later

In case you’re in a situation where it’s easier to store numbers without units, or do math with unit-less numbers ahead of time, you can always wait until you apply the number to add the unit by multiplying by 1 and the unit.

html {
  --importantNumber: 2;
}

.el {
  /* Number stays 2, but it has a unit now */
  padding: calc(var(--importantNumber) * 1rem);
}

Messing with colors

Color format like RGB and HSL have numbers you can mess with using calc(). For example, setting some base HSL values and then altering them forming a system of your own creation (example):

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}

You can’t combine calc() and attr()

The attr() function in CSS looks appealing, like you can yank attribute values out of HTML and use them. But…

<div data-color="red">...</div>
div {
  /* Nope */
  color: attr(data-color);
}

Unfortunately, there are no “types” in play here, so the only thing attr() is for are strings in conjunction with the content property. That means this works:

div::before {
  content: attr(data-color);
}

I mention this, because it might be tempting to try to pull a number in that way to use in a calculation, like:

<div class="grid" data-columns="7" data-gap="2">...</div>
.grid {
  display: grid;

  /* Neither of these work */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

Fortunately, it doesn’t matter much because custom properties in the HTML are just as useful or more!

<div class="grid" style="--columns: 7; --gap: 2rem;">...</div>
.grid {
  display: grid;

  /* Yep! */
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: calc(var(--gap));
}

Browser tooling

Browser DevTools will tend you show you the calc() as you authored it in the stylesheet.

Firefox DevTools – Rules

If you need to figure out the computed value, there is a Computed tab (in all browser DevTools, at least that I know about) that will show it to you.

Chrome DevTools – Computed

Browser support

Desktop

Chrome Firefox IE Edge Safari
19* 4* 11 12 6*

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
80 68 80 6.0-6.1*

If you really needed to support super far back (e.g. IE 8 or Firefox 3.6), the usual trick is to add another property or value before the one that uses calc():

.el {
  width: 92%; /* Fallback */
  width: calc(100% - 2rem);
}

There are quite a few known issues for calc() as well, but they are all for old browsers. Can I use… lists 13 of them, here’s a handful:

  • Firefox <59 does not support calc() on color functions. Example: color: hsl(calc(60 * 2), 100%, 50%).
  • IE 9 – 11 will not render the box-shadow property when calc() is used for any of the values.
  • Neither IE 9 – 11 nor Edge support width: calc() on table cells.

Use-case party

I asked some CSS developers when they last used calc() so we could have a nice taste here for for how others use it in their day-to-day work.

I used it to create a full-bleed utility class: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } I’d say calc() is in my top 3 CSS things.

I used it to make space for a sticky footer.

I used it to set some fluid type / dynamic typography… a calculated font-size based on minimums, maxiums, and a rate of change from viewport units. Not just the font-size, but line-height too.

If you’re using calc() as part of a fluid type situation that involves viewport units and such, make sure that you include a unit that uses rem or em so that the user still has some control over bumping that font up or down by zooming in or out as they need to.

One I really like is having a “content width” custom property and then using that to create the spacing that I need, like margins: .margin { width: calc( (100vw - var(--content-width)) / 2); }

I used it to create a cross-browser drop-cap component. Here’s a part of it:

.drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }

I used it to make some images overflow their container on an article page.

I used it to place a visualization correctly on the page by combining it with padding and vw/vh units.

I use it to overcome limitations in background-position, but expecially limitations in positioning color stops in gradients. Like “stop 0.75em short of the bottom”.

Other Trickery



Source link

Every backend dev
Strategy

CSS Flexbox Basics Part 1


Whether it’s making your application mobile responsive or getting something to align just right, if you’ve ever worked on a UI, you probably understand the frustrations that come with CSS:

Every backend dev

To get past whatever issues you may have experienced, you might have turned to a framework, like Bootstrap, looked to CSS Grid, or, if you’re old-school, stuck with floats. All of these options have their benefits, but, like everything in development, have some negatives. Using a framework means you have to live with importing the entirety of it into your project. CSS Grid can feel a little clunky at times, especially if you’re new to it. Floats are nice but often aren’t as expressive as they ideally could be. 

This is where Flexbox comes in. To me, Flexbox sits in-between CSS Grid and floats. It offers users the flexibility and (close to the same) control that a grid would with the ease-of-use of floats when working to control how elements are arranged in a container. 

You may also like:
CSS Tricks That Will Make Your Work Easier.

Getting Started

To start, let’s get a high-level understanding of how Flexbox works. Flexbox works off of horizontal and vertical axes (referred to as “row” and “column” respectively). Users can define which is the “main” axis and which is the “cross” axis. The main axis will determine how child elements will be aligned in the container. 

For example, let’s say I have a container that holds three dummy elements, “foo”, “bar”, adn “merp”. If I were to set the main axis as “row” (horizontal), then the elements would be arranged horizontally next to one another like this (excuse the crap styling): 

basic implementation
If the main axis were set to column (vertical), then elements would be arranged on top of one another like this:

Vertical alignment

You can set the main axis of your container 

We can also reverse the flow of elements along an axis, so that “merp” becomes our first element and “foo” our third like this for a horizontal alignment: 

Reverse horizontal alignment

and this for a vertical alignment: 

Reverse vertical alignment

What About the Code?

To make an element a Flexbox, you need to set its display value to flex, like so: 

To manipulate your container’s main axis, all you need to do is set the value of flex-direction to:

  • row (horizontal alignment).
  • column (vertical alignment).
  • row-reverse (reverse horizontal alignment).
  • column-reverse (reverse vertical alignment).

So, creating a container that has column as its main axis would look something like: 

Note: Flex-direction defaults to row if a value isn’t specified. 

Justifying and Aligning Elements

Moving items around in a Flexbox is pretty simple (and a big reason for why I love using the tool so much). There are four main properties that control spacing within a Flexbox: 

  • justify-content: controls how elements are spaced across the main axis of a container.
  • align-items: controls how elements are spaced across the cross axis of a container.
  • align-content: controls how elements are spaced across the cross axis of a container when there’s extra room on that axis. (I don’t use this friend all that often, but when I do, I’m happy that it’s around.)
  • align-self: controls how an individual element is aligned on the cross axis of a container. (This property is set on a child element and overwrites any previous alignment set for the parent element). 

justify-content

Justify-content takes the following values as input (all examples are centered across their cross axis): 

  • flex-start: brings child elements to the start of the main axis.

    justify-content: flex-start

  • flex-end: brings child elements to the end of the main axis.

    justify-content: flex-end

  • center : pulls child elements to the center of the main axis.

  • space-evenly: spreads child elements on main axis with uniform space between each.

    justify-content: space-evenly

  • space-between: puts the first and last elements as close to flex-start and flex-end as possible and spreads middle elements uniformly between them.

    justify-content: space-between

  • space-around: adds a reasonable margin between flex-start, flex-end, and child elements, with uniform space between child elements.

    justify-content: space-around

Note: All of these examples have row as the main axis, but the same principles will apply to a container where column (or reverse) is the main axis. 

align-items

Align-content takes the following values as input (again, all examples are centered across their main axis): 

  • flex-start: brings child elements to the start of the cross axis.

    align-items: flex-start

  • flex-end: brings child elements to the end of the cross axis.

    align-items: flex-end

  • center: pulls child elements to the center of the cross axis.

    align-items: center

  • stretch: pulls child elements to cover the cross axis.

Align-content

The differences between align-content and align-items are difficult to see with just one row of child elements, so in the following examples, I’ll show you a side-by-side of the two with the same property values. (Align-content will be on the left, while align-items will be on the right.)

Note: I won’t go over align-self, as I have with the previous examples. Just know that you can assign it to a child element inside of a flex-container and that value will overwrite any previously assigned align property. 

Flex-Wrap

The last property that we’re going to touch in this part is flex-wrap. This just gives you the ability to control how a container deals with overflows of elements. The values that the property takes are: 

  • wrap: wraps content to the next line in a container.

    flex-wrap: wrap

  • wrap-reverse: wraps content to the next line in a container but, shockingly, in reverse order.

    flex-wrap: wrap-reverse

  • nowrap: does not allow for elements to wrap in a container.

    flex-wrap: nowrap

Note: If you want to save a whole line of CSS (“oohs” and “ahhhhs” all around), you can use the flex-flow property to specify flex-direction and flex-wrap. similarly to how you would specify that you want top and bottom and right and left margin, border, or padding to be the same. For example, if you wanted to have a container that had a vertical main axis and that wrapped in reverse, you could write: 

Here, the first “argument” is the value for flex-direction, while the second is the value for flex-wrap

Conclusion

That finishes up this introductory tutorial to Flexbox in CSS. In later parts of this series, we’ll be going over some more complicated topics and putting what we’ve learned into practice to build a basic layout for a site. 

Further Reading



Source link

versions of reCAPTCHA with wobbly text that you must re-type
Strategy

16 Things to Improve Your Website Accessibility (Checklist) …


About author: Bruce Lawson is a a freelance accessibility consultant. He co-authored the books ‘Introducing HTML5’ and ‘Web Accessibility’. He was a co-editor of the W3C HTML5.3 specification and a member of the committee that drafted BS8878 — the British Standards Institutions’ Web accessibility Code of practice.

Accessibility is the practice of ensuring websites are equally available to people with disabilities so they have equal access to the goods and services those sites provide. It’s an integral part of professional web design and development.

Why Should You Care About Accessibility?

There are many reasons why developers, designers, and their employers/ clients should ensure that accessibility is an early and integral part of the process of web development.

  • In many territories, such as the USA, EU, UK, Israel, and Japan, it’s a legal requirement not to discriminate against people due to their disability. In the USA last year, 2,235 new ADA Website lawsuits were filed in federal court. That’s one per hour.
  • Accessible sites tend to be better coded, more robust and rank well on search engines.
  • Accessible sites tend to be more usable for non-disabled visitors, leading to greater satisfaction and conversion.
  • Inaccessible sites are bad for business. In 2019, a UK survey found that more than 4 million people abandoned a retail website because of the accessibility barriers they found. That lost business, the ‘Click-Away Pound’, was £17.1 billion. That’s billion. In the UK alone.
  • It’s bad business to voluntarily turn away potential customers.

The Common Standards and the Problems

Luckily, the W3C (the body that produces many of the standards that the web relies on) has a standard on how to make websites accessible. It’s called Web Content Accessibility Guidelines (WCAG). There are three conformance levels (A, AA, AAA) with ‘A’ being the lowest level of accessibility. I recommend you aim for level AA.

Unfortunately, WCAG is a long, dry and very technical read, so let’s look at what you can do relatively easily and get the biggest bang for your buck. This isn’t an Everything You Need To Know checklist; it’s a checklist of the most common errors, and the errors that people with disabilities say are their main blockers, with practical suggestions to resolve the problems. All external links open in a new tab.

In the Click-Away Pound survey, respondents with disabilities were asked what the main blocks to them completing purchases were. Here are the top barriers (multiple answers were allowed):

  1. Crowded pages with too much content – 66%
  2. reCAPTCHA tests – 59%
  3. Poor legibility (contrast, text layout) 56%
  4. The distraction of moving images and graphics – 53%
  5. Poor link information – 59% (77% for screen reader users)
  6. Form filling 56%

How to Improve Website Accessibility

Firstly, note that none of the top 5 are technical issues — they’re a design or copywriting errors.

1) Too Much Content

In brief: break up text into sections with headings and bulleted lists. Use simple language.

It’s well-known that as the number of choices increases, so does the effort required to collect information and make good decisions. It’s the same with too much content—it soon becomes overwhelming. Paring down content to the essentials is a time-consuming craft; as Mark Twain (allegedly) wrote: “I didn’t have time to write a short letter, so I wrote a long one instead.”

The recent book Writing Is Designing suggests

People want to be able to skim long blocks of text, regardless of sight or audio, so it’s extremely important to structure your longform writing with headers, short paragraphs, and other content design best practices.

So:

  • Have only one <h1> on a page.
  • Use sub-headings liberally; it breaks up a ‘slab’ of text for sighted users, while users of assistive technologies such as screen readers can use a short-cut key to jump between headings or obtain a mental map of the content from the heading structure.
  • Don’t skip a level of headings. For example, if you use an <h3>, make sure it is preceded by an <h2>.
  • Use bulleted lists (like this!) marked up correctly in HTML as <ul>, <li>. Screen readers will announce “List of 10 items” (and allow the user to jump over them).

Use Plain English

Monzo Bank’s “Our tone of voice” guide explains the importance of plain language:

In 2010, US attorney Sean Flammer ran an experiment. He asked 800 circuit court judges to side with either a traditional ‘legalese’ argument, or one in what he called ‘plain English’.

The judges overwhelmingly preferred the plain English version (66% to 34%), and that preference held no matter their age or background.

Flammer notes (PDF) of the plain English version:

It’s shorter by almost a page, so it obviously eliminates unnecessary sentences and words. Its sentences average 17.8 words, as opposed to 25.2 words.

He concludes:

We now have 25 years of empirical research leading to an inescapable conclusion: if you want to please and persuade your reader, write in plain English.

2) ReCAPTCHA

In brief: don’t make your users jump through potentially impossible hoops in order to save developer time.

Respondents were often talking about an old ReCAPTCHA version:

versions of reCAPTCHA with wobbly text that you must re-type

I struggle with the images and having to type the numbers or letters. In the kind where I have to click which images have a shop or whatever, I always miss some or get confused and use up energy I don’t have…

The wobbly letters style of reCAPTCHA is now deprecated. It’s much more common to see a newer incarnation called “No CAPTCHA reCAPTCHA” (also known as the “I’m not a robot” Checkbox) which requires the user to check a box confirming they’re not a robot and which uses secret voodoo to score the user. If they pass, no further interaction is required. However, if they fail, a further challenge will be displayed:

Partial screenshot of a captcha demanding the user click all squares that show oranges

Bear in mind that the type of CAPTCHA that requires a user to click all squares with (say) a street sign isn’t necessarily international. As Terence Eden writes, CAPTCHAs don’t prove you’re human – they prove you’re American.

The most accessible form of reCAPTCHA is reCAPTCHA v3 which requires no user interaction, but needs you to do more work to deal with visits that fail the test:

It is a pure JavaScript API returning a score, giving you the ability to take action in the context of your site: for instance requiring additional factors of authentication, sending a post to moderation, or throttling bots that may be scraping content.

3) Poor Legibility

In brief: make sure text has adequate contrast, is readable and isn’t justified.

  • Ensure adequate contrast. One of the most common access blockers on the web is poor contrast between text and background. The W3C guidelines require a contrast ratio of at least 4.5:1, except for large-scale text and images of large-scale text which should have a contrast ratio of at least 3:1 (logos and ‘incidental’ text are exempt). There are many utilities that can measure contrast ratios for you; my personal favorite is Ada Rose Cannon’s excellent contrast widget, which is a useful browser bookmarklet that highlights areas of insufficient contrast on your page.
  • Don’t have all-capital headings. There’s evidence that they are harder to read because capital letters are all the same height, so we can’t recognize the shape of common words. Additionally, some screen readers will spell out groups of capital letters as if they were abbreviations (like BBC, DOJ, etc). If you must have all capital headlines, write them in a normal case in your HTML and transform them with CSS text-transform: uppercase.
  • Left-align text. (For pages in right-to-left languages like Arabic or Hebrew, right-align text.) Don’t justify it, as this makes it harder for people with dyslexia to read. The British Dyslexia Association’s style guide also suggests

    Use sans serif fonts, such as Arial and Comic Sans, as letters can appear less crowded. Alternatives include Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

4) Distracting Images and Graphics

In brief: allow users to stop any movement; respect their operating system settings; don’t auto-play video.

One respondent to the Click-Away Pound survey wrote,

Sites I used to use with little issue are now becoming a problem as they are now taking on moving adverts and constantly loading more adverts as you shop.

The most basic level of WCAG requires “For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential”.

Distraction is an annoyance – especially for people with ADHD or other cognitive impairments. But movement and flashing can also cause seizures, so the WCAG guidelines require that content should not flash more than 3 times in any 1 second period.

Respect User’s Choice for Animations

All major operating systems allow the user to express a preference for reduced motion on-screen—perhaps because they have motion-triggered vestibular spectrum disorder. Your website can detect whether the user has done this with the CSS prefers-reduced-motion media query.

Here, we only allow a button to animate if the user has expressed no preference:

@media (prefers-reduced-motion: no-preference) {
button {
  /* `vibrate` keyframes are defined elsewhere */
  animation: vibrate 0.3s linear infinite both;
  }
}

If you’re looking to retrofit a site that has many animation rules, the following may stop all previously declared CSS animations:

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
  }
}

On the subject of respecting the user’s operating system preferences, you may want to consider designing your website for dark mode.

5) Poor Link Information

In brief: make links identifiable, with unique link text. Warn users if a link will open a new tab or a file.

One of the main causes of poor links is often poor copywriting. Most screen readers allow the user to quickly see a list of links on a page (in the most-used commercial screen reader, JAWS, the keyboard shortcut is Ins + F7; in the free NVDA screen reader, the same keyboard shortcut brings up an Elements List that lists page links, headings, and landmarks).

However, if every link has text saying “Click here” or “Read more”, with nothing else to distinguish them, this is useless. The easiest way to solve this is simply to write unique link text, but if that isn’t possible, you can over-ride the link text for assistive technology by using a unique aria-label attribute on each link.

Here’s a good example from the Joomla website:

Joomla website, showing two different stories, each with identical "Read more" buttons

The visible link text is simply “read more”, but Joomla uses aria-label attributes to make each unique to assistive technology:

<a href="https://websitesetup.org/joomla-group-2-president-election-results.html" 
  aria-label="Read more: Joomla Group 2 - President election results">Read more</a>

<a href="forum-for-the-future-re-engage-re-ignite-stream.html"
  aria-label="Read more: Forum for the Future: Re-Engage &amp; Re-Ignite Stream">Read more</a>

Because of the aria-label text will be used instead of the link text by assistive technologies, W3C recommends starting the text used in aria-label with the text used within the link as “this will allow consistent communication between users”.

Note: Some bad advice that I still see on old sites is to add explanatory text on links using the title attribute:

<a href="https://websitesetup.org/results.html" title="click here to read more about the election results">Read more></a>

Don’t do this. The title isn’t exposed to most screen readers (developers used to stuff it with keywords for “SEO” purposes, so screen reader vendors disabled it by default), and browsers present title attributes as ‘tooltips’ which are only available to mouse users on hover.

Links Should Look Like Links

By default, browsers underline links. It’s best not to change this, but if you lose a fight in the car park with the designer about this, the link text must have a 3:1 contrast ratio from the surrounding non-link text and should give some ‘non-color designator” that they are a link when hovered or focussed, for example:

a:hover, a:focus {text-decoration: underline;}

The focus style causes the link to become underlined when a non-mouse user focuses on it from the keyboard, stylus or voice input. Generally, whenever something on a page has a hover style, it should also be given a focus style.

The ‘non-color designator’ (in our case, an underline) ensures that visitors with low vision or color blindness will see the change on hover or focus. (Screen readers automatically announce “Link” before link text.)

Tell People If Link Opens a New Tab/ Page

It can be confusing to a visitor if activating a link opens a new tab or a new window, particularly if only some links on a page do this (for example, only external links open a new tab). If you must do this, you should alert the user either in the link text, or using the aria-label method above.

Tell People If Link Is to a File

If a link is to a file (for example, a PDF or a video), tell the user in the link text. Don’t hide it in aria-label, as this can be useful for many sighted users (some mobiles can’t open a .docx file, for example). If it is a large file, consider alerting the user of the approximate size; they may not wish to download a large video file over 3G.

You can also use the download attribute, which causes the browser to open the operating system’s native file download dialogue. Putting this all together, the code will look like this:

<a href="https://websitesetup.org/big-report.pdf" download>Annual report (PDF, 240 MB)</a>

6) Another Design Error: Removing the Focus Ring

In brief: make sure a keyboard user can always see where they are currently focused.

We’ve mentioned :focus styles before. They are an invaluable visual indicator for those people who can’t use a mouse for whatever reason: perhaps they have RSI, or Parkinson’s or Multiple Sclerosis. By default, browsers display a focus ring on the currently-focused element. Here’s the Home link on my personal site, focused in a Chromium browser:

Screenshot of Chromium's default focus ring around a link (which is also an image)

However, some people consider this aesthetically displeasing when they’re using a mouse and turn it off with CSS, thereby leaving the site inaccessible to keyboard users.

Enter a new standard, pioneered by Firefox, called :focus-visible. This will apply a focus ring to an element if it has been reached by a keyboard or a non-mouse pointing device but show nothing to mouse users. As it’s only supported in Firefox (at time of writing), Patrick Lauke suggests the following CSS to play nicely with all browsers:

button:focus { /* some exciting button focus styles */ }
button:focus:not(:focus-visible) {
  /* undo all the above focused button styles
  if the button has focus but the browser wouldn't normally
  show default focus styles */
  }
button:focus-visible { /* some even *more* exciting button focus styles */ }

7) Form Filling

In brief: design form fields that look like form fields, each associated with a label. Don’t disable auto-fill.

Given the vital importance of forms to eCommerce sites, it astonishes me how many inaccessible forms I see. Often this is because old browsers didn’t allow much in the way of styling form elements, so developers faked them with other HTML elements. Modern browsers allow attractive checkboxes, radio buttons, custom select components and comboboxes, accessible autocomplete controls and more.

Autofill Is Your Friend

Allowing browsers to auto-fill forms requires visitors to do less, so they’re more likely to complete a form and sign up/ buy your product. Autofill on Browsers: A Deep Dive is a great article by eBay about this (and they should know).

Also, autocomplete is the only sufficient technique currently for achieving AA compliance with Success Criterion 1.3.5: Identify Input Purpose.

Make Form Fields Look Like Form Fields

By default, browsers display form input fields as boxes. By all means, style these with margins, padding, and borders, but keep them as boxes. Many designers followed Google’s pre-2017 Material Design pattern of using a single line for the user to input text:

Old material design input, with horizonatal line rather than rectangular box

However, Google found that the line under the old text fields was not clear to some users, often confused with a divider, and changed the design. In a usability test with 600 participants, they discovered that

enclosed text fields with a rectangular (box) shape performed better than those with a line affordance … Today, these new text fields appear across Google products from account sign-in pages to Google forms.

If you are considering adopting Google’s full Material Design UI library, read Stop using Material Design text fields! by Matsuko Friedland to see whether it meets your needs.

Label All Form Fields

All form fields (text inputs, checkboxes, radio buttons, sliders, etc) need to be labeled. The best way to do this is to use an HTML <label>; as WCAG says, “standard HTML controls already meet this success criterion when used according to specification”.

Here’s a demo I made of an unlabelled form field vs a labeled form field. They look identical, but the top one doesn’t have a proper label, whereas the second one does. Click into the text label of the bottom one, and you’ll see that it focuses on the associated input.

fake vs real label comparison

This makes focusing an input much easier for someone with motor control difficulties – or maybe for you, trying to check a tiny checkbox on a small screen on a bumpy train. It’s also vital for screen reader users who will tab through fields in a form (by default, only links and form fields are focusable by tabbing); when they tab into an input field, the screen reader will announce the contents of the associated label.

The code for this is simple. The input field is given a unique ID, and the label is associated with it using the for attribute:

<label for="colour">What's your favourite colour?</label>
<input id="colour">

Hiding Labels

Occasionally, you might not want a visible label. Or the designer doesn’t, and you don’t want another fight in the car park. Anyway, here’s an example when a label saying “Search” preceding the input feels like overkill.

Input field, with button labelled 'search' afterwards

We can associate the input field with the text “Search”, which is the contents of the submit button using aria-labelledby:

<input type="text" aria-labelledby="searchbutton">
<button id="searchbutton" type="submit">Search</button>

We could have used aria-label (which we met earlier when talking about links):

<input type="text" aria-label="Search">

But it’s always better to prefer visible text on a page because that will be translated if the page is run through a translation tool, whereas text “hidden” in HTML attributes won’t be. (Hat-tip to Adrian Roselli for this tip, from his splendid article My Priority of Methods for Labeling a Control.)

Most Common Errors on Top Million Home Pages

We’ve looked at the top barriers to eCommerce sites as reported by users with some form of impairment. Now let’s look at a much broader set of sites— the home pages for the top 1,000,000 web sites, automatically analyzed by WebAIM in August 2019. 98% of the pages analyzed had at least one error. The most common errors are

  1. Low contrast text (86.1%)
  2. Missing alternative text for images (67.9%)
  3. Empty links (58.9%)
  4. Missing form input labels (53.2%)
  5. Missing document language (30.5%)

We’ve dealt with low contrast, links and form inputs above. Now let’s look at how we can avoid the other very common errors.

8) Provide Text Alternatives for All Images, Video, and Audio

In brief: any information communicated through an image or video must have a textual equivalent.

Every <img> must have alternative text (“alt text”) which can be communicated to visitors with visual impairments or those with low bandwidth/ expensive data plans who have turned images off in their browsers. This includes images of text.

Here are the basic rules:

  • If the image is purely decorative, it must have empty alt text: alt="". (But purely decorative images should probably be in CSS, anyway.)
  • If an image is described in body text it should have empty alt text (alt=""), to avoid repetition. But be careful if it’s an <img> in a <figure> – see How do you figure? for more.
  • If an image is the only content of a link (for example, your organization’s logo can be clicked to go to the homepage) the alternate text should describe the destination of the link. For example, alt="home page".
  • Don’t use icon fonts; they can be really bad for dyslexic people. If you do use them, convert them to SVG.

Video and Audio Alternate Text

Don’t forget that audio content needs alternative text for people with hearing impairments. That means transcripts of podcasts, and subtitles on videos. And, again: don’t autoplay media.

9) Add Proper Document Language

In brief: let assistive technology know the language that your text is in.

30% of home pages don’t declare the language they’re written in, which can make them confusing for screen reader users. This is important because the word “six” is pronounced very differently if the sentence is in English or French, for example.

It’s easy to solve this by adding a lang attribute to your HTML element:

<html lang="en">

The “en” tells a screen reader (or translation software) that this page is in English. “es” is Spanish, “fr” is French, and so on. For most languages, the language tag is pretty easy to determine. The W3C has a guide to Choosing a Language Tag.

If the page contains content in a language other than its main declared one, add a language attribute to an element surrounding that content. For example, in a page declared to be English:

If you'd like to chat a <span lang="es">matador</span>, in some cool <span lang="es">cabana</span>
And meet <span lang="es">senoritas</span> by the score, <span lang="es">Espana por favor</span>

10) Help a Visitor Get Around Your Content

In brief: use HTML landmark elements to help assistive technology users understand and navigate your content.

When a sighted visitor comes to your page, they can easily visually scan it to understand where the navigation is, and where the main content begins. A screen reader user can’t do this. However, HTML5 gives us some new tags to mark these areas, and assistive technologies have shortcuts that can skip to (or skip over) landmarks like header, footer, navigation and the like.

Here’s a six-minute video I made with Léonie Watson, a web developer and screen reader user, of how she uses her screen reader to examine these semantics to navigate my personal site:

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

  • Wrap your main content, that is, stuff that isn’t header, primary navigation or footer, in a <main> element. In almost all cases, there should only be one <main> per page. All browsers (IE9+) allow you to style it, and assistive technologies know what to do with it.
  • Wrap your header (brand logo, strapline, the heading of the page) in a <header> element.
  • Wrap your footer (legal stuff, contact details, copyright notice, etc) in a <footer>
  • Mark up your primary navigation using <ul> wrapped in a <nav> element. This can be nested inside the <header> if that fits the visual design of the page.
  • Advertising and non-essential content should be wrapped in an <aside>
  • If you have more than one product/ video/ news item/ blog post on a page, wrap each of them in an <article> element.

In its survey of screen reader users, WebAIM found that 26% of screen reader users frequently or always use these landmarks when navigating a page.

Additionally, wrapping discrete pieces of content in <article> helps Apple’s WatchOS display content optimally. See my article The practical value of semantic HTML for more on this.

11) Use HTML Properly

In brief: understand the semantics and default behaviors of HTML elements; use the right element for your content.

A common theme in this article has been using the correct HTML elements. Using a label has a built-in browser behavior that focuses its associated input field; using <main> is preferable to <div class="main"> because it allows screen reader users to jump straight to the important content while being entirely unobtrusive to those who don’t use a screen reader.

Another example is using a <button> for buttons, instead of faking them with loads of nested <div>s. <button> can be styled to look more or less as you want. But the killer feature is that, by default, a real button is focusable with the keyboard, and can be activated with a space bar or enter key. A fake button must replicate those built-in behaviors, making your code more brittle and less maintainable.

Bruce’s infallible law of accessibility states Built-in beats bolt-on. Bigly.

12) Complex Interactions

In brief: Use ARIA only when a native semantic doesn’t exist; use the design patterns and code suggested by W3C.

Sometimes you might be asked to code complex widgets that don’t have native HTML equivalents. First, you should consider whether they can be simplified into native HTML interactions. If not, you’ll need to enter the murky world of JavaScript and ARIA. Luckily, the WAI-ARIA Authoring Practices is full of explanations and examples of accessible Tree Views, multi-thumb sliders, interactive data grids and more. Don’t reinvent the wheel; use these.

13) Frameworks

In brief: frameworks aren’t inherently inaccessible if you choose your components wisely.

Increasingly, frameworks such as React and Vue are used to create web pages. There is nothing inherent in such frameworks that prohibits accessibility, but often the components that developers choose are not written using correct HTML tags, nor tested with assistive technology.

It doesn’t need to be this way. Marcus Herrmann writes “I got the impression that more and more React component systems built with accessibility in mind are emerging.”

For React, these look promising:

  • Design System of Australian Government
  • Reakit “strictly follows WAI-ARIA 1.1 standards. All components come with proper attributes and keyboard interactions out of the box”
  • Reach UI “is tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. As the project matures we’ll get it audited by WebAIM to ensure that if you pick Reach UI, your app has a solid, accessible foundation.”

For Vue:

  • Vuetensils “Follows WAI-ARIA authoring practices for accessibility baked in; semantics, ARIA attributes, roles, etc.”
  • Tournant UI and Vue a11y are small but growing.

ING bank recently open-sourced its internal component library, a project called Lion, which can be used with any (or no) framework.

Lion is a white-label, open-source, framework-agnostic component library, and can be the foundation for your codified in-house Design System … Lion is built from the ground up to allow for accessibility and extendability as we learned that these things are almost impossible to change/achieve at a later point in development.

Please note that absence from these shortlists doesn’t mean a project is bad, it simply means it hasn’t crossed my radar. You should always conduct your own review of third-party software: just because a library or utility is popular doesn’t mean it’s accessible—for example, Typeform is still inaccessible.

Adrian Roselli wrote an invaluable Basic Custom Control Requirements which you can use to evaluate any component library you are considering adopting.

14) Content Management Systems and Site Builders

In brief: choose CMS and Site Builder themes carefully.

The major open-source CMSs, WordPress, Joomla and Drupal, all have the potential to produce accessible sites, although the quality is very dependant on the site creator choosing accessible themes and plug-ins.

Of the hosted Site Builders, Terrill Thompson writes

For accessibility, avoid Weebly. Both Squarespace and Wix are capable of creating accessible sites, but the user has to be looking to do so—it isn’t gonna happen by default. Wix seems to be taking accessibility a bit more seriously than Squarespace, so I’m inclined to recommend Wix as the better option.

(Disclosure: I do occasional consultancy for Wix on accessibility and web standards.)

15) PDF

In brief: PDFs can be made accessible. Make sure your PDFs are so.

Strictly speaking, PDF is not a web technology, although PDF documents are often delivered from web pages. Adobe says

Familiar accessibility features found in formats like HTML such as alternative text for images, semantic elements to convey relationships and structure, labels for form controls, headings for tabular data, and a meaningful and logical content sequence are all fully supported by the PDF specification. Users of popular assistive technologies such as NVDA, JAWS, VoiceOver, ZoomText, SuperNova, MAGic, and more are able to use their tool of choice and access information contained in PDF files.

You can make tagged accessible PDFs from HTML and CSS with a library called Prince—it’s free for non-commercial use.

(Disclosure: I do occasional consultancy for Prince on accessibility and web standards.)

16) Keep Testing

In brief: test! With real people, if you can.

As with any other development, you should always test your pages before making them live. A simple test plan might look like this:

  • Validate your HTML.
  • Test the color contrast.
  • Can you navigate around the page, using only the keyboard, and see where your focus is throughout?
  • Can you fill in and submit forms using only the keyboard?
  • Link to Heydon Pickering’s marvelously ugly revenge.css which puts pink error boxes (with messages in comic sans) everywhere you write bad HTML. (Don’t worry, you won’t forget to remove it before you make the page live.)

The BBC has open-sourced its BBC Accessibility Standards Checker. Google Lighthouse (now available as a Firefox extension) and Tenon.io are also very good.

(Please note that absence from these shortlists doesn’t mean a tool is bad, it simply means that I haven’t tried it; there are many accessibility testing tools.)

No automated tool can be completely reliable, as the fun article Building the most inaccessible site possible with a perfect Lighthouse score demonstrates.

The best way to test the accessibility of your site is to test with real people with a range of disabilities. Peter van Grieken wrote a useful list of things to consider when doing usability testing with disabled people.

Additional Documentation

To all the people whose articles and research I’ve referenced or linked to: thank you for the work you do for the web community and disabled community, and thank you for so generously sharing it to make the world a better, more equal place.





Source link

glass SARSCoV2
Strategy

You Can Get Up Close to This Coronavirus—It’s Made of Glass


Picture the virus that spreads Covid-19, and you might imagine a scary-looking dustball crowned with crimson, orange, and yellow spikes that help it attach to the victim’s insides. At least, that’s how it looks in Centers for Disease Control and Prevention renderings, circulating everywhere from your uncle’s Facebook to President Trump’s Twitter.

But the real coronavirus measures just 120 nanometers, or 0.0000047 inches—teenier than the smallest visible wavelength of light. It has no color at all. If you glimpsed it through an electron microscope, you’d see something much more like this 9-inch crystalline sculpture by British artist Luke Jerram. “It’s nearly two million times bigger than the actual thing,” Jerram says.

SARS-CoV-2 emerged in Wuhan province in China in December 2019 and was declared a global pandemic by the World Health Organization on March 11. There have been more than 182,100 confirmed cases of its disease, COVID-19, worldwide.Courtesy of Luke Jerram

SARS-CoV-2 is just the latest lowlife in a lineup of more than 20 microbes that Jerram has supersized for his series Glass Microbiology. He started in 2004, after flipping through The Guardian and seeing some color close-ups of HIV. Though scientists add color to make such pictures understandable, Jerram is red-green colorblind, and it bugged him. He started working with industrial glassblowers in northern England on more accurate representations of infectious agents like HIV, SARS-CoV, and ebola.

“Of course, by making it in glass, you create something that’s incredibly beautiful,” Jerram says. “There’s a tension there, between the beauty of the object and what it represents.”

Illustrated woman, speech bubble, virus cell

What Is the Coronavirus?

Plus: How can I avoid catching it? Is Covid-19 more deadly than the flu? Our in-house Know-It-Alls answer your questions.

Scientific institutions often commission his sculptures to reflect their research, so when Duke University School of Engineering called Jerram two months ago, wanting a Covid-19 sculpture, he wasn’t surprised—though he didn’t expect it to become a global pandemic. Now his studio is crowded with models of deadly microorganisms that were slated for since-postponed exhibitions. But at least he hasn’t caught the virus, which is more than he could say while working on a swine flu piece in 2009.

“I remember going into a pharmacy and saying, ‘Can I have some tamiflu? I feel rather ill.’ And they just said, ‘Can you leave the building now, please. We’ll come speak to you outside,’” he says. “It was strange to be making this artwork of the thing that’s inside me.”

It takes up to eight weeks to create one sculpture. Jerram begins by studying and comparing existing scientific imagery and models of viruses made through techniques like electron microscopy and X-ray crystallography. After making a detailed sketch, he often runs it past a virologist, then delivers it to borosilicate glassblowers in Sunderland trained by Pyrex 30 years ago.



Source link

How to Create a “Skip to Content” Link
Strategy

How to Create a “Skip to Content” Link


Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.

In fact, you can find one right here on CSS-Tricks if you crack DevTools open.

In my opinion, the best way to implement a skip link is to hide it and then bring it into view when it is focused. So, let’s say we have a link in the HTML:

<a class="skip-to-content-link" href="https://css-tricks.com/#main">Skip to content</a>

…we can give it an absolute position and translate it off the screen:

.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

Then we can bring it back into view when it’s in focus and style it up a bit in the process:

.skip-to-content-link {
  background: #e77e23;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}

This will hide our link until it is focused and then put it into view when it becomes focused.

Now, allow me to elaborate, starting with this quote from Miles Davis:

Time isn’t the main thing. It’s the only thing.

As I sit down to write this article in a rainy Ireland, I think of the challenge that many users face as they use the web that I take for granted. We put so much thought into creating a great user experience without thinking of all our users and how to meet their needs. Admittedly, a skip link was something I had never heard of until completing a course on Frontend Masters by Marcy Sutton. Since learning the power and simplicity of using a skip link, I decided to make it my mission to spread more awareness — and what platform better than CSS-Tricks!

A solution is an answer to a problem, so what’s the solution for helping keyboard users and screen readers find the content of a page quickly? In short, the solution is time. Giving users the ability to navigate to parts of our website that they are most interested in gives them the power to save valuable time.

Take the Sky News website as an example. It offers a “Skip to content” button that allows users to skip all the navigation items and jump straight to the main content.

You can see this button by navigating to the top of the page using your keyboard.  This is similar to the implementation shown above. The link is always in the document but only becomes visible when it’s in focus.

This is the type of skip link we are going to create together in this post.

Our sample website

I built a sample website that we will use to demonstrate a skip link.

The website has a number of navigation links but, in the interest of time, there are only two pages: the home page and the blog page. This is all we need to see how things work.

Identifying the problem

Here’s the navigation we’re working with:

In total, we have eight navigation items that a keyboard user and screen reader must tab through before reaching the main content below the navigation.

That’s the problem. The navigation may be irrelevant for the user. Perhaps the user was given a direct link to an article and they simply want to get to the content.

This is a perfect use case for a skip link.

Creating the link

There are a couple of approaches to creating a Skip to content link.  What I like to do is similar to the Sky News example, which is hiding the link until it is focused.  That means we can drop the link at or near the top of the page, like inside the <header> element.

<header>
  <a class="skip-link" href="https://css-tricks.com/#main">Skip to content</a>
  <!-- Navigation-->
</header>

This link has a .skip-link class so we can style it. Thehref attribute points to #main, which is the ID we will add to the <main> element that comes further down the page. That’s what the link will jump to when clicked.

<header>
  <a class="skip-link" href="https://css-tricks.com/#main">Skip to content</a>
  <!-- Navigation-->
</header>


<!-- Maybe some other stuff... -->


<main id="main">
  <!-- Content -->
</main>

Here’s what we have if we simply drop the link into the header with no styling.

This does not look great, but the functionality is there. Try navigating to the link with your keyboard and pressing Enter when it’s in focus.

Now it’s time to make it look pretty. We must first fix the positioning and only show our skip link when it is in focus.

.skip-link {
  background: #319795;
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0%);
}

The magic here is in the transform property, which is hiding and showing our skip link depending on whether it is focused or not. Let’s make it look a little nicer with a quick transition on the transform property.

.skip-link {
  /* Same as  before */
  transition: transform 0.3s;
}

It will now transition into view which makes that bit better.

You should now (hopefully) have what I have below:

As you can see, the skip link bypasses the navigation and jumps straight down to the <main> element when clicked.

It’s OK to use more than one link!

Right now, the link only serves one purpose and that is skip to the content of our website. But we don’t have to stop there.

We can go even further and create a skip link that has more options, such as a way to jump to the footer of the site. As you might imagine, this is quite similar to what we’ve already done.

Let’s make the blog page of the example site a little more usable by using multiple skip links. It’s common for blogs to use AJAX that loads in more posts when reaching the bottom of the page. This can make it very difficult to get to the footer of the website. That’s the problem we want to solve in this case.

So let’s add a second link that bypasses all that auto-loading business and jumps the user straight to a #footer element on the page.

<div class="skip-link" >
  Skip to <a href="https://css-tricks.com/#main">content</a> or <a href="https://css-tricks.com/#footer">footer</a>
</div>

We also need to amend our CSS a little and use the :focus-within pseudo selector.

.skip-link {
  transform: translateY(-100%);
}

.skip-link:focus-within {
  transform: translateY(0%);
}

This is saying if anything within our .skip-link element has focus, then we show it. Sadly, neither Internet Explorer nor Opera Mini support focus-within, but its coverage is pretty darn good and there is a polyfill available.

Desktop

Chrome Firefox IE Edge Safari
60 52 No 79 10.1

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
80 68 No 10.3

Last thing we need to do is make sure there’s an ID on our footer element so the link has something to jump to.

<footer id="footer">

Here’s what this gives us:

If we wanted to go one step further (and I’d encourage it), we could style each link a little differently so users can distinguish between the two. Both links in this example are plain white which works great for a single button that does a single thing, but it’d be clearer that we’re dealing with two links if they were presented differently.

Jumping to conclusions

Are you using skip links on your site? Or, if not, does this convince you to use one? I hope it’s clear that skip links are a great value add when it comes to the accessibility of a site. While it’s not a silver bullet that solves every accessibility need, it does solve some use cases that make for a much more polished user experience.

Here are some prominent sites that are using this or a similar technique:



Source link

toluca vs. atlas in empty namesio diez stadium
Strategy

The Hushed Spectacle of Soccer Matches In Empty Stadiums


Professional sports around the world ground to a halt last week as the coronavirus pandemic prompted one country after another to ban large public gatherings. Many sports leagues didn’t wait for official guidance, preemptively suspending or postponing seasons—in some cases after players or coaches tested positive for the virus.

But before pulling the plug, some soccer leagues tried to salvage their seasons by playing games in empty stadiums, much like the talk shows that began filming without live audiences. The bizarre and short-lived spectacle of matches played against a backdrop of empty bleachers proved irresistible to the world’s sports photographers. Truly a testament to soccer’s reputation as the world’s game.

Toluca plays Atlas before an empty Nemesio Diez Stadium on March 15 in Toluca, Mexico. Liga MX, Mexico’s top-flight soccer league, was one of the last major sports leagues to postpone its season.Photograph: Angel Castillo/Jam Media/Getty Images
Borussia Mönchengladbach’s Marcus Thuram and Cologne’s Kingsley Ehizibue fight for the ball during a German Bundesliga match on March 11, the first played behind closed doors without spectators. After an initial period of playing in empty stadiums, the Bundesliga season has now been indefinitely postponed.Photograph: Martin Meissner/AP
A man dressed as a ghost stands in the bleachers prior to the UEFA Europa League match between Linzer ASK and Manchester United in Linz, Austria on March 12. The match was played in an empty stadium. Future Europa League matches have been postponed indefinitely.Photograph: Kerstin Joensson/AP
People sit surrounded by empty seats as they wait for the start of the English Premier League soccer match between Liverpool and Bournemouth at Anfield stadium in Liverpool, England, Saturday, March 7, 2020. (AP Photo/Jon Super)Photograph: Jon Super/AP
Valencia CF and Atalanta battle in the March 10 UEFA Champions League match at an empty Estadio Mestalla in Valencia, Spain. Future Champions League matches have been postponed indefinitely.Photograph: UEFA
A security guard stands in the empty Allianz Stadium in Turin, Italy before a Serie A match between Juventus and FC Internazionale on March 8. The Serie A season has been suspended indefinitely.Photograph: Valerio Pennicino/Getty Images

WIRED is providing unlimited free access to stories about the coronavirus pandemic. Sign up for our Coronavirus Update to get the latest in your inbox.


More From WIRED on Covid-19



Source link

WooCommerce 4.0 & WooCommerce Payments Beta
Strategy

WooCommerce 4.0 & WooCommerce Payments Beta


Y’all know WooCommerce: it’s a plugin for WordPress that adds robust eCommerce functionality to your site. Notably, like WordPress itself, it’s open-source and free. You only pay for things if you need things like special plugins that extend functionality.

This is a huge month for WooCommerce! Two major releases:

WooCommerce is a major upgrade, to the point that there are things that aren’t compatible just yet. You should do all the normal best practices when upgrading, like making backups and testing on staging first. Once you’ve upgraded, you get:

  • New admin: You don’t need the separate admin plugin anymore, it’s baked right in! So you get very nice detailed reporting of just about any aspect of your sales performance. Stuff like comparing year-of-year sales and full customization of reports.
  • New onboarding: If you already use WooCommerce, you’re already all set, but for new users, you’ll be walked through setup in a much more clear way. Like a multi-step wizard that asks you questions about your business and gets things configured correctly.
  • Behind the scenes: A crucial bit to WooCommerce is the Action Scheduler and a change in 4.0 is moving that work to the database level for much better performance. For example, if you sell subscriptions, this is the thing that runs that updates all your users subscriptions and keeps them in the correct state and updates all the admin data.

If you’d like to read more about the 4.0 release…

WooCommerce Payments (Beta)

This is a brand new (free) plugin from WooCommerce. Funny name, right? Of course, WooCommerce could already take payments. If you wanted to take credit cards, your best bet was the Stripe plugin, as it worked great and also opened doors for taking Apple Pay, Google Pay, and others.

With WooCommerce Payments the entire payments experience is moved right into your WooCommerce dashboard. You go through a little onboarding experience as you activate it and then you’ve got a whole new area of your dashboard dedicated to payments.

This video does a good job of showing it off:

You can:

  • See all the payments
  • See deposits to your bank
  • Process refunds
  • Deal with your disputes

And all that type of stuff directly on your dashboard, rather than having to hop over to some other payment dashboard elsewhere to do things. It’s a totally custom-designed experience just for WooCommerce.

Want in? If you’re in the U.S., here’s a special link to skip the beta invite process and download the plugin. It’s not available quite yet for the rest of the world, but you can still sign up for the beta to help signal interest in your region.

What do we use it all for?

Here at CSS-Tricks, in the past, we’ve used WooCommerce for selling merchandise like t-shirts and the like. We’re not doing that at the moment, but maybe we will someday again! WooCommerce is still on the site and upgrading to 4.0 was painless for me.

Lately, I’ve been more interested in what it might be like to have memberships again. And actually, to be accurate, subscriptions to memberships, as those are different things and it took me a minute to wrap my brain around that. They are both separate plugins but work together:

So if you wanted a membership that you charged on a monthly or annual basis for (rather than a one-off cost membership), you use both plugins. Memberships deal with locking down the content and they expire at the end of a term. A subscription can keep a membership going by extending the membership upon recurring payments.

I’m still learning how all this can work, but here’s a whirlwind tour.

With the Memberships plugin in place, I can create a Membership plan for the site. Notice that’s it’s “subscription tied” to a length of time, thanks to the Subscription plugin.

Now say I publish something that I’d like to lock down to members. In the “Advanced Panels” area after the editor, there will be a content restriction area that comes from the Membership plugin.

I can choose to lock down content at the fine-grained post/page level if I like. I can also do whole hierarchies of pages or categories or custom post types or the like.

Now if I was to view that page as someone who wasn’t a member (and by the way, the User Switching plugin is nicely integrated so you can preview the site as people of different plans) I would see only an expert of the post and the rest of it hidden with a content-locked message.

From there, of course, the user could proceed with purchasing a membership to unlock the content.

I really like how easy this all is to set up and how well integrated into WordPress it is. Of course it is, that’s why WooCommerce is the most popular eCommerce platform out there.



Source link

Post image
Strategy

Logo for dog training and event performance : graphic_design


I created this logo and was looking for critique on it, It is for an online dog training and event performance company largely at indoor and outdoor dog shows but sometimes film and TV. Without giving the company name away as the domain hasn’t been registered yet, it has the word “star” in it. Trying to create a simple and modern logo which would largely be used on a website, van decal and clothing. I wasn’t sure about the grey stroke and detail so I have uploaded a few versions. Suggestions are more than welcome – including bin it and start again!

Post image

Version 1

Post image

Version 2

Post image

Version 3



Source link

Anyone know if this website is using a CSS framework?
Strategy

Anyone know if this website is using a CSS framework?


Anyone know if this website is using a CSS framework?

Couldn't find anything with Wappalyzer, but I thought this looked very familiar. Anyone know if I'm crazy, or if this is actually a CSS framework? Thanks!

https://preview.redd.it/8ikgb54166n41.png?width=1307&format=png&auto=webp&s=315afa597f1a37428cdd8c5255f5d2772b767d07

submitted by /u/UnfairerThree2
[comments]



Source link