ShareThe internet, or more specifically the World Wide Web, is a complex place that is only made possible by everyone around the globe. It’s not just for you, it’s for me and everyone else as well – that’s why building a multifaceted web application isn’t simple. People from all walks of life can use the internet, but it’s easier for some than others.
Web accessibility has long been something that many developers know and think about, but rarely get right. Accessible Rich Internet Applications (ARIA) is a really interesting subject and more relevant now than ever. Imagine you’ve built a fairly straightforward website endorsing a logo, site navigation, content and a contact form. On the surface it might seem fairly elementary and difficult to get wrong, but many fail because they design the site only based on themselves.
Imagine the simple website you’ve made is being used by someone with visual impairments. The page may look blurry, the font could be too small and there may be a lot of colours that are hard to distinguish from one another…
The Screen Reader
A screen reader is a form of assistive technology which is essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability.
Screen readers could be seen as the ‘wheelchairs of the web’ – lots of people work with them and they’re pretty straightforward to use. Put a barrier in front of one though, suddenly they’re unusable and stop people achieving what they want.
This is where ARIA comes in… The original specification of ARIA has mostly become deprecated due to HTML5 incorporating many of the same features into its own specification. The main difference is the ‘aria’ prefix to certain HTML tags. Such as an ‘aria-role’ attribute on a HTML5 element can now be just `role’. Everything is generally much more simplified.
Imagine you have an anchor tag in your HTML.
<a>Text</a>
By default, all anchor tags should have a ‘href’ attribute with the value of a link. However, let’s imagine you have some tabs where you can show and hide sections of content within an account management sector of a website.
Anchor tags are the best use case for this, but a screen reader would assume it’s an outbound link to somewhere else and wouldn’t inform the user of the correct intent of the element. If you add a role to this anchor tag, it suddenly becomes more clear and apparent to the user what will happen when they click or select it. For example…
<a role=“tab”>Profile</a>
Think of it like a trust exercise of blind faith. You have your eyes closed and a friend needs to guide you from one part of the room to the other, while avoiding certain obstacles. This is essentially what it’s like for the user of a screen reader. Give them enough of the right information and they’ll be able to navigate your website easier and faster.
The Keyboard
Another crucial piece of technology that complements the screen reader is the keyboard.
Keyboard navigation is very important because it allows people with compromised vision to be able to get from one area of a website to another with confidence.
Using a mouse can be really difficult for the visually impaired, and even harder if you don’t have a steady hand.
Focus styles refer to the styling of elements on your web page which are focused, for example using the tab button of your keyboard to navigate to a certain button. Default focus styles tend to be blue fuzzy squares around a link or a text field. This gives a clearer visual indication to users what the current selected element on the page is.
The focus styling of links, buttons and other interactive elements provide keyboard users with landmarks throughout the page. This is handy when you want to tab through a web page to get to the bottom, to complete a form or read a certain section of text. Removing focus styles will still allow the elements to be clicked or selected, but it will make it harder for users to know what pressing enter will result in.
The Industry Standard
One website that is arguably regarded as the most accessible and easy to use website is the UK Government’s gov.uk website. It has been designed and built to be fully accessible (because it’s the law for public sector websites). It’s incredibly easy to read due to it utilising very specific language to cater for a lower reading age. Regions of the page are clearly defined and marked out so that screen reader users know where they are on a page.
It does make websites more time consuming and complicated to build, but it means that they’re much easier to use. Simple wins such as adding ‘alt’ attributes on your images so that they’re described properly, and using semantic HTML5 markup to leverage modern browser features to name just a couple of examples.
Web accessibility is a complex subject but one that is increasingly vital for developers to get right. If you need help building or optimising your existing website for ease of use and accessibility, contact us today!