Blog

People of Aceik: Thomas Tyack, Chief Technical Architect

Earlier this year, we launched a new series to introduce you to our talented and hard working team mates. They’re behind the success of our client’s projects – working diligently to ensure we exceed our customers’ expectations.

This month, we sat down with our recently promoted Chief Technical Architect, Thomas Tyack.

Tom, tell me about your background.

Tom: I grew up in Manly West, Brisbane, on a 12-acre property (before it was all housing estates).  My family also has a family farm near Kingscliff, New South Wales. So, I spent a lot of time traveling back and forth across the QLD/New South Wales border when I was younger. I attended QUT for university studying a bachelor of IT and afterwards spent 2 years in the UK where I started out as a Java Developer. Eventually, I returned to Australia and switched from Java to .NET. I’ve worked on .NET and Sitecore projects since around 2007.

Can you tell us a little bit about your Sitecore experience because you are a Sitecore MVP?

Tom: I was named a Sitecore MVP in 2019 and 2020 after spending the two years prior working towards the status. Sitecore recognises individuals who make community contributions, blog posts, open-source contributions and share and present at user groups.

I contracted for a number of agencies in Melbourne. And after a little travel and a move back to Northern NSW I eventually joined Aceik.

Tell us a little bit about joining Aceik, your role, and then your new role.

Tom: I started out at Aceik when it was very small consultancy. I went straight onto managing our key relationship with Fitness Life Group and building out Fitness First on Sitecore. RAA was the other major big project I was involved in. I spent a reasonable amount of time flying to Adelaide every second week.

Tom: Recently I have taken on the lead Architect role, which has me looking at Aceik’s processes and high-level delivery framework. We are continuously streamlining how we deliver projects and ways to provide rock solid consistency and great outcomes for our clients.

Why did you choose to join this Aceik Team?

Tom: Flexibility at first. It was a good opportunity. It’s been almost 4 years now and the interesting projects keep coming.

And why do you stay at Aceik?

Tom: Flexibility remains. We have some great technical minds on our team and it’s enjoyable to work them across different projects and achieve great results for our customers.

Is there a project or a project campaign in just few months that you have enjoyed working on?

Tom: RAA – it was a big challenging project and I am glad we were able to contribute our Sitecore expertise to help get that delivered.

Check out the case study and video here.

We are in the second wave of coronavirus and still working from home. How did you make it work for you? Any particular tip or advice that you have for working remotely?

Tom: Aceik has been working remotely for many years not just this period, so it hasn’t changed too much for me. Over the years I have managed remote teams and across many projects and it is all about keeping client communication constantly flowing. We let them know what we are doing, providing a morning update on top of stand-ups. The morning update is provided in Slack and is like a written ledger of what the team has done. The best part for the client is being able to review their project history over any given day.

Tell us about Tom outside of Aceik – who are you when you are not working? What do you get up to?

Tom: I have two young kids, two and four years of age, so life is pretty busy as soon as I get home from work. They both love the beach, riding bikes (or scooters) and camping so we spend our time doing those things on the weekend at the moment. 

Any tips or advice for those wanting a developer career?

Tom: Mention the technologies that you have worked with and those you want to work with. Basically, sell the projects that you have worked on, the achievements you have on those projects, and how you helped the client obtain their goals that would stand out to me.

But then if you do not have those skills yet, and you want to get into that space then work on open-source projects where you might be able to contribute. Essentially something that can show what your capable of. Having experience is very valuable but if you don’t yet have that experience show potentially employers what your capable of.

Aceik is looking for Solutions Architect and Developers at the moment. We’re after people who can work in a fast-based environment and solve problems.

Page Speed – The Smaller 7th Pillar – Micro Boosts

You may have read my previous blog post: One Performance Blog to Rule them all – Combining the 6 Pillars of Speed

This is just a quick update to list out some further optimisations that might help you achieve a few extra points.


Prolong the Cache Expiry Setting

The default cache expiry settings is 7 days OOTB in Sitecore. This is a little short for the likes of GTMetrix but may be passable for Lighthouse. I found it best to bump it up to 30 days (if you can).

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
      <settings>
	  <setting name="MediaResponse.MaxAge" set:value="30.00:00:00"/>
      </settings>
  </sitecore>
</configuration>

Web.config and applicationHosts.config changes

These three changes are from a blog written by Sergio Gisbert

1) Add the ‘Accept-Encoding’ header to responses:

<httpProtocol>
    <customHeaders>
        <remove name="Vary"/>
        <add name="Vary" value="Accept-Encoding"/>
    </customHeaders>
</httpProtocol>

2) Enable Dynamic compression on IIS (this should already be done if you followed the Sitecore setup document) and then add in specific mime types that need coverage to web.config.

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
    <dynamicTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="image/jpeg" enabled="true" />
        <add mimeType="image/jpg" enabled="true" />
        <add mimeType="image/gif" enabled="true" />
        <add mimeType="image/png" enabled="true" />
        <add mimeType="application/vnd.ms-fontobject" enabled="true" />
        <add mimeType="application/x-font-truetype" enabled="true" />
        <add mimeType="image/svg+xml" enabled="true" />
        <add mimeType="*/*" enabled="false" />
    </dynamicTypes>
    <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />
        <add mimeType="image/jpeg" enabled="true" />
        <add mimeType="image/jpg" enabled="true" />
        <add mimeType="image/gif" enabled="true" />
        <add mimeType="image/png" enabled="true" />
        <add mimeType="application/vnd.ms-fontobject" enabled="true" />
        <add mimeType="application/x-font-truetype" enabled="true" />
        <add mimeType="image/svg+xml" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="application/x-woff" enabled="true" />
        <add mimeType="*/*" enabled="false" />
    </staticTypes>
</httpCompression>

3) Update applicationHosts.config to compress SVG and JSON payloads. As Sergio mentions in his blog this has to done in applicationHosts.config. (great find Sergio)

<add mimeType="image/svg+xml" enabled="true" />
<add mimeType="application/json" enabled="true" />

GZIP your main HTML document

Google Page Speed insights calls this criteria “Text Compression” but this does actually make a download size difference if your HTML payload is large. After doing this I witnessed my initial HTML delivery drop from 130KB to 40KB.

Inside your web.config and the <httpCompression> tags we added just previously add the mimeType for document into both staticTypes and dynamicTypes.

<add mimeType="document" enabled="true" />

Cleanup all missing fonts and 404s

Be sure to check you network tab and make sure any missing font references or external resources are not throwing 404s. This will result in a score reduction particularly on GTMetrics.

Aceik adds Chief Operating Officer and Creative Director to staff

Wayne Vickers
COO & Creative Director, Aceik

Aceik is excited to announce the recent appointment of Wayne Vickers, former Head of Customer Experience for the Australian Football League (AFL) as Chief Operating Officer and Creative Director.

The new hire demonstrates Aceik’s continued commitment to its Sitecore clients, as well as the Sitecore partnership. The Aceik team is already in a strong partnership with both the Chief Executive Officer, Jason Horne and Chief Technology Officer, Thomas Tyack holding Sitecore MVP recognition over multiple years.

The appointment highlights Aceik’s desire to introduce more and more brands to the power of Sitecore, to enable them to drive personalised experiences and positive marketing ROI.

Vickers has more than 20 years digital experience, having worked client side for AFL, Myer, Quiksilver in Customer Experience and eCommerce roles, as well as founding two digital agencies that included brands such as Seek and Fosters.

“I’m thrilled to join Aceik. The agency has always shown outstanding technical Sitecore prowess, and I’m excited to take our Sitecore marketing and creative expertise to the next level, so we continue to help new and existing customers to grow their digital businesses through the use of Sitecore’s best-in-class marketing features,” said Vickers.

Jason Horne, Chief Executive Officer at Aceik said, “Aceik’s Sitecore knowledge is vast and our agility is unmatched. We keep up with evolving technology and can change direction more easily than larger companies, giving our clients the most innovative Sitecore solutions to their business problems.

Horne continued, “Helping our clients to realise the full potential of Sitecore’s experience platform is at the centre of everything we do. With Wayne’s digital experience expertise, we’re looking forward to creating stronger long term relationships with our clients and Sitecore”.

Aceik named a 2020 Sitecore Experience Award Honorable Mention in Most Sophisticated Implementation category for work with RAA

Aceik today announced it has been named a Sitecore Experience Award (SEA) Honorable Mention in the Most Sophisticated Implementation category for its work with customer RAA. The agency was recognised for RAA’s improved website performance, increased automation, making site services more efficient and providing customers and visitors with a better experience.

“We now have a great foundation for our primary digital channel, a more capable team and a business that has confidence in our delivery thanks to our partnership with Aceik,” said Matt Mitchell, Senior Manager, Digital Technology Services, RAA.

The Sitecore Experience Awards 2020 recognize brands that have built truly customer-centric digital experiences with Sitecore® technology. The SEAs are awarded to Sitecore customers and their partners whose entries clearly demonstrate that their Sitecore solution delivers an outstanding experience for all users from partner developers and internal customer marketers to business and IT users and end-user customers.

“We are honored to have worked closely with the RAA team to deliver this next step in the business’ digital strategy: a customer-centric website that not only meets the needs of their customers, but is now also recognized by Sitecore,” said Jason Horne, Chief Executive Officer, Aceik.

“Showcasing the complex capabilities and scalability that Sitecore enables for organisations and brands, we’re proud to recognise some of the most sophisticated implementations we’ve seen from customers and partners at the 2020 Sitecore Experience Awards,” said Paige O’Neill, CMO, Sitecore. “Helping organizations make data-informed marketing decisions, utilize content more effectively across channels and regions, and deliver more personalised experiences is at the heart Sitecore’s integrated platform. We have seen exceptional customer work this year, unlocking new levels of audience engagement and shortened time-to-market for content creation to provide superior digital experiences that drive ROI and deliver business value.”

SEA 2020 Honorable Mentions were selected as they demonstrated to the judges that they used Sitecore solutions to make notable impact in terms of experience or content management.

Through the rigorous selection process, each entry was judged by a panel of Sitecore leadership from that entry’s region. There are five regions that evaluated and approved all regional selections based on specific selection and scoring criteria.

Q&A with Sitecore Strategy MVPs

Last week, our fearless leader, Aceik’s CEO, Jason Horne joined a stellar panel, Sitecore Strategy MVP Q&A! as part of the Australian Sitecore Marketers Group.

Australians love an open dialogue, and Australian Sitecore marketers are no exception. This panel was the chance to ask a Sitecore MVP questions about personalisation, testing or marketing automation!

For this event, group organisers wanted to do something completely different – and taking a page from the popular ABC show Q&A assembled a stellar panel of Sitecore MVPs including:

Marty Drill – Moderator, CEO Luminary

Marty founded Luminary in 1999. One of the pioneers in digital, Luminary is a Sitecore Gold Partner that focuses on crafting experiences that are intuitive and engaging. A digital agency that has worked with hundreds of companies on countless projects across just about every industry there is. Luminary remains one of the oldest independent digital agencies in Australia.

Alison Sainsbury – Panelist, Director of Sitecore’s Business Value & Strategy Asia Pacific Japan

Alison leads the regional Sitecore SBOS (Sitecore Business Optimisation Strategies) team. She’s a global expert on optimisation in Sitecore, and has worked with customers such as Toyota, ExxonMobil, Blackmores and Brother to help them create and deliver optimisation strategies on Sitecore. Alison is also the author of numerous Sitecore guides and whitepapers, including UX4CX and the recently released Multisite Optimisation whitepaper, and works closely with the MVP community globally.

Greg Baxter – Panelist, Experience Director Codehouse

Greg was a founding member of Sitecore APJ, and spent 8 years working with Sitecore partners and customers with personalisation and optimisation . Greg has worked all over the globe with customers including The Australian Dept of Defence, Billabong, Church & Dwight, Huawei, Network 10, Stockland and Roche Pharmaceuticals. Greg is a three time Sitecore Strategy MVP.

Robyn Johnstone – Panelist, Digital Marketing Manager Minter Ellison

Robyn Johnstone is the Digital Marketing Manager at law firm MinterEllison. She is relentless in her aim to deliver outstanding digital experience in a traditional business with no shortage of content. She and her small team, work to optimise content though the use of profile building, personalisation and targeting. Robyn is a Sitecore Strategy MVP.

Jason Horne – Panelist, CEO Aceik

Jason is an expert in Sitecore solutions, and has delivered numerous large Sitecore projects, including RAA, Village Roadshow and UniSuper among many others. Jason is a technical leader who enjoys bridging the gap between technical and non-technical professionals to deliver innovative enterprise solutions built on Sitecore. Jason is a five time Sitecore Technical MVP.

Brady Clarke – Panelist, Technical Content Manager R/GA

Brady is the glue that ties Sitecore to content optimisation. He has broad front and back end technical skills combined with the marketing knowledge to drive digital campaigns, landing page optimisation and marketing automation. Brady has worked with customers like Toyota, Crikey and Smart Company. Brady is a Sitecore Strategy MVP.

Let’s get into the Q&A

With the format free form, expect the questions and answers to be varied.

Why do Google Analytics and Sitecore Analytics give different results?

Alison: Google Analytics is a JAVA script based client side tracking and Sitecore Analytics is ASP based service side tracking. Technically, they’re tracking slightly different things.

Google is also better at screening out bots and providing actual visitor numbers.

But you do need both. Sitecore Analytics will usually be a little higher but should only be 10% higher if more than that then you might be tracking some weird things (ie firing multiple times on a page). It’s good to compare the two sets of results as part of a marketing readiness scan.

What’s the most exciting thing about Sitecore 10 for marketers?

Greg: Where to start? Additional filters around analytics, and segmenting more tightly around profiles. Now able to manipulate actionable analytics which means campaign creation is much easier.

Can also more easily tell what goals have been converted by people in that campaign and what location they were in. Split filter by that dimension.

Also, Salesforce connector and updates to horizon.

Additional templates in EXM.

When I do profiles should I be using my existing personas?

Greg: Profile on higher level things at least initially. Profile around things like what kind of cheese you like, connoisseur lifecycle rather than Minnie or Mickey Mouse.

For personalisation – start simply by understanding what people want, where they are in the lifecycle and is there an opportunity to cross sell and upsell.

Robyn: I agree, keep it as simple as possible. You usually have a lot of content and building it out for all the areas is overwhelming. Ask yourself, are they interested in X or Y industry then personalise.  Then dig deeper for more sophistication.

How do we go about setting up taxonomies?

Greg: Plan for scalability. Taxonomies are really easy to set up technically. The biggest issue is thinking into the future. Roll them into campaign groups and around goals but take the time to sit back and think about possible campaign combinations that you may have.

Map out the taxonomies and consider what the ramifications might be on future marketing endeavours. Work out whether you wish to be super specific or general.

Another potential difficulty, if you’re building these out agency side can be getting client buy in for setting these up in a specific way. Be ready to justify the plan.

Robyn: Going campaign by campaign was most useful for my team. Sometimes campaigns are easier than the whole site as it is taking bite sized bits but obviously the con is not having a whole-site view.

Alison: Set up campaign groups, campaign facets, asset facets, goal facets. You need to have a campaign group and a channel. The rest around facets is optional. Also consider that you may wish to add your own new custom channels.

Can you each share some best practice examples of campaigns you have seen?

Brady: Toyota Corolla Hatch launch campaign – simple implementation, hectic turnaround (6 weeks). Personalisation with campaign tags based on 4 different channels including email for 5 different segments and incredible uplift compared to control groups. Display ads are usually a low conversion rate, but on this campaign we saw a 600% uptick for category leadership and 500% for owners.

Greg: Back in the day, it was a small regional bank, 2 week campaign and they wanted more likes than the Big 4 Banks and wanted visitors to switch to their home loan offering. They created an online game on a personalised website. The difference between the personalised campaign and the same campaign a year prior that wasn’t personalised was a 60% increase in direct sales.

Another favourite of mine is Auckland Airport with the goal of driving people to retail pages. Most retail sales at an airport are terminal spend. The set up campaign personalisation around products and drove 400% increase to terminal pages and people pre-ordering product when knew they had to travel.

Robyn: We now show other content because we know someone is interested in a particular topic. We sometimes have marketers in other areas ask why a PDF has been downloaded in a particular campaign – and it’s usually because of these triggers.

Jason: Village Theme Parks – some multi-site personalisation and campaigns, fed into whitepaper.

Any bad rollouts – what else should we not do?

Jason: Make personalisation part of the plan from the start. Start thinking about how to use personalisation and Sitecore marketing features in the discovery and design phases. Start with the end in mind. And go live utilising some personalisation immediately. Don’t make personalisation Phase 2 because you want to show tangible value immediately.

If you leave personalisation til Phase 2 there may be delays, budgets are cut back and then you aren’t demonstrating immediate gains. You need to show that you’re a profit centre and not a cost centre.

Robyn: Wish we had done that too.

Greg: Once saw a campaign with autotranslated content from English to Japanese. The system called ‘dolphins’ ‘sea monsters’ – so the tagline was basically ‘Come to SeaWorld and feed the Sea Monster’. Cultural sensitivity lacking.

Alison: Read and learn. How personalisation planning will impact the UX. Go live with a site that’s ready for personalisation.

#1 identify your goals and implement while site is being built. You can change the values later! Just pop them in.

#2 QA/UAT Testing – does it work. Create a campaign tag, give it to a few people, hit the link, go into analytics and check it worked, is analytics happening at all, do a TEST DRIVE! Have seen assumptions about analytics working and then it’s not once the site goes live. Sitecore is a Ferrari but looked around rather than given a test drive. Take the test drive!

Jason: If you’re going out to tender, always include that out-of-the-box features should work, test for that and make sure they are working. That’s also down to the implementation. Sitecore allows a lot of rope, which is great, but without a plan some people can hang themselves with it. If personalisation is not included in phase 1, it may not be set up correctly and then phase 2 becomes remediation (which is a drag).

Greg: Personalise around your highest value profiles and campaign. Look at the hero image and launch with hero image personalisation. It doesn’t add a huge amount to launch cost/to Phase 1. And then you know from Day 1 that personalisation does work. If your budget gets squeezed – don’t let personalisation walk out the door.

Jason: To enable these features is not costly because it’s built into the partner proposal. You just need to ensure it’s built into the RFP.

How do you account for lifestyle – future personalisations to this change? Ie home loan > insurance

Brady: Consider what is the length of the funnel for your industry? Toyota is a 2-3 month funnel length. You’re a Hilux person and probably want a ute. The funnel doesn’t work in 3 months time because you’ve probably already purchased.

How long do people spend on deciding and researching home loans? If you have a goal for a purchase then do not show that personalised pre-purchase content to people who have triggered that goal.

Greg: Create a goal ladder for the customer journey. If the visitor has bought home insurance then show car insurance, and inside, if they’ve bought both then showcase Frisbee insurance.

Sitecore Commerce has a bunch of goals in there around the shopping cart. If you’re looking at a purchase form for insurance, then absolutely track it. Figure out where visitors drop out on the form and take a look at the form to determine why they’re dropping out. Inject an A/B test into a form. And personalise someone who hasn’t completed the process (ie 50% of the form to go, 1 step left).

Is it possible to globally manage a rule that appears on multiple pages?

Jason: Yes. That’s what you should do so you don’t have a bunch of custom rules dotted throughout your components. Set up one rule and reuse them. Best way not to get lost.

Alison: One rule to rule them all.

Conclusion

Marty Drill wrapped up the session perfectly with “we’re no longer in the same boat. But we are in the same storm and people are being impacted in different ways and make a difference by reaching out to someone.”

Resources from the Sitecore team:

Website Accessibility Tricks & Tips

Article Pre-Evaluation:

Estimated read-time: 14 Minutes

Level of reading competence and understanding: Semi-Technical

Author: Gavin McQuienn, Lead Front-End Engineer, Aceik


What we cover in this article:


What is Website Accessibility?

Website accessibility is the inclusive practice of structuring a website to ensure that the maximum number of people can access/navigate and obtain information within websites on the World Wide Web, in particular for those with physical disabilities & situational disabilities, such as socio-economic restrictions on bandwidth and speed.

In technical-speak, it is the practice of implementing/leveraging the proper usage functionally-descriptive HTML tags, best practices-practice HTML structures, CSS, images and media, such as video and audio.

Accessibility Users – Web Statistics & Debunking the Myths 

In the past, there has often been a mindset that users utilising disability related accessibility website features were the minority. Well here are a few things that most do not consider when casting thought upon this subject.

Accessibility – not only benefits people with disabilities 

Business Cases for Accessibility Improvements

  • Legal & General Group – doubled visitor numbers, cut maintenance costs by two thirds and increased natural search traffic by 50%. 
  • Tesco – £35 thousand GBP to build their accessible website, £13 million GBP per year in resultant revenue. 
  • CNET – 30% increase in traffic from Google after CNET started providing transcripts, “We saw a significant increase in SEO referrals when we launched an HTML version of our site, the major component of which was our transcripts.” – Justin Eckhouse, CNET, 2009.
  • This American Life is a broadcast heard on more than 500 National Public Radio (NPR) stations by about 2.1 million listeners each week in the United States. In 2011, the broadcaster committed to creating transcripts for their entire archive of recorded programs and recorded. This subsequently resulted in:
    • search traffic increased 6.86%,
    • better comprehension for visitors who use English as a second language,
    • visitors were able to use transcripts in noisy or sound-sensitive environments,
    • ability to more easily translate, and
    • ability to search text to reference a specific section of audio.
  • “Many organisations are waking up to the fact that embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.” – Paul Smyth, Head of Digital Accessibility, Barclays

Accessibility Internet Traffic Statistics 

In the USA ~ according to the Census Bureau on July 25, 2012:

  • 54% of adults living with a disability go online.
  • 56.7 million Americans (18.7% of the population), that is a figure of 19.9 million (roughly 8.2%) have proven to have difficulty lifting or grasping objects, which could impair their ability to use a mouse or keyboard.
  • 8.1 million (3.3%) suffer from vision impairment. Such demographics commonly use tools such as a screen magnifier, screen readers, or might have a form of color blindness, to which colour contrasts become ever so important.
  • 7.6 million (3.1%) have been proven to have a hearing impairment – given such disabilities would rely heavily on transcripts and/or captions for audio/video media.
  • Sight and hearing impairments cover an average of 6.8 percent of the population aged 15 years +. These figures jump to a whopping 21.3 percent of the population when you look specifically at the ageing population, people aged 65+.
  • The Baby Boomer generation (born between 1945 and 1964) is going to cross that 65-year barrier in 2010. This same web-savvy generation created the Internet, for the most part and represents one of the largest single demographics in the United States.

What can you do to increase your website’s accessibility?

Implementing accessibility features has been proven to not only increase the overall user experience and usability of a website, which will ultimately translate into higher traffic and increased SEO impact / reach, but will ensure modern best-practice standards are adhered to, which ultimately instills a higher level of code and content quality throughout a site. 

There are many things that you can start doing today, but to successfully administer a high level of accessibility is generally a 3-pronged approach:

  1. Design considerations
    1. Ensuring that even at the initial design phase that colour-contrasts, disability user-journey/navigation & audio/video media content alternatives are considered
  2. Content editors preparation, structures, awareness and consideration 
    1. Preparing audio/video media and written content for multiple demographics, such as transcripted media, listing average article read-time estimations, competency reading level grading & text alternatives for media including images, video and audio
  3. Adopting technical development hygiene / strategies 
    1. Making use of the correct usage and structured HTML, such as tab-indexed links/navigation items, hidden content for screen-readers, and especially accessibility related HTML tags & CSS, such as Aria labels, CSS user-interaction related Pseudo classes. 

Accessibility – Technical Standards, approaches, best practices & things to consider.

We have separated some well-known strategies into categories of implementation-difficulty and ultimately, development/preparation related costs/efforts ~ it must be noted that some of these tactics can be implemented to existing codebases in a, ‘moving forward’ mentality / approach, which will still slowly start to increase your accessibility support.

This may include, but is not limited to such items as:

Low Cost / Effort / Preliminary planning required
Implementing correct usage of functionally user-interactive CSS Pseudo-Classes such Focus, Active, Visited, Hover, etc

.btn {
  &:hover,
  &:focus,
  &.focus {
    color: $purple5;
    background-color: darken($yellow1, 10%);
  }
}
  • Meaningfully named, underlined/colored (or otherwise differentiated) Anchor links
  • Textual equivalents provided for images
  • Providing meaningful `alt` & `title` tags for all imagery
<img src="" alt="ENTER IMAGE DESCRIPTION - Helpful with SEO" title="This is an image of a Ragdoll cat jumping">

`Tab-indexed` user journey-tested Anchor Links and Buttons, as well as `title` tags explaining functionality 

<a class="btn btn-secondary" href="#" tabindex="0" title="Click here to see cats from category 1">
Pictures of category 1 cats
</a>
<a class="btn btn-secondary" href="#"  tabindex="1" title="Click here to see cats from category 2">
Pictures of category 2 cats
</a>
<a class="btn btn-secondary" href="#"  tabindex="2" title="Click here to see cats from category 3">
Pictures of category 3 cats
</a>

Medium Cost / Effort / Preliminary planning required

  • Text and images are large and/or enlargeable
  • Mobile optimised imagery, media & mobile-specific layouts 
  • Textual equivalents provided for images 
  • Text and images are large and/or enlargeable

High Cost / Effort / Preliminary planning required

  • Keyboard supported Menu-Navigations
  • Magnifying text/imagery options for content
  • Alternate methods of obtaining information regarding visual/audio media, such as  closed captioned and/or a sign language versions
  • Captha’s that have multiple options to human validity, such as Audio options regarding successful passphrases, or modern captchas do not require input from a user


  • Print-friendly web pages – making sure that your pages are accessible and usable even when printed or saved as a PDF file

Aria Label HTML Tags & Screen Reader Specific CSS Classes 

What are Aria Labels HTML related Tags?

ARIA stands for Accessible Rich Internet Applications and is a set of attributes that define/provide alternatives to make web applications / content (in particular those written using Javascript) more accessible to people with disabilities.

Aria Labels extend HTML and pass information to assistive technologies related to interactions and widgets commonly used in applications, which provide the user with additional information that would not otherwise be accessible. For example, ARIA enables accessible navigation landmarks in HTML4, form hints and error messages, live content updates, JavaScript related widgets and many more. 

Luckily HTML5  provides a lot more descriptive HTML tags, which are designed to provide additional information to the end user regarding the type of element they are viewing, while enabling more descriptive code which enables developers to more easily decipher new code block/snippets, which in turn increases productivity and the efficiency one can alter existing components. 

Here’s the markup for a progress bar widget: ~ snippet taken from Developer.Moziila

<div id="percent-loaded" role="progressbar" aria-valuenow="75"
    aria-valuemin="0" aria-valuemax="100">
</div>

Here we have a progress bar and it is built using a `<div>`, which actually gives the user no meaning. Currently HTML5 has new inbuilt tags that allow you to break up your elements with more meaning, but unfortunately, a lot of the time there isn’t a more semantic tag available for developers to use HTML4 or 5, so we need to include ARIA roles and properties. 

In this example, we are adding specified attributes to the element such as the `role=”progressbar”` attribute, which notifies the browser that this element is a Javascript driven progress bar widget. The `aria-valuemin` and `aria-valuemax` attributes specify the minimum and maximum values of the element, and the `aria-valuenow` expresses the current state of the progress but, so this must be kept in sync with the JavaScript.

Screen Reader Specific CSS Classes

There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Cases where verbose cues or instructions are provided only for screen reader users are most likely a reflection of poor design, usability, and accessibility. However, there are a few cases where information or meaning is apparent visually, but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but remain invisible to sighted users.

Techniques for hiding content 

There are several mechanisms that can be used for hiding content. It’s important that a technique be implemented that results in the desired outcome and accessibility.

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

Here is a few approaches of embedding additional information for the user to utilise

  • `display:none` or `visibility: hidden`
display:none;
// or
visibility: hidden;
  • hidden attribute
<p hidden></p>
  • `width:0px`, `height:0px` or other 0 pixel sizing technique
width: 0px;
height: 0px;
  • `text-indent: -10000px;`
text-indent: -10000px;
  • Absolutely positioning content off-screen
.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
  • The `.sr-only` CSS class, which stands for  “screen reader only”, is just an abrtiory name and can be called anything you wish, but whatever you name this should then be referenced from within the tag of the element being hidden, as shown:
<div class="sr-only">This text is hidden.</div>

For more information regarding these techniques, please visit WebAim.org

Resources for Online Accessibility Audits

The following is a list of websites and web tools that are built to help you plan, design and also evaluate any accessibility flaws that may have been overlooked in the development of your current site. 

Most of these tools are free (at an entry-level anyway) and if nothing else can evaluate and provide feedback into any website that is currently live on the internet and include tools that can help evaluate colour contrasts, HTML structures / markup that could be improved to ensure small, and sometimes large wins in regards to increasing accessibility compliance.

There are many tools and services available at www.w3.org/WAI/ER/tools, but a lot are actually links to businesses trying to entice you to let them assess & implement your accessibility upgrade, so finding the hidden-gems that are free can be a little painstaking. So here is shortlist we recommend:

Accessibility Evaluation / Compliance tools & helpers: 

Best Practice Examples of Accessible Websites

Here, in no particular order are some examples of websites that meet a high accessibility standard and still look modern, fun and/or are highly functional: 

Based on what you’ve just read above, take a look at these websites and let us know what accessibility features you can find. Post a comment below or reply back to info@aceik.com.au

Technical Legalities around Accessibility

More and more cases are starting to surface regarding end-users suing companies for negligence in regards to not adhering to Accessibility compliance, which means your organisation’s website could be at risk without you realising it. The reality here is, you are not alone.  

Here are some related statistics regarding Accessibility Laws and also some examples of what has happened in the past when an end-user of these websites decides to take these companies to court, in regards to failure to comply with these laws and the needs of individuals with disabilities.

Some surprising statistics regarding Accessibility Law

  • In the UK alone, on average 70% of websites are not compliant with accessibility laws. Globally, around 10% of the world’s population (650 million people) live with a disability. As life expectancy increases, this number is also expected to grow.
  • 92% of the most popular federal websites fail to meet basic standards for accessibility, says a study from the Information Technology and Innovation Foundation

Accessibility related Legal Case Studies in the US

  • In January 2019, Beyoncé Knowles’ company, Parkwood Entertainment, became the defendant in a class-action lawsuit alleging that it violated the Americans with Disabilities Act (ADA). The suit, filed by a blind woman from New York, claimed that the company’s website, Beyonce.com, did not provide accommodation for people with significant vision impairments, leaving an estimated 2 million blind people and others with vision impairments unable to access the primary portal for news about all things Bey.
  • A blind man filed a lawsuit against Domino’s in September 2016 and claimed that he was unable to order customized pizza or take advantage of online-only discounts because both the website and mobile app wouldn’t work with his screen reading software. Neither the website or app met basic Web Content Accessibility Guidelines (WCAG) and a judge ruled in favor of Guillermo Robles, the man who filed the lawsuit.
  • A class action lawsuit was filed in January 2018 against Burger King by a visually-impaired woman. The individuals involved were using screen reading software to understand and interact with the website. Because there were no alt-tags or other features in place, the individuals reached significant barriers in accessing basic information on the website.

Accessibility related Legal Case Studies in Australia

  • Coles.com.au – Closer to home, a case originated in early November 2014 where coles.com.au was sued by disability-user who claimed that she was being discriminated against in regards to being able to access the website ~ Please follow these related article links: Coles lawsuit Article 1, Coles lawsuit Article 2
  • 2000 Sydney Olympics – On the 7th June 1999, The Maguire Law Firm made a complaint to the Human Rights & Equal Opportunity Commission (HREOC), alleging that the Sydney Organising Committee for the Olympic Games (SOCOG) had discriminated against him as a disbled person, in contravention of the Disability Discrimination Act 1992 in three aspects: 
    • The failure to provide braille copies of the information required to order Olympic Games tickets
    • The failure to provide braille copies of the Olympic Games souvenir programme, and
    • The failure to provide a website which was accessible to Maguire

After the completion of the ticket book case (Maguire v SOCOG 1999 ) on 30 September 1999, conciliation on the remaining matters was attempted but by 29 November 1999, the talks failed. ~ This information taken from Wikipedia

Aceik – Current Accessibility Examples 

We thought it best to highlight a couple of examples from our current clientele that highlight some great development-integration accessibility pieces that we have had the honour of implementing of late:

  • The City of Yarra Council – https://www.yarracity.vic.gov.au/
    • Including features such as a fully keyboard function navigation, the ability to increase website text-sizes, print-friendly page options have been included, multi-language selection abilities, clearly highlighted link focus states and whole range other accessible consideration can be found throughout this website.
  • Chisholm Institute of Tafehttps://www.chisholm.edu.au/
    • Once again the navigation here is completely keyboard accessible, link focus and hover-states are clearly highlighted, colour contrasts have been carefully  considered, images are clearly labelled and media accessibility has also been considered, this allowing users multiple methods to access non-written media.

Personal notes from the author

In closing, personally I have researched this topic for years, and to my knowledge no one document or article pulls together all related facets (and so extensively) on this subject matter as I have attempted to do here, hence why I have made this quite a lengthy piece. 

It really is a massive topic to cover and there are so many angles one needs to consider to gain a holistic understanding that will empower/compel business-owners and stakeholders to justify the additional effort, cost and benefits associated with implementing extensive and well planned Web-Accessibility, so I hope this helps to empower not only business owners, but also educates and increases the level of Website Development standards, industry wide.

Article Resources

Sitecore Commerce 10 Development Environment with Docker

Sitecore Commerce 10 was released with official support for use of containers for development and production. There are different topologies that are available for development xc0, xc1 and xc1-cxa. But unfortunately the only images that have a working SXA storefront are xc1-cxa.

This article describes how to customize the xc0 docker compose file to be able to spin up a development environment with a fully functioning SXA storefront.

Customized version of xc0 docker compose file is available on my github.

Update SQL & SOLR Image Reference to XC1

  • Use xc1 image for SQL so the databases have all the items for SXA, SXA Steorefront and SPE.
  • Use xc1 image for SOLR to it includes the cores for SXA indexes.

Add Processing Instance and Customize

  • Copy the prc role from xc1-cxa docker compose file
  • Update the xConnect-Collection connection string to http://xconnect

Add Reporting Instance

  • Copy and add the rep role from xc1-cxa docker compose file

Update Content Management Instance and Customize

  • Copy and replace cm role from xc1-cxa docker compose file
  • Update all the xconnect and xdb connection strings to http://xconnect (as per the above screenshot).

JSS and OKTA: Blog 2 – Login via embedded OKTA Form

This blog post is based on the OKTA samples @ https://developer.okta.com/quickstart-fragments/angular/default-example/ and the OKTA sign in widget that can be integrated into the page.

The branch mentioned above contains a working example that I will now run through in the rest of this blog. Once up and running your should get a login embedded into our JSS application that allows us to login via OKTA.


Overview

Firstly lets have a quick run through of the changes we made to the first blog in order to integrate the widget.

  1. OKTA configuration settings
    • These are stored in a settings file in the root of the JSS application: jss-okta-config.json
    • All settings to do with our OKTA instance can be added in here.
  2. Create the placeholder component to contain the widget
    • In JSS we scaffold up a new component
    • src\app\components\okta-sign-in\okta-sign-in.component.ts
    • Have a look at https://github.com/TomTyack/jssokta/blob/feature/okta-sign-in-widget/JSS/src/app/components/okta-sign-in/okta-sign-in.component.ts
      1. ngOnInit()
        1. Note how the code dynamically imports the OKTA sign in widget.
        • import('@okta/okta-signin-widget')
        • This is necessary as the library contains a reference to window. Which will break our Server Side code if imported normaly.
        • So in order to workaround this flaw we dynamically import the library only after verifying that this code is running client side.
      2. detectTranslationLoading()
        • Wait for the dictionary service to be loaded so that we can inject the Dictionary into the form.
      3. bootupSignin()
        • Initialise the OKTA widget configuration, inject labels and URLS
      4. injectWidgetPhase()
        • Render the widget
    • This contains the widget code and the has a matching from end HTML template in Angular.
      • The HTML file contains the following important tag
      •  <div id=”okta-signin-container”></div>
  3. Add the component to the /login route
  4. Adjust the navigation to include a new button for the widget
  5. Dictionary additions

Demo Video

To show you a video of this JSS example in action take a quick gander at the following video:


Demo Installation

  1. Clone the Repository
  2. Deploy the application. Follow the same instructions from the first blog. <<< UPDATE LINK
  3. Run the application. Follow the same instructions from the first blog. <<< UPDATE LINK
  1. Click on the “Login Embedded” link in the navigation
  2. Login to OKTA (if not already) using the details you registered with.
  3. You should arrive back on the profile page
  4. undefined
  5. Success!! hopefully 🙂
  6. Inside the OKTA Dashboard is a handy log that shows all login activity. This is a great way to see what is going on. Screenshot shown at the bottom.
    • undefined

Summary

That concludes the run through of how to integrate the OKTA Angular SDK and Embedded Widget into Sitecore JSS. OKTA is a leader in user authentication management and having the ability to integrate into our JSS applications is an exciting prospect. I hope this example is of use to you and your teams if your considering the same technology mix.


JSS and OKTA: Blog 1 – Login via External OKTA Form

This blog post is based on the OKTA samples @ https://developer.okta.com/quickstart-fragments/angular/default-example/

The OKTA samples makes use of the OKTA Angular SDK and allows you to set up a development OKTA cloud instance for testing the code.

For this blog I have integrated the OKTA example into the Angular JSS starter repository to for a new repository to accompany this blog. https://github.com/TomTyack/jssokta

This repository contains a working example that I will now run through in the rest of this blog. All you need to do is sign up for your own developer sandbox (OKTA) instance using a dummy user and test it out.


Overview

Firstly lets have a quick run through of the changes we made to the original examples in order to integrate them with the angular JSS application.

  1. OKTA configuration settings
  2. Provide the Login and Logout Buttons
  3. Create the Callback Handler
    • The callback handles integration in JSS takes place inside: src\app\routing\routing.module.ts
    • JSS Example: https://github.com/TomTyack/jssokta/blob/master/JSS/src/app/routing/routing.module.ts
    • In this case I made the route: /implicitcallback
    • Importantly the route must be added at the top of the list so that JSS routing doesn’t hijack the route before our OKTA module gets a chance. I spent a little while scratching my head over this one when I originally added it the bottom of the route config.
  4. Update your NgModule
    • This requires a little bit of adjustment from the original example.
    • Module integration is done via: src\app\app.module.ts
  5. Use the Access Token

Demo Video

To show you a video of this JSS example in action take a quick gander at the following video:

Note: In the video I started off the demo by running in Disconnected mode with localhost. Surprisingly this worked and it redirected back to the connected app domain. In reality a better test would have been to start on the same domain in integrated mode. I’m not sure that you could run this test end to end in disconnected.

Demo Installation

  1. Clone the Repository
  2. Sign up for an OKTA developer account
    • https://developer.okta.com/signup/
    • When it asks you what sort of application you want just click “Do this later”.
    • Confirm your email address and fill out the security questions and change your temporary password.
  3. In the top navigation withing the OKTA Dashboard
  4. Back in the JSS OKTA Repository (open it in VS Code or your editor of choice)
    • From the command line run: npm install
    • Open the file: jss-okta-config.json (in the root of the JSS Application)
      • issuer: Swtich out “INSERT-OKTA-ID” with the relevant ID from the same domain your viewing the OKTA portal in.
      • redirectUri: Replace ‘jssokta’ with ‘jss.okta.portal’ or whichever domain you set.
      • clientId: Found on the application > General tab. About 20 characters long.
  5. IIS
    • OKTA requires us to be running a domain with https, as such it makes it difficult to test this out in Disconnected mode.
    • Setup a Sitecore instance and make sure JSS is installed.
    • Add your new domain to the local hosts file and make sure its mapped to 127.0.0.1
    • Add the new domain to your Sitecore instance in IIS and make sure it capable of HTTPS. Use the developer certificate as a default.
  6. Back in the JSS OKTA Repository
    • Got to sitecore\config\JSSOkta.config
      • hostName: jss.okta.portal
    • From the command line run: JSS Deploy app
      • run through the setup as you would any JSS application so that it would connect with your Sitecore instance.
      • Sample config from my tests: See scjssconfig.json at the bottom of this blog
    • From the command line run: JSS Deploy config
    • From the command line run (again): JSS Deploy app -c -d
  7. Test out the deployed application:
    • Navigate to your domain: example: https://jss.okta.portal/ (must have SSL)
    • If prompted about the SSL security warning proceed and ignore. “Proceed to jss.okta.portal (unsafe)”
    • undefined
    • Click on the “Login” link in the navigation
    • Login to OKTA (if not already) using the details you registered with.
    • You should arrive back on the profile page
    • undefined
    • Success!! hopefully 🙂
    • Inside the OKTA Dashboard is a handy log that shows all login activity. This is a great way to see what is going on. Screenshot shown at the bottom.
      • undefined

Summary

That concludes the run through of how to integrating the OKTA Angular SDK in Sitecore JSS. OKTA is a leader in user authentication management and having the ability to integrate into our JSS applications is an exciting prospect. I hope this example is of use to you and your teams if your considering the same technology mix.


OKTA Setup Screenshots and Sample Config

I have included screenshots of all my OKTA settings below. As I know this can be difficult to diagnose at times.


scjssconfig.json

{
  "sitecore": {
    "instancePath": "C:\\inetpub\\wwwroot\\test.dev.local",
    "apiKey": "{FB95B118-E04F-4D5B-9465-01AE804A2F5A}",
    "deploySecret": "r6bnvuhv13beudhix1lxnej2ci38u0i6kxhnpy22i6ps",
    "deployUrl": "http://jss.okta.portal/sitecore/api/jss/import",
    "layoutServiceHost": "https://jss.okta.portal"
  }
}

Introduce YML Linting to your JSS Apps

Intro: This post shares how and why you might like to introduce a YML linter into the build process for your next Sitecore JSS project. Particularly if you are relying on the YML import process when building a new application. Shout out to David Huby (Solutions Architect) for introducing team Aceik to yaml-lint.

Why would you want to do this on a JSS project?

When running the JSS application and testing latest changes, we sometimes discovered some strange behaviour with dictionary items, or a page might not load properly.

A 404 page displayed after an invalid YML change was made

This can be caused by a small (incorrect) change in YML breaking individual routes. For example, lets say you have an incorrect tab or character in the wrong place. The YML syntax requires correct spacing and line returns to be valid but this is not always so obvious when done incorrectly. Sometimes only after you run the JSS application and test out the changes do you discover some strange behaviours or the page not loading properly.

To avoid this we found it handy to introduce a YML linter into the JSS build process. This solves the issue of someone making a small change to the YML files and breaking individual routes.

Here are the steps needed to introduce a YML linter into a node-based JSS project:

  1. Install yaml-lint (https://www.npmjs.com/package/yaml-lint)
  2. In the application root create the file .yaml-lint.json
  3. Update the package.json
    • Create a new script entry called yamllint
      • “yamllint”: “node ./scripts/yaml-lint.js”
    • Update the script called ‘build’
      • “build”: “npm-run-all yamllint –serial bootstrap:connected build:client build:server”,
  4. Download the following scripts file and place it in the /scripts folder
    1. https://github.com/TomTyack/jss/blob/feature/YAML-Linter/samples/react/scripts/yaml-lint.js

You can also see the pull request with the above changes at:

https://github.com/Sitecore/jss/pull/385/files

Demo