Blog
-
The EAA Enforcement Stage for the Web
The European Accessibility Act enters the enforcment stage on the 28th of June, giving website owners and maintainers just slightly over a week to make their websites and services compliant, or risk fines, sanctions, or even outright bans, depending on the severity of the non-compliance. Contents What is the EAA? What is Covered? How to Report…
-
Making Accessible Icons on the Web
Icons on the Web are a natural extension of their use across computer systems since the early graphical user interfaces (GUIs) came about. For over 50 years, we've been using icons to summarise information in picture form, giving users ways to quickly identify objects and actions in order to make their tasks more efficient. But while the focus has always been on the graphical nature of these icons…
-
Building a Dungeons and Dragons Game
I'm a big fan of Dungeons & Dragons, and have been for years, first playing the book adaptions of the game, before moving on to the group tabletop version and the computer games based on the tabletop rules. The recent success of Baldurs Gate 3 has seen a surge in the popularity of the genre. I wanted to take this passion and turn it into something creative using my skills as a developer. Contents …
-
Pitfalls to Avoid With Screen Readers on Websites You Develop
Screen readers are an important part of how people browse the web, especially so for those people who can't see a screen. However, screen readers can struggle presenting your visuals correctly if you haven't written clean code and created well thought out content that can be understood and presented as you intended. By understanding and considering the types of content and the problems that can occur…
-
Form Validation Essentials
Form validation is an essential process for maintaining data integrity, enhancing the user experience, and ensuring security of your website or service. The importance of form validation cannot be overstated. It plays a vital role in protecting both the user and the system from potential harm. For users, it ensures that their input is acknowledged and processed correctly, reducing frustration and improving…
-
How To Get The Best Out Of WAI ARIA
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), or ARIA for short, is a way of adding further accessibility to elements that you cannot by using HTML alone. Most usually it's used to add a label to something that assistive technology (such as screen readers) can access and present to the user, where the existing text inside the HTML is lacking or would be confusing…
-
Picking The Right HTML Tag
Picking the right HTML tag can be difficult sometimes, which is probably why most of us tend to fall back to the generic <div> and <span> tags. Over time, this practice leads to Divitis, which makes code harder to read on more complex pages and it makes the web page less semantic, making it more difficult to navigate with assistive technology like screen readers. In-fact, ensuring we're…
-
Improvements to the Accessibility Checklist Tool
Since the initial blog post about my accessibility checklist tool, I've made further improvements which make the tool easier to use and more useful. Navigating to Previous Steps The first version was extremely linear, only allowing you to start from the beginning and progress to the next step. Now, you can move back to any previous step by using the link in the main steps outline. This…
-
Making Testing Easier: An Accessibility Checklist
Accessibility testing can be hard and time consuming, especially if you are new to it. The mix of browsers, operating systems, and user-space tools is vast and ever-changing. The WCAG guidelines are the de facto standards for accessibility requirements across the world wide web, but they're not exactly light reading, and they can be difficult for newcomers to fully understand and take in. What Do…
-
Accessible Graphs and Charts
If you have a lot of data that you need to convey to your audience you could use a table, but a graph or chart can help convey the same information much more simply and quickly to your readers. However, we need to be careful that the graphs that we create are still available to our whole audience. There are some simple ways that we can ensure this. Contents Text Alternatives Alt…
-
Using Intersection Observer to Improve Image Loading Performance
Page performance is always something we should consider when building websites and applications, whether that's real or the way that a user perceves your site is loading. Some experts would actually say that in some situations, perception of load times is more important than actual load times; it's why some people prefer progress bars over spinners. …
-
Accessibility Testing for Developers
If you're developing for the front end, then it's important to understand how to test that what you produce is accessible. Testing across multiple browsers has been part of front end development since the beginning; browsers would always interpret your code in slightly different ways, both small and large. Accessibility testing is no different really, you're just approaching things from a slightly…
-
Making an Accessible Hamburger Menu
With more and more web usage being performed on mobile devices, increasing every year the, now common, hamburger menu is here to stay. One of the main problems that needs addressing is the usability and accessibility of the menu. A Typical Example Keyboard Handling Showing Focus Improving for the Screen Reader Setting the Expanded State …
-
10 Simple Steps Towards Accessibility
I'm often asked for a list of "quick wins" to make websites more accessible. While I don't always agree with that mindset as it can lead to a lazy approach to accessibility that's tacked on as an afterthought, I do understand that there is a real need for simple solutions that can fix the majority of problems. Imagine the situation (and I really do believe this is a typical scenario from my experience…
-
Screen Readers and Pronunciation
Screen readers are an essential tool for people who are unable to see, or who struggle to read. Sometimes though, a screen reader needs some extra help, as it can struggle with the right pronunciation of a word, name, or abbreviation. There are things we can do to help nudge screen readers in the right direction in a way that doesn't break the user experience for other people. Contents The…
-
Building an Accessibility Browser Plugin
I was recently talking with a former colleague about testing for accessibility, and specifically being able to run an automated test over a website to reduce the time needed to test. My answer then was that there is no way to fully automate testing for accessibility; there's no test that exists which can rubber stamp your website and give it passing marks. But it did give me an idea. Right now,…
-
Accessible Modal Dialogs
Modal dialogues are a part of the web whether we like them or not, and there's plenty of reason to not like them when they're implemented in a really intrusive way. They do serve a very useful purpose though; they allow extra content to be presented to the user in a way that temporarily breaks out of the normal flow of the page without altering the existing content flow. Contents What Should…
-
Accessible Tables
For many years, tables were the only tool available to lay out our websites as we wanted to achieve something that went beyond what you'd probably come to expect with your typical word-processed documents. Then for the last decade (or so) we were told that tables were evil, and using them was a sin that would earn us a spot in the 6th circle of IT hell. More recently we've learned that that anti-table…
-
Web Accessibility in Detail
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee When Tim Berners-Lee opened the WWW to the general public in 1991 (previously it was internal to the CERN network) he had a vision that it would be of use by all, and that tenet is as true today as it was nearly 3 decades ago. Back in the 90's, we had little…
-
Accessible Styled Form Elements
Since the inception of CSS, there's been one area of styling that has been a constant issue; forms. Simple elements, like <input type="text"> and <textarea> and buttons, have generally been ok, as borders, colours and fonts could all be set with standard styles that behaved as expected. Beyond that though, other elements were impossible to style consistently without either compromising…
-
Blind to Accessibility
When I first started learning about accessibility, I figured it was just enough to use alt attribute text on images, and use semantic tags. Like the Greek philosopher Socrates once said though: The only true wisdom is in knowing you know nothing My folly, shared by many developers, was to simply assume that accessibility was just something that applied to blind people, but don’t we all start…
-
Accessible Cross Reference Tables
This article was originally posted on the TMW Tech Blog on the 30th of Jan 2015 but I've amended the prose slightly here I've recently rebuilt this website, mainly in order to move it off of the old CodeIgniter framework to Laravel, and take advantage of the modern features of PHP. The rebuild has given me a great opportunity to go through a lot of the content on the site and re-write it, and one…
-
Combo Boxes
Web pages have always been lagging behind when it comes to form controls that exist on most applications you find on a computer. It just about covers the basics and goes no further, leaving web developers without such useful things as spinners, sliders, tabs and combo boxes. There are scripts to emulate combo boxes online, but the ones I tested failed abysmally when script was turned off, so I set…
-
Conditional Comments
Internet Explorer does not play nice with CSS, particularly when it comes to widths, borders and padding, as it has its own way of interpreting standards. Thankfully, because of its proprietary implementation of HTML, a feature exists which can allow us to include special style sheets just for IE: conditional comments. Because IE is the only browser to recognise these, you can use an externally referenced…
