3 Tips for a More Accessible Website [Food for Thought]
Nearly 61 million U.S. adults have a disability. With a large number of that population using assistive technology to navigate websites, accessibility is more important than ever.
How do you ensure your website is accessible?
In the most recent episode of Food for Thought, Quality Assurance Specialist Sandra Koranteng shares three recommendations for a more accessible website.
Watch the video below or continue down for the highlights.
The Highlights
Sandra lists three straightforward ways to make your website more accessible:
- Use native HTML
- Standard HTML is pretty accessible to begin with, but it can get tricky if your website has complicated elements. For example, using the <a> tag for a link will render the link as an interactive element, which both the keyboard and the screen reader will pick up.
- Be sure to double-check your custom elements; they may be clickable and interactive with a mouse, but not with the keyboard. To avoid this, make sure to add the element to the tabindex with tabindex 0 and add ARIA attributes.
- Force alt text
- Screen reader users rely on alt text (or descriptive text) to gather information about non-text content like graphics, images, and icons. Forcing alt text on a content management system (CMS) is a fool-proof way to ensure all images have alt text because it prevents media without alt text from being added to the site.
- Images that don’t provide essential information don’t need alt text. In these instances, mark your image as alt=“” or mark it as decorative in the CMS. The screen reader will not pick up these images.
- Use semantic headings
- Screen reader users break down content by using the H key to navigate semantic headings (also known as headings and subheadings). Using semantic headings allows the screen reader user to interpret content in sections while using the cursor or rotor (a screen reader navigation tool in HTML) to browse the page.
- Two things to keep in mind with semantic headings:
- Make sure that your headings are structured in order (h1, h2, h3…), otherwise, the person may think they have skipped a section.
- The H1 is the title, so your content should only ever have one H1, but you can have multiple h2s, h3s, etc.
Accessibility doesn’t have to be difficult to achieve. It’s even easier if you think about it from the start of your website project and continue to think about it throughout the build. Making the time to do so ensures that anyone and everyone can access your website.
In each episode of Food for Thought, we give one of our Mindgrub experts five minutes or less to make us an expert on an important part of their job. Check out all the episodes here.
Want to be the first to know when a new episode drops? Follow us on LinkedIn.
