Inclusivity means including people, and accessibility means the methods used to enable more people to be included. They work together: a service is inclusive when it welcomes everyone, and accessible when the barriers that would stop some people using it have been removed.
Accessibility is often linked to supporting users with disabilities, because many barriers are easiest to see in that context. It is wider than that, though. Accessibility also covers other needs, such as being new to English or using a device with a slow connection, because anything that stops someone taking part is a barrier to inclusion.
Modern technologies aid inclusivity and accessibility in two main ways. First, interface design, which covers layout, font selection and colour selection. Second, accessibility features: built-in tools such as screen reader support, alt text, adjustable typeface and font size, and text to speech.
| Area | What it includes | Why it helps |
|---|---|---|
| Interface design | Layout, font selection and colour selection | Makes a service easier for everyone to read and use from the start |
| Accessibility features | Screen reader support, alt text, adjustable typeface and font size, text to speech | Removes a specific barrier so that more people can take part |
Inclusion is not only about disability. It also means making sure people are not held back because of characteristics such as age, cultural background, sexuality or gender. Employers should make opportunities fair, for example when they recruit staff, when they decide who is promoted, and when pay is reviewed, so that decisions are based on what people can do, not on who they are.
One common misunderstanding is that making text bigger on a website is an accessibility feature. It is not, because the browser handles text size. A website can instead offer built-in zoom or a reading mode that enlarges the whole page.
Layout is one of the three parts of interface design, alongside font selection and colour selection. It is the way the elements of a screen — headings, menus, buttons, icons and text — are arranged and spaced.
A consistent layout means the same elements sit in the same places on every page, so once you have learned one page you can use every other page. Keep the navigation in the same spot on each page and use icons that clearly show what they do, such as a magnifying glass for search. Group related items together under headings with spacing between the groups, so links about a club's fixtures sit in one block instead of being scattered across the screen.
Put important elements in the positions users already expect: a logo in the top-left, search in the top-right, the main menu across the top. Important content and buttons go in prominent positions, such as the top of the page or the centre, rather than being buried further down. Users then find things quickly instead of hunting around.
Whitespace is the empty space between elements. Using it well stops a screen looking overloaded and stops items overlapping or being crammed together, which makes the content much easier to read.
A clear, consistent layout helps more people use a system without asking for help. For example, on a school homework portal, a pupil who is not confident online can still find the same submit work button in the same place on every page. That is why good layout improves accessibility as well as usability — it removes barriers for users who are less confident online or who are viewing a small screen.
Layout faults are the problems you can see in how the elements of a digital interface are arranged on a screen. They make a system harder to use and give users a poor impression, so spotting them and saying exactly how to fix them matters.
Look for elements that are not lined up with each other (misalignment), gaps that are larger in some places than others (uneven spacing), and buttons or boxes that are different sizes when they should match (inconsistent sizes). An element that is not positioned correctly on the background, such as a text box that hangs over the edge of a coloured panel, is another fault. Using more than one font (mixed fonts) makes an interface look untidy. Words split with a hyphen across two lines slow readers down. Text that spills out of its shape (overflowing text) wastes space, and an element that is far too big for its purpose does the same. Both look unprofessional.
Your improvement must say exactly what to change and where. For example, on a school timetable app, "set the gap between the lesson time and room number to 8 pixels and align both to the left of the card" is specific. "Make the timetable look neater" is not, because it does not say which elements to move or how. Generic answers such as "change the font" do not get credit either: they do not identify which font is the problem or what is wrong with it. Always link your fix to the fault, so if the fault is uneven spacing, name the items that should be evenly spaced and by how much.
Changing colour is not a layout improvement; colour is a separate design consideration. Keep your layout suggestions about position, size, alignment and spacing.
Font selection is one of the three parts of interface design, alongside layout selection and colour selection. It means choosing the style, size and spacing of the text on a screen so that everything is easy to read.
A readable font has plain, simple letter shapes and even spacing between the letters. Decorative fonts (curly, handwritten or very thin styles) may look eye-catching on a poster, but on a screen they slow readers down and reduce accessibility.
For example, imagine a school library page that lists book titles in a curly script font. You have to study every word for a moment before you can work out what it says, so finding one title takes far longer than it should. The same list in a plain font can be scanned in seconds, and it is easier for a reader with a visual impairment or dyslexia as well.
A screen should use only a small number of fonts, usually one for headings and one for body text. Every extra font adds another style for your eye to adjust to, so the page looks busy and is harder to follow. Sticking to a couple of fonts makes a site look tidy and helps users recognise which text is a heading and which is ordinary content, even on a page they have not seen before.
Text needs to be large enough to read comfortably from the distance the user is actually sitting at, and the lines should not be squeezed so tightly together that the eye loses its place. Designers should also avoid hyphenating a word across two lines, because the reader has to rebuild the word in their head before they can recognise it.
The right size depends on where the text is used. A departure board in a station entrance is read from several metres away, so it needs much larger letters than a short label next to a form field that the user is reading up close. On a website, the user's browser or device settings change the font size, so this is not something an accessibility feature has to do; zoom and magnification are.
Colour selection is one of the three parts of interface design, alongside layout and font selection. It means deciding which colours appear on a screen and what job each one does.
The content is the text, icons and images; the background is what sits behind them. There needs to be a strong difference in lightness between the two so that everything on top stands out clearly. Dark navy text on a pale grey panel is easy to read, while pale yellow text on a white panel is almost invisible.
Compare how light the two colours actually are, not their names. Two different colours can still be a poor pair if they are a similar brightness. Good contrast helps users with visual needs see text, icons and images clearly, and it helps everyone when a screen is being used in bright sunlight or on a small phone.
For example, a school lunch menu app might show each dish name in black on a white card. If a designer changed those names to light green on the white card, the contrast would drop and students would struggle to check what was being served that day.
A colour palette is the set of colours used across an interface. Keep it small — often one background colour, one colour for text and one accent colour for buttons. Using ten different colours makes a screen look busy, and users find it harder to tell what is clickable or important. A small palette also keeps things consistent, because the same colour then means the same thing on every page.
Colour is a design consideration in its own right, so swapping a colour is not a layout improvement.
Screen readers and text to speech are accessibility features that turn content on screen into speech. They help people who cannot see the screen, or who find reading difficult.
A screen reader is software that reads out the content of a page or application. It works with the operating system and the browser to turn text into speech. For example, if you open a school homework page, a screen reader might say 'Homework: Maths, due Friday'.
Text to speech converts written text into spoken words. Many devices have a built-in text-to-speech tool. For instance, you could highlight a paragraph in a digital textbook and tap 'Speak' to hear it.
Some websites have a 'listen to this page' button. This is a type of text to speech: it reads the whole page aloud, so you can listen instead of reading.
Alt text (alternative text) describes an image for users who cannot see it, and a screen reader reads it aloud. If a web page shows a photo of a volcano erupting, the alt text might be 'A volcano erupting with ash and lava'. Without alt text, a screen reader might just say 'image', telling you nothing about what is there.
Specialist software like screen readers and text to speech has helped include people with limitations or disabilities. For example, a student with dyslexia can use text to speech to hear their work read back, which helps them check for mistakes.
There is also speech-to-text software, where you speak and the program types what you say. This helps people who cannot use a keyboard. Together, these technologies give more people access to digital information and services.
Zoom (also called magnification) makes everything on a screen bigger. It is a recognised accessibility feature for a website because it helps users who need larger content to read and view it.
When you explain zoom as an accessibility feature, you must say that it enlarges both text and images. Simply stating that the content becomes easier to see is not enough. For example, on a school cooking club website, you press Ctrl and + to zoom in. The recipe instructions grow larger, and so does the photo of the finished cake. Both parts of the page are magnified.
Increasing or changing the font size is not an accessibility feature for a website, because the browser already lets each user choose their own text size, so the website itself is not providing the accessibility. For a website, use zoom or magnification instead.
On a device or in an operating system, adjustable typeface and font size are accessibility features. For example, a games console's settings let a player switch to a bold typeface and make the menu text larger. Modifications for visual needs include making sure text on screen can be made large enough to read comfortably.
Different users need a system to work in different ways, so you modify it to match their needs. These modifications are grouped by the type of need: visual, hearing, speech, motor and cognitive.
| Type of need | Modifications to make |
|---|---|
| Visual | For a pupil using a revision app, choose a theme with strong contrast so the words stand out against the background. Add a button that reads the text aloud. Let the user zoom so that both text and images are enlarged. |
| Hearing | For a student watching a science video, add subtitles. Provide a written transcript too, so that no information is audio-only. |
| Speech | For a voice-controlled quiz, let the user type answers on a keyboard instead of speaking. Let them try a command again if it is not recognised. |
| Motor | For a music-making app, make buttons large and easy to tap. Allow voice control, including voice data entry where the user dictates words into a search box. Allow keyboard shortcuts for common actions. |
| Cognitive | For an online homework planner, include a spell checker. Add a read-aloud option. Keep the layout the same on every screen. Use simple words and short sentences. |
Keyboard accessibility lets a user who cannot operate a mouse move around the system using keys alone. For example, in a school library search kiosk, a pupil with a motor need could press Tab to move between the search box and the buttons, then press Enter to run the search. Building a system this way means the user completes the same task as everyone else.
Language options and clear instructions are accessibility features that make digital content easier to use. Language options let a user read content in a language they understand, while clear instructions use simple, everyday words so that a user can follow what to do.
Many websites and apps include a language selector, often a drop-down menu listing the languages on offer. When you choose your language, the text on the page changes to that language, so you can read it without translating it yourself. This helps users whose first language is not English, and also users who find reading English difficult for other reasons. For example, a swimming pool website could offer its timetable in English, Polish and Somali, so a family can check lesson times in a language they read confidently.
Clear instructions help users complete forms and use a service by keeping sentences short and words simple. They avoid jargon (specialist or technical terms) and complicated phrasing. A form might say 'Type your email address' instead of 'Provide your electronic mail credentials'. This helps users with cognitive needs, such as learning difficulties, who may lose track of long or complex text, and it reduces mistakes because users know exactly what to do.
These features widen who can use a service. Language options remove the barrier of text a user cannot read, and clear instructions remove the barrier of wording that is hard to follow, so users with different first languages and users with cognitive needs can complete the same task.
Workplace inclusivity means making the physical workspace of a company or building usable and welcoming for everyone. It focuses on the company's own site and the equipment in it, so in some contexts working from home is not part of it.
Assistive or adaptive technologies are devices or software that help a particular member of staff do their job. Workspace adaptations change the physical workspace, including the building and furniture, so more people can use it. Both cost money, so employers should decide what to buy or build based on real needs rather than personal choice.
| Type | What it does | Example | Implications |
|---|---|---|---|
| Assistive/adaptive technology | Helps one person use equipment or complete a task | A hearing loop in a meeting room | Costs money, so buy based on needs, not personal preference |
| Workspace adaptation | Changes the physical workspace so more people can get in and move around | A ramp at the entrance, a lift between floors | Can be expensive and disrupt work while it is carried out |
For example, a ramp at the entrance lets a staff member who uses a wheelchair start work without needing help. A specialist keyboard may cost far more than a standard one, so guessing at what someone needs wastes money and still leaves them struggling.
A diverse workspace employs staff from different ethnic backgrounds, LGBT+ people, and people of different ages, religions and genders. This mix brings a wider range of experience and ideas, and it helps everyone feel that they belong.
Employers should also involve staff in decisions about the workspace. Staff know their own needs best, so asking which entrance is easiest to use, or which furniture would help, means money goes on changes that actually work.
Treating staff with respect and equally means everyone gets the same opportunities, whoever they are. For instance, training should be open to part-time as well as full-time staff, and celebrations from different religions should be treated as equally important.
Flexible working hours are another way to make a workplace inclusive.
Flexible working means giving staff more control over when and where they work. Instead of a fixed day in the office, staff can adjust their hours or location to fit around the other parts of their life.
| Form | What it means | Who it helps |
|---|---|---|
| Flexible working hours | Staff choose when to start and finish, as long as they complete their agreed total. | Staff who study part-time at college, or who need to attend regular hospital appointments. |
| Remote working | Working from home or another location. It depends on modern technologies such as cloud storage, video conferencing and live chat. | Staff who live far from the office and have few bus or train services, or who find crowded rush-hour travel difficult. |
| Job share | Two people share one full-time role, each working part of the week. | Staff who want to work only three days a week, such as those preparing to retire. |
For staff with caring commitments, such as looking after a relative, flexible hours, remote working and job share mean work can fit around those responsibilities. For staff with health needs, the same three options help: flexible hours avoid a tiring commute at peak times, remote working removes the journey altogether, and job share cuts down the hours without giving up the role. More people can therefore do the job, which makes the workplace more inclusive.
Sometimes workplace inclusivity means the physical workspace itself, such as the building and what is inside it. Remote working is not part of that, because it changes where staff work rather than the workspace they use.