As with any area of business, the aim is to be engaging and offer your customers what they are seeking to “sell” your products or services.
If a premises, every effort would be made to ensure your business is able to be accessed physically, the same can be said for your digital space.
What is web accessibility?
Web accessibility refers to websites, tools and technologies that are designed and developed so people with disabilities or learning difficulties can use them. By “use” we mean perceive, understand, navigate, and interact.
To ensure consistency and best practice, Web Content Accessibility Guidelines (WCAG) were developed and are now universally recognised as the core rating criteria for website accessibility. International community organisation World Wide Web Consortium (W3C) lead the way in driving accessibility online and potential for web use.
Below are the seven core areas recognised and assessed to rate the accessibility of websites setting out clear rating criteria.
Use of Colours
When designing your website, colour plays a crucial role in creating your desired look and feel – but it can be critical to the user experience for visitors with a vision impairment or similar disability.
Low contrast designs such as light grey text on a white background could appear stylish from a creative artwork approach but will be almost if not completely illegible to someone with a vision impairment. High contrast designs can resolve the issue however this will render the design less accessible with other visually impacted learning difficulties such as dyslexia. Too high a contrast could result in text appearing to blur therefore again hindering the user experience and website performance.
High contrast modes are increasingly built into Windows and Mac operating systems integrating accessibility with most devices which can offer a solution, but this function is also not widely known and damage the overall user experience.
Text size can also be a factor in measuring visibility in terms of ratios between text and background. These are split into three categories – Normal, Large and Enhanced Contrast.
Normal Text: Contrast ratio of 4.5:1 between text and background. This is internationally recognised as AA rating by WCAG.
Large Text: Contrast ratio of 3:1 between text and background. Large text refers to font size 18pt or 24px approximately or greater. Bold text is recognised as large from 14pt or 18.5px approximately.
Enhanced Contrast: Contrast ratio of 7:1 for normal text or 4.1:1 for large text is considered enhanced and AAA rating by WCAG. Black on white has the highest contrast ratio possible at 21:1.
Accessibility tools can support website accessibility enabling the user to choose a background colour and text size selector using these ratios but may result in some visual design limitations and require additional investment at the development stage or ongoing accessibility maintenance.
Making considerations at the initial website design stage not only enables a more inclusive website, can ensure a more efficient development process and overall will ensure a better universal user experience in the longer term.
Use of Fonts
Like colour use, the choice of font for your website can also impact accessibility. The use of fonts and their visibility can be similar in approach to reading someone handwriting. Spacing, clarity of each letter and even how they link to create words can result a piece of writing to be legible or not.
Consider the joke about someone’s handwriting being suited to a doctor as so difficult to decipher – the same can apply by the choice of font on a website for some conditions.
The following are recognised as the best fonts for accessibility:
- Tahoma
- Calibri
- Helvetica
- Arial
- Verdana
- Times New Roman
These are the most universally available fonts but also have one fundamental feature – they are all (except Times New Roman) Sans-Serif fonts. San’s Serif refers to not having extended stroke features but rather clearly defined edges on each letter.
Keyboard Accessibility
Not all users are able to use a mouse therefore keyboard accessibility is essential. To be recognised as a keyboard accessible website functionality will not only allow users to have access to information using a keyboard, but also incorporate appropriate tab order, a visible keyboard focus and avoid keyboard traps.
Appropriate tab order refers to the default keyboard navigation in a logical and intuitive way. This is recognised as left to right, top to bottom – header, main navigation, page navigation (if appropriate) and footer.
A visible keyboard focus ensures it is easier for users to know which interactive elements has a keyboard focus and consistent experience between browsers and operating systems.
Keyboard traps refer to access or navigation of website components which only offer single direction. This is where a user can get into a component or element of a web page using a keyboard but cannot move away from that component or element using a keyboard.
Screen Reader Compatibility
A screen reader is a piece of software that converts digital text into audible and/or tactile form. Most commonly screen readers are used by blind, significantly visually impaired or those with cognitive limitations to interact with devices in a non-visual manner.
Screen readers function through translating the HTML files on the page file. Implementing as the criteria at the beginning stages of website development can not only ensure accessibility is implemented early on but enable a stronger performance longer term.
Alt text application against images and similar media files are also essential as these too can be interpreted by a screen reader. Use of alt text as well as ensuring all content is inclusive on your website, it can aid SEO performance too.
Website Navigation
Incorporating functionality from other elements of accessibility covered above, website navigation utilises the components collectively to support navigation reflecting that of the screen reader operation and tab order. This is based on the left to right, top to bottom – header, main navigation, page navigation (if appropriate) and footer.
Additionally ensuring all menus have accessible functionality particularly with keyboard controls is another measure of website navigation accessibility. Navigation tools that are accessible and labelled both visually and using alt text type implementation across all devices is crucial for your website effectiveness.
Content Structure and Semantics
Semantic accessibility is considered the foundation of web accessibility. With clear structured semantic HTML and/or Document Object Model (DOM), use of recognised tools including screen readers can be most effective.
Structured HTML is best implemented during the development stage of any website. This is due to enabling a clear structure as the website is created following the design stage while supporting a consistent approach as each area of the website is built. Creating a accessibility based structure on an existing website is possible, but will likely require considerable development time to implement and depending on the original website structure can result in almost impassable barriers for the sought after AAA rating.
Images & Media
Accessibility for images and other media on your website and now integrated in most mainstream social platforms, is primarily through alt text. Alt text is the addition at a code level providing details of what the image or other media item displays to offer a concise description for the user. This text is then interpreted by a screen reader to enable the user to perceive and understand what is being portrayed. Such labels are also useful to aid navigation such as button image alt text.
Use of alt text is also recognised as a beneficial tool for Search Engine Optimisation. With considered implementation, it would offer greater performance opportunities in the longer term but should be prioritised for the user experience.
Want to explore the opportunities of website accessibility further or looking to ensure accessibility is part of your new website development, our team are here to help.
Get in touch to discuss your needs and plan your next project.