Skip to content Skip to footer

Tools and software

July 31st, 2023

Validators and Accessibility Checkers

Firefox’s Developer/ Accessibility Tools

Built right into the the firefox browser they allow you to check issues with tab order, colour contrast, and a number of other accessibility issues. They also have a great feature which allows you to simulate how your website looks for people with different visual impairments. (Read more about Firefox’s accessibility tools here)

W3C’s Code Validator

Checks your code meets the good standards and practice of the W3C. It will check for accessibility issues such as lack of alt tags etc, and will pick up any errors in your code or where you should be using a HTML semantic element and the appropriate one to use. ( Access W3C’s code validator here)

Web Aims Wave

Checks your code for accessibility issues. One of the most widely used accessibility checkers, it labels across the page, in a visual way with extensive use of icons (useful if your a visual learner) Access Web Aims Wave tool here.

Lighthouse

Googles accessibility checker works within the Chrome browser. It runs on the same technology as Axe Dev Tools. (Find out more about Lighthouse here)

Axe Dev Tools

Built by Deque, this works across Firefox, Chrome and Edge. Its free option is more than enough for a beginner. Its ability to work in the browser is useful for running quick tests as you develop.

Its explanations for errors can be quite technical, this can be useful for editing specific offending parts of code. However, if you prefer a simpler approach you might find the Wave tool, a better starting point (I would recommend using both alongside each other). Access Axe Dev tools here.

Linter

This works alongside Github, commenting on any code that you send to Github from your code editor. This one is for when you start to feel comfortable using services like Github and it is very useful tool. (Access Linter here)

Screen Readers

These are very useful for testing aria labels and alt tags. (read more about using screen readers for testing in this article on aria)

The main ones to use are, NVDA for Windows. (NVDA is Available here), Voice Over for Apple (Read more about Voice Over here) and Orca for Linux. (You can download Orca here)

Colour Contrast Checkers

Web Aims Contrast Checker

A very useful tool. Easy to use allowing you to easily copy and post colour hexcodes and lighten and darker colours to improve accessibility. (Access Web Aims Contrast Checker here)

Contrast Ratio (by Lea Verou)

This is a useful tool for showing very clearly how legibility of text changes with different coloured backgrounds. I personally don’t tend to use this as much as I find it a little visually overwhelming. (however I know other developers who swear by it). (Access Contrast Ratio here)

Fire Fox Web Development Tools

Our old friend again. You can easily use this to hover over certain colours and see there colour contrast rating and change it. It is the tool I use most often for checking colour contrast. You can read more about this in this article on accessible colour schemes.

People

This is any easy one to forget amongst the range of tools that are available. Other people, friends family, people on the train (bet they wish they had booked the quiet carriage), anyone who shows an interest. This will be a very useful means of getting an idea of how accessible your website design is straight from the mouth of a potential user (they may spot issues that you didn’t)

The people you should follow

July 31st, 2023

The Wise Owls of Accessibility

Ashley Firth

Ashley Firth is head of front-end development and accessibility at Octopus Energy. He is also the author of the excellent Practical Web Inclusion and Accessibility: A Comprehensive Guide to Access Needs. (You can read a summary of Practical Web Inclusion here) This book was a great resource when writing the articles on this website and I would highly recommend it. You can visit Ashley’s Website here and follow Ashley on Twitter here.

Bruce Lawson

Bruce Lawson is a passionate advocate for making the web more accessible and is a member of the Web Standards Project accessibility task force. Follow him for his accessibility expertise, and his contributions to debates on accessible web development. You can visit Bruces website here and follow Bruce on Mastodon here.

Sara Soueidan

Sara is one of the leading experts in accessibility. She has also just started a new accessibility course. Sara’s website is available here and you can follow Sara on Mastodon here.

Heydon Pickering

Hayden offers great advice and practical examples of how to improve accessibility. His work has been a valuable resource when building this website. He is the author of Excellent Inclusive Design Patterns: coding accessibility into web design. ( Read a summary of Heydons book here). You can follow Heydon on mastodon here. You can also visit Heydon’s website for more of his work.

Joshue O Connor

Joshue O Connor has extensive experience on web accessibility including working with W3C, on accessibility guidelines and UK government digital servies team. He currently runs his own accessibility-focused user experience consultancy. His style of writing on accessibility with a sense of humour has been a strong influence on this website. He is the author of pro-HTML 5 accessibility: building an inclusive web. (You can read a summary of Joshue’s book here). (you can visit his Joshue’s agency website here).

Regine M Gilbert

Regine is a user experience designer and professor at New York University with expertise in accessibility. She is the author of the Inclusive Design for a Digital World designing with accessibility in mind. (Read a Summary Regines book here). She is a great explainer of the philosophies behind designing with accessibility in mind and is well worth following. You can visit Regines website here.

Rian Rietvald

Rian is an expert in accessibility who runs the accessibility courses for the A11y Project. I would highly recommend her accessible code course (which I have completed myself) it offers a thorough detailed explanation of accessible web development, as well as lots of practical examples. You can visit Rian’s personal website here and attend the A11y project accessible code course here.

Leonie Watson

Leonie Watson is an influential figure within the accessibility community. She has wide ranging expertise on accessibility, and it’s worth reading her thoughts on everything from alt tags and semantic code to aria. As a regular screen reader user, she also offers unique insight into how you can build websites to offer a better user experience to those using this tool. You can visit Leonie’s website here.

Books you should read

July 31st, 2023

Practical web inclusion and accessibility: A Practical Guide to Web Accessibility

Author: Ashley Firth

This excellent resource explores accessibility, through its effect on different disabilities, with each disability receiving their own chapter e.g. cognitive, sight, and motor issues. Whilst it segments content through type of disability, it also highlights the crossover between them, and maintains the ethos that considering, all users, should be starting point for building websites and not a checkbox exercise. It contains lots of practical examples, and uses language which is beginner friendly and relatable to both developers and designers.

Buy Ashley’s book here

Inclusive Design Patterns: Coding Accessibility into Web Design.

Author: Heydon Pickering

A useful book full of practical code samples, on creating skip content links, magifiying text on the hover, and making accessible buttons amongst many more. You may find some of the code samples a little complex as a beginner, but there are plenty which are achievable even if you are new to html and css. Written in light-hearted, yet informative style it explains the key philsophies behind accessible web design in a relatable way.

Buy Heydon’s book here

Inclusive Design for A digital world: Designing with Accessability in Mind

Author: Regine M Gilbert

This book gives detailed descriptions for how you should design and build accessible websites. It takes a more design led approach and so has less coding samples than some of the other books on this page. However, it is still full of practical and useful advice and includes several insightful case studies, such as how the BBC team made the Iplayer more accessible through research. It has very detailed and useful explanation of different types of colour blindness.

Buy Regine’s book here

Pro HTML 5 accessibility: Building an inclusive web

Author: Joshue O Connor

This book offers a detailed description of all of accessibility features within HTML 5. It is particularly useful for its descriptions of the accessibility benefits of semantic code, as well as aria labels. It also has a detailed process of how you can approach writing alt tags taking you through the thought processes involved step-by-step. Whilst  it was published back in 2012, its content is still highly relevant and a valuable resource to anyone learning accessibility. It also been written with a great sense of humour, is an engaging and enjoyable read throughout.

Buy Joshue O’Connors book here

The role of the focus and how to style it.

July 13th, 2023

Article Content
  • What the focus is and how it appears visually in the browser.
  • How to style the focus and best practices to ensure this styling is accessible.
  • How to give HTML elements different focus styling and why you might need to.
  • The value of spending time mastering the basics of focus styling.

When you use the tab key to cycle through elements on the page, you will find a small box that appears around each link outlining it. This box is the focus. It may also change the colour of the link text. All the links in your HTML document will have this box appear over them. It visually demonstrates to the user when they have successfully interacted with a link.

If you were to do nothing, most browsers would display a default styling for this. However, you will find that you want to customise the styling for this to match the overall design of your website. This is both in terms of the colour size of the outline box and the colour the link changes to when you are over it with the tab key.

What a pseudo class means

To do this, you need to use the pseudo-class ‘focus’. Think of this name in a semantic sense. It refers to the ‘focus’ of the keyboard on a particular link when you are navigating a website. It forms part of a specific list of pseudo-class used to style and control how interactions with links look to the user. Each of these pseudo-classes has rules on the order and how you style them (For a detailed explanation of this styling order read our article on how to make links accessible).

How to style them accessibly

The number one rule with the focus element is if you remove the outline on links (the box) with ‘display none’, always replace it. If you don’t then there will be no visual indication for keyboard users navigating the website as they have successfully tabbed to a link.

The other key factor to consider is legibility. This is both in terms of appropriate colour contrast, the colour of the outline and the colour of the link (Read more about this in are article on making links accessible here). You also need to be careful when doing any styling that affects the size and width of the outline box, as well as the thickness of the line. For example, don’t make them so thin that they can’t be seen, or the box so large that it interferes with the interaction with other links. As with all accessibility (and design in general), you need to make sure that you consider usability alongside the aesthetics that you want to achieve with your design. Your styling should allow users to predict behaviour and feel more comfortable and confident in using a website.

Useful Tip

The UK government website has a great example of accessible focus styling, which makes links clear and obvious to users when they tab over to them. Visit the UK GOV site here. However, Don’t feel you necessarily have to do focus styling as complex as this, when starting out, you could simply start by just increasing the thickness of the outline lines for the focus box to make it clearer. (Visit the Firefox MDN web docs on outline here and Read a Firefox article on Focus here).

Giving different elements their own specific styling

You will find that you may want different elements of the page, and different pages have their own focus link styling. For example, if different sections of your page were in different colours, you would need different colours for the focus styling. This is done by putting the name of the HTML element before the colon. So, if it were an article element you were styling, it would look like this:

article focus styling code sample.
Written article and a colon before the focus, two curly brackets at the start and the end, color followed by colon and blue and semi-colon.

whilst the nav would like this;

navigation focus styling sample code.
Written nav and a colon before the focus, two curly brackets at the start and the end, color followed by colon and blue and semi-colon.

Another example would be when you start to create forms and you want the focus to appear on specific inputs (read this useful CSS tricks article on focus and forms). You may also want to add specific extra enhancements to the focus element, such as the text being magnified when tabbed over.

Why at first you should keep things simple.

You can see how things can quickly become complicated. When starting out, my advice would be to keep things simple. Choose your colour carefully, double-check that the focus element is appearing properly and that you can clearly see the outline. Over time you can add more complexity but make sure that you get the basics right first.