Website accessibility statement
webFEAT Complete, Inc. is dedicated to guaranteeing complete and equitable entry to our digital services for all individuals with disabilities. We are presently in the process of evaluating and enhancing the webFEAT Complete
website (https://webfeatcomplete.com/) to make certain that both the entire website and all content published on it are accessible and delivered in formats that are easy to use.
Aligning with the guidelines set by the Americans with Disabilities Act (ADA) and the WCAG (Web Content Accessibility Guidelines) 2.1 Level AA, the following outlines our strategy for implementing website accessibility:
- Elements that behave as buttons but are built using other tags such as span, div, a or others, should include a “role” attribute that equals to “button”.
- Buttons should include text explaining their functionality, and if icons are used as buttons, a screen-reader-only text or an “aria-label” attribute should be used for that description.
- Links should 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 should be used for that description.
- Links that open in a new tab or a new window should either have an “aria-label” attribute or a screen-reader-only element explaining to screen readers that this opens in a new tab.
- An H1 title provides information to blind users using screen-readers of what the main topic of the page is and each page should have exactly one H1 title.
- On texts. If images or links are used, they should include an alternative or screen reader-only text.
- Elements that visually appear as titles but are coded with a non-heading HTML Tag should include a “role” attribute that equals to “heading” or have their tags fixed.
- Title levels should not be skipped and should be built with a consistent hierarchy. For example, you cannot have “h4” titles and “h2” titles without having “h3” titles.
- Interactive elements such as links, buttons, and form fields should all be navigable using the keyboard by either using a focusable element (a button, input, etc.) or including the “tabindex” attribute that equals “0”.
- Interactive elements that can be navigated using the keyboard should be surrounded by a visual outline whenever they are focused.
- Active popups should include an “ariamodal” attribute that equals to “true”, and a “role” attribute that equals to “dialog”
- Every page should include hidden links that by clicking on them (either using keyboard navigation or a screen reader), the user will “skip” certain blocks directly to main landmarks such as the main content, menu, or footer.
- Elements that are hidden using CSS manipulations (opacity, height, text-indent, off-canvas, etc.) should be wrapped inside an element with an “aria-hidden” attribute that equals to “false”, or include it directly, and have it dynamically changed to “true” when they become visible.
- Menus should either be built using the HTML5 “nav” element orinclude a “role” attribute that equals to “menu” or “navigation” to indicate a navigation landmark for screen-readers.
- Menu items that have a dropdown menu include an “aria-haspopup” attribute that equals to “true”.
- 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.
- Background images that are not just for decoration purposes and should have the same treatment as standard images and include a “role” attribute that equals to “img” and an alternative text description in an “aria-label” attribute.
- Font icons, SVG or images that are being used as spacers, or decorations or their purpose is already described by the content should include a “role” attribute that equals to “presentation” or”none”.
- Figure elements that are used to display images should have a “role” attribute that equals to “none” and the image provide itself should provide the description using an “alt” attribute.
- Every “area” element of a “map” tag should be regarded as a standard image and receive an alternative text description using an “alt” attribute.
- Small or hidden tracker pixel images (often used for analytics or marketing purposes) should include a “role” attribute that equals to “none” or”presentation” so they are excluded from screen-readers.
- Form fields should either include an “arialabel” attribute or a connected LABEL element describing the requirement of the field (email, phone, name, etc.).
- Form elements cannot have the same ID, or else their corresponding label will provide false information.
- Required form fields should include an “aria-required” attribute that equals to “true” so blind users using screen readers know their validation.
- The validity status of every form element must be represented in the code at all times using the “aria-invalid” attributes and the “true/false” values, and change dynamically when the status changes.
- aria-describedby and aria-labeledby attributes should be connected by ID to an element that either has text description or an “aria-label” attribute.
- All forms should 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”. Buttons can be hidden if the form can be submitted using the Enter key.
- Search forms should include a “role” tag that equals to “search” (or be wrapped by one) to indicate a search landmark for screen readers.
- The title tag of the HEAD section (also the title that appears in the browser tab and Search Engine result pages) should exist and describe the name of the current webpage for screen-reader users.
- The HTML tag should include a “lang” attribute that represents the main language of the webpage so screen-readers can calibrate on it for blind users.
- The meta viewport tag should allow vision-impaired users to pinch-zoom at least double the standard scaling using the userscalable=”yes” and maximum-scale={2 or higher} content strings.
- Landmarks such as main content and footer should be 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”. Landmarks such as search and navigation are tested in other sections..
- Font sizes should be at least 11px in size in orderto stay readable in the majority of font families. This should be verified also when using dynamic units such as REM or percents.
- Letter spacing should not be set to below -1px in orderto stay readable in the majority of font families. This should be verified also when using dynamic units such as REM or percents.
- Elements that have texts should meet a minimum contrast ratio of 4.5:1 between their foreground (usually text color) and background color.
- Carousels should include an “aria-label” attribute that equals to “carousel”/”slider” or something else that indicates the functionality, as well as be tagged as a landmark for screen-readers using a “role” tag that equals to “contentinfo”.
- Control elements such as next and previous icons should include an “arialabel” attribute or a screen-reader-only text that explains the functionality to screenreaders.
- A common accessibility mistake is to treat carousels as live regions using the “arialive” attribute and the “polite” or the “assertive values. Using this practice will cause screen-readers to cut and skip announcements.
- Carousel pagination items (usually used as small dots at the bottom of the carousel) should indicate their functionality and slide number they control using an “aria-label” and a screen-reader-only text.
- Tables that are being used as layout structures should include a “role” attribute that equals to “presentation” to indicate to screen readers that it is not really a table.
- If nested tables are used (a table element within a table cell), set the nested tables “role” attribute to “presentation”.
- Tables that are missing a THEAD row with TH elements, should include a “role” attribute that equals to “rowheader” on the TD elements of the TR that represents the visual table headings.
- Visually deleted texts (often used to show a previous price of a sale) should include an “aria-label” attribute or a screen-reader only text that explains this is deleted text.
- Breadcrumbs main element should include a “role” attribute that equals to “navigation” and an “aria-label” attribute that describes the functionality.”
- Ratings/scores that are represented visually using stars, meters or other indicators should either have an “aria-label” attribute or a screen-reader only text conveying the score/rate
- Iframe elements should include a “title” or an “aria-label” attribute explaining the purpose, the functionality, or the destination of the iframe, or be tagged hidden for screen-readers if irrelevant.
