Good Practices
Web accessibility is about making websites usable by as many people as possible, regardless of their abilities or disabilities. This includes facilitating navigation and comprehension of content for people with visual, auditory, motor, or cognitive disabilities. By following accessibility guidelines, we can improve the user experience for all and comply with web accessibility standards.
Clickable Elements
Section titled “Clickable Elements”Ensure all links that open in a new page are clearly indicated. Use the “aria-label” attribute with the value “LinkText, opens a new window” for this purpose. If the link already has an “aria-label” (e.g., social media icons), use “aria-label=“SocialMedia, opens a new window"".
For links or buttons that don’t have visible text content, provide descriptive labels using the ‘aria-label’ attribute to ensure users relying on screen readers understand the purpose or action associated with the link or button.
Titles
Section titled “Titles”Every webpage should contain a single H1 title. This ensures clarity and consistency in the page structure, aiding both users and search engines in understanding the main topic or purpose of the page.
Titles should never be empty. If titles are represented by images or links, they should include alternative text or screen-reader-only text to ensure accessibility for users who rely on assistive technologies.
Maintain a consistent hierarchy for titles. For example, do not use an H4 heading immediately after an H2 heading.
Keyboard Navigation
Section titled “Keyboard Navigation”Interactive elements should be accessible via keyboard navigation, allowing users to interact with them without relying on a mouse or touchpad.
Keyboard focus should be visibly highlighted to provide clear feedback to users, indicating which element is currently active or selected.
When modals are active, they should include the attributes role=“dialog” and aria-modal=“true” to ensure proper semantics and accessibility. These attributes help assistive technologies understand the purpose and behavior of the modal, enhancing the user experience for all users.
Include skip links within the header or any other prominent location on the webpage to allow users to bypass repetitive content or navigate directly to key sections, enhancing accessibility and usability.
Elements hidden by CSS should not be accessible to screen readers/tab navigators.
Ensure that menus are appropriately marked up using the HTML5 “nav” element, which denotes their navigational purpose to assistive technologies. Alternatively, if custom elements are used, assign a “role” attribute set to “menu” or “navigation” to convey the same semantic meaning to screen readers.
When implementing dropdown menus within your navigation, include the “aria-haspopup=true” attribute to inform assistive technologies that the menu has supplementary options that will become visible upon interaction.
Utilize the “aria-expanded” attribute in conjunction with dropdown menus to dynamically communicate their current state, whether expanded or collapsed, to assistive technologies.
Media Items
Section titled “Media Items”Enhance accessibility by providing descriptive alternative text for images using the “alt” attribute.
Exclude non-functional icons/spacers from assistive technology using “role=“presentation"".
Ensure figure elements have text or are excluded from assistive technology. Use “role=“none"" for figure elements displaying images and provide descriptions using the “alt” attribute.
Form fields should have either an “aria-label” attribute or a connected LABEL element describing the field requirement.
Indicate which form fields are required for submission using the “aria-required=true” attribute.
Provide feedback on the validation status of form fields. Use the “aria-invalid=true/false” attribute to dynamically indicate whether the input provided by the user is valid or invalid.
Ensure semantic clarity and accessibility for search fields by assigning the appropriate “role=search” attribute.
Readability
Section titled “Readability”Font sizes should be set to a minimum of 11 pixels to ensure optimal readability across different font families.
Sliders
Section titled “Sliders”Ensure proper labeling and identification of carousels by marking them as landmarks and providing descriptive information. Use the ‘aria-label’ attribute with appropriate values such as ‘carousel’ or ‘slider’ to convey their purpose to screen-reader users. Additionally, designate the role of the carousel as ‘contentinfo’ to assist screen readers in understanding its significance within the page.
For control elements within the carousel, such as next and previous icons, ensure they are accessible to screen readers by providing descriptive labels using the ‘aria-label’ attribute or screen-reader-only text.
Pagination items within the carousel should also be labeled appropriately to indicate their purpose and provide context to screen-reader users. Use the ‘aria-label’ attribute along with screen-reader-only text to convey information about the function and current slide number.
General
Section titled “General”Iframe elements should include a descriptive ‘title’ attribute or ‘aria-label’ to provide information about their purpose, functionality, or destination to users. Alternatively, if the iframe content is not relevant for screen-reader users, it should be hidden from accessibility tools to prevent unnecessary exposure.