Website accessibility is often overlooked, but it should be a central consideration for modern websites. With so much of our news, services and commerce happening over the web, it’s vital to make sure that nobody is excluded.
In the past, developers and designers have sometimes prioritised technical and aesthetic innovation over usability. However, these days, anyone involved in web development needs to have accessibility front and centre, right from the start. In this guide, we look at some accessibility tricks and tips to help you build standards-conforming websites that everyone can benefit from.
Why Web Accessibility is so Important
Those with visual impairments like blindness, colourblindness or poor sight can find it harder to navigate websites. Poor contrast, tiny fonts and illogical structures can make it near-impossible to find information. Others may find it difficult to use a mouse due to physical disabilities, making sites that can’t be navigated without a mouse effectively unusable. But, with a little care, it’s not hard to make your site more user friendly.
How to Check Your Site’s Accessibility
If you’ve never seriously considered improving accessibility before, a useful first step is to use online tools to check your site. In fact, using validation tools right through your development process is a great way to make sure your work is on-track and avoid a big maintenance headache later on.
You’ll find many online services, both paid and unpaid, that help with improving accessibility. A good example is WAVE. You can also install browser extensions that check your code as you work.
As a bare minimum, be sure to check your HTML with the W3C validator – this can save you from a lot of bugs that make your site less user friendly. The World Wide Web Consortium is the international standards organisation for the web development, so it’s your go-to authority. For reference, it’s also worth bookmarking their Web Content Accessibility Guidelines, the standards documents for web accessibility.
Some Tricks to Help You Make Your Website More Accessible
While these official documents might look a little daunting, with a little forethought it’s not hard to meet the standards, and that’s important for improving accessibility. With the following accessibility tricks in your web development toolbox, you should be well on your way.
Prepare for Keyboard Navigation
While you may work with a mouse or trackpad like it’s second nature, not everyone has the dexterity to use these devices with ease. Making your site keyboard accessible opens it up to those who struggle with a mouse and it’s part of the minimum requirements for W3C conformance. It’s easy to test – just make sure you can tab through all clickable elements on the page. A common oversight is javascript code that responds only to mouse clicks, so also make sure any input-triggered code responds equally to appropriate key presses.
Don’t Forget about SEO
SEO is not only about optimizing for search. It is also important for accessibility because it focuses on improving the user experience. Here’s how search optimization and UX overlap:
- Headings: Proper headings help search engines and users with screen readers navigate content more easily.
- Alt Text: Descriptive alt text improves image search rankings and makes images accessible to visually impaired users.
- URLs: Clear, descriptive URLs are easier for both search engines and assistive technologies to process.
- Mobile Design: Mobile-friendly sites rank better and are more accessible to all users, including those with disabilities.
- Content Structure: Well-organized content benefits SEO and makes it easier for users with cognitive disabilities to understand.
- Transcripts: Video and audio transcripts improve SEO and make multimedia accessible to those with hearing impairments.
- Load Times: Fast-loading pages rank higher and are more accessible, especially for users with older devices.
- Navigation: Clear internal links aid search engine crawling and help users with disabilities find content easily.
In short, good SEO practices often enhance accessibility, making your content more inclusive and effective. You can discover more about the different SEO software optimization tools here.
Think About High-Contrast Colours
Subtle colours can sometimes make for a pleasing appearance, but they can make your site harder to access. Users with visual difficulties will struggle to read content with low contrast between text and background colours. And navigation can be difficult with hard-to-see buttons. For colourblind users, red and green in particular can cause trouble. To meet the WCAG Level AAA standard, you’ll need contrast ratios of at least 7:1 for normal text. Luckily there are many tools for checking, so you can fix your colours at design time.
Use Alt-Text on Images
Alt-text is an essential attribute in your HTML image tags. Basically, it tells the user what’s there in case the media is not available for any reason. For users with low bandwidth, alt-text allows a text-only version of your site to be meaningful even without images. Users with severe visual impairments or full blindness may not be able to see the site at all and use screen-readers to render the content as audio or refreshable braille. In these cases, alt-text is essential to give an alternative to visual rendering.
Do not Forget Heading Hierarchies
Structuring your HTML logically makes it easier to navigate. Heading tags – H1 through to H6 – should be used to render content structure rather than visual design. Don’t use heading tags to change the style of your content – that’s what CSS is for! By using heading tags in a hierarchical structure, visually-impaired users can identify content sections without referring specifically to the visual presentation of the content. It also leaves your code much easier to maintain, which makes it simpler to stick to web accessibility standards for the future.
What is WAI-ARIA?
As web technologies have advanced, content and functionality have become more dynamic. This is usually a good thing but it can make it difficult to preserve accessibility. WAI-ARIA is a W3C specification for dynamic content like widgets, structures and behaviours. By identifying roles, states and properties in a standardised way, your code allows assistive tools like screen readers to interpret and convey dynamic content to visually-impaired users.
Make Video and Multimedia Accessible
Video and multimedia can be partially or even totally inaccessible for blind, visually impaired or deaf users. To account for deaf readers, make sure you include subtitles for audio content. Usually, captions can be switched on or off as required in media players, so you shouldn’t need to hard-code subtitles in your video content.
For visually-impaired users, include an audio description as a substitute for visuals. Of course you will need to use embedded media that support these features, but luckily most HTML5-compatible players are now suitable.
Apply Labels in Form Fields
Using labels for your form fields helps all users understand what they’re meant to be entering. There are, however, several different ways in which you can add labels using HTML. From an accessibility point of view, some are preferable to others. Visually, they may look the same, but there can be big differences in the way that assistive technologies interpret them.
The best option is to use the HTML5 standard <label> tag. It gives a clearer semantic context for your labels which tools like screen readers are then able to use. Be sure, also, to use the appropriate “for” attributes to tie them to the related input elements.
Don’t Forget to Test on Mobile
Too many developers still consider mobile versions of their sites as an afterthought. But since mobile devices now account for over 50% of web traffic, you really can’t afford to skimp on small-screen functionality.
Developing with desktop screen sizes in mind can mean that text readability suffers if it doesn’t scale appropriately. Similarly, images with hard-coded sizes may be too large for low-res devices. The layout of the page will also likely need to be different for mobile. For example, with grid views, fewer elements can be placed alongside each other. You can of course easily address this using CSS3’s Flexbox selectors. Navigation controls also need to be considered – a common technique is to replace nav-bars with a “hamburger” drop-down.
These alterations can seem like a pain, but without care, your site could be completely unusable on small screens. Many developers are now switching to a mobile first methodology. Here the more minimal presentation for lower-resolution devices is the default, with extra elements only added if larger viewports are detected.
Conclusion
Improving accessibility need not be a nuisance. By considering the full gamut of user experiences right from the start of your web development process, you can easily build sites that are accessible as well as dynamic and visually appealing. These accessibility tips are a great start, and by developing with an accessibility-focussed mindset, you’ll soon find yourself producing better sites for everyone, that are more standards-compliant as well as user friendly.
Recommended read: Golden Rules for Combining UX and Security
