Accessible Table Generator

Content Editors entering content is the bane of all developers lives, as the Editors will add in the most ill-systematic mark-up through the Content Management System (CMS). These make the pages look wrong sometimes, they put unordered lists in paragraphs, they put as many top header in as they can to stress it’s importance and many more annoyances. However they are not developer and do not know what they are doing, that’s why I build an Accessible Table Generator for the Editors at my work.

Tables are a big issue with accessibility because of how they are used. Back in the day this element was the god father of elements, as it was used everywhere to structure content. It was the best and the most simple method to make sure everything stayed in a format required for displaying on webpages and even e-shots. In most cases you could breakdown a website to fit a grid system, especially in older websites, so the only way to make this grid without using a lot of CSS and spans was the ‘table’ element. However times have moved on and standards have improved with the technology. Now developer are using the ‘division’ element (div) to structure pages. They have a lot of flexibility, there is less default styling to them, it take less elements to replicate structures and they are easier to work with, compared to the ‘table’ element. That’s why us developers use them instead, but Content Editors do not know of these or how to use these for their content. It is not their job to know this and that is why when they want to structure anything they use the WYSIWYG table generator. This then for them, puts the content in the structure they want and its easy as hell.

This however is not always the best method for what they truly need, not that the Editor would know. Straight off a table should not be used to structure content because of the difficulty them. Tables are hard to style as they have a lot of default CSS that needs to be overridden before you can even start on your own styles. With the hard styling and the standards compliant way you use the tables, it can be hard to format the contents in the way that it is required, as example below:

running

This may look like a great idea to have in a table format for the layout, as you have a top cell full width with content in then two other cells. One with an image and another with some more content. However if you look closely at this then a table would be very hard to use because not only first would you need to fight the built in styles, but the bottom content you would put in cells are not evenly sized. Trying to make some of the cells 50% of the full width and some 20/80 split is impossible without nesting more tables within more tables. As well as this, if you was to change the content and add more in, it would not flow. As you add content to this idea above, you would need to decide which block the content goes in to. These are just some of the problems you would come across with then simplest of design, but with the more systematic mark-up approach you can fullfill this with less HTML and some CSS. As you can see from the code below, I have got a container for all the content, so if it was to grow then it would retain the structure and styling. The image tag is place in where I want the content to flow round and then with CSS is floated left.

Ut lacus orci, aliquam a lacus sit amet, aliquet pulvinar odio. Integer quis ex et nulla vestibulum consecte

quis et quam. Donec eleifend felis non ultrices pharetra. Vivamus non dolor aliquet, suscipit nisi si amet, vehicula nisl.

People Running

Ut lacus orci, aliquam a lacus sit amet, aliquet pulvinar odio. Integer quis ex et nulla vestibulum consectetur quis et quam. Donec eleifend felis non ultrices pharetra. Vivamus non dolor aliquet, suscipit nisi sit amet, vehicula nisl. In nec pretium mi. Aenean sit amet arcu maximus, gravida orci non, dictum odio. Curabitur a nunc ipsum. Nunc sit amet leo urna. Donec in sollicitudin mi. Proin ac lectus orci. Sed scelerisque gravida est, at posuere orci malesuada vel.

Not only is it harder on the developer to use tables, but it is not what they are intended for. The World Wide Web Consortium (W3C) say in the Web Accessibility Initiative (WAI) that ‘tables are used to organize data with a logical relationship in grids’ (https://www.w3.org/WAI/tutorials/tables/). This means you should only use the tables when the content is made to be in a grid format and not only that but for the ‘table’ element it should only be tabular data. For non-tabular data you can replicate the table with division elements and CSS to structure it like a table.

When to use ‘tables’ or ‘divs’ then?

Use the table element when the content that will be entered is tabular. This can be content that you would normally put in a spreadsheet or a record of data.

Use the ‘div’ element when the content needs to be placed in a strict grid format, but is not tabular data. There is some discuss if this is ever required as you can always use CSS to format the content in that fashion.

Some people decide over the ‘table’ element for all data due to the difficulties with the element compared to the ‘div’, and also to the responsive issue on mobile devices. However there are plenty ways you can work with tables to make them easy and responsive. One way is to fully override the tables default instinct at a media size point and make them perform like division’s with the proper use of a table, as shown by CSS-Tricks.

The Accessibility Table Generator!!! This nifty little tool that I have built generates the table or division structure you need with all the accessibility required. Use the User Interface to mark out the table size or use the form fields. You can then decide on what kind table you need for your data. It could be one where the top row is your heading data, where the first column is your heading data or where both of them are. Next you decide type of mark-up you need and finally add a caption for the table. The caption will describe the data in the table.

tg1

Once you click the ‘Generate Table’ button below a grid of text area’s will appear. These represent the table with the grey fields being the heading fields in the table. You can now enter all the content you are going to add in the table before it generates the code.

tg2

When you are happy you can click the ‘Generate Accessible Table Mark-up’ button, which will generate the desired mark-up for you to copy and use.

tg3

Here are some resources that also could be useful:

Less code and more tools

In the world of automation, DevOps and a huge amount of tools for website development are we doing less code and so becoming less of a developer and more of an admin?

Over the few years of me doing web development I how found more things have come out the box to reduce the amount of coding required. There are good reasons for this as it has sped up dev to live timelines as we can push things out faster and also us as developers don’t need to do repetitive changes, like navigation or text, as they can be done by content editors.

However it does then lead me to worry about what the future holds for us web developers as it means we will be needed less or only for the small changes, unless we are the ones building the tools. I have moved from a company that has an in house built Content Management System, which we would have to build, support and update all the time. As new clients came in and new advancements were made in other CMS that meant we had a challenge to get caught up. This also meant we were constantly busy and always looking for future improvements. I do like this work pace as I never like to be bored or without work to do, but it does then mean a lot of time spent. There can be a whole host of bugs and issues that constantly stream in, especially if you are working in a digital agency because it’s not just one customer finding bugs. This can then stop the growth of the CMS and the company, so we all turn to the companies that can provide the basic CMS that we can the advance and develop to what we need.

These can be WordPress for the PHP developer or even Kentico for the .Net developer, both really good at what they do. They, and a bucket load more, provide a very nice CMS that can easily be managed by the content providers. If there is a bug with their code then they will fix it and give out the updates. If they develop a new tool to make things better, then it will be given out to everyone as an update. This means there is less work by us developers for the basic little things and more time for the improvements that we want. We can be making new modules, style changes or just about anything we want without worry that something is going to fall over. The trip up though is how much new things does a company need? When the CMS company provides the basic needs of a content editor then there is not much left  for them to need, especially every day to fill out your time. You think about any website and how much they actually change, not much in development more just content.

This to me starts to point to how we are going to need less developers, but more smart developers. It’s the same old saying of Quality Over Quantity. Before every company needed developers to keep up with the tide of work and development needed for the website, plus services building. They were the hot new thing that every company needed to be a proper company. Now though with more companies turning to pre-build products and social media for their content outlet, there is less need. The only need will be for the smart developers to be building updates to the products the companies are using, but how many developers does Squarespace or WordPress need.

Luckily I think there will always be demand for developers, either with web or transition to other sectors. What do you think?

 

 

 

How to put items in a Circle in CSS LESS

Through the depths of the internet I have search and found a method to put items on a circle using a CSS preprocessor. However it was in SCSS and I work in LESS, by which I mean the preprocessor not just less things. So I have converted it over to the dark side of LESS and broken down how it works below, I hope this helps.

Let’s start off with the SCSS version of items on a circle by Hugo Giraudel from his site.

/// Mixin to put items on a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
///
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
/// @param {String | false} $class-for-IE - Base class name for old IE
@mixin distribute-on-circle(
$nb-items,
$circle-size,
$item-size,
$class-for-IE: false
) {

$half-item: ($item-size / 2);
$half-parent: ($circle-size / 2);

position: relative; /* 1 */
width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none; /* 2 */
box-sizing: content-box; /* 3 */

> * { /* 4 */

display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -$half-item;

}

$angle: (360 / $nb-items);
$rot: 0;

@for $i from 1 through $nb-items {

@if not $class-for-IE {
> :nth-of-type(#{$i}) {
transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
}
} @else {
> .#{$class-for-IE}#{$i} {
// If CSS transforms are not supported
$mt: sin($rot * pi() / 180) * $half-parent - $half-item;
$ml: cos($rot * pi() / 180) * $half-parent - $half-item;
margin: $mt 0 0 $ml;
}

}

$rot: ($rot + $angle);
}

}

So now you have seen the SCSS, let’s go to the LESS CSS.

First lets build the method you will be calling in the CSS, which like most of this we will just be copying the SCSS. Instead of putting an action call before the method name like in SCSS (@mixin), we call it like a class in standard CSS. In LESS we also identify variables with ‘@’ instead of the ‘$’. This means the above method of calling a method turns into the below.

.on-circle(@item-count, @circle-size, @item-size) {

}

There are then some manadatory styles that we need for the container to work. At this point though you could also add in some of your own custom style for the container as well. When we call the method we will be putting it in the containers class. We also use the variable ‘circle-size’ for the width and height. For this I used the Unit function for LESS, so it could be swapped out to be in percentage, em, rem or anything else. Rembering to use the ‘@’ to call the variable and not the ‘$’.

.on-circle(@item-count, @circle-size, @item-size) {

position: relative;
width: unit(@circle-size, px);
height: unit(@circle-size, px);
padding: 0;
margin:auto;
border-radius: 50%;

}

Within the method we now call upon the children, but to make sure we only affect the children of the container and nothing further down we got the direct child symbol added in (‘>’). Also because you could be using div’s, span’s or li elements as the children, it using the any type of element selector (‘*’).

A method to centre items up, which we have used here, is to set the width and height 50%, then move the item back half of its size. We get the children’s item size sent in the method to use for this, plus we got the Unit function used in case your making this responsive.

> * {

display: block;
position: absolute;
top: 50%;
left: 50%;
width: unit(@item-size, px);
height: unit(@item-size, px);
margin: unit(-(@item-size / 2), px);

}

Next is the loop for each child and it gets a bit different here for the conversion so ill break it down a bit more. The loop in SCSS looks more like a general loop you would see in JavaScript or some other languages, but the way to do in LESS is to call it like a method with an exception on the side. You can see from the example below I have called the method ‘cl’ for ‘children loop’, passed in two variables and then put a when clause on the side. This will then run while ‘i’ is greater than zero.

.cl(@i,@r) when (@i > 0) {

}

However this will be an infinite loop at the moment as ‘i’ never changes and if we just change ‘i’ in the loop then the ‘when’ clause won’t know about it. What we can do is call the loop method again inside, but of course minus 1.

Our ‘i’ variable is going to be our item count as we want to loop through each of the items. The second variable is our rotation for the item we are at, so for this reason we need to calculate out how much rotation we need for each item. This will be 360 degree’s divided between how many items we have, which will give us the 1% rotation value for each item on the circle.

You can then see we call the method at the bottom after we create the method, or the LESS won’t know what you are calling. Then in each iteration we iterate the variables by removing 1 from the item count and adding another degree percentage to the previous degree.

@angle: (360 / @item-count);

.cl(@i,@r) when (@i > 0) {

@rot: @r + @angle;
.cl(@i - 1,@rot);

}

.cl(@item-count,0);

We can now convert in the style for each of the children items, which is added in the loop. The simple conversion differences are the variables in the nth-of-type and the degrees. Instead of the ‘$’ symbol we use the ‘@’.  Then compared to the SCSS version, I did the calculation within the translate instead of using a variable. I halfed the circle and again to make it flexible to change I used the Unit function.

&:nth-of-type(@{i}) {

transform: rotate(@r * 1deg)  translate(unit(@circle-size/2,px)) rotate(@r * -1deg);

}

All Together Now

At the end of the road with all the pieces we have the final product. You can then use the following as the base to build your items in a circle. I have done a small demo on my Code Pen here.

/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @author convert SASS to LESS Christopher Pateman

.on-circle(@item-count, @circle-size, @item-size) {

position: relative;
width: unit(@circle-size, px);
height: unit(@circle-size, px);
padding: 0;
margin:auto;
border-radius: 50%;

> * {

display: block;
position: absolute;
top: 50%;
left: 50%;
width: unit(@item-size, px);
height: unit(@item-size, px);
margin: unit(-(@item-size / 2), px);

@angle: (360 / @item-count);

.cl(@i,@r) when (@i > 0) {

&:nth-of-type(@{i}) {

transform: rotate(@r * 1deg)  translate(unit(@circle-size/2,px)) rotate(@r * -1deg);

}

@rot: @r + @angle;
.cl(@i - 1,@rot);

}

.cl(@item-count,0);

}

}

 

CSS Click Event

So you have click the link to find out, how on earth is there a CSS Click Event that I have not heard of? Well that’s because there is no Click Event directly, but we can replicate that event with CSS. Below will show you with a simple example how to action CSS on a click.

As I have said there is not real Click Event in CSS, but you can use the other tools you have to replicate that event. In CSS you can determine the stat of elements on the screen and so with that you can check the stat of a Checkbox. This is how we are going create the Click Event.

You can use the pseudo attribute ‘:checked’ to determine is the Checkbox is checked or not. If you use the pseudo then all CSS under it will only action when it is checked.

 

input{
    background-color:red;
}
input:checked{
    background-color:green;
}

 

Now that we know we can click on an Checkbox to activate CSS, we will need to expand its reach. If you are to click on a menu item of a button, you don’t want it to be a Checkbox. We get round this with the label element. With this element you can surround your items that will change. You can link the input and the label together so when you click on the label you are also clicking on the input.

 

<label for="chk" >

<input type="checkbox" id="chk" />

<span>

<!-- content -->

</span>

</label>

 

From this you can change the style depending on the checkbox state, but with CSS you can only target the children elements. This means you can’t target the ‘span’ because its not a child on the input that is having its state changed. What we can do is target the next element. We can do this by using the ‘+’. If you put this next to the input element then add the span in CSS the it will target the span. It affects the next element to the one on the left, please see the example below:

 

#chk:checked + span {

/* Checked Style Here */

}

 

Now you can put it all together and create a click event like I have in the Codepen below:

http://codepen.io/purerandom/full/mEyqmR/

ARIA Control JavaScript Library

This is a library to automatically inject the standard for screen readers mark-up ARIA. ARIA is Accessible Rich Internet Applications which is a way to make websites and applications more accessible to people with disabilities.

This libraries purpose is to automatically inject the necessary tags and commands to the users mark-up, so that it meets the standards as much as possible. There are also commands for the users to inject the methods on to specific parts if the library does not get them automatically. Also the automatic functionality can be turned off if only partly needed.

Download the library on GitHub 

View the examples on CodePen

Here are some helpful links about ARIA to help understand the tags and their values.

 

ARIA Control Library V1 Method Breakdown

Hidden (has auto)

This detects all the elements that are ‘display:none’ and/or ‘visibility:hidden’. It will then add the ARIA ‘aria-hidden’ and give it a role of ‘presentation’. This makes the element hidden from screen readers. There is also a method to make the element un hidden if the state changes.

Hidden Message (has auto)

This method uses the given class in the options to make the element display off the page. This means that the screen reader can see the message and read it out, but sighted users won’t be able to see the message. This is useful if you want to give extra information only to the users using a screen reader.

Notifications

This sets the attributes for ‘aria-atomic’, ‘role’ and ‘aria-live’. These are the attributes best served as a notification.

Alert (has auto)

This is for error messages and other alerts to the user. This will use the notification method above with the settings as ‘aria-atomic: true’, ‘role: alert’ and ‘aria-live: rude’. This can be automatically run with a set class.

Warning (has auto)

This is for warning messages and other none critical alerts to the user. This will use the notification method above with the settings as ‘aria-atomic: true’, ‘role: alert’ and ‘aria-live: assertive’. This can be automatically run with a set class.

Message (has auto)

This is for any message that is not critical like a success message. This will use the notification method above with the settings as ‘aria-atomic: true’, ‘role: alert’ and ‘aria-live: polite’. This can be automatically run with a set class.

Required (has auto)

Any element, usually inputs, that has the attribute ‘required’ on them will have the ARIA tag ‘aria-required’ added to the element. This can also be done manually by passing the class.

Popup (has auto)

With this method you need to set up the popup classes for the control and the popup. It is mainly aimed at the tooltip example, e.g. if you click in a field and then a tooltip shows. The method will give the control the aria tags to show it has a popup and the tooltip the tags to show what controls it. You can also pass the role type, but by default it is ‘tooltip’.

Show and Hide Popup

These are more helper methods to the above. When the popup shows or hides you can call these method to update the elements settings.

Checked Elements (has auto)

Both Checkboxes and Radio buttons will automatically have the check item injected with the ARIA ‘aria-checked’. This marks if the element is checked or not, for which the change event is also added to all of the elements so if it becomes checked or unchecked then it is updated.

Disabled (has auto)

Any disabled element will have the ‘aria-disabled’ tag added to it.

Selected Option (has auto)

This will make all the options in a select element ‘aria-selected: false’ then find the selected option to set it to true. It also adds the event change to detect when the selected has changed and updates them.

Max and Min (has auto)

This will mainly be for inputs with a max or min value. It finds if they have a value then puts them in their relative tags, either ‘aria-valuemin’ or ‘aria-valuemax’.

Navigation (only has auto)

A complex one, but easy to set up. With all the correct settings this can add the tags to show up to screen readers as a navigation. It will also tag the links as menu items and the sub menu as well as being a popup. It uses the hover event to detect when the sub menu is being shown.

Button (has auto)

This will detect the all button types and add its role as ‘button’

 

ARIA Control Library V1 Options Breakdown

autoDetect (default = true)

This determines if to automatically tag the elements or to only allow manual running.

alertClass (default = .acAlert)

Used for the auto detection for Alert Notifications.

warningClass (default = .acWarning)

Used for the auto detection for Warning Notifications.

msgClass (default = .acMsg)

Used for the auto detection for Message Notifications.

popupClass (default = .acTooltip)

The class of the popup or, as the example was, the tooltip.

popupCtrlClass (default = .acTooltipCtrl)

The element that triggers the popup or tooltip to show.

popupType (default = tooltip)

The role of the popup.

hiddenMsgClass (default = .acHiddenMsg)

The class of any hidden messages that don’t show to slighted users.

navClass (default = .acNav)

The navigation containers class.

navParentClass (default = .acSubNav)

The top level links class.

navSubNavClass (default = .acSubMenu)

The sub menu class.