Skip to content Skip to footer

When a button shouldn’t be a button.

June 30th, 2023

Article Content
  • Why purpose of a link dicatates its formatting (even if it looks like a button)
  • How buttons are associated with particular actions (messages, modals)
  • Why you should be careful of deviating too far from a links default styling.
  • Why styling links is all about considering user’s expectations.

Buttons are something of a thorny subject within the world of accessibility, particularly when it comes to the relationship between buttons and links.  Buttons look modern and are used extensively across the interface of mobile apps. Therefore, it makes a lot of sense to a web designer, who wants to make their design mobile-friendly to use buttons equally extensively and why not use them as containers for links? Buttons are interactive, and links are interactive it makes sense for them to be together, right? When it comes to buttons and links, looks can be deceptive. Really like with all semantic code it boils down to the meaning purpose, and function of the code.

The purpose of a button and a link

Put simply, even if a link is designed to look in a particular way (in this case look like a button) it is still primarily a link. (There is an argument that even just styling links to look like buttons is bad practice, read more on this issue of button styling in this article from Axe here) What a screen reader wants to know is what particular action any part of your code is going to perform. The function of a link is to link the user to another piece of content, such as a web address or an internal page on your website. Mixing links together with buttons can be confusing to screen readers.  Buttons are associated with certain actions. As Adrian Roselli has described (the best explanation I have found) “If when activated, the user is not moved from the page (or to an anchor within the page) but is instead presented with a new view (messages, boxes changes in layout etc)…” then a button should be used. These popup messages are sometimes called modal dialogues. (Read Roselli’s blog on button and links here)

If your head is starting to hurt, I sympathise. It is one of the areas of accessibility that can easily become quite confusing. In terms of the semantics, I would format it as a link even if you were styling it to look like a button. (There are methods on how to do that in this CSS Tricks article you can read here). Bear in mind that there are strong arguments against doing this, namely that it can lead to confusion over function. You are effectively styling something to look like something semantically it is not, which could be considered problematic for accessibility and general user experience. (I think there is some middle ground here based on the context of where the link is but I can see the argument, especially for links that are in the main body text.)

The value of considering user’s expectations

My general advice would be to always start from the point of the default styling of links and make small changes in each development of the design.  Users like to predict the behaviour of a website, one of the key reasons people become frustrated is that we have certain expectations of what a link should look like.  Everyone can immediately recognise a link if it is blue and underlined. (A styling from the early days of the web). Once you start to deviate too far from this, you lose that immediate recognition from the user over what to do next, and they may be unsure of what will happen when they click on the link.

This advice may seem odd if you are from a generation well used to mobile apps and tapping or clicking on anything that looks remotely interactive. However, not all users will have the same level of confidence when interacting with the website. In the context of accessibility, you also need to consider that many users will not be navigating a website visually, so how a website is coded is vitally important for ease of navigation. (Read more about semantic code in this article here).

Accessibility is all about empathising with users from all backgrounds, and the design decisions you make when styling and formatting links and buttons should be reflective of this.

Creating accessible forms

June 30th, 2023

Article Content
  • Why making forms accessible is important for users with (ADHD, Dyslexia, and memory conditions)
  • How to create a label for forms.
  • How to add a placeholder for forms.
  • How to add a further context to a form with aria describedby.

As you start to build more complex websites, you will find for multiple reasons, you need to start including forms. Forms need to be used for a variety of different purposes, ranging from search forms to enable people to search for your website, contact forms so people can get in touch with you, to payment and address forms in which users need to import personal information.

The importance of making forms accessible

When used, forms can play an important role in the functionality of the website. If for example, your website’s purpose is to sell a product, its usefulness is diminished if users cannot comfortably use the form required to import their address details and personal information needed to make a payment. The accessibility of forms is therefore crucial; if the user becomes frustrated when using the form, they may give up on the process entirely and visit another site. Most importantly, it is not fair to disadvantage certain users over others. You therefore need to make sure that your form works just as efficiently for users using a screen reader, or the users with cognitive disabilities such as ADHD or memory conditions such as dementia, who may find using forms challenging because of the attention and focus required.

Creating a Label for forms.

The first step in ensuring that a form is accessible is to make sure that it is labelled correctly. Labelling is a crucial component of accessibility design and development, as it provides a means of signposting without having to rely on visual cues. (You will have discovered this if you read our article on alt tags available here) . To create a visual label, you can use the tags as shown below,

code of form with Just a label
Form opening and closing tags, with label opening and closing tags inside.

However whilst this visual label is useful it unfortunately means that screen reader users are missing out. In order to make labels available to screen reader users, you need to use the ‘label for’ tag and tie it together with the ID of the form. Like in the example below,

Inside form tags, is two label tags. Inside of those label tags, is label for equals name. This is followed by input type equals text and id equals name.

How to add a placeholder

To provide the user with more information as to the type of data they need to import on a form you can use what’s called the placeholder tag. This will show the user visually and be available to screen reader users, guiding them to what is expected in terms of input on form. See the example below on how to code a placeholder tag,

Code for place holder and ID
Two form tags, label for equals name inside, and enter your name. This is followed by input type equals text, id equals name, name equals name and placeholders equals start typing your name here.

(Examples adapted from Ashley Firth read a summary of Ashleys book here, FireFox MDN Web Docs, with help also from the A11y Collective Course)

This is what a place holder looks like in action.

Search with Placeholder

Add even more context with a description.

You may want to add even more contextual information to a form, particularly if its a complex and there is a risk that the user could become frustrated without it. You can do this with a paragraph and an aria “describedby” label. Both the the paragraph and aria “describedby” need to be linked by the same ID, in order for the screen reader to be able to tell these two pieces of information are directly related to each other. The usual formatting for the rest of the form still applies. You can see example, below for how this would be coded. (example from the A11y Project course) Read this article on the basics of aria, for more on how aria “describedby” works.

Screenshot of Code for Form description.
Label Tags with the id new password-id. An aria descirby withinin the input tags has the same ID. The same ID is used again for paragraph tag, which has information about password characters inside.

The example above imagines a situation where a user may be filling out a password form, and may need to know the mininum number of characters the form requires, to avoid frustration when filling it out. This is exactly the sort of situation where you would need to use this method as this extra information would be hard to express with a label, and placeholder alone. In situations like this more context improves accessibility and the user experience for everyone.

Further developing your knowledge

The form techniques described in this article will help increase the usability and accessibility of your website. I would advise you to start with these techniques, to not immediately overwhelm yourself. However, if you want to go further, you may want to explore fieldsets and legends (You can read more about fieldsets here), as well as autocomplete (You can read more about auto-complete here) and if you are feeling really confident you can even look at aria-atomic. (Read about aria-atomic here) If you want to immerse yourself in form creation I would highly recommend both Ashley Firth’s book and attending the Ally Project accessible code course. (You can read about both Ashley’s book, and the accessible code course here)

Skip content links

June 30th, 2023

Article Content
  • How skip to content links gives users the same advantages as mouse users (skipping navigation etc)
  • How to format the HTML code for a skip content link.
  • How make a skip content link, invisible and then visible with the tab key with CSS.
  • How skip content links empower keyboard user’s by giving them a choice.

A skip to content link is an important way of improving the user experience of keyboard users. It is a link at the top of the page, made visible by pressing the tab key, which allows users to skip the links in the navigation (or anything other links in the header) and go straight to the content of the website. (this content will usually be inside the main tag). This is a convenient function for keyboard users it avoids the frustration of getting stuck within the navigation of the website (particularly if it has a lot of links), delaying the time it takes to be able to read the main content on the website. This therefore neatly avoids user frustration, allowing them to get straight to where they want to be, at the earliest opportunity.

Why you should have a skip content link

Improving the user experience of keyboard users is important to accessibility because many users are reliant on a keyboard to navigate a website, such as people with motor issues who cannot use the mouse. (Read more about in the article on keyboard navigation here). While a mouse user can easily move past the navigation, this process is much more difficult for someone using the keyboard, as they must keep pressing the tab key to go past every link. It is therefore something that can be easily implemented to improve the accessibility of a website.

As well as allowing users to skip to content you can also allow users to skip straight to the footer and any other part of your website. Providing these shortcuts is a considerate method of improving the usability of a website, showing empathy, and understanding towards keyboard users.

How to format a skip content link

The first part of the process is to create the link.This is formatted with the usual a tag with the “href” attribute inside of it, as you would format any other link.(You can read more about formatting and styling links in this article on accessible links here) However, the key difference with a skip content link is what you are linking to. You don’t want to link to a page but a specific piece of content on the page.

To do this, you must first attach an ID to the HTML container your content sits inside.If you are using semantic code, this HTML container will be ‘Main’. So you could give the HTML container of main the ID of “main”.An example is shown in the code below.

Screenshot of Code for formatting main with an id.
Main tags with id equals main inside of them.

Once you have this ID, you then link to it using the href attribute. So you would write inside the a tag, href equals “#main” (this # is how ID’s are formatted when you are selecting them), within your a tag. This will allow anyone clicking the link to be taken to all of the content that’s its inside the main tag, skipping them past the navigation. An example is shown in the code below.

A code sample for skip to main content
A tag, with href attribute equals hashtag main and the text skip to main content before the closing a tag.

Styling the skip content Link

Once you set up your link, it is a matter of styling it. You can select it again using the “#” symbol and then the name of the ID. In the below example, a unique selector is used which targets any link which has that specfic ID. An example is shown in the code below.

code screen shot for the href selector
Two square brackets with href equals main inside, followed by, left and right curly brackets.

An important part to consider with this next part of the process is that it is usual practice to have the skip link hidden from users not using a keyboard to navigate the website. In theory, you can have the link appeared to all users, but this would be unnecessary and could be confusing for mouse users, as they do not need a skip link, they can easily skip to the content simply by scrolling with the mouse.

There are multiple methods of doing this but I would recommend starting with Heydon Pickering’s method. ( You can read all about Heydon on people to follow page here or you can read a summary of Heydon’s book that covers this method here). Heydon makes the link not visible to most users, by posting to the right, far off the screen using, postion absolute and then right 100%. This is shown in the code below.

code sample of styling to get the link off screen
CSS styling href equals main, two curly brackets with position absolute, top zero and right 100 percent inside.

He then changes the positioning from off the screen to auto with the focus pseudo class. (You can read more about the focus pseudo class here) This is so that the link will then only appear when you press the tab key. This makes the skip link only visible to keyboard users (and those using a screen reader). You can see a sample of the code below.

Code Sample of the focus styling for the skip link.
CSS styling with href equals main, followed by colon focus, and then right auto, all before the closing bracket.

If you would like you can then bring in some of your own styling to Heydon’s example, such as changing text size, colour, font padding, etc but make sure you don’t change any of the positioning, as it will stop this method from working. This rule applies to both the general styling for the skip content link and the styling with the focus pseudo class.

I prefer this method to others because it is relatively simple. By using positioning in this way it avoids using a minus z-index or other tequniques which can be complicated to get your head around, when starting out as a developer. (If you do want to use z-index, I would highly recommend reading Keith Grants CSS in Depth First, you can buy Grants book here).

If you wanted to create an additional skip link for the footer. It is simply a case of repeating this process but instead of using the ID on the main container, you are instead using the ID on the footer container. This is the case in both formatting the link and the styling. For example, the html could read href equals “#footer”, as shown in the code below.

code sample skip to footer link styling.
A tag, with href attribute equals hashtag footer, then the text skip to footer followed by the closing a tag.

Why a skip content link empowers your users

Whilst some of this CSS styling, may seem complex at times. Following a useful example like Heydon’s, makes this process considerably less challenging. A skip content link is well worth the effort as it can make a big difference to keyboard users. It empowers them by giving them the choice. With a skip conent link they can decide whether they go through the navigation or go straight to your content. This is a choice that your users will appreciate, improving the accessibility and making browsing your website a more enjoyable experience.

How to get more and (less) out of aria

June 30th, 2023

Article Content
  • How using a screen reader can help with getting the right level of aria.
  • How to download a screen reader on Windows, Apple and Linux.
  • The one keyboard shortcut you need to remember for using NVDA.
  • Why using a screen reader allows you to empathise with your audience.

Using aria can be complicated (as covered in this article on aria basics here). It can be difficult to know if you are using aria too much or too little, and there can be conflicting advice online about when and where it’s appropriate to use Aria. So, how do you improve the efficiency with which you use aria?

To improve your use of aria, testing with the screen reader is an incredibly useful tool. This is because using the screen reader allows you to experience your website from the perspective of those who use this tool to navigate your content. You can hear what they are hearing when using the screen reader. This will let you hear if you’ve gone slightly overboard using aria, and the amount of information could overwhelm the user. Alternatively, you can also hear if you need to use Aria more frequently if there are parts of the website where you need more information. For example, maybe you have forgotten to add “aria-label primary” if you have two navigation elements.

This process is beneficial for testing the length and the language used within aria labels and aria described by and labelled by. There is nothing as efficient for evaluating whether the wording for your aria is accurate, not too wordy and explains the component accurately than hearing it out loud. (Just as your target audience would). You will be able to hear if something doesn’t quite sound right. Similarly, navigating the website with a screen reader will give you an idea of how smoothly you can navigate the content. You will find if you have added too many aria labels that, the website will be too cumbersome and time-consuming to navigate efficiently. You will also experience first-hand what information overload can be like for screen reader users when aria has been overused. (screen readers are also useful for testing alt tags, you can read about how to write efficient alt tags here)

How to use a screen reader

Windows

On Windows, I would recommend downloading the free screen reader NDVA.( You can download NVDA here) It is one of the most widely used screen readers and is relatively easy to use. After downloading this screen reader, I recommend looking online for different keyboard shortcuts. (link to screen reader shortcuts available here) The main one you will want to remember is the keyboard shortcut “insert Q”. This will enable you to exit the screen reader, stopping you from getting stuck in an endless loop where the screen reader keeps reading out content.

There is also the option of downloading the screen reader Jaws, but this is very expensive unless you can get your company, university, or school to fund this. (You can download Jaws here)

Apple

On Apple, you can use their built-in screen reader software called voice-over. (You can find out more about Voice-Over here)

Linux

On Linux, there is a screen reader user called Orca that you can use. (You can download Orca here)I have not used this screen reader, so I can’t attest to its quality. I would highly recommend, if you are developing websites, to at least have one device running Windows or Apple, otherwise, you’re missing out on testing for the majority of the market.

As a beginner, using aria correctly can take a long time. Testing with a screen reader can help enormously to improve your use of it. It prevents aria from being an abstract concept and enables you to hear it live in action. This is an excellent way of putting yourself directly in the shoes of a screen reader user, helping you to understand how they navigate a website. Empathising with screen reader users directly will improve your skill as an accessible developer and designer.

Summary

As a beginner, using aria correctly can take a long time. Testing with a screen reader can help enormously to improve your use of it. It prevents aria from being an abstract concept and enables you to hear it live in action. This is an excellent way of putting yourself directly in the shoes of a screen reader user, helping you to understand how they navigate a website. Empathising with screen reader users directly will improve your skill as an accessible developer and designer.

Alt tags- Why context is everything

June 30th, 2023

Article Content
  • Why you need to consider the context of an image to write a useful alt tag.
  • How to write a alt tag for complex images, graphs and charts.
  • How to write alt tags for fuctional images and images of text.
  • Why you might need a empty alt tag for a decorative image.

Alt tags are crucially important for accessibility. If you’ve read the first article on alt tags, you will know the importance of getting the description right for users who cannot see the images uploaded on a website. ( read the alt tag basics article here ) However, you’ll quickly find that getting an alt-tag description right is not always easy. There is a huge variety of different styles of images that can be included on the website, and the image’s context is fundamental to getting an alt tag which is accurate and useful for the user. The best way of approaching this is to categorise the type of image that you are writing the alt tag for, and once you’ve done this, you can then make an informed decision on how the alt tag should be written. Below you will find a description of the different styles of images you are likely to be dealing with and the subsequent approach you should take to writing an alt tag.

A complex or visually rich image

A visually rich image has a lot of visual information that needs to be conveyed to the user. This could be a complex artwork, a photograph with a lot going on in the scene, or anything that cannot be simply described. It is best to try to boil down what is important to convey to the user in these situations. For example, if you were describing a painting of Van Gogh’s ‘Starry Night’, it would obviously be important to describe the sky in detail, you might want to spend less time describing the village below.

Van Gogh's famous impressionist painting Starry Night
Van Goghs beautiful painting, of a Starry Night over a small village, is difficult to describe. See how I did later in the article.

However, you may often find an alt tag insufficient with these images. This is because it is recommended that alt tags are kept relatively short. Joshue O’Connor recommends a maximum of 100 characters. Others argue slightly more around 150, this used to be because of the technical restraints of how much a screen reader could read out, but these limitations have been found to be eliminated in modern screen readers. However, it is still a useful barometer to ensure your alt-tag descriptions are not becoming too long and difficult to understand. (read about the length of alt tags in this CSS tricks article here )

The solution to this problem is to split up your description of your image into different parts, this will help screen reader users understand the full context of the image without becoming confused or overwhelmed. Adding a figure is one method of adding further context to your initial description of the image in your alt tag. You achieve this by wrapping the image in a figure tag and writing your further description in a “fig caption” HTML tag. You can see how it is coded below. (You can find another figure coding example in this MDN web docs article here)

screenshot of code for fig caption
Figure element with opening and closing tags. Inside is image tags with an alt tag, and the opening closing tags of a fig caption tag.

Going back to our example of Van Gogh’s painting, you could have an alt tag which describes how the picture is “Van Gogh’s famous impressionist painting Starry Night” and then a fig caption which goes into more detail on the picture itself. For example, the caption could be something along the lines of-

“Van Gogh’s painting of the night sky reflects many of the techniques of Impressionist paintings, the dark blue sky depicted in swirling brushstrokes mixed with the dark yellow of the stars. Below this is a small village with the cathedral covered in shadow.”

Other methods of doing this include having a longer description in an HTML paragraph linked to “aria-describedby” by using the same ID for both. This would explicitly link the description to the image for screen reader users. (Read more about this method in this W3C article)

However, I think the fig caption is the best method to start with. This is because it works effectively and is easy to remember because figures and captions are so commonly used outside of web development (textbooks, magazines, newspapers, etc.) This is not to say you can’t use the other methods, there may be some circumstances where they are more appropriate. (Although none immediately come to mind). Fig Caption will work well in the majority of cases, so why complicate things if you don’t need to?

Graphs and charts

Graphics and charts follow a similar process of logic to that of visually rich images. You can use an alt tag as a brief descriptive label and then the figure element for more detail on the information in the graph. You can also use aria describedby, but again, my advice would be to try using a figure caption first.

To improve your ability to write figure captions, look at websites which have to present a lot of graphs and charts as an example of how best to do this. For example, see below the captions from a recent graph from the Guardian. ( Access the source of the Guardian graph here) For another example of graph labelling read this article from W3C here or follow some great examples from Joshue O Connor’s book, read a summary of O Connor’s book here.

House Price Graph from the Guardian
An example of how you could label a graph, from The Guardian, which labels this graph average UK price per thousand. You could combine the heading above with the content below into one caption to simplify it.

An image of text

A website may have an image file of text, usually as a workaround if it’s a font that is unlikely to be installed on the user’s computer (it’s generally not good practice to do this)

If this is the case, the alt text must simply repeat the text of the picture. The alt tag functions as a direct replacement for the text if the user cannot see the image. You can see an example from the W3C below. (access this W3C source here)

Your Access to the city in handwritten font.
Example of image of text from W3C, this would need an alt tag just repeating the text.

A functional image

If an image has a specific function, it is good practice to describe it rather than the image. An example of this would be a printer icon that prints the webpage when clicked. The alt tag would read print this page, rather than going into detail about how the printer icon looks. You can see this example from the W3C as shown below. (Access W3C source of the example here)

printer icon and html code for printing
After the printer icon. Code contains a tag with javascript print, image tag with print.png and alt tag equal to print this page.

This is once again a case of considering the priorities of the screen reader user. What the printer icon looks like is less relevant to them than what will happen when they click it. Another example would be if you had an image of a guitar and text saying, “Buy this guitar”. Rather than the top describing the guitar’s look in detail, it would be better practice to describe its function, the alt tag reading “buy this guitar” (example from Joshue O Connor, read a summary of his book here).

A decorative image

The final one can be difficult to get your head around, particularly if you had it drilled into you by now that you must have an alt tag. However, if an image is purely decorative, it has no function and no meaning beyond simply adding to the visual design, then you can leave the alt tag blank. It’s still good practice to have alt tag code formatting in your image tag, but you would write that the alt tag equals a quotation mark, nothing inside. You can see how you’d code this below,

code sample for empty alt tag
A opening image tag , src equal to semantically useless graphic and then a alt tag equals, quotes with nothing inside. Lastly the closing image tag.

An example of an image that might be purely decorative could be a fancy border, a page break or anything that has no real value beyond making your website look a little prettier, what Joshue O Connor describes as a ‘semantically useless graphic’. Evaluating whether an image is decorative is a case of whether this graphic contributes to the reader’s understanding of the text or is purely a visual bit of design. (You can find a link to buy Joshue O Connors book and a summary here)

Having an empty alt tag might seem to contradict everything you have learned so far about alt tags. Bear in mind that a screen reader user may encounter a lot of information on a page, which can be overwhelming.  If an image has no meaning and is superfluous, they may appreciate not having more information than they need.

If you are unsure whether an image is decorative. I would personally air on the side of caution and include a short alt tag. This is open to debate, but I feel the worst-case scenario here is the screen reader user thinks I didn’t need that information. I feel this annoyance is better than the potential larger irritation of the user feeling they have missed out on information that could have contributed to their understanding and enjoyment of the content.

Summary

Alt tags are important but difficult to get right. I recommend that you invest time in writing them and evaluating which of the categories covered in this article they fit within. Following this process will help you write alt tags that are efficient and helpful to your users, giving them the information they need to know to contextualise the image within the rest of the content.

Font size and content width.

June 29th, 2023

Article Content
  • Why you need to use relative units for font size.
  • Why you should and how you can left align text.
  • How to use maximum width.
  • How to alter text line height.

When it comes to making sure that your content is legible and therefore accessible, it’s important to consider the importance of how you treat your text. If you read the previous article on font styles (You can read this article on accessible typography), you will know the importance of choosing the right font for legibility. However, in making sure that your font is easy to read for all users, you also need to pay close attention to font size, text width, alignment, and line height.

Font Size

Make sure you get the right units

First, you will make sure that you get the font size right. You need to ensure you use the correct units when setting the font size. In the past, it was common to use pixels. Pixels are fixed units, effectively the digital equivalent of centimetres, measuring the size in the amount of pixels they take up on the screen. However, the issue with pixels is that they are a fixed size, not adaptable to user preferences and stay the same size no matter what the user sets as the default size on their browser. So, for example, if a visually impaired or dyslexic user wanted text larger and easier to read and set the default to 20 pixels, the website would ignore this user preference if the developer had set their font size at 14 pixels. As you can imagine this is not great for the accessibility of the website.

Fortunately, there is a solution to this. You can use relative units, known as “rem” or “em” units. (There are slight differences between the two, read more on these differences here). These units are known as “ephemeral units”. The size of these units is relative to the default font size of the web browser or the device on which the user is viewing the content. For example, 1em equals one hundred per cent of the default font size. If the user sets the default font size to 16 pixels, then one em would be equal to 16 pixels. 2 em would then be double that so it would equal 32 pixels because it is 200% of the sizing. This means that the font size that is set by the developer in the code is relative to the user’s preferences. This helps make the content more accessible by respecting the user’s choice when they set their default size. This shows greater consideration of the user’s needs, such as the visually impaired user who needs to set their font size to be larger by default to help with legibility.

Getting the font size right

Unfortunately, no magic size will be just right for legibility for every font and website design. The best advice I can give is to test your website with people and ask them how easy to read they find the font at the current size. In general, I found from my own experience that the font size often needs to be a little bit larger than you think it should, and what you deem to be legible isn’t always the case for others particularly if you have large blocks of text on your website.

A word on responsiveness

I haven’t covered how to make font sizes responsive across different screen sizes within this section. This is quite an extensive topic and I didn’t want to go beyond the basics. However, if you want to start researching in this area, a good starting point would be to look at techniques such as clamp (Read this smashing magazine article on clamp here). I have also found the font utopia tool (font utopia tool available here) especially useful in creating font sizes that scale across different devices.

Useful Tip

If want to learn more about Responsive Web Design I recommend reading Ethan Marcotte’s book on responsive web design. (You can buy Ethan’s book here)

Text Alignment

This is probably one of the simplest ways you can improve the legibility of your font and is something of a revelation when you first discover it. For some reason, despite everybody within the Western world reading left to right, it is quite common to find text centre aligned across several websites.

 While centre alignment is fine for headings, it is unnatural for people to read the body of text of a website that has been centre aligned. With the small simple bit of code, “text-align left”, as shown below in the paragraph styling,

Code sample for text align
p then a curly CSS bracket, text align and then colon left, followed by semi colon. End CSS bracket.

You can make your text far easier to read and users more likely to engage with your content. Most importantly, this increases the legibility and also improves the accessibility of your website.

 The great thing about this technique is that if you are producing your content in a language read right to left, such as Arabic, you can easily implement this style by simply having the text-align set as right, as shown in the code below.

test align right code sample
p curly CSS bracket, text align colon right, followed by a semi colon. Ends with closing CSS bracket.

Maximum width

The property maximum width, coded as “max-width“ is another simple, easy-to-implement way of improving legibility. You may find that when your content is viewed on a large screen, it stretches across the screen across the full length, making it very difficult to read.  Thankfully, there is an easy solution to this you simply just need to set a maximum width, and this will stop the content from spreading too widely. You can set the maximum width to whatever you like, it is simply a case of testing what works best for your content and font size across different screen sizes. You can see an example of how to set the maximum width in the code below, with it set in a paragraph. (You can also set a minimum width, but I have found it is much less common for you to need to use this property.)

code sample for maximum width.
p then curly CSS bracket. Max width and then colon 80 percent, then a semi colon. There is then the closing CSS bracket.

Line height

The property line height is another tool within your armoury for improving and controlling how your text is viewed. Line height sets the space between the lines of the text, so the larger the line height, the larger the gap between each line of written content. It is used without needing to use any unit ( rem, em,  pixels) you simply just state the number you want the line height to be. You can see how this is coded in the sample below in the paragraph styling.

Line height code sample.
p curly CSS bracket. This is followed by line height colon 1.3 and then a semi-colon. Then there is the closing CSS bracket.

Summary

This article has listed several ways in which you can improve the legibility of your text. Many of these methods are very easy to implement and can make a massive difference to the accessibility of your content for all users reading it. For more on making your font legible, read the article on legible typography here and the article on colour contrast here.

How to style hover

June 29th, 2023

Article Content
  • What the hover element is.
  • Why you have good color contrast and underlines in their styling.
  • How you can style the hover of individual HTML elements differently.
  • How you can use scale transform to further enhance hover accessibility.

For users who use the mouse frequently, the appearance of links when the cursor hovers over them is crucially important to the ease within which they can navigate the content of the website.

How this appearance is controlled is through the styling in the pseudo-class hover. This sits within the family of pseudo-classes used to style links.(Read the accessible links article here) It allows the text of the link to change colour, be underlined, animated or magnified when a user hovers over a link (Either with a mouse or with their finger on a touch screen).

Using Hover Styling Responsibly

The hover element can be as simple or as complex as you make it. When styling it, you should always bear in mind the convenience for the user, to ensure that your website is legible and usable for everyone.

The starting point here is to ensure that there is appropriate colour contrast. (Read about Colour Contrast here). You need to make sure that change in state that appears on hover is clearly legible to users. Mastering the colour that a link changes to on hover can be easily underestimated within the context of the more complex things that you can do with this pseudo-class.

However, it is worth spending the time to ensure you get this correct. This is because of the frustrating experience of never quite being sure, over whether they have successfully hovered over a link.

Having the text underlined is an important secondary visual indication, particularly the users who may not be able to rely on colour. You can see the code to style the hover with underline demonstrated below.

Screen shot of Hover code CSS styling.
Written with a colon before hover, followed by a curly bracket, ‘text-decoration’, and then ‘underline’. After this is a semi-colon and then a final closing CSS bracket.

Whether or not the text is underlined on hover depends on previous choices you made in your design. For example, it is common practice to not have links underlined within the navigation. In this case, you then should have the links underlined on hover, unless you have another visual indication which is not dictated by colour (e.g., the text magnified, even then, I would recommend in most cases still having them underlined).

Styling different HTML elements

You’ll notice that in the syntax of the hover pseudo-class there is : with a space before it “: “. If you want your hover style to be used across all links, you never need to put anything before the “:” .

However, there may be cases where you want to style the links in different sections separately. In this case, you would put the name of the element you want to style specifically in front of the colon.

For example, you would write. The Code in style as demonstrated below.

Screenshot of article code styling.
Written article and a colon before the hover, two curly brackets at the start and the end, color followed by colon and underline and semi-colon.

You would use code like this if you wanted the hover to change the links to a specific colour within articles that were different to the rest of the HTML document.

Proceed with extreme caution with cursor effects.

Once you’ve mastered the basics, of the focus element you may be tempted to experiment with animations and cursor effects, especially once you gain confidence with Javascript.

This was very popular in the 1990s and is still used now with more experimental designs. Whilst it is something that can be done responsibly, it is something that can go badly wrong in terms of accessibility. At the very least, you need to have a way for the user to turn off these effects. This is because not only can they affect legibility, but also any effects which affect the motion can have damaging impacts for people with certain disabilities e.g. motor issues, cerebral palsy and could be distracting for people with conditions such as ADHD.

Useful Tip

If you do plan on using any form of animation. You need to make sure there is a way of turning it off for users who would prefer not to have it. Read more accessible animations in this CSS tricks article.

Using focus pseudo-class to enhance the accessibility experience.

You can without using complex JavaScript or animations, start to make small adjustments to the styling of the focus element to increase accessibility.

Heydon Pickering in his book on inclusive design patterns, has an excellent example of how you can increase accessibility on hover by allowing the text to be magnified. This enables users who may have impairments to be able to see links more clearly.

This technique involves adding a transform which manipulates the text and scale, increasing the size of the text to a certain unit. On the links you could add the following code as shown below.

Code Sample for Hover scale.
Written with hover, two curly brackets at the start and the end, transform followed by colon and scale, brackets with 1.2 inside and semi-colon.

This will increase the size of the text on hover by one 1.2, so it will become magnified when a user hovers over it. You can adjust this based on what works in testing with your design. For example, you might want a larger magnification on the links in in the navigation than you do in the text. So, in this case, you would need a different scale and add the specific HTML element that you want to style differently. For example the code would look like the following below.

Navgiation Hover code screenshot.
Written with nav followed by a colon then hover. Two curly brackets at the start and the end, transform followed by colon and scale, brackets with 1.5 inside and semi-colon.

If you add in ‘underline’ to this styling, you have a clear accessible way to add an extra element to the appearance and focus, which enhances the usability for users.

How to enable accessible keyboard navigation.

June 29th, 2023

Article Content
  • How a webpage is structured for users navigation with a keyboard.
  • What the tab index is.
  • Why as a beginner you should avoid editing the tab index.
  • The value of semantic code in enabling efficient keyboard navigation.
  • How to approach fixing issues with keyboard navigation.

The keyboard and the tab key are fundamental to many users navigating and interacting with a website. This can be because they prefer not to use a mouse or are unable to. Their reasons for this can range from physical disabilities, which make the fine motor control of using a mouse difficult, to finding the use of the keyboard more comfortable. The value of a keyboard as a tool for navigation, means its important to control and manage the interaction between it and your website and this vital tool. Getting this management right has a strong influence over the overall accessibility of your content.

The structure of a website for keyboard users

When considering how to design for a user using a keyboard, it’s best to think of your website as a list of links and blocks of content. Essentially someone using a keyboard moves through this list by using the tab key. At the start of using your website when they press the tab key, they will cycle through all the links in your navigation, e.g. home, about etc. They will then move on to the next block of content, which will be defined by an HTML element, so for example, in a semantic structure, you would normally find the next block of content would be the main tag, which would then have headings, paragraphs etc, inside.

You can see a visual demonstration of how your content is ordered for users of keyboards through the developer tools on most browsers ( you can read about accessibility browser tools here). On Firefox if you go onto the accessibility tab, you can see a checkbox for the tabbing order. This will show the order that the tab key will cycle through by putting a numbered box against each element. This can be useful for troubleshooting, if on testing you find that there is an issue with the tabbing order, for example it is not cycling through your links correctly.

The tab index and semantic code

This order shown by the developer tools is a visual demonstration of the tab index. This index is established automatically by the browser. It gives each HTML element of webpage a number. The browser can then establish the order it needs to cycle through for keyboard users.

This tab index is applied logically based on your code structure. You can edit the tab index, such as adding a 0 index to add a div into the tabbing order, or – tab index to take an element such as a widget, out of the tabbing order. Joshue O’Connor has described this within his work on accessibility (read a summary of Joshue’s book here).

However, there is a lot of caveats to altering a tab index appropriately. You should never try to make a div behave like a button, by altering the tab index. (read the Web Docs article on this here). Equally adding positive index on any element can impair accessibility. Read Scott Ohara’s thoughts on this here or, read this article on A11Y Project or Roselli’s blog on the topic . My advice would be as a beginner to avoid editing the tab index, unless there is a very specfic circumstance that requires it and even then I would look to see if you can find a different solution to solve the issue.

How to fix tab order issues

Most often you will find that issues with the tabbing order come down to problems within your code structure. A semantically and logically coded website should consequently have a logical tabbing order that has been established by default.

Issues may be caused for example, by not formatting links correctly especially when using buttons. For example, having a link inside of a button rather than a HTML link being styled to look like a button can cause issues. (Read this article here on button and links for more on this) This demonstrates a practical use case of why semantic code structure (as discussed in this article) is so important for accessibility.

Instead, you can use the visible tab index on tools such as Firefox. This will highlight issues with the semantics of your code. You can then fix the issues by changing your code structure rather than hijacking the tab index.

Useful Tip

As well as looking at the tab order in Firefox make sure to regularly test your website to see how easy it is to navigate just using the tab key. It’s also good research to look at other websites and try navigating with just the tab key. If you spot any issues on these sites, make a note of them, and try to work out why it’s happening and how you might fix it. This will provide you with knowledge which will be useful if you have similar issues in the future.

The tabbing order should match the logical visual order. Someone reading your website will move down the website and read left to right (for Western audiences). The tabbing order should therefore follow a similar logic. In using a website, you would read the navigation first and then move on to the main content. This logic used when navigating a website should be reflected in the tabbing order. (This article on skip content links here , can show how you can give user the option to skip to the main content).

This article discussed the importance of the keyboard for navigation, the tab index and value of semantic code. To learn more on stying of keyboard interactions, can read this article here on the focus element.

How to make links accessible

June 29th, 2023

Article Content
  • How links styled correctly make a websites navigation functional.
  • How to semantically code a link, and get anchor text right.
  • What a pseudo class is and why they are relevant to styling links.
  • The correct order to style pseudo-classes in, and how to remember it.
  • The best practices for styling links accessibly, e.g colour contrast.

How a website manages links are fundamental to its functionality and accessibility. How links are styled acts as a compass and map for users navigating your website.  Whether or not you are sending the user to another page on your website via a link in your navigational menu or you are sending them to a resource on another website. A link that is coded semantically and styled correctly allows users to predict where they are going to go next. This provides certainty and confidence in using a website. To ensure accessibility, you need to have careful consideration of users’ differences in perception and how they interact with the website.

Semantics and not forgetting anchor text

The basics of coding links, is to use the ‘a tag’ followed by  ‘href’ to link to either a page that is internally on your website “./yourfile” or an external url (read this useful MDN web docs article on setting up links ). You need to apply this same semantic logic when you use an image as a link or you want a link to appear as a button. Both need to be contained with a tag, even though there is a semantic button element (the debate around is described in this article on buttons). Following these semantic rules ensures that a user will always be able to signpost that an object is a link without relying on visual cues.  

The Purpose of CSS pseudo classes.

However, a user’s interaction with a link is not only defined by HTML and anchor text. You will notice that on websites when you click a link, hover over it or interact with it using the tab key, the link will often change colour, be underlined, or in the case of the tab key, have a small box around it.These behaviours have default styling from most web browsers. However, you will soon find when you’re developing a website that you want more control over these interactions appearing.

This is where you start using a series of CSS pseudo-classes to style these links. They are called pseudo-classes because they add styles to elements which are already there inside of a specific CSS class (they are what’s called pseudo-elements that can add content but don’t worry about these for the moment). The order in which to use these classes can be remembered by using the mnemonic Love Fears Hate. It’s a bit of an odd one, but it comes in useful, because if you get the order wrong one style could override the other.

The order to style pseudo classes in.

You start with the styling for the “a tag”. Then you go through the mnemonic, starting first with the L, which stands for the link. Any styling here will dictate the styling for any link on the page.

Then you move onto the V in love (I know it’s not the best mnemonic). This is for ‘:visited’ this will apply specific styling to a link which has previously been clicked on by a user to show when they have visited it.

Following this is F. This stands for focus and will create specific styling for when someone uses the tab key to navigate over a link.

Then there is H. This is for hover and will create styling for when someone uses a mouse to hover over a link or their finger on a touch screen.

Lastly, there is A. This stands for active. This will create specific styling for when a user has clicked on a link to demonstrate that they have successfully clicked on it (to see some code examples of this read this MDN Web Docs Article).

Useful Tip

It may seem a little odd that the order of these pseudo-classes needs to be followed so strictly but you will soon find with CSS that it’s a real stickler for following certain rules and likes things in a particular order. For more on CSS rules, I highly recommend Keith J. Grants CSS in-depth. (You can buy Keiths book here)

Styling these classes.

It is considered good practice for accessibility to have all in-text links underlined (You can have underlines appear on hover, but it can be argued that this makes it less immediately clear that an object is a link, especially for those not using a mouse).

Beyond it is then about selecting the right colour for each of the pseudo-elements. You need the colours to be distinctly different from each other but not so distinct that it clashes with the overall colour scheme of your design. This balance is best achieved through trial and error; you can use some of the defaults as a general guide if it works with your colour scheme. If having blue links and darker purple visited links works in your colour scheme, this is a good starting point. Good practice to look at other websites to see how they’ve achieved the right colour balance, particularly websites that are managing multiple links effectively and accessibly, such as Wikipedia.

The next element in terms of colour is considering appropriate colour contrast. Colour contrast is something we’ve described in detail in this article (read about colour contrast here), but all of the colours you use for the pseudo-classes must have enough contrast against the background colours they are against (passing double A or triple A grade for contrast). As per all elements of accessibility design, it is good to test this out on friends and family, something that looks right to you might not do for others.

Summary

Links are crucial to an accessible website; at the core they should be straightforward and logical both in terms of the coding. Equally, you need to follow a logical approach to your use of colour in the styling of different states. Researching and examining how other reputable websites have done this is a good starting point, and always pay attention to colour contrast.

Lastly,  it is important not to overlook simple things like anchor text and how they can play a vital role in ensuring the website is accessible to all users. Like a good map or a reliable compass, effective link design should be able to confidently direct users as to where they are going.

This article has functioned as introduction to the basics, read this article on the focus element for more on that pseudo class, or read more on the hover element here. You can also visit the resource page for tools on mastering accessible link design.

Aria

June 29th, 2023

Article Content
  • How aria is like audio commentary for your sites content.
  • How to use aria labels, labelledby and describedby.
  • How to use aria live and aria hidden.
  • How to use aria roles (and why you might not need to)

Aria is a method of labelling HTML content to give screen reader users more context. They essentially function like labels(they work in a similar way to alt tags, read the article on alt tags basics here). Screen reader users (e.g someone with visual impairments) can not rely on visual cues, so Aria was established to help screen reader users better understand a website’s content. As well as functioning like a label, another way of thinking of Aria’s purpose is like the audio descriptions in a film. They essentially act like a commentary on the website’s content, letting the user know what will happen when they interact with certain elements like a button, click on the form or interact with the website’s navigation. There are many different types of aria, and it can be a bit of a minefield when it comes to learning accessibility. This article will break down some essential aria functions that are good starting points for using this accessibility feature.

Aria labels

This is probably the simplest one to get your head around. Aria labels literally label HTML content, adding further context. This is usually done by writing what a component is going to do or describing the purpose of a component in more detail. You could, for example, use an aria label to give more detail on where a link or a button might take you as a user. You can see this in the example below, which adds more information to the submit form button. (Example from Ashley Firth you can read a summary and buy his book here)

Aria label code sample
Button tags, followed by aria label equals subit information and move to the next page and then submit form. Closing button tag.

Another example is if you have two navigations on your website, you can use an aria role to distinguish between the two. You would use an aria label to label the first navigation, (which would likely be inside a header) primary and then to label the second navigation (most likely in the footer) secondary, as shown below,

Navigation primary label example code
Two header tags, inside in two navigation tags and inside that is aria label equals primary.
code sample for aria label secondary
Footer opening and closing tags. Inside this is two navigation tags, and inside that is aria label equals secondary.

Aria describedby, and aria labelledby

Both aria “describedby” and aria “labelledby” play a very similar role. Both provide text content that directly links to components via a shared ID. So, if you have an HTML component, such as a section, you can add an ID to this and then an ID to a corresponding header or paragraph.

This code sample has a section html element, with a arialabelled by property. Inside the section with a heading level and a paragraph inside. The heading element and the aria labelled by share the same id.

The difference between the two is the length of the descriptions. An aria “labelledby” should be a short reference,” brief text that provides the element with an accessible name”. Whilst an aria “describedby” can have a much longer description. So, using our previous example, you are more likely to associate an aria “labelledby” with the header, whilst an aria “describedby” is more likely to be linked to a paragraph. ( Read Firefox on the difference between aria “describedby” and “labelledby” here ) Alternatively read how describedby can be used in forms here.

Aria live

You can use aria live to give the user an indication of a change. For example, using aria live to inform the user of the successful submission of a form. There are two values that you can give here. Aria polite will only inform the user when they are idle. This is commonly used to not irritate the user by informing them of updates too quickly and breaking their concentration on the task they are currently doing.

aria polite code sample
Div opening and closing tags, with aria live equals assertive inside, this followed by a span where please wait while content uploads is written.

Aria assertive will be less patient than aria polite and immediately inform the user of any changes without waiting for them to finish their current action. This should only be used when crucial information requires the user’s attention immediately. For example, in a situation where the form is time-sensitive and the user could be logged out if they don’t complete an action. You can see an example of how this would be coded below. (Both examples adapted from Ashley’s book access it here)

Aria Live code sample
Div opening and closing tags, with aria live equals assertive inside, this followed by a span where content is Uploading is written.

Aria hidden

Aria hidden is useful if you want to hide specific components from screen reader. See a code example below ( Example from Ashley’s book access a link to buy it here)

aria hidden code sample
A paragraph opening and closing tags. Inside is aria hidden equals true and then the text this content is hidden from screen readers.

You might use aria hidden if you had something on the page purely for decorative or presentational reading reasons and which has no semantic meaning. Aria hidden removes it from the flow of the screen reader, so they don’t have to listen to any content that may be relevant to them without visual cues. (You can also use empty alt tags on decorative images to improve screen readers’ user experience, read our article on the advanced use of alt tags here.)

Aria role

This describes the purpose of an HTML component. It was commonly used before HTML semantic elements to let a screen reader user know what section they were on the website.

You had, for example, the aria roles for parts of the website, which were called landmarks, “banner” for a header, “content info” for a footer, main for the principal area of content on your website. “region” for a significant section of content on your website, and “navigation” for the navigation.

These roles were often used to make divs being used as containers more accessible. For example, it was common to have the div that contained the navigation as having the role navigation. These roles have been made less relevant in the age of semantic HTML elements. You don’t need a div with the role navigation, as using the semantic HTML element “nav”, the screen reader will automatically read this as a navigation landmark without needing to add an aria role.

However, I think these Aria roles are still useful to learn, as there may be circumstances where they could still be used. Perhaps you are building a website for older browsers that do not need to support all HTML5 elements, or you have to use a div for a certain element of the site’s interface, and you want to give this element extra context.

Firefox describes it like this, aria roles “should be used to describe elements that don’t natively exist in HTML or exist but don’t yet have full browser support.” ( You can read more of Firefox’s thoughts on this by following this link).

Useful Tip

To find out more about all of the different uses of aria I highly recommed attending the A11y Project course on accessible code available here. You can read more about the course tutor Rian here. They will also be launching a new course soon specifically about aria.

Summary

Aria can be a little confusing when starting out, and it can be easy to feel overwhelmed. My advice would be to start with using aria labels. This alone can make a big difference to screen reader users’ experience of using a website giving them important pieces of information which help them better understand the content.

As you are getting more advanced developer and you start to build forms or more commonly use components such as buttons, you can gravitate towards using more complex pieces of aria such as aria live and aria “describedby” and “labelledby”.

It would also be good practice to look at how large organisations, such as the BBC (visit the BBC here) and UK government (visit the UK gov here), are using aria and regularly look at the recommendations on sites such as MDN web docs(which has been used to help with this article) and follow the latest advice on W3C. (Read W3C’s advice here) (you can also read this article on using screen reader testing to help with Aria here).

How to ensure Typography is legible

June 19th, 2023

Article Content
  • Why choosing the right font is important because legibility is vital for content to be understood.
  • The positive impact font legibility can have on users with dyslexia and visual impairments.
  • The difference between a serif and sans serif font and when it is right to use them in headings and body text.
  • How modern fonts, such as Volkorn allow for more flexibility in using serif fonts in body text.
  • How, despite improvments in modern fonts, you should still be cautious when using serif fonts in body text and particiarly when using cursive fonts.

Choosing the right font style is something that appears deceptively simple. When compared to the complexity of learning to code, visiting Google Fonts, and clicking on the font that looks the prettiest, seems like a nice bit of light relief. Yet, choosing the right font is a key part of the process of building an accessible website that shouldn’t be underestimated.

Think about the importance of fonts in your daily life. The font used for the London Underground was carefully chosen for its legibility. Imagine for a moment the daily chaos if he had decided to go for a cursive font.

The context may be different for a website, but the principle is the same. You don’t want the wrong font to be a barrier to users understanding your content. If you choose your font with legibility in mind from the outset, you will not only make the experience better for everyone. You will ensure that users, with visual impairments, cognitative disabilities such as dyslexia and any other condition which affect reading have no barriers accessing your content.

How to choose the right font.

Where then do you start?

A key principle is to first understand the difference between a serif font and a sans serif font. Graphic design geeks could write essays and books on the subject (in fact many have). In very simple terms a serif font has little feet on the end (descenders). The Times font is a classic example. A sans serif font does not, hence the ‘sans’ (Excuse my French).  A classic example of a sans serif is the Swiss font Helvetica.

The little feet on the serif fonts were originally designed to help try to increase legibility in the printed form by giving the eye a line to follow (You can read more about this in Garfields’s excellent book on typography).  In the world of digital screens, these lines tend to decrease the legibility of the font, particularly if serif fonts are used for large chunks of written content.

As a consequence, it is common practice to only use Serif Fonts in the headers. where the quantity of text is smaller. This meant designers could have the impact and style of serif without negatively affecting the legibility of the page (although you should still ensure these are legible as possible); whilst using the more legible sans-serif fonts for the largest quantity of text on the page.

Bear in mind with these rules they are not an excuse to have horribly illegible serif font in the headers. Also, just because a font is sans-serif doesn’t automatically make it highly legible. Don’t just select any sans serif, assuming it will be legible, be selective.

Useful Tip

When you find a font that works well for legibility it is well worth reading any design documents from the fonts designers. This will give you a strong idea of the technical reasons why the font is legible and help you choose the right font in the future. For example, this site uses Atkinson hyper legible checkout the information about the font. (to read more about Atkinson font read this article).

Why there is flexibility to following these rules.

If you are worried that this is too restrictive, don’t panic. It is a solid starting point, but the advent of high-resolution screens, and the sheer quantity of different fonts available, allow for a greater level of flexibility.

There are now many modern serif fonts, such as Volkorn (view the font here), which have been designed to have an old-fashioned serif style and still be highly legible (More legible in fact, than some sans-serif fonts).

However, it is still wise to tread carefully. If deciding to use a serif font for body text, you need to be very selective over your choice to ensure that it is as legible as possible.

Can you ever use cursive fonts?

Cursive gets a bad reputation for its lack of legibility (often, that reputation is deserved).

However, there are some more modern cursive fonts which are legible. Amatic SC (view font here) and Courgette (view font here) are two of my personal favourites.

Yet, my advice would be to use cursive fonts with extreme caution, they can be hazardous. Headings or pull-out quotes are easier to get right, but body text is dangerous territory if used. Make sure you do a lot of testing for legibility.

How to develop an accessible colour scheme.

June 19th, 2023

Article Content
  • Why, when planning your colour schemes you should use software and browser tools but not be overly dependendent on them and plan ahead.
  • What a colour wheel is and how you can use it to plan and develop colour schemes.
  • What is meant by complementary shades how to to utilise them to ensure you have accessible colour contrast.
  • Why research is an important part of the process in developing a colour scheme, and how you can be inspired by other forms of media.
  • Why you should not leave making your colour cheme accessible to the last minute and why you will always be rewarded by planning ahead.

 If you have read the introduction to why colour contrast is important (read the colour contrast introduction here). You now understand why colour contrast is important to accessibility and how Web Content Accessibility Guidelines (WCAG) sets the standard for the level of contrast required. 

However, the key question is how do you make sure you get it right. The key is in the planning.

Why you shouldn’t rely on online tools

As you will quickly discover, an Aladdin’s cave full of online tools and software will measure your colour contrast for you.

Many will simply allow you to input your colours (either in hex code or RGB). They will then give you your exact contrast ratio and state if it meets the AA or AAA standard, or doesn’t meet any standard at all. Firefox’s web development tools will even let you, on your live website, hover over specific elements and see their grade. There are also validators, such as Wave, which will warn you if your colour contrast is low when they complete their site analysis.

With all of these tools, it is tempting then to fall into the trap of letting all of this software do the hard work for you. However, what may appear to be the easy option can become a long and arduous process if you don’t start from a good place with a well-planned colour scheme.  

Colour wheels and complimentary shades

Colour schemes can be as simple or as complicated as you like. With the scale of different colour schemes and theories, it is easy to get lost. I would therefore start simply, by buying a colour wheel.

These simple cardboard wheels show the full spectrum of colours and shades in a circle with a dial that you can move around. They show visually how colours compare and contrast with each other. They are well labelled and provide detail on how different colour schemes are constructed; as well as all of the technical names for colour groups and schemes.

A useful starting point in the context of colour contrast is to pick two dominant colours that are opposite each other on the colour wheel. (these are called complimentary colours). You could select one for your background and the other for your text. This is called a complimentary colour scheme (read about complimentary colour schemes here). You can then have different shades in between these colours for other parts of the website, i.e., maybe a slightly lighter shade of one of the selected colours for buttons. This more complex colour scheme, is known known as a split complimentary colour scheme (read this article about split complimentary colour schemes).

This is not the only approach you can take, but the important thing is you start to think systematically about how you are using colour. Therefore, when you do then check your colours with validators and tools you will have an overall strategy in place. This will make it easier to adapt and alter colours to meet colour contrast standards. If you have thought everything through carefully, these will likely be slight adjustments to the shade and hue of colours used, rather than a complete redesign.

The value of research

The last piece of advice when it comes to developing a colour scheme is to look at the design of others.

This may seem obvious, but when overwhelmed with all of the learning in web development, it’s easy to get tunnel vision. Many designers are experts in using colour and developing creative colour schemes which are still accessible.  There are numerous sites of inspiration for colour schemes, such as graphic design, photography or even nature. There is no harm in gaining good ideas from what you observe around you.

Useful Tip

Any website, which is related to public service, or is likely to follow accessibility regulations closely is a good source of inspiration. Check out, the UK government website or the BBC both have a high standard for accessibility. (visit the UK Gov website here and the BBC website here). Dig into their code using your browser tools and read any design documentation they produce to give you a clear idea of how they created their colour schemes.

Final advice

The more time you invest in the planning process for your use of colour, the more likely you will produce accessible websites with good levels of colour contrast.

Online tools and checkers are incredibly useful and are an essential part of the validation process. However, if you leave it all to the last minute and rely on them too heavily to fix everything, you will get into difficulty. The last thing you want is to be in the position where you are frantically throwing colours at a contrast checker, trying to get them to be WCAG compliant.

Developing a colour scheme with appropriate colour contrast is a key part of this process of accessible design. It, therefore, needs to be respected with time and planning. If you do this, you will reap the rewards.

Grab your colour wheel and get started!