gitlab-org / coming-soon

Accessibility and Responsiveness

This document outlines the design considerations for accessibility and responsiveness for the coming-soon page at https://gitlab.com/gitlab-org/coming-soon/.

Accessibility

Screen Readers

Keyboard Navigation

  • All interactive elements should be focusable using the keyboard.
  • Tab order should be logical and predictable.
  • Keyboard focus should be visually indicated.

Examples

  • ARIA attributes:
    • role="button" for buttons that don’t have a native button element
    • aria-label for buttons that don’t have text content
    • aria-describedby for elements that are described by another element on the page
  • Text contrast:
    • Use a color contrast checker tool to ensure that text meets the WCAG 2.1 guidelines.
  • Color:
    • Use icons and text to convey information in addition to color.
  • Headings:
    • Use h1 for the main heading, h2 for subheadings, and so on.

Responsiveness

Breakpoints

  • The page should be designed to adapt to different screen sizes.
  • Use CSS media queries to define breakpoints for different screen sizes.
  • Example:
@media (max-width: 768px) {
            .container {
              width: 100%;
            }
          }

Content Layout

  • The content should be laid out in a way that is easy to read on all screen sizes.
  • Use flexible layouts and responsive images to ensure that the content scales appropriately.
  • Example:
.container {
            display: flex;
            flex-direction: column;
          }
          
          @media (min-width: 768px) {
            .container {
              flex-direction: row;
            }
          }

Examples

  • Media queries:
    • @media (max-width: 768px) - for mobile devices
    • @media (min-width: 768px) - for tablets
    • @media (min-width: 1024px) - for desktops
  • Flexible layouts:
    • Use flexbox or grid to create layouts that adapt to different screen sizes.
  • Responsive images:
    • Use the <picture> element or the srcset attribute to provide different image sizes for different screen sizes.

Implementation

The coming-soon page is built using insert framework/library.

The following resources provide further guidance on implementing accessible and responsive web design: