Accessibility-adapted functionality.

Technical accessibility is about creating digital services in a way that works for everyone. An e-commerce site needs to be technically correctly built for consistent interaction, keyboard access, and compatibility with various aids, for example. A robust technical foundation makes the design more sustainable, improves performance, and reduces both future costs and technical debt.

LPTT refers to the standard EN 301 549, which covers for example WCAG A+AA and a number of technically detailed requirements for functionality, compatibility, and robustness.

Semantic codebase

• Use the correct HTML element for the right task. The semantics make it understandable for assistive technologies and create a stable interface.

• The basic rule is to use semantic HTML first. ARIA should only be used when HTML is not sufficient.

• Use heading structure <h1> to <h6> in the correct order.

• Buttons are <button> and links are <a href> that lead somewhere.

• Lists are <ul> or <ol> not text with dashes.

• Forms need programmatic connection between label, input, and error messages to work with screen readers and voice control.

• Use HTML landmarks to structure the page so assistive technologies can navigate effectively.

  
  
  

Keyboard support and interactions

• Ensure to have a logical and intuitive tab order.

• Secure the focus order and have visible focus with clear focus markers.

• Everything that can be clicked on should be controllable with the keyboard.

• Components should be usable with arrow keys, tab, enter, and escape.

• Have clear error messages in forms.

• Components such as dropdowns, tabs, filters, and modals should always behave the same way with a clear logic.

• Modals should lock focus within themselves until they are closed and then return focus to the button/link that opened the modal.

• Add a "Skip to content" link that becomes visible during tab navigation. Especially important in e-commerce where headers are often large and complex.

  
  
  

Design functions

• Able to enlarge text up to 200% without content disappearing or overlapping.

• Content and components should function without horizontal scroll down to 320px width.

• Clear clickable areas and sufficient hit area, recommended minimum size, 44 x 44px.

• Links and buttons are clearly marked even without color.

• State should not only be marked with color, use icon, outline, text, or shape as well.

• Interactive icons need to be supplemented with text that is visible or hidden.

• Users should be able to pause, stop, or hide moving elements such as autoplaying slideshows or animations.