Accessible building blocks for the web videos

[Four circles - one orange, one pink, one purple, and one red - and 4 purple lines fly into screen then join together to form the TetraLogical logo]

TetraLogical

[The TetraLogical logo whooshes off screen]

[A dark purple background appears with the title "Accessible building blocks for web: headings" written in large yellow font]

Accessible building blocks for web: headings

Headings give content structure and help people find information. When used effectively, they can aid navigation and improve readability. This benefits everyone, but especially people with seeing and thinking disabilities

[A page from the TetraLogical website containing three section headings appears. A border slowly appears around each heading, to highlight each]

So, how do you create headings that are easy for everybody to perceive and understand?

[A photograph of a young lady with Down syndrome wearing headphones and working at a laptop is displayed]

Clear language, a well-designed visual hierarchy, and a proper HTML structure, are all key to accessible headings.

[A white slide with the title "Accessible headings" is displayed. Three list items slowly appear on screen: "Clear language", "Well-designed visual hierarchy", and "Proper HTML structure"]

[The white slide is replaced by a light purple one with large, yellow text "Language"]

Language

Headings should clearly describe the content they introduce. Avoid vague terms like "More information" and use simple, familiar words.

[A web page containing three headings appear. The last heading is "More information"; an X is displayed on top of it]

Start with the most important words first, and keep headings brief. For example, "Writing accessible headings" is clearer and easier to scan than "Following best practices when writing accessible headings."

[A drawing of a page containing the heading "Following best practices when writing accessible headings" and a section of content below it appears. Slowly, the text "Following best practices when" fades out, leaving "Writing accessible headings" as the section heading]

[The image is replaced by a red slide containing large, white text "Visual design"]

Visual design

When people land on a page, they often skim headings to decide what's worth reading. To make this easier, ensure headings stand out from other text, and that the heading hierarchy is easily recognisable. For example, on this page all headings are in dark purple, and different font sizes identify different heading levels.

[A page from the TetraLogical website is scrolled to reveal several sections of content, each preceded by a heading. Headings are large, bold, and in dark purple. Headings at different levels of the heading hierarchy have different text sizes - from larger to smaller]

[The web page is replaced by an orange slide containing large, white text "Implementation"]

Implementation

For people using screen readers, headings need to be coded properly using the HTML heading elements <h1> to <h6> in a correct order and without skipping heading levels.

[A white slide is displayed. Slowly, a list of six heading elements (from <h1> to <h6>) appear]

In this example, <h1> is used for the page main heading "Our team", <h2> for the first section heading "Directors", and <h3> for the first subsection heading "Léonie Watson".

[A page from the TetraLogical website is displayed. It contains the main page heading "Our team" and a first section of content, followed by the sub-heading "Directors", then the sub-heading "Léonie Watson" followed by Léonie's photo and some text. Slowly, <h1> appears next to "Our team", <h2> next to "Directors", and <h3> next to "Léonie Watson"]

HTML heading elements shouldn't be used for content other than headings.

[On the same page, <h4> appears next to the first paragraph of content after the heading "Léonie Watson" and an X is displayed on top of it]

In summary, headings that are clear, carefully designed, and properly structured, make content easier to read and understand.

[The web page is replaced by a white slide with the title "Summary" and three list items: "Clear language", "Well-designed visual hierarchy", and "Proper HTML structure"]

To learn more, visit tetralogical.com.

[The screen fades to white and the TetraLogical logo appears again, followed by the text "Find out more about accessibility at tetralogical.com]

[Four circles - one orange, one pink, one purple, and one red - and 4 purple lines fly into screen then join together to form the TetraLogical logo]

TetraLogical

[The TetraLogical logo whooshes off screen]

[A dark purple background appears with the title "Accessible building blocks for web: images" written in large yellow font]

Accessible building blocks for web: images

Images are often used to convey information or evoke emotions. Many people, including those with thinking disabilities or whose first language is different from the written text, find images easier to understand than text. For others, including people who are blind and use a screen reader, images can pose issues.

[A page from the TetraLogical website is scrolled to reveal various images in between blocks of text]

So, how do you ensure your images are accessible to all?

[A photograph of a blind man, wearing sunglasses and sitting in front of a desktop machine]

Clear and accurate text descriptions, high-quality images, and a well-planned content order, all contribute to accessible images.

[A white slide with the title "Accessible images" is displayed. Three list items slowly appear on screen: "Accurate text descriptions", "High-quality images", and "Well-planned content order"]

[The white slide is replaced by a light purple one with large, yellow text "Language"]

Language

Text descriptions make images accessible to people unable to see or understand them. On the TetraLogical Blog page, the avatars of the post authors have their names as text descriptions.

[The "Our Blog" page from the TetraLogical website appears. Two blog posts are visible, and the headshots of the authors are to their left. The headshots slowly disappear to display their text descriptions: "Ela Gorla's avatar" and "Henny Swan's avatar"]

When writing text descriptions, focus on the purpose of the image and what it communicates in that specific context.

In the TetraLogical footer, a location icon indicates that the adjacent text is the company’s physical address.

[The TetraLogical footer is displayed; it contains a physical address, a telephone number, and an email address. An icon is displayed before each piece of information. A border slowly appears around the location icon in front of the physical address, to highlight it]

"A purple pin icon" would describe this image but wouldn't convey the same message; "Address" is a more accurate text description.

[The text "A purple pin icon" appears above the location pin. Soon after, an "X" is displayed on top of it and the text "Address" replaces it]

Keep text descriptions brief and always use simple language. "Address" is a simple term that most people will understand.

[The web page is replaced by a red slide containing large, white text "Visual design"]

Visual design

High quality images are easier to perceive for everybody and especially for people with low vision who enlarge them. In this example, the TetraLogical logo remains clear when zoomed in to 500%.

[The TetraLogical logo on the TetraLogical homepage. The browser menu is visible on screen. The + button next to "Zoom" on the menu is selected various times to reach 500% zoom level. The TetraLogical logo enlarges accordingly and it remains crisp at all zoom levels]

Vector graphics, such as Scalable Vector Graphics (or SVG), are a good choice as they don't lose quality when enlarged.

[The web page is replaced by an empty slide. The SVG logo and text "Scalable Vector Graphics" slowly appear]

Strong colour contrast is another important aspect of images, as it makes them easier to see in all situations, including when outside on a mobile phone.

[A photograph of a lady in a park, wearing sporty clothes and looking at her mobile screen in bright sunshine]

[The photograph is replaced by an orange slide containing large, white text "Implementation"]

Implementation

When coding images, remember to include the text description in their code. A common way to do this is to use the alt attribute in HTML. In this example, the alt attribute is added to the HTML code of an avatar and is given the value "Photograph of Ian, with a beard and long wavy hair down to his shoulders, face on to the camera".

[A block of content from the TetraLogical website comprising a headshot of a man, the heading "Meet Ian Pouncey", and a brief paragraph of text. An <img> element containing a src attribute and its value is displayed next to this content. An alt attribute is then added to the <img> element and is given the value "Photograph of Ian, with a beard and long wavy hair down to his shoulders, face on to the camera"]

Also, carefully consider where in the content order to place images. Images and any related information, such as related paragraphs of text or headings, should be presented in a logical order at code level.

On this page, while Ian's avatar visually precedes the "Meet Ian Pouncey" heading and related paragraph of text, it comes after them in the code. This ensures that assistive technologies such as screen readers announce the heading and paragraph of text first, providing the necessary context for the image.

[Two arrows appear on screen to highlight the heading and paragraph of text below Ian's headshot. Soon after, an <h3> element containing the heading and a <p> element containing the paragraph of text are displayed above the <img> element used to code Ian's headshot]

In summary, clear and accurate text descriptions, high-quality images, and a carefully planned content order make images accessible to everyone.

[The web page is replaced by a white slide with the title "Summary" and three list items: "Accurate text descriptions", "High-quality images", and "Well-planned content order"]

To learn more, visit tetralogical.com.

[The screen fades to white and the TetraLogical logo appears again, followed by the text "Find out more about accessibility at tetralogical.com]

[Four circles - one orange, one pink, one purple, and one red - and 4 purple lines fly into screen then join together to form the TetraLogical logo]

TetraLogical

[The TetraLogical logo whooshes off screen]

[A dark purple background appears with the title "Accessible building blocks for web: links" written in large yellow font]

Accessible building blocks for web: links

Links are an essential part of any website. They connect information, guide people through content, and make digital journeys possible.

[A page from the TetraLogical website is scrolled to reveal various links within blocks of text]

So, what makes links easy for everybody to perceive, understand, and operate?

[A photograph of a woman with a prosthetic arm using a laptop is displayed]

Accurate text, a clear visual appearance, and proper coding, are all key to accessible links.

[A white slide with the title "Accessible links" is displayed. Three list items slowly appear on screen: "Accurate text", "Clear visual appearance", and "Proper coding"]

[The white slide is replaced by a light purple one with large, yellow text "Language"]

Language

People should be able to understand where a link will take them simply by reading its text. So links must be clear, accurate, and descriptive.

The "Our vision" section on the TetraLogical homepage includes a link to the "About TetraLogical" page. The link text "Learn more about us" clearly and accurately describes its destination content.

[A section of content with the heading "Our vision" is displayed. A link "Learn more about us" is at the end of the section. As the voiceover mentions it, the link is zoomed in and out, to attract attention]

"Learn more" on its own would not be accurate enough.

[The link "Learn more about us" is replaced by the link "Learn more". An "X" icon is displayed on top of it]

Avoid using URLs as link text as they are more difficult to read and process for everybody, and may not make sense when read aloud by screen readers.

[The link "Learn more" is replaced by the link "Learn more about us: https://tetralogical.com/about/". An "X" icon is displayed on top of it]

[The web page is replaced by a red slide containing large, white text "Visual design"]

Visual design

Links should be easy to recognise for all sighted people, including people with low vision or colour blindness.

Usually, links are in a different colour from adjacent text.

[A section of content on a dark purple background is displayed. It contains a white heading "Our team", a line of white text, 16 small avatars one next to the other, another line of white text, and a yellow link "Meet the team" below it. Two arrows appear: one points to the yellow link, the other to the white text above it]

When choosing the colour of your links, ensure it has a good contrast with the background colours so it's easy to identify.

For example, the yellow "Meet the team" link on this page has a strong contrast with the purple background.

[The "Meet the team" link is zoomed in and out to attract attention]

A minimum contrast ratio of 4.5:1 is recommended.

[The text "4.5:1" is displayed on screen]

Also, include another visual cue to help identify your links, such as underlining them. This ensures they’re clear to people who can’t see colour differences.

Both an underline and an arrow icon in front of the text "Meet the team" identify it as a link.

[Two arrows appear: one points to the underline under the link "Meet the team", the other to the arrow icon in front of it]

Finally, make link target areas as large as possible so they’re easier to select for people with limited dexterity.

[A border appears around the "Meet the team" link to show its target area]

For links that are not inline, a minimum target area of 44 x 44 pixels is recommended.

[The text "44 by 44 pixels" is displayed on screen]

[The web page is replaced by an orange slide containing large, white text "Implementation"]

Implementation

When coding links, consider how you can best support keyboard and other assistive technologies.

The easiest and most reliable way to code accessible links is to use an <a> element with an href attribute.

[A section of content with the heading "About TetraLogical" is displayed. Three links - "Our team", "Our impact", and "Our UX Network" - are at the end of the content. The line of code <a href="/about/team/">Our team</a> appears next to the "Our team" link]

This ensures links can be reached and activated with a keyboard or voice commands, and are announced as "link" by screen readers.

[As the voiceover says "are announced as 'link' by screen readers", the text "link" appears on screen]

In summary, accurate and descriptive links that are easy to recognise and coded with care help everyone navigate with confidence.

[The web page is replaced by a white slide with the title "Summary" and three list items: "Accurate text", "Clear visual appearance", and "Proper coding"]

To learn more, visit tetralogical.com.

[The screen fades to white and the TetraLogical logo appears again, followed by the text "Find out more about accessibility at tetralogical.com]

[Four circles - one orange, one pink, one purple, and one red - and 4 purple lines fly into screen then join together to form the TetraLogical logo]

TetraLogical

[The TetraLogical logo whooshes off screen]

[A dark purple background appears with the title "Accessible building blocks for web: buttons" written in large yellow font]

Buttons on websites enable people to take action, from adding items to a shopping cart, to updating content, or submitting a form.

[Three sections of content from different websites appear on screen, one after the other. Each contains a button: an "Add" button at the end of a product tile, a "Show 61 products" button at the end of a filtering panel, and a "Subscribe" button at the end of a form]

It’s important that buttons on your website work for everyone. This includes people who use a keyboard, voice input or screen reader, people who rely on good colour contrast to read text, and people with limited dexterity

So, how do you make buttons accessible to all?

[A photograph of two men talking while sitting at a table in front of a laptop. One man is blind, one man has short arms]

Descriptive labels, a distinctive visual presentation, and mindful coding, are all key to accessible buttons.

[A white slide with the title "Accessible buttons" is displayed. Three list items slowly appear on screen: "Descriptive labels", "Distinctive visual presentation", and "Mindful coding"]

[The white slide is replaced by a light purple one with large, yellow text "Language"]

Language

Start by writing labels that clearly and accurately describe what your buttons do.

In this form on the TetraLogical website, the submit button is labelled "Subscribe" to make it clear that submitting the form subscribes the person.

[A section of content titled "Subscribe to Accessibility Unlocked" and containing a form is displayed. The submit button at the end of the form has the visible label "Subscribe". When mentioned, the button is zoomed in and out to attract attention]

Labels such as "Submit" or "Send" would not be as clear.

[Two buttons, one labelled "Submit" and another labelled "Send" appear next to the "Subscribe" button. An "X" icon is displayed on top of each]

Icons can also be used on buttons and may help some people understand their functionality. For example, a down arrow icon pointing towards a flat line is commonly used for buttons that let people download files.

[The web page is replaced by an empty slide. A download icon slowly appears]

When using icons, always also include a visible text label. Without one, people using voice commands such as "Click + [label]" may struggle to activate buttons because there’s no clear label to reference.

[The text "Click + [label]" is displayed next to the icon, and "[label]" is zoomed in and out as the voiceover says "because there’s no clear label to reference"]

Icons may also be difficult for some people with seeing or thinking disabilities to see and understand.

Both an icon and the text "Download" are on a download button on YouTube, for example.

[A page from YouTube is displayed. A border appears around the Download button below the video player. The button label is made up of a download icon and the text "Download"]

[The web page is replaced by a red slide containing large, white text "Visual design"]

Visual design

Buttons offer a very different functionality from other interactive components such as links, and should have a different visual treatment.

Give all buttons on your website a distinctive look, so people can easily identify them as a button and not a link.

On the TetraLogical website, buttons have a dark purple label and a yellow background while links are underlined and have no solid background.

[Two sections of content from the TetraLogical website are displayed. The first section contains a "Subscribe" button, the second section contains an "Accessibility Unlocked" link. The button has a dark purple label and a yellow background; the link is purple and has an underline. When mentioned, the button and link are zoomed in and out to attract attention]

To ensure sighted people can read labels with ease, give them a colour that has a good contrast with the background colours; at least 4.5:1.

[Two arrows appear; one points to the button label, the other to the button solid background. At the same time, the text "Good colour contrast" and "4.5:1" is displayed]

To make it easier for people with limited dexterity to select your buttons, design a large target area. As a minimum, a target area of 44 by 44 pixels is recommended.

[A border appears around the button to show the target area. At the same time, the text "Large target area" and "44 by 44 pixels" is displayed]

[The web page is replaced by an orange slide containing large, white text "Implementation"]

Implementation

People must be able to reach and select buttons on a website using a mouse, a keyboard, voice commands, a screen reader, or any other assistive technology or input device.

If you code your buttons with the HTML <button> element, you can be sure they will be accessible to all.

[The same form containing the "Subscribe" button is on screen. The piece of code <button type="submit">Subscribe</button> is displayed next to it]

If you decide to create custom buttons instead, ensure they're keyboard accessible and are announced as "button" by screen readers.

[The piece of code disappears and, as the voiceover says "are announced as 'button' by screen readers", is replaced by the text "button"]

You can use the tabindex attribute together with some JavaScript to implement keyboard support; and the role attribute with a value of button to convey role information to screen readers.

[The text tabindex="0" and role="button" is displayed]

In summary, buttons with a descriptive text label, a distinctive visual appearance, and the correct semantics, are better for everyone.

[The web page is replaced by a white slide with the title "Summary" and three list items: "Descriptive labels", "Distinctive visual presentation", and "Mindful coding"]

To learn more, visit tetralogical.com.

[The screen fades to white and the TetraLogical logo appears again, followed by the text "Find out more about accessibility at tetralogical.com]

[Four circles - one orange, one pink, one purple, and one red - and 4 purple lines fly into screen then join together to form the TetraLogical logo]

TetraLogical

[The TetraLogical logo whooshes off screen]

[A dark purple background appears with the title "Accessible building blocks for web: form fields" written in large yellow font]

Accessible building blocks for web: form fields

Form fields are a vital component of many websites. They allow people to enter information and complete key tasks.

[A video of a form being filled in plays on screen]

However, if not designed and coded with accessibility in mind, they can pose serious barriers to many people including people with cognitive disabilities and people using screen readers. So, what makes form fields easy to understand and fill in for everyone?

[A photograph of a young man with Down syndrome sitting in front of a laptop, wearing headphones]

Clear labels and error messages, well-planned label positioning, good use of colour, and properly associated HTML elements, are all key to accessible form fields.

[A white slide with the title "Accessible form fields" is displayed. Four list items slowly appear on screen: "Clear labels and error messages", "Well-planned label positioning", "Good use of colour", and "Properly associated HTML elements"]

[The white slide is replaced by a light purple one with large, yellow text "Language"]

Language

Help people enter the correct information in form fields by writing clear and descriptive form labels, such as "Full name (including middle name)" for a field requiring a person's full legal name.

[A form is displayed. One of the input fields in the form is preceded by the text label "Full name (including middle name)". An arrow appears on screen, pointing to the label]

Clearly identify required fields. For example, on this form the text "required" is at the end of the labels for the two input fields, as both fields must be filled in.

[A form titled "Subscribe" and containing two input fields appears. The fields are preceded by the labels: "Name (required)" and "Email address (required)". A border appears around the "required" text in both labels, to highlight it]

For less familiar or complex forms, it may be useful to provide additional instructions. For instance, not all people may know where to find their National Insurance Number. As shown here, the instruction "It’s on your National Insurance card, benefit letter, payslip or P60" followed by example data may prove useful to many.

[A form titled "Personal details" is displayed. One of the fields in the form is preceded by the label "National Insurance Number". The instruction "It’s on your National Insurance card, benefit letter, payslip or P60. For example, QQ 12 34 56 C" is in between the label and the input field. An arrow pointing to this instruction appears on screen]

Always use a persistent text label for each form field. Placeholder text disappears when someone starts typing, so it should never be used as a substitute for a label.

[A video of a form being filled in plays on screen. The fields in the form have a placeholder but no persistent label. When text is entered in each field, the placeholder disappears. A large "X" icon is displayed on top of the form]

Finally, if people enter incorrect information, explain the error clearly and simply, and offer guidance on how to fix it.

In this form, when a policy number in an incorrect format is entered, the error message "This doesn't look right. Your policy number starts with EGA or AGL, followed by 6 numbers" is displayed above the field.

[A form titled "About you" is displayed. The form contains a "Policy number" input field. A string of six digits has been entered in the field. A red exclamation mark icon and the red text "This doesn't look right. Your policy number starts with EGA or AGL, followed by 6 numbers" are in between the label and the form field. An arrow pointing to the error message appears on screen]

[The web page is replaced by a red slide containing large, white text "Visual design"]

Visual design

When designing forms, place labels where people expect to find them. Labels are usually above input fields and combo boxes, and to the right of radio buttons and checkboxes.

[A form titled "Registration form" is displayed. The form contains three input fields, a group of three radio buttons, and a checkbox. Arrows pointing to the labels of all fields appear to highlight the label positioning: above the input fields and to the right of the radio buttons and checkbox]

Keeping labels close to their fields helps everyone, especially people enlarging the content.

[The same form, enlarged. The first two input fields take up the whole screen. The labels sit very close to the input fields]

Also, carefully plan how to use colour in your forms.

Never use colour alone to identify fields that are required or in error. In this form, the field in error is identified by a red border and a red label, as well as an exclamation mark icon and a text error message above the field. This makes it easy for everyone to recognise there is an error.

[A form titled "Personal details" is displayed. The form contains a "Phone number" input field where a string of six digits has been entered. The label "Phone number" and the border of the input field are red, and a red exclamation mark icon followed by the red text "Please enter a valid phone number" are in between the label and the form field. Four arrows appear on screen to direct attention to the label, the form field border, the exclamation mark icon, and the red error message]

And make it easy for all to see form fields by giving their border a colour that has a good contrast with the adjacent colours, at least 3:1.

[A form titled "Subscribe" and containing two input fields is displayed. An arrow appears on screen to draw attention to the border of the first form field. The text "3:1" slowly appears on screen]

In this example from the TetraLogical website, the grey border of the input fields has a contrast ratio of 8.9:1 with the light violet background.

[The same Subscribe form is on screen. The Colour Contrast Analyser (CCA) tool appears next to it, showing a contrast ratio of 8.9:1 between the grey colour #444444 used for the border of the form fields and the light violet colour #F6F3F8 used for the background]

[The web page is replaced by an orange slide containing large, white text "Implementation"]

Implementation

By using HTML native controls such as <input>, <textarea>, <select> and so on, you can easily create form fields that are keyboard accessible and are recognised as expected by screen readers.

[The text "HTML native controls" is displayed at the centre of the screen. The text <input>, <textarea>, and <select> appear around it, as they are mentioned]

Next, you should ensure that form fields and labels are correctly associated in the code.

[The Subscribe form from the TetraLogical website is on screen again. A border is displayed around the first input field and its label "Name (required)", to highlight them. To the right of the form, the piece of code <label> Name (required) </label> <input type="text"> is displayed]

A simple way to do so is using the id and for attributes.

[The for attribute with the value "name" appears within the <label> element and the id attribute with the same value "name" appears in the <input> element]

This ensures that the right label for each form field is announced by screen readers. It also allows people with limited dexterity to select a field by clicking on its label, and people using voice commands to select it by reading out the label.

In summary, by writing clear labels and error messages, choosing label placement with care, making good use of colour, and associating fields with their labels at code level, you can create forms that everyone can fill in with ease.

[The web page is replaced by a white slide with the title "Summary" and four list items: "Clear labels and error messages", "Well-planned label positioning", "Good use of colour", and "Properly associated HTML elements"]

To learn more, visit tetralogical.com.

[The screen fades to white and the TetraLogical logo appears again, followed by the text "Find out more about accessibility at tetralogical.com]