Practical web accessibility is a mindset. Accessibility, broadly speaking, is helping something be as usable as possible to a broad range of users – especially those with visual impairments. The following isn’t a comprehensive list of accessibility requirements for modern websites, but we do give a general mindset and high level checklist for ensuring we don’t overlook common items. This list can provide big improvements in the usability of a website for those with web accessibility concerns.
Starting Point: good content organization and proper markup
With CSS comes great responsibility. Styles can be used to completely manipulate a site’s layout and visually rearrange the site in a way that doesn’t match the actual flow of the content. For accessibility, we always strive for a logical layout for the site and the content so that if you removed all the site’s styling, you could read the site from top to bottom and it would clearly convey the intended message.
With this approach to readability, proper markup is also used to ensure content is assigned the appropriate value for its intended purpose. This includes: headings, forms, buttons, images, and links. When these elements are given the appropriate markup, it helps to define content hierarchy as well as tell screen readers more information about the content that is present.
Visual Concerns for Accessibility
- For any text elements, ensure that there is enough color contrast between the background and the foreground color of the text. That way, you can ensure all text is legible for those even with minor visual impairments due to disability or age.
- Ensure all image elements have “alt” tags for those that can’t see the image to know what that image represents. If image isn’t necessary for the content, include an empty “alt” tag (alt=””)
- Ensure all action elements (buttons, links, triggers) have proper labels and present proper context so users clearly understand what happens when interacting with that element. No need to have title tags on these links as long as the linked text is clear and defines result of action.
- Ensure there are skip links at the top of pages so those using keyboard navigation along with a screen reader can “jump” repeated elements like the navigation and instantly hit the page content for the pages they’re visiting.
Physical Impairments
- Ensure keyboard navigation allows users to access all action elements on the page. This includes all elements of a navigation including submenu items that aren’t initially visible on the page.
- Ensure there is enough padding and space on clickable elements on the page. That way users with some physical impairment that are still using a mouse can easily click on their desired actions with limited opportunity to click on the wrong elements.