The transition to leadership

The flawed theory is that A+ students become good leaders.

There’s no reason to think that this should be true.

Doing well on tests, paying attention to what’s being asked, being diligent in short-term error correction–these are three hallmarks of someone who is good at school.

None of these are important once you’re charged with charting a new path, with figuring out what to do next. In fact, they get in the way.

We invented the educational regime to produce compliant factory workers. But the most compliant aren’t always suited to be the bravest, the most empathic or the most intuitive.


When things get difficult, is your instinct to invest the effort to make it better, or to set a trap so it all gets worse?

Because if things get worse, well, then you won’t have to deal with them much longer.

And if things get worse, then you’re off the hook.

No longer your problem.

If we don’t trust ourselves with making it better, if it’s too fraught with risk or emotionally painful, it might feel easier and simpler to simply make it worse and walk away.

Investing in a system, a place, a relationship, a project–that’s a commitment. It puts you even more on the hook. That person who is right in front of you becomes more real and the problem becomes even more urgent.

And it might even be worth it.


[Grateful for you and for everything you do to make things better. Thank you.]

Book list, Fall 2019

Start Finishing by Charlie Gilkey

Beginner’s Pluck by Liz Forkin Bohannon

Stillness is the Key by Ryan Holiday

Change the World by Jacqueline Novogratz

The Power Broker (audio) by Robert Caro

You Are Awesome by Neil Pasricha

Ignore Your Customers and They’ll Go Away by Micah Solomon

Super Thinking by Weinberg and McCann

The Diversity Bonus by Scott Page

Living Bread by Daniel Leader

Poilane by Apollonia Poilane

Nothing Fancy by Alison Roman

A Culture of Fact by Barbara Shapiro

The Entrepreneurial State by Mariana Mazzucato

She Came to Slay by Erica Armstrong Dunbar


NEW! A one-click way to add a whole bunch of books to your Amazon cart at once. To add 17 of my books to your Amazon cart with just one click, simply click here.

And here’s a one-click way to fill your cart with books for kids, the best gift I know for the new parent who has everything but sleep.

And here’s a link to Reedsy’s spreadsheet if you want to build your own. Be sure to make a copy of the sheet, as you can’t change that one. HT.


When things get difficult, is your instinct to invest the effort to make it better, or to set a trap so it all gets worse?

Because if things get worse, well, then you won’t have to deal with them much longer.

And if things get worse, then you’re off the hook.

No longer your problem.

If we don’t trust ourselves with making it better, if it’s too fraught with risk or emotionally painful, it might feel easier and simpler to simply make it worse and walk away.

Investing in a system, a place, a relationship, a project–that’s a commitment. It puts you even more on the hook. That person who is right in front of you becomes more real and the problem becomes even more urgent.

And it might even be worth it.


[Grateful for you and for everything you do to make things better. Thank you.]

The Secrets Behind Keeping A Hotel Busy All Year Round

With the restrictions of work and school breaks, most holiday makers choose to get away in the summer period. However, with crowds of tourists and hiked prices, the more moneysavvy among us will opt for an off-season getaway. There are many perks of choosing an off-peak holiday including a quieter atmosphere and discounted prices. Despite these perks however, hotels can find it challenging to fill up their rooms during the low season. Along with Cairn Collection, we are going to look at some of the tactics employed by hotels to maintain the tourist footfall during these busy periods.  


Customer loyalty  

Impress a guest once and they could soon turn into a regular visitor. If you provide a personal experience and really take your guests’ needs into account, they will want to return time after time. Furthermore, word of mouth can be a strong influencer. Loyal customers who enjoy your exceptional service are bound to tell their friends and family about your hotel and this could substantially boost your clientele. 

Once you have established your loyal clientele and target audience, utilize a personalized marketing strategy. Emails and social media updates, for example, are great ways to ensure that your regular customers are up to date on special deal and off-season perks. Now that you’ve got their attention you can really sell the bonuses of avoiding the busy season. If you’re running any events and activities, or your local area has a seasonal celebration coming up, make sure your previous guests know so that they can book again. This is also a great way of advertising flash sales as we will go on to talk about later in the article.   


Location, location, location 

Whether you own a hotel in Edinburgh, Newcastle, London or Cardiff, you need to capitalize on the local culture. Tourism faces some inevitable peaks and troughs across the calendar year, so hoteliers should incorporate any relevant events which are held throughout off peak months.  

Even in the winter months there will be local perks to make the most of. The Royal Botanic Garden in Edinburgh, for example, looks just as sublime with a coating of frost on a bright morning. Also, you’re guaranteed to encounter far fewer tourists than during the busy summer months. London is known for its constant hustle and bustle but plan a trip in January and enjoy an off-peak rate, during one of the quietest months of the year in the capital. Attractions across the UK’s major cities experience a shortfall during the first month of the year, so hotels looking to increase their occupancy during these periods should factor this into their nightly rates.  


It’s all in the experience 

More and more commonly, guests want a whole experience from their hotel, not just a place to sleep. From providing food and drink offers to offering sessions that sample the local culture, hoteliers aim to provide an immersive experience which rivals the standard overnight stay. Guests are looking more and more for ways to break from the convention on their holidays. An off-season break can sometimes require a bit of prior planning to fill up those quieter days with activities. If a hotel can offer guests excursions to local markets and historic attractions, then they are essentially providing a further incentive for customers to book, along with the appeal of less tourist congestion. 

Even simply providing local tricks and tips and transform your customer experience. Give them a tourist friendly map of the area, let them know about your favourite coffee shop and restaurant. Partnerships with other local businesses are another great way to engage your guests with the local culture. Partnerships with bars and restaurants are likely to boost business for both parties and provide free advertising.  


Flash sales 

As previously mentioned, flash sales are a brilliant technique to boost those reservations. Everyone is on the lookout for a good deal as they are so reluctant to part with their hard-earnt cash. Whilst many of us turn straight to online comparison sites, the true deal hunters also look at book direct deals using the hotel’s website. Many hoteliers choose to target months like October and November with flash sales, aware of the drop-in families visiting as the school term is well underway.  

Using these tactics, hotels can boost their year-round sales and make sure their rooms are full, even during traditionally quiet seasons. With a little creativity you can turn your seasonal establishment into a year-round success.  



Nobody Cares About Your Sustainability Report

As many large companies prepare next year’s sustainability reports, it’s important to note that nobody cares.

Well, very few people care, and they fall into three little buckets:

First, specialized interest (or pressure) groups await the reports so they can check on how badly companies are falling short on whatever idealized goals the groups have set.

Customer Service Happens When the Experience Breaks Down

Understanding the difference between customer experience and customer service will save you money in your contact center!

There’s a quote (which I may have evolved over the years) from Chris Zane, founder of Zane’s Cycles, that goes like this: “Customer service is what happens when the experience breaks down.”

It’s a great quote for a variety of reasons, not the least of which is the fact that it nicely differentiates “customer experience” and “customer service,” which people often confuse to be one and the same. Not so.

What Exactly Is Employee Experience?

Today’s post was originally published on Forbes on February 1, 2019. I’ve made some modifications to that original post.

It’s starting to happen. I hear it. I see it. Finally.

It’s not perfect, but we’re making progress. I’ll take progress at this point. It’s better than nothing.

What am I talking about?

Discontinuous thought

The gap between mobile and desktop is:

[shift] ENTER

When one is typing on a laptop, the assumption is that you’ll keep going with your thought until you push ‘send’ or ‘publish’.

But on a smart phone, the enter key is your publish button. So your text, your Slack message, or your tweet happens as soon as you type a single sentence.

That’s good for platforms that want to deliver the endorphin hit of a mic drop, but not particularly helpful in sharing complex ideas. And the ideas that are worth sharing are the complex ones.


PS Today’s the last day to sign up for the Story Skills Workshop. Hope to see you there.

Accessible Web Content: The Quick Start Guide

Accessibility for the web is not a new subject. However, the topic of web accessibility is growing in volume. That very fact may be what led you to this article; you need or want to know about accessible content practices but already see the topic is wide and deep.

I want you to be able to shout about the importance of accessible web content along with us and everyone else. This guide is aimed at practitioners who are newly aware of accessibility concerns and need a practical, prescriptive place to get started. Having a general grasp of HTML and page structure will be helpful.

How to Use This Guide

This article covers a small set of general accessibility issues that are part of Web Content Accessibility Guidelines (WCAG) compliance. I will point them out and explain them, provide insight on how you can resolve these issues, and offer my professional opinion on how these issues make it into our applications or websites in the first place.

To be more specific, nearly all of these issues can be flagged using tools such as AXE by Dequeue, webAIM’s WAVE Accessibility Tool, or the Audit tools in Google Chrome. Any items that you cannot find via a tool, I will call out directly and provide context on what to look for.

Screen Reader Use in Examples

One last point before we get started. Some screencaps in this article will show the Rotor menu from VoiceOver, a screen reader bundled with macOS. If your curiosity is piqued and you would like to test along with the article, has a guide for using VoiceOver to evaluate accessibility to get you up and running with VoiceOver.

For users on Windows PCs, you can use NVDA. WebAim has a guide that covers using NVDA to evaluate web accessibility.

Alright. Ready to jump in?

Improper Use of Heading Tags (H1 through H6)

Day-to-day, I see this single issue more than any other. So often, content managers, designers, and developers use headings for page layout. Yes, headings are part of page layouts. However, their primary purpose is to provide hierarchical landmarks that organize your content. A heading cannot be deployed purely for the sake of visual impact.

Improper Header Tag Usage

Another variation of the problem is headers skipping depths. If all of the sections after an H2 tag are H6s, several contextual depths have been skipped. Users accessing content with a screen reader rely on properly organized headers to navigate. When a heading tag of any number is used on a page it creates a promise you must fulfill for your user. The promise is that all headings underneath another will be contextually relevant to the one above it. If not, you have left your user to search for meaning in your meaningless content hierarchy.

Screenshot showing improper header tag usage on Driscoll's websiteScreenshot showing improper header tag usage on Driscoll's website
The home page for is not only missing a primary H1, but headings through the entire page are out of order and arbitrarily used towards aesthetic ends. The H6 “Juicy & Sweet” is not descriptive and does not precede any relevant content, making the header wholly unnecessary.

Substituting Other Elements for Headings

Another common variety of this issue is when a <STRONG> tag is used instead of a proper heading to mark the start of a section. Users accessing a site with assistive technology—like a screen reader—rely on heading tags as landmarks. Heading landmarks make page navigation through content easier, and they provide context for depth.

Furthermore, a section of text marked with a <STRONG> tag has no landmark and is no different from any other text within the section it sits. <STRONG> also does not notify a user that a section change has taken place. The solution here is easy, change those <STRONG> section breaks to an appropriate header level tag.

Why Are We Using the Wrong Headers?

Every site or application is different, and each of the variations listed above can have a more complex reality than the one presented. Accessibility issues are often traced back to problems within a design system; heading styles are presented out of hierarchical order to achieve aesthetic ends. Header styles should be specific and distinct within a system to minimize the allure of aesthetic misuse.

Often I see this issue arise when a section title has a smaller “subheading” used for aesthetic flair directly above or below the section heading. From a mechanical standpoint, the H4 in this scenario would belong to the section navigation direction before it, and not the section it is visually tied to.

Incorrect headers also manifest through content teams when strict style rules are not available. A writer may opt for a different header because they feel it more cleanly visualizes the hierarchy of information. This is still an issue with the design system, but after the system has been implemented and is in use.

Low Color Contrast

Ever look at the footer of a website, and see that it features light blue text on a dark blue background? I know that’s a very specific example from my personal mind bank, but regardless, it is an example of poor contrast. If you can feel your eyes squinting to read “normal” sized text on a page, chances are the contrast needs to be bumped up.

A more concrete example can be found on the Bliss Cosmetics site. At the time this article was written, The text within the footer is very low contrast, utilizing white text over a very light shade of blue.

Putting the background and foreground colors into indicates that the contrast between text and background is 1.7.

Screenshot of Bliss Cosmetics website with a low contrast footerScreenshot of Bliss Cosmetics website with a low contrast footer

For text, the Web Content Accessibility Guidelines has two criteria, each with two levels of compliance. The general baseline for all text is 4.5 for AA (minimum compliance) and 7 for AAA (Enhanced Compliance).

The second criteria adds additional compliance for large text, which is classified as either 18pt (24px) or 14pt (18.6px) that is bold. AA (minimum compliance) for large text is 3 and AAA (enhanced compliance) is 4.5.

A third, more dubious criteria for text exists as it relates to logotype. WCAG 2.1 does not provide success criteria for text contrast when used in or as a logo. I recommend putting your customers before your brand here. Test the colors of your logos against background colors and hold the logo to the same standards as your content. It could be argued that the ‘Bliss’ Logo in the example above is difficult to read.

Checking for Contrast of Text Over an Image

If you are using a tool such as the AXE Browser Extension or the page audit tools in Chrome to test for contrast issues, you will notice reported contrast issues where the contrast cannot be determined. This happens when text is either floated on top of an image or when an image is used as an interface element.

Testing contrast for text over an image is difficult; in fact, I would flat out say it is impossible to eyeball. You can err on the side of dark, lowly-saturated images with low complexity covered with large print bold text if you are unsure. The best tool in my toolbox is the – Text on background image a11y check guide. It allows you to overlay text on an image and get a percentage of compliance. You will also get an average color breakdown with individual pass/fail results that give you the information you need to adjust your image if necessary.

Checking for Contrast of an Interface Element

Interface elements, such as icons or controls, have different rules when it comes to contrast. The minimum requirement for interface elements is 3, much lower than text, and only has AA compliance. Automated accessibility checkers have trouble detecting contrast for interface elements, generally because they do not have an intrinsic color value set through browser styles.

Screenshot showing the star rating on, which is an example of an interface element.Screenshot showing the star rating on, which is an example of an interface element.
The star rating icon on is an example of an interface element. In this case, the stars have a contrast of 3.8 with the white background underneath. As a bonus example, the text contrast of the edit button is far too low at 2.8.

In these cases, you will need to manually compare the color of the interface element against the backgrounds it will sit on. This is another case where a tool like is excellent.

Why Are We Using Poorly Contrasting Colors?

You can read it, and it looks good to you, right? This is why we make this mistake. We do not check the raw contrast number against our instincts. You have to do this to know your color contrast is where it needs to be.

Color contrast is a difficult problem for those of us working with clients that have long-established brand identities. If you are not in full control of the colors, use something like WCAG and to illustrate to your client that the accessibility need of the content is more important than strict brand adherence for something like a footer.

Improper Image Markup

Missing ALT text for images has been an issue not just for accessibility, but for SEO for some time now. Many reading this article may be familiar with the concept, but here’s a quick recap just in case.

The ALT attribute on the <IMG> tag in HTML allows for a description of what the image is depicting to be embedded in the image. For Google, this can mean getting your images indexed properly in Google Images. For users with visual impairments, this allows the visual content of an image can be described to them.

Decorative Images Versus Instructive Images

Let’s take this a bit further. Not every image needs ALT text. “Madness!” you exclaim, but it is true; not every image is worth a description. From now on, when you look at an image on a page, ask yourself, “Would THIS page/list/article, etc. make the same amount of sense without this image?” If the answer is yes, then that image is likely decorative. Only images that supply contextually relevant information that cannot be extracted from the text need ALT text. For instance:

  • Icons next to text in a menu? Decorative.
  • Using an image that makes a purely visual comment or pun? Decorative.
  • Image used as a background element? Decorative.

Marking images as decorative is simple. The ALT attribute needs to be on the <IMG> but left blank. Most screen readers will skip over an image with a blank ALT attribute

Improperly Labeled Form Fields

I am going to come out swinging on this one…

“Forms need to be ready to wear for users and not Haute Couture for a brand.”
– Jeremiah Bratton, This Article

With that out of the way, we can talk about the issue at hand. All input fields on a form need to have a visible/discernible label. It is still common to see forms that are missing or hiding labels and attempting to replace them with placeholders.

The Label Versus the Placeholder

For clarification: a form label is a separate element that is set in close proximity—usually above, sometimes below, or to the side—of an input field. A placeholder is a lightly colored (usually too low contrast) string of text that sits within an input field and is removed when a user begins to type. The role of a form placeholder is to suggest desired information, not a persistent label. Directly, “First Name” is a label and “Steven” is a placeholder.

Screenshot of a contact form on without field labels.Screenshot of a contact form on without field labels.
This screen capture shows the contact form on uses placeholders instead of separate label elements that remain visible. I have filled in all fields in the form with generic text. Are you able to tell what information belongs in each field? Bonus: The asterisk that marks a field as required is also in the placeholder. Looking at the example, can you tell which form fields are required?

Labels and Screen Readers

Form labels are important for screen readers because they are announced to users to help orient them as they move through a form. Labels can also be announced out of sequence. For example, if your user is moving up from the bottom of the form to correct a mistake, the label can be announced when the user enters a field BEFORE they would reach the label.

General Best Practices for Form Labels

Whether you are using a screen reader or not, visible, discernible labels provide a clear/concise marker for the information that is expected in a form field. As I stated before, placeholder text disappears when a field receives any input, essentially un-labeling it. Think of a distracted user halfway through an address field that no longer has a label. They may return to the form after a shift in focus, and now they have to regain their footing purely through context instead of direct information.

Or, consider an elderly user with a cognitive impairment (such as MCI) that may make fluid streams of thought challenging to maintain. That label is a firm, persistent reminder of the expectation, and is the difference between accessing your services or going somewhere else.

Why Are We Missing Labels?

Labels have a reputation for being bulky, redundant, and hard to account for in design. In many cases, lead forms, newsletter signups, and even filter controls end up in small places. In the interest of maximizing real estate for a form, the humble label is the first one to get cut. But from the perspective of a developer, there is no functional reason a form label would ever be removed. Basically, inappropriately labeled forms are a problem created in planning/design and can be caught early before a single line of code is ever written.

Links: Generic, Redundant, or Semantically Incorrect

Links are an extremely large part of the web. With aplomb or abandon, as site maintainers, we sprinkle those things everywhere on our pages. However, links are also as easy to misuse as they are to add. Links need to be descriptive and purposeful and used correctly to steward users of all abilities through content and experiences.

Generic Links

Read More, Read This, Read, More, Go… From here on out, I want you to look at a blog archive or any section of a site that lists multiple excerpts for site destinations and notice how many times the same word or short phrase is used to convey the action a user could take.

The “Read More” button is a holdover from an early internet, a place where websites were not built with interface patterns in mind. Links needed to have eye-catching styles and hard directives on what they would do. To get people clicking, we had to show them there was more to the story and so we began to stuff our sites with links and buttons that say the same thing repeatedly.

Screenshot of Driscoll's website featuring non-descriptive links.Screenshot of Driscoll's website featuring non-descriptive links.
Looking at the rotor menu in VoiceOver, we see a list of non-descriptive links in use on the home page for Generic phrases such a “See Gallery” and “Image may contain: food” do not give context as to where the user will go when the link is clicked. Bonus: Do you notice the single character links in the list? On the page, those are tiny little links to Instagram posts. However, anyone using a screen reader wouldn’t know that. The link is simply read aloud as “Link.”

When link text is reused on links with different locations, it loses the original intent. Your users cannot be confident where they will land and may be inspired to take no action at all. Your links are no longer functional; they are just noise.

Redundant Links

Another bad use of links, and one you likely will not find with automated testing, is redundant links. Typically redundant links are added in blog rolls or visual article navigations where an image accompanies a title and perhaps an excerpt of text. We desperately want users to get to our content, so we paint the widest target on areas of action. A general practice, one I have been quite guilty of before, is to link EVERYTHING. The title, the article thumbnail, the paragraph, and even still we will add a read more link.

The image below is a screenshot of The Washington Post’s front page. In the rotor, we see a list of all the links on the page in the order they appear in the document. You can see that each article under the ‘Stories from the Lily’ section has two links. One for the title, and one for the image back to back. Similar to decorative images, these additional links are just noise for a user navigating your site with a screen reader.

Screenshot of The Washington Post's landing page and arrows pointing to redundant links in both an article title and accompanying imageScreenshot of The Washington Post's landing page and arrows pointing to redundant links in both an article title and accompanying image
This screen capture from The Washington Post shows two links to the same content side by side. The rotor menu in VoiceOver shows the additional “noise” created by redundant links. There are better, more efficient ways to tackle this common issue. The easiest fix is to wrap the title and the image in a single link and then mark the image as decorative.

There are better, more efficient ways to tackle this common issue. The easiest fix is to wrap the title and the image in a single link and then mark the image as decorative.

Semantically Incorrect Links

In my experience, the link element has been used as a catch-all for user interaction. The explanation is simple; they have a built-in listener for clicking. A common semantic misuse of links that affect accessibility is when they are used in place of buttons.

A quick aside on the difference between buttons and links:

Buttons: Change the state of a page, or execute an action. They open menus or trigger form submissions.

Links: Change the user’s location. Links navigate. When a user clicks a link, they are taken to another place.

If you look at the screen capture below, you can see that “Sections” is listed as a link (it does not describe its function either).

Screenshot of The Washington Post's landing page that uses semantically incorrect linksScreenshot of The Washington Post's landing page that uses semantically incorrect links

The distinction here is meaningful because the user is browsing page links. They are looking to GO somewhere. Clicking this “link” will not take them somewhere. It will instead open a menu. This changes the page state, not the user’s location.

If you are wondering about the destination shown in the lower left-hand corner of the example screen capture, using the # symbol as the destination of a link simply scrolls the user back to the top of the page.

Bonus: Use Semantically Appropriate Elements for Interactions

While I was taking screen grabs of The Washington Post, I came across what I would call a bug on their ‘Play Video’ buttons that could be instructive for proper semantic use of buttons and links.

Screenshot of The Washington Post's landing page with code that shows the video buttons uses the incorrect DIV elementScreenshot of The Washington Post's landing page with code that shows the video buttons uses the incorrect DIV element

Each “button” in the video section is a generic <DIV> element that is listening for a user click. A <DIV> does not function as a button or a link. This means that all of the “Play Video” buttons are masquerading as buttons but only to a visual user. A screen reader would not list the video buttons when it aggregates links or buttons on a page. Access to these buttons through the keyboard is also not possible.

To be accessible, the interface would require some refactoring. Still, the general solution is to have buttons (because buttons change state, not location) that when clicked swap out the video in the player above the options.

Why Do We Have Bad Links?

Improperly used links fill our sites because we are not mindful of their use. It is not easy for me to point to a place in the process and say, “catch bad links here.” Everyone in the process—from copywriters to developers, to designers—can misuse this particular tool. When you place a link within an interface or content, reflect on how descriptive it is. Does your link relocate the user? Have you used the same text more than once for a different destination?

You Are Now Quick-Started

The issues I have discussed in this article are easy, high-level concerns for accessible applications and websites. The Web Content Accessibility Guidelines alone have 78 criteria to fulfill to reach compliance. Small steps they may be, these are easily implemented fixes that will remove obstacles for the many types of users that come to your business for services or aid. Additionally, with enough exposure, you will see these issues everywhere, and this makes you a positive agent for well-constructed experiences that not only consider a business’s aesthetic ambitions but, more importantly, the people that utilize them.

The post Accessible Web Content: The Quick Start Guide appeared first on Portent.