Accessibility

Hello, I'm Adrian, a web developer helping on the Kitnic project. We have been working hard to ensure the platform is accessible, some of the aspects I want to talk about are:

• Responsive design for mobile clients
  • Ensuring the platform caters to smart phones and tablets
• Accessible content even with JavaScript disabled
  • This is useful for services like the Internet Archive, Google Translate and more
• Simple glance-able information
  • Helping users make informed decisions without feeling swamped

Responsive design for mobile clients

We still have some work to do here, but as a user of the Kitnic platform you would currently be treated to an experience where elements are correctly laid out to make better use of the available space, elements can even change position within the layout, to achieve this we have been using flexbox and media query technologies.

One of the challenges we have been facing is when you look at the site on a mobile device everything looks tiny and in-accessible so we have been creating media queries that detect mobile and then increase the size of things to look comfortable for users.

The challenges have been mostly in testing mobile vs non mobile since pixel ratio needs to change before we as developers can see the differences to help tackle this we have been using https://saucelabs.com/features and Google Chrome's Developer Tools.

In the future we can force an initial scale of 1 by width and then scale the content according to the viewport https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en This would allow us to stop making a mobile version of the site and non mobile, it can be one continuous experience.

Accessible content even with JavaScript disabled

Kitnic is powered by JavaScript, JavaScript is a technology found in web browsers which allows programmatic access to a web page, however not every web client will execute JavaScript, the challenge becomes how do you render a web site built in JavaScript in a context where JavaScript is not accessible?

Kitnic uses a compilation step, using an engine capable of understanding JavaScript to render the client code server side down to a template which can be sent to the client, this is executed a head of time and given to the server side ready for client requests.

The Kitnic platform works with other services by default because of this process, known as server side rendering (or SSR), some of which include:

• Non JavaScript enabled browsers, like Lynx
• The internet archive
• Google Translate
• Search Engine Crawlers
• Screen Readers
• Opera Mini

While not all these clients will receive the fully intended functionality of the site they will definitely be able to access the content and in some cases achieve basic functionality, rendering ahead of time also gives allows clients to render their pages immediately.

The challenges I personally faced here are occasionally forgetting the code that I write operates in both the server and client contexts, some things such as timers are impossible to achieve server side and can create problems on a remote build

Another challenge can be development performance, particularly when trying to build client and server at the same time, to save time we have switched to client side building most of the time, but that means needing to be mindful of when the server build may need to be updated manually

Simple glance-able information

For us at Kitnic this is something we revised a lot, how do you display a large table and allow mobile users to use and compare it?

We tried:

• Vertical table information for mobile
  • This broke the comparison aspect and was not recognisable as tabular data
• Squashing the table as hard as possible with ellipsis and then allowing users to click to expand
  • Data was not accessible when it was so squished and the solution was JavaScript dependant

After several revisions we settled on normal scroll bars but with the added feature that the user would get a second scrollbar this telegraphs to our users to let them know they can scroll the table as soon as it comes into their view-port. so we have one on the bottom (as is default) and a custom one at the top.

This solution was a lot simpler and effective in the end, in the technical aspect we were lucky to find a react component already had the functionality we were looking for, it just needed small adjustments to work in our set-up because it made certain assumptions about the page, for example it would not work underneath a flex element.

Resources

If you would like to learn more about designing an accessible website take a look at these resources:

1. http://webaim.org/intro/#principles
2. https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en