Accessibility
This page talks about the various practices that we have put into place to ensure that our website is accessible to the ``Web Content Accessibility Guidelines`` (WCAG) 2.1 level AA success criteria.
Below you’ll find a breakdown of the 3 main categories: screenreader adjustments (for blind users), keyboard navigation adjustments (for the motor impaired) and UI, design, and readability adjustments (for the visually impaired).
We are constantly working to ensure that users of the Limbless Association website have a seamless user experience. Accessibility is of great importance to us and we are always working on implementing new technologies and tools to ensure that our website can be accessed by all.
• HTML title elements (H1-6) have texts. If images or links are used, they should include an alternative or screen-reader only text.
• An H1 title provides information to blind users using screen-readers of what the main topic of the page is and each page has exactly one H1 title.
• Title levels are not skipped and are built with a consistent hierarchy. For example, we do not have “h4” titles and “h2” titles without having “h3” titles.
• Buttons include text explaining their functionality, and if icons are used as buttons, a screen-reader only text or an “arialabel” attribute is used for that description.
• Elements that behave as buttons but are built using other tags such as span, div, a or others, include a “role” attribute that equals to “button”.
• Links include text that is setting expectations to what page they are leading to. If empty links are used as layout wrapping elements, a screen-reader only text or an “aria-label” attribute is used for that description.
• Images have an alternative text description that describes both the objects and the embedded text that the image contains, using the “alt” attribute.
• Font icons, SVG or images that are being used as spacers, decorations or their purpose is already described by the content include a “role” attribute that equals to “presentation” or “none”.
• Menu items that have a dropdown menu include an “aria-expanded” attribute that equals to “false” that changes to “true” and back when opening or closing the dropdown.
• Menu items that have a dropdown menu include an “aria-haspopup” attribute that equals to “true”.
• Menus are built using the HTML5 “nav” element to indicate a navigation landmark for screenreaders.
• The HTML tag includes a “lang” attribute that represents the main language of the webpage so screen-readers can calibrate on it for blind users.
• Landmarks such as main content and footer are built using their corresponding HTML5 element or include a description using an “aria-label” attribute and a “role” tag that equals to “contentinfo” or “main”.
• The title tag of the HEAD section (also the title that appears in the browser tab and Search Engine result pages) exist and describe the name of the current webpage for screen-reader users.
• Form fields either include an “arialabel” attribute or a connected LABEL element describing the requirement of the field (email, phone, name, etc.).
• All forms have a submission button that is built as an input type “submit” or a “button” element, or include a “role” tag that equals to “button”.
• Search forms include a “role” tag that equals to “search” (or be wrapped by one) to indicate a search landmark for screenreaders.
• Elements that have texts meet a minimum contrast ratio of 4.5:1 between their foreground (usually text colour) and background colour.
• Letter spacing is not set below – 1px in order to stay readable in the majority of font families.
• Control elements such as next and previous icons include an “aria-label” attribute or a screen-reader only text that explains the functionality to screen-readers.
• iframe elements include a “title” or an “aria-label” attribute explaining the purpose, the functionality or the destination of the iframe, or are tagged hidden for screenreaders if irrelevant.
