Alt tags

Alt tags are a descriptive attribute added to image tags to give text-based context about an image's content. These tags are primarily intended for users with visual impairments who use screen readers to navigate web pages or other digital interfaces.

Use them on all pictorial images and illustrations that accompany content.

Best practice

Short and descriptive: Alt tags should be short and descriptive, ideally no more than 125 characters. They should accurately convey the content and purpose of the image.

Plain language: Alt tags should be written in plain language and avoid technical jargon or abbreviations.

Not for decoration: It's not necessary to use an alt tag on images that are purely decorative or have no functional purpose.

Captioning for video

Captions are written representation of audio content in videos and animations, and can be spoken words, identification of speakers, and crucial sound effects such as music, and noises.

Captioning should go on all viesos qwe make including tutirials and support videos. We can use voice recognition software can help create captions for some type of videos.

Contrast

Users with moderately low vision or with colour deficiencies that affect contrast to a minor degree can have issues reading and accessing certain parts of our platform.

If contrast is good, they are more likely to access our content without requiring additional assistive technologies.

Good contrast means there is sufficient contrast between foreground and background colours, particularly between text and its background but also applicable to the keys and labels of graphs.

Colour contrast

This is a ratio of 4.5:1 for text 18pt or less, and 3:1 for text larger than 18pt or text that is bold and larger than 14pt.

All colour combinations must pass the WCAG 2.0 AA-compliant colour contrast check. I love the Contrast for Mac OSX to check contrast quickly.

Click and touch target area

Click and touch targets must be large enough to touch accurately.

For pointer devices

Recommended click area should be a minimum of 42px square. On any clickable elements, such as Icons, buttons and links.

For icons that are 16px to 32px in size, we can do this by creating an opaque mask that is 42px and overlaying it.

Icons should be spaced at least 16px apart.

For touch devices

All users benefit from larger touch targets. For young users, and users with motor and/or vision impairments, this is even more important as accuracy can be difficult.

Content touch targets must be large enough to read and have a large enough interactive target area to tap comfortably with one finger.

The recommended size of touch targets is 7-10mm. This size is equivalent to the smallest average finger. An interactive target area should be at least 7 x 7 mm.

If not, it must be no smaller than 5 x 5 mm inside an exclusion zone of at least 7 x 7 mm that does not overlap with any other touch target. The recommendation is to provide a bigger touch target where possible.

Sometimes text that is big enough to read is too small to touch. For example, a linked letter in an A-Z listing would be too fine to touch accurately and should be placed in a linked container to increase the target area.

Hover states and hidden information

On desktop, hover states are ubiquitous, but as we use these across the app, we need to keep in mind that they do not work on tablets. This can be disastrous for users.

Hints, titles and other tooltip-like text should provide additional explanatory content rather than repeat the main alternative for an element, object, or image. This prevents duplication of information for screen reader users.

Semantic HTML structure

Semantic HTML structure uses HTML elements to convey meaning and purpose to the content they contain. The importance of semantic HTML structure lies in its ability to make web content more accessible and maintainable.

Best practice

Use descriptive : Use HTML tags that accurately describe the content they contain. For example, use <h1> for headings, <p> for paragraphs, <ul> for unordered lists.

Use appropriate tags: Use the appropriate HTML tags for specific types of content. For example, use <address> for contact information, <time> for dates and times, and <figure> for images and other media content.

Use headings properly: Use heading tags (<h1> to <h6>) in a hierarchical order to give structure to your content. The <h1> tag should be used for the main heading of the page, and subsequent headings should be used to organize content into subsections.

Avoid using non-semantic tags: Avoid using non-semantic tags, such as <div> and <span>, to group content together. Instead, use semantic tags that accurately describe the purpose of the content.

Use ARIA attributes: Use ARIA (Accessible Rich Internet Applications) attributes to provide additional context and meaning to non-semantic elements. For example, use aria-label to describe the purpose of a button or aria-describedby to provide a description of an element.

Keyboard navigation and shortcuts

Keyboard navigation is an important accessibility feature that allows users to navigate and interact with web content using only the keyboard, without requiring a mouse or other pointing device. This is particularly important for users with motor impairments or visual impairments who rely on keyboard navigation to access and interact with web content.

Semantic HTML: Use semantic HTML to structure web content in a logical and meaningful way. This makes it easier for keyboard users to navigate and understand the content.

Keyboard focus: Make sure that all interactive elements on the page, such as links, buttons, and form controls, can be accessed using the keyboard.

Clear feedback: Provide clear visual feedback when an element has keyboard focus or has been activated. This can include highlighting the element or changing its color to indicate that it has been selected.

Link titles

Link titles are the visible and clickable text that appears on a hyperlink. Link titles are important for providing context and information to users about where the hyperlink will lead them.

Best practice

Be descriptive: Link titles should accurately describe the content of the page the hyperlink leads to. Use descriptive and concise language that accurately reflects the content.

Avoid using vague terms: Avoid using vague or ambiguous terms such as "click here" or "read more" as link titles. Instead, use descriptive terms that clearly describe the content the hyperlink leads to.

Keep it concise: Link titles should be concise and to the point. Aim for titles that are no more than 5-7 words.

Minimum text size

Minimum text size refers to the smallest readable size of text on a webpage. It is important to have a minimum text size that is large enough to ensure that all users can easily read and understand the content, including those with visual impairments or who are using small screens.

• All content must have a minimum size of 12px. This means that non essential text or labels can be this size.
• All core content must have a minimum size of 14px. This means that body text for long reading, must be large enogh to read comfortably.