Tag

web development

Browsing

Accessibility is becoming increasingly relevant, as we continue to strive for equality both on- and offline. What is Web accessibility, and how does it work? What do you need to know if you are looking to update your website, or create a new one? We’ll answer all of these questions and more in this beginner’s guide. 

What Is Web Accessibility? 

The Web eliminates physical barriers to communication and interaction, and it largely does this very successfully. However, many websites, applications, technologies, and tools are still poorly designed, creating barriers where they should be absent, and excluding many people from being able to use them. 

Web accessibility refers to the design of online products, services, and environments to be usable by as many people as possible, including people with disabilities. In web design, accessibility should be a priority, as it means making sure it can be used by as many people as possible, including people with a diverse range of hearing, movement, sight, cognitive ability, as well as situational barriers like a mobile device or a slow internet connection. Overall, it makes the web easier, clearer, and safer to use for everyone.

person using a braille keyboard
A person using a braille keyboard

There is no doubt that accessibility is universally beneficial, but why is it so important? What can be done to design accessible websites, and what are some of their features? And where should you begin if you want to make your website more accessible? We will answer all of these questions about web accessibility in this complete guide for beginners. 

Why Do Websites Need to Be Accessible?

There are many reasons why it is important to make the Web accessible, including ethics, legal requirements, and the positive impact of accessibility on user experience (UX). 

The ethical grounds for accessibility are  internationally recognised through a UN convention. The United Kingdom agreed to follow the United Nations Convention on the Rights of Persons with Disabilities, or the UN CRPD, in 2009, and much has been done to uphold it over the years. The CRPD is a detailed document which lists all the responsibilities of the government to ensure equality and non-discrimination for people with disabilities. 

United Nations CRPD logo
UN and CRPD logos, via Autism Europe

Article 9 of the UN CRPD covers accessibility, and outlines State Parties’ responsibility “to ensure to persons with disabilities access, on an equal basis with others, to the physical environment, to transportation, to information and communications, including information and communications technologies and systems”. 

To further this aim online, and to build on the Equality Act 2010 (which states that all UK service providers must make ‘reasonable adjustments’ for disabled people), the Government passed regulations for public sector websites and apps which came into force in September 2018. 

Public sector websites are required by the regulations to be “perceivable, operable, understandable, and robust”. They should adhere to the international WCAG 2.1 AA accessibility standard, and publish statements explaining to what extent their online services are accessible (although there are exceptions made for organisations who would face a disproportionate burden in doing so). This applies to public sector bodies including central government and local authorities, as well as some charities and other NGOs. 

WCAG 2.1 AA Compliance badge
WCAG 2.1 AA compliance badge, via EqualWeb

While the 2018 web accessibility regulations do not apply to all organisations, they set a good universal standard for all Web and app developers to aim for. After all, at least 1 in 5 people in the UK have a long-term illness, impairment, or disability, and many more have temporary disabilities. Accessibility means making your content and design clear and simple enough so that most people can use it without needing to adapt it, while also supporting those who do need adaptations. 

What Does an Accessible Website Look Like? 

We’ve already mentioned that there are internationally recognised standards for web accessibility, called the Web Content Accessibility Guidelines (WCAG) 2.1. These outline in detail which features are needed to meet the four key principles of accessibility – namely, for online content to be perceivable, operable, understandable, and robust. 

Without going into too much technical detail, we would like to give you a better idea of what exactly makes a website accessible. Let’s look at some examples of key elements that an accessible website should have. (Of course, keep in mind that websites can be accessible to varying degrees.) 

Text Alternatives

Providing text alternatives (or alt-text) for any non-text content, such as images, graphic design, interactive elements, etc, allows it to be adapted into other forms, such as large print, braille, speech, symbols, or simpler language. 

alt text input on windows
Example of Alt Text input for an image element, via W3

This way, people who cannot perceive visual or auditory media still have access to the information it conveys. Conversely, it is also important to ensure that decorative elements and those used for visual formatting can be ignored by assistive technology so they do not interfere with use of the site.  

Adaptable 

Making content adaptable means offering the possibility for it to be displayed in an alternative way (simple view, large text, braille, high contrast, etc.) without losing information or structure. 

BBC Accessibility page screenshot
Screenshot of tools from the BBC Accessibility page, including text display tools

It is important that content can be adapted while still conveying the right information in the right order. To achieve this, programmers must make it possible for key features, correct sequence, orientations, input purpose, and so on to be programmatically determined so that it can be adapted using assistive technology.

Distinguishable

This characteristic refers to how easy it is to see and hear content, including separating the foreground and background and different elements of a page. We often use contrasting colours to distinguish these, but this is insufficient to make the content accessible for people with colour perception barriers, for example. This can be resolved with specialist visual coding, as well as certain basic presentation rules. 

The WCAG 2.1 distinguishability guidelines require that any automatically-played audio on a page can be paused or stopped, and that the volume can be controlled separately from the system level. It also sets minimum contrast ratios for text and images of text, except for logotypes and decorative text. Users should also be able to enlarge text up to 200% without the use of assistive technology. 

various labelled colour contrasts
Examples of contrast ratios, via BC Open Textbooks

By ensuring basic distinguishability in web design, including visual coding, high contrast visual elements, and the possibility of large text, online content becomes significantly more accessible to all, and especially to people with visual and auditory disabilities. 

Easy to Use

This principle refers to how easy it is to operate user interface components and navigation on a website or application. Basic accessibility should allow for a site to be navigated using a keyboard, including to move across and interact with various elements of the page. It should also provide options to adjust timing when necessary by either pausing or extending an automated sequence. For example, if there are slides that change automatically at a certain speed, a user should be able to slow them down to be able to read and use the content appropriately. 

Similarly, moving, blinking, and scrolling features which occur automatically should have the option to  be paused, stopped, or hidden. In addition, flashing elements must not exceed three flashes per second, as this is likely to interfere with users’ ability to use the page as they may have seizures or other unwanted physical reactions. 

An accessible site should be easy to navigate, and there are many tools and strategies for ensuring this. For example, Web pages should be titled to describe their topic or purpose, links should have a clear purpose which can be determined either from the text alone or in combination with its programmatically determined context, and headings and labels should be descriptive. Mechanisms can be included to allow users to bypass content that is repeated on multiple pages, and various pages on a website should be accessible in more than one way. 

Easy to Understand

Both the content and operation of a website should be easy to understand. Namely, the language of a page and its contents should be programmatically determinable. The user interface should be consistent, where navigational mechanisms appear in the same order in a set of pages, and components with the same functionality should be presented consistently.

Furthermore, input errors should be identified and described to the user in text, with suggestions for how to fix it where possible. Where input is required, the fields should be clearly labelled and instructions provided where necessary. 

input field design dos and don'ts
Best practice for accessible input field design, via Adam Silver on Twitter

In other words, how the website and its elements work should be easily understandable, instinctive to operate, and labelled and explained wherever necessary. 

Robust

Finally, for web content to be accessible, it needs to be ‘robust’, meaning it can be interpreted by a wide variety of user agents (devices and programs) including assistive technologies. To achieve this, websites can be programmed with annotations, where elements are made identifiable in their content, purpose, and presentation. Where elements are interactive, such as links, selection tools, etc, these should also be compatible with user agents including assistive technologies. 

Now that you have a better idea of what elements and characteristics are needed to make a website accessible, let’s talk about what you can do to find out how accessible a site is, and where to begin if you want to make improvements, or if you want to make sure that your digital agency is prioritising accessibility. 

Where to Begin

If you or your company already have a website, and you would like to determine the extent of its accessibility, you will need to perform a technical evaluation. While there are helpful checklists available, the check is best carried out by a technical specialist who can go through the process with you and answer any questions, as well as suggest improvements which they can implement. 

If your brand is only starting to build its online presence, or you are looking to refresh and update it, you have a great opportunity to prioritise accessibility from the start. In doing so, you will maximise the number of people who can comfortably visit and enjoy your website, and who will have a positive experience with your brand. You will also be ahead of your competitors ethically and even legally, as more universal web accessibility regulations will doubtless be implemented in the near future. 

For further information and advice about how Web accessibility is relevant to you or your organisation, how to improve your current digital services, or how to develop your online presence for optimal accessibility, please feel free to get in touch with our team of specialists at Koncept, and we will be happy to help!

With content management systems, you don’t need to be a coding expert to build or manage a website. What is a CMS, what can it do, and which is the best?

Welcome to the modern World Wide Web. It has been around for a long time, but it has never been bigger, faster, more commercial, or more functional than it is now. The sky is the limit when it comes to web design and development, and that is partly because of how advanced content management systems have become.

Content management software started to appear in the 90s, and has since become increasingly popular and open source. It is a tool that allows non-experts to do what used to require professional programming. CMSs are applications and programs used to create, edit, organise, and publish all sorts of content online. Whether you want to write a blog, set up an online store, or inform customers of your offline business, content management systems are your friend.

Let’s talk about how they work and what you can do with them, and five of the most popular CMSs available in 2018.

How Do Content Management Systems Work?

As the name suggests, a content management system allows you to manage content. But how does it work?

CMSs are mostly used to publish content online, though they can also be used by a single company via intranet or on a single computer. Using a CMS, you are in full control of the design, structure, and content on your web pages, often without needing a single line of code. This is thanks to a set of core features that they generally include. Primarily, they help you organise data for easy access, format and revise uploaded content, and use a variety of tools to create, design, and publish pages for public use.

Say for example, you want to publish a post on the blog section of your company’s website. Without a CMS, you would need to write a static HTML file and upload it to your site. Yep, that sounds a little complicated. However, with a CMS, all you need to do is write the blog post in a textbox that provides many of the same features as Microsoft Word, for example. It’s almost as simple as writing a status update on Facebook, where you can also attach images, choose backgrounds, and include links.

In addition to just text, you can publish and format endless images, graphics, and designs, thanks to all of the different open source plugins, wizards, and tools available. There are 56,224 plugins available for WordPress alone, so you can only imagine all the opportunities this creates for web designers.

The Top 5 Content Management Systems in 2018

We’ve covered what content management systems are and how they are useful for all types of web design. Now, let’s talk about the five most popular CMSs out there right now.

WordPress

Used by more than 60 million websites, WordPress is undoubtedly the most popular example of a content management system. More than one in four websites you visit are powered by WordPress. So why is it so popular?

Firstly, WordPress is entirely open source, which means that anyone can use or modify the software for free. This also means anyone can create plugins, themes, and other tools used within the frame of WordPress, and share these with others for free or commercially.

Thanks to the active community behind WordPress, it is ever-evolving. Most recently, WordPress is working on launching the so-called Gutenberg editor, which is intended to make format and design a challenge of the past. It gives users more control over the web pages they create, as well as more immediate insight into how what they are creating will look once it is published.

wordpress classic editor screenshot

A screenshot of the classic editor on the back end of WordPress.

Ultimately, WordPress makes building and designing complex websites accessible to anyone, even without prior programming knowledge. Back in the day, it used to be a popular blogging platform and little else, but times have changed. Now, you can create any type of website using WordPress, including online stores, portfolios, galleries, company information pages, forums, social networks, booking platforms, membership sites, and anything else you can think of.

All you need to do to start creating your own custom website on WordPress.org is purchase web hosting and a domain name.

Joomla

Similar to WordPress and its biggest competitor, Joomla is another free, open source CMS. It has been downloaded over 93 million times, and comes with over 8,000 free and paid extensions. The platform has received a number of awards and recognitions for its focus on usability and extensibility.

Like WordPress, Joomla is open source, and supported by a large and active developer community. Developers often choose it for its thousands of extensions and supportive community, which present endless possibilities for building any type of complex website.

joomla content editor
How Joomla looks on the back end.

Drupal

Another free and open source content management system, Drupal was developed in 2000. Its community includes over 1.3 million users. Like WordPress and Joomla, Drupal is highly customisable, with thousands of open-source features users can add to change its looks and functionality for a specific purpose.

Drupal proudly distinguishes itself as highly modular, meaning it allows users high flexibility in the tools they wish to use to build versatile dynamic websites.

drupal 8 editor screenshot

How posting on Drupal looks on the back end

However, despite its similarity to WordPress and Joomla, and its list of high-profile users,  Drupal has received some criticism from users. It is allegedly challenging to master for less experienced developers, and has some unreliable search features, including its database of modules.

Squarespace

Founded in 2003, Squarespace is a website building and hosting service with over 1 million users. It uses pre-built website templates and drag-and-drop elements (think PowerPoint) to create web pages. The CMS supports many kinds of sites, including portfolios, online stores, and so on.

Squarespace is a paid service, and gives you a 14-day free trial before you have to buy a membership. What does this membership get you? A domain, online marketing tools, and a range of beautiful, professionally-made, mobile-optimised design templates to choose from. It’s fairly easy to use, and doesn’t require any coding. However, users have said that all the customisation options can be overwhelming with too many options to choose from. Additionally, Squarespace is not backed by a huge community of developers, unlike open source CMSs.

squarespace post backend screenshot

How creating a blog looks on Squarespace

Ultimately, Squarespace is for users who want to create a highly attractive website without programming knowledge, and are willing to pay for it. The key idea is that anyone can use it. Compared to CMSs like WordPress, it provides fairly limited functionality in order to remain user-friendly.

Wix

Finally, Wix is a cloud-based web-development platform. Like Squarespace, it provides users with drag and drop tools to create desktop and mobile websites. It is free, but offers users a paid premium option to have their own domain, remove ads, add e-commerce features, or buy extra storage and bandwidth.

The site provides customisable templates, but also allows users to begin designing from scratch. It works with Wix App Market, where developers can share or sell web apps for users to incorporate into their sites.

wix cms editor screenshot

Wix backend

Common complaints about Wix include the ads in the free version, having to start from scratch when changing themes, and its inability to handle much higher-traffic sites. Like Squarespace, it is more popular among non-professional users who want something easy to create and maintain, but aren’t too fussed about unlimited functionality.

Conclusion

Whether you’re looking to build your own website or just wanted to know more about how it’s done, you should now have a pretty good idea of what the best options are for content management systems.

WordPress is by far the most-used, and as a result it has the largest community of users and developers. This also means that it has unlimited support for useful features that allow you to achieve any dynamic design you can dream of.

Its main competitors, Joomla and Drupal, offer many of the same open source features, and are used by many reputable companies, but simply aren’t as supported. Squarespace and Wix offer the simplicity of drag and drop features, and can produce beautiful layouts, but don’t have the same functionality as more customisable CMSs.