javascript

Web Accessibility Hacker Way

web accessibility meme

Have you heard about accessibility? Do you know what that is? Do you know what it takes to make your website accessible?

Making your website accessible means providing the ability for everyone – regardless of disability or special needs – to use it.

Unfortunately, if you put together all accessibility specifications and print it, the stack will be higher than CN Tower in Toronto:

CN Tower (Toronto)

This is not very encouraging. Many people think that it is not worth the effort because the customer base with special needs is significantly low. However, there is a thing called situational disability that applies to all of us. Moreover, when we are building our websites with accessibility in mind, we make them better for everyone. Why? Because everybody is more comfortable when allowed to fill out forms on a website using just a keyboard (without mouse) and able to switch between fields fast. Generally, everybody likes it when the focus is set on the search bar for sites because 99% of the time, the first thing you do is search for something. Everybody likes properly matched colors (accessible contrast).

How do you get started? How to survive without reading tons of specifications?

3 steps to fulfill 80% standards with 20% effort

  1. Make your website usable with keyboard only:
    • make sure that focus outline is visible all the time and user can determine which element is currently focused
    • no extra/unnecessary TAB stops
    • no tabstop traps (when you cannot get out of an element with the keyboard)
  2. Implement smart focus management:
    • set focus on appropriate elements after user actions (e.g., when a user navigates to a page with a login form – set the focus on the login text field; in 90% of the cases the next user action will be entering the login)
    • restore focus to appropriate elements after user actions (e.g., when a user closes a menu, focus should be restored to the element that was focused on before opening the menu)
    • make tab order user-friendly (remove non-actionable and non-informative tab stops)
  3. Make your website usable with screen reader:
    • When element gets focused, screen reader should provide meaningful information to the user (e.g., “image Satya Nadella” when focused on Satya’s image, or “menu collapsed” when focused on dropdown menu)
    • Min bar: make it good enough with one screen reader and one browser first. As of 2016-08-22 the best browser + screen reader combination is Firefox + NVDA (it has a text mode that prints output instead of converting it into speech: Tools -> Speech viewer)
    • Add aria tags to elements only when the screen reader cannot infer information from HTML (e.g., button element does not need role=’button’ as screen reader will infer it)

Good to know

  1. Don’t focus too much on “being compliant to the standards” at the beginning. Just use the common sense and your intuition. You can deep dive into the standards later on.
  2. Make your website’s most common scenarios work well first and focus on less popular pages later.
  3. Only 20% of accessibility requirements can be verified by tools. The rest has to be verified manually by:
    • yourself
    • user study
    • an accessibility expert

Resources to get started

Summary

If you are web developer you probably like when the tool you are using enables you to do everything without the mouse. This is thanks to keyboard accessibility, and smart focus management. If you play with color contrast analyzer you will notice that colors with good contrast are easier to read and simply just look better. Be aware that accessibility is about performance first. When your website is slow it can lead to unexpected focus behaviors, unwanted user actions, or moving content. How many times you tried to scroll to some part of website and it was moving because images were loading? I’m sure a lot.

What do you think? Is the website you are working on accessible? Have you ever even thought about it?

Accessibility all the things


Azure Portal – the largest Single Page App in the World

Azure Portal - dashboard

Last week I had a pleasure to attend and present the Azure Portal insights at the Visual Studio Live conference in Redmond.

Throughout the conference, 5 sessions were being presented simultaneously, and 1 session was being streamed live. My session was chosen to be streamed live, and is now available on channel9:


I updated this session since the last time when I presented it at NDC London. I restructured it, added more demos, and new section with performance tips&tricks that you can apply in your project. I encourage you to check it out!

I received a lot of great feedback after my session:

Visual Studio Live session feedback (Hanselman)

Visual Studio Live session feedback

Now, I am waiting for YOUR feedback. Leave it in comments or tweet me at @JakubJedryszek. What did you like, what did you not like, what would you like to see that I haven’t show?

You can also check out other recorded sessions from VSLive at channel9.

I really enjoyed this conference. I had opportunity to meet many interesting people with passion in Software Development. From marketing people, through Software Developers, to CEOs and CTOs.

Interesting fact I learned from two gentlemen working as Software Engineers at Panama Canal: it cost hundreds of thousands of dollars to cross the Panama Canal once!

Panama Canal


Thunder Plains 2015

Thunder Plains 2015

Last year I had a pleasure to attend and speak at awesome Thunder Plains conference in Oklahoma City.

I presented Aurelia Framework:

code

slides

I really liked this conference. Especially, because instead of having more talks that I could count, there was only 15 sessions (selected out of over 300) divided into 3 tracks. Moreover, all speakers were passionate developers, and you could feel this during their presentations.

I had a pleasure to met John-David Dalton – creator of lodash, who use to work at Microsoft for Chakra team, and now is working for Microsoft Edge team. I really enjoyed his talk on JavaScript performance. I also met Kyle Simpson – the author of You Don’t Know JS book series and awesome Pluralsight course: Advanced JavaScript. He presented inspiring keynote on choosing simplicity over easiness.

I also attended very good session – Maybe We Should Slow Down by Blaine Bublitz (author of over 400 npm packages). Blaine was convincing developers to think twice before contributing code, and publish only features they have high confidence about.

The coolest talk of the conference was JS in Near Space by Pawel Szymczykowski. I really recommend you to check it out. Pawel, together with his friends built a small space ship, powered by Arduinos and Raspberry Pis, and they are sending them into “Near Space”, up to ~100 000 ft altitude (Boeing 737 flies at <40 000 ft).

Actually, I have seen all talks (in person, or on youtube), and all of them were well prepared. There was no single talk about which I could tell that speaker was not good, or not prepared. You can check them out here:

Thunder Plains is community event organized by 3 passionates – Vance Lucas, Jesse Harlin and Amanda Harlin – who did a really good job in taking care of everything. Congrats!


.NET Rocks Podcast: Building the Azure Portal

.NET Rocks

I work on the new Azure Portal for almost two years now. Two months ago I gave a talk about this largest SPA in the World at NDC London.

In addition to my talk, I also gave an interview for .NET Rocks Podcast – Building the Azure Portal – where together with Carl and Richard we chat about different aspects of building, managing, and using this sophisticated web app:

Enjoy!


Speech Recognition in the Browser at SeattleJS

Last month I presented how to take advantage of Speech Recognition in the Browser at SeattleJS meetup. Google Chrome is still the only one browser that supports recognizing speech with WebSpeech API, but since last month Microsoft Edge team has adding WebSpeech API in their backlog. In this session I’m showing how to use the raw, browser API, and also how to easily add voice commands to your website with my voiceCmdr library.

I also would like to mention that SeattleJS is an awesome meetup with great people. I had many interesting conversations at the after-party. If you are from the area I really recommend you to check it out!

Video from my session: