Tags Component

Contributed by Heran Wang

Tags component categorizes content with interactive labels.

Basic Tags Component

Usability

1. Flexibility and Responsiveness
   The CSS uses Flexbox for layout, making it easier to adapt to various screen sizes. This improves usability as the spans will neatly wrap onto the next line when space is constrained.

2. colour Contrast
   Different colours are used for different tags to make them distinguishable. This makes it easier to spot and identify individual elements, which in turn enhances usability.

3. Font Readability
   The choice of Arial and sans-serif fonts in the body ensures readability across different devices.

4. Interactive Feedback
   While not present in the given code, having hover effects could further improve usability by providing visual cues when users interact with the elements.

Accessibility

1. Semantic HTML
   The HTML document structure is simple and semantic. However, it could be further enhanced by using ARIA (Accessible Rich Internet Applications) roles or attributes to describe the nature of the spans if they have special functions.

2. Keyboard Navigability
   Again, not evident from the code, but you can make elements keyboard-navigable by adding tabindex attributes, thereby improving accessibility.

3. colour Accessibility
   While the tags are colour-coded, this can be problematic for users who are colour-blind or have difficulty distinguishing colours. To address this, ensure a good colour contrast ratio and possibly use patterns in addition to colour to distinguish different elements.

4. Readable Fonts
   The use of Arial and sans-serif, commonly recognized as readable fonts, benefits those with visual impairments. Font size and weight have also been specified for better legibility.

5. Contrast in Dark Mode
   The CSS appears to consider a dark mode with good contrasting colours, which benefits users who find dark modes easier on the eyes.

6. Scalable Text
   The use of relative units like rem for text size allows users to zoom in or out without breaking the layout, improving accessibility for visually impaired users.

Innovative Tags Component

Usability

The purpose of usability is to make the interface user-friendly and easy to navigate. We achieved this by:

1. Visual Feedback: Hover and focus effects on the tags provide immediate visual feedback, helping users understand that these elements are interactive.

2. Readable Text: The use of legible fonts and contrasting colours make the text on the tags easy to read.

3. Mobile Responsiveness: The use of flexible layouts ensures that the tags are easily usable on a variety of devices.

4. Flexibility: The tags are designed to be flexible and can be easily integrated into different UI contexts.

5. Icons: The inclusion of icons adds a layer of visual information that complements the text labels, making it quicker to identify the purpose or meaning of each tag.

Accessibility

Accessibility is equally important, ensuring that the product can be accessed and used by as many people as possible, including those with disabilities.

1. Semantic HTML: Using role="button" makes it clear that these spans act as buttons, aiding screen readers in understanding the function of these elements.

2. Keyboard Navigation: Users can navigate to each tag using the keyboard and activate them using the 'Enter' or 'Space' keys.

3. ARIA attributes: Using aria-pressed gives assistive technologies information about whether a button is in a pressed state or not.

4. Contrast Ratio: The text and background colours have been chosen to meet contrast requirements, making the tags readable by those with visual impairments.

5. Font Sizing: Relative font sizing allows users to adjust text size as needed, which is especially useful for those with visual impairments.

6. Focus Indicators: We have custom focus styles (outlines) which make it easier to navigate using keyboard or other assistive technologies.

Version