8 tips for accessible websites
Use semantic HTML
HTML5 introduced a variety of new semantic HTML elements to help replace the much dreaded
<div>, such as
<nav> etc. When developing a website, you should understand what each part of your layout represents and try to use the appropriate element for it.
Use color correctly
WCAG specifies a minimum contrast ratio of
4.5:1 between text and background (viewable in Chrome Developer Tools), so you should always design with that in mind. Additionally, remember that color should be used meaningfully and sparsely to avoid confusion and information overload.
Caption images and video
Try to provide
alt attributes for your
<img> elements, so that screenreaders don't read the
src attribute. You can use empty
alt attributes for decorative images, which will inform screenreaders to skip them. Similarly, try to provide closed captions for any video content on your website.
Show and tell
Using icons and colors to indicate state, highlight or provide context is very common and provides a nice user experience. However, icons and colors alone might not be accessible for everyone, so make sure to support them with the appropriate text literals, catering to all of your users in the process.
Elements with similar meaning and/or functionality should look similar across your website. This is especially true for
<button> elements and their respective states as users will have to be able to identify easily what elements they can interact with and anticipate their behavior.
Label your inputs
Any kind of
<input> element should be labelled appropriately, using either a
<label> wrapper, the
for attribute or an
aria-label attribute. Do not rely on
placeholder attributes to convey meaning about your
<input> elements as this will cause problems for users on screenreaders.
Responsiveness is often thought in terms of screen size or mobile vs desktop, but there are many different devices where a user could browse your website. Try catering to any and all of them by providing ways to navigate and use your application via mouse, keyboard, thumb or any combination of the three.
Organize your content
A website's layout should be easy to scan, understand and find the content that is relevant to the user. Good organization with clear sections and properly grouped content provides a better user experience for all users, regardless of device or accessibility needs.