Opening the Doors to Everyone: A Guide to Accessibility and SEO

Learn why the accesskey attribute is often problematic for accessibility and why, if you must use it, the values must be unique to avoid creating a confusing user experience.

Learn why ARIA dialogs and alertdialogs require an accessible name (aria-labelledby or aria-label) and how to implement them correctly for screen reader users.

Learn why repeating alt text in your surrounding content is bad for accessibility and how to fix it by writing concise, non-redundant alt text or using null alt attributes.

Learn why ARIA treeitem nodes require an accessible name and how to provide one using content or aria-label for screen reader users.

Learn why the banner landmark (header) must be a top-level landmark and should not be nested inside other landmarks like main or side.

Learn why the complementary landmark aside should be a top-level landmark and not nested within other landmarks like main or footer.

Learn why all page content must be contained by landmarks for accessibility. A guide to using HTML5 and ARIA landmarks like main, nav, and header correctly.

Learn the first rule of ARIA and why using native HTML elements is better than inappropriate ARIA roles. A guide to fixing common accessibility issues.

Learn why using a tabindex greater than zero is an accessibility anti-pattern and how to create a logical tab order using your DOM structure.

Learn why every form element needs a visible, properly associated label for accessibility and how to implement them using the tag.

Learn why frames and iframes can be accessibility black boxes and how to test them with axe-core. A guide to fixing common issues like missing title attributes.

Skipping heading levels (e.g., an H1 followed by an H3) creates a confusing structure for screen readers and search engines. Learn how to fix this accessibility and SEO issue.

Learn why empty heading tags are confusing for screen readers and how to fix them to improve your site’s accessibility and semantic structure.

Learn why landmarks must have a unique role or accessible name when used multiple times on a page, and how to fix it with aria-label or aria-labelledby.

Learn why disabling user zoom and scale in the meta viewport tag is a critical accessibility failure (WCAG 1.4.4) and how to fix it.

Learn why every page must contain one, and only one, H1 tag for accessibility and SEO, and how to write an effective main heading for your content.

Learn why your page should have only one banner landmark (

Learn why your page should have only one contentinfo landmark (

Learn why every page requires one, and only one, main landmark (

Learn why the ARIA role=’text’ is invalid and how to correctly mark non-interactive content for screen readers using role=’presentation’ or aria-hidden=’true’.

Learn how to use the scope attribute (`scope=’col’` and `scope=’row’`) on table headers (

Learn why table headers (

Learn how to hide purely decorative elements from screen readers using role=’presentation’ and aria-hidden=’true’ to reduce noise and improve accessibility.

Learn how to properly implement a ‘skip to main content’ link with a focusable target using tabindex=’-1′ to improve keyboard accessibility.

Learn why it’s important for your tables to not have identical summary and caption text and how to fix it.

Active area elements without alternate text are a major accessibility issue. Learn how to add alt text to your image maps to comply with WCAG 2.0.

Using invalid ARIA attribute names can break accessibility for screen reader users. Learn how to use the correct ARIA attribute names to comply with WCAG 2.0.

Using invalid ARIA attribute values can break accessibility for screen reader users. Learn how to use the correct ARIA attribute values to comply with WCAG 2.0.

ARIA braille attributes can enhance the experience for braille display users, but they must have a non-braille equivalent. Learn how to comply with WCAG 2.0.

ARIA commands without an accessible name are a major accessibility issue. Learn how to add a name to your ARIA commands to comply with WCAG 2.0.

Aria-hidden elements should never contain focusable elements. Learn how to fix this critical accessibility issue to comply with WCAG 2.0.

Using aria-hidden=true on the body element can make your entire site inaccessible. Learn why this is a critical accessibility issue and how to fix it.

ARIA input fields without an accessible name are a major accessibility issue. Learn how to add a name to your ARIA input fields to comply with WCAG 2.0.

ARIA meter nodes without an accessible name are a major accessibility issue. Learn how to add a name to your ARIA meter nodes to comply with WCAG 2.0.

ARIA progressbars without an accessible name are a major accessibility issue. Learn how to add a name to your ARIA progressbars to comply with WCAG 2.0.

Some ARIA roles must be contained within a specific parent role to be valid. Learn how to fix this accessibility issue to comply with WCAG 2.0.

ARIA toggle fields without an accessible name are a major accessibility issue. Learn how to add a name to your ARIA toggle fields to comply with WCAG 2.0.

ARIA tooltips without an accessible name are a major accessibility issue. Learn how to add a name to your ARIA tooltips to comply with WCAG 2.0.

The blink element is a relic of the past and a major accessibility issue. Learn why you should not use the deprecated blink element and what to use instead.

Buttons without discernible text are a major accessibility issue. Learn how to add text to your buttons to comply with WCAG 2.0.

Some ARIA roles must contain specific children to be valid. Learn how to fix this accessibility issue to comply with WCAG 2.0.

Deprecated ARIA roles are a sign of an outdated and inaccessible website. Learn why you should not use them and what to use instead.

The marquee element is a relic of the past and a major accessibility issue. Learn why you should not use the deprecated marquee element and what to use instead.

For a definition list to be accessible, it must contain only ordered groups of ‘dt’ and ‘dd’ elements. Learn how to fix this issue to comply with WCAG 2.0.

For a definition list to be accessible, all

Elements with role=img must have an accessible name. Learn how to add alternate text to your ARIA images to comply with WCAG 2.0.

Using the wrong ARIA attribute for a role can create a confusing experience for screen reader users. Learn how to use the correct ARIA attributes to comply with WCAG 2.0.

Form fields should have only one label element to avoid confusion for screen reader users. Learn how to fix this accessibility issue to comply with WCAG 2.0.

Form input elements without labels are a major accessibility issue. Learn how to add labels to your form inputs to comply with WCAG 2.0.

Frames without a title attribute are a major accessibility issue. Learn how to add a title to your frames to comply with WCAG 2.0.

Duplicate frame titles can confuse screen reader users. Learn why it’s important for your frames to have a unique title attribute and how to fix it.

The lang attribute is a crucial element of any accessible and user-friendly website. Learn why it’s important to use the lang attribute and how to fix it.

Mismatched HTML lang and XML lang values can create a confusing experience for screen reader users. Learn why it’s important for your HTML lang and XML lang values to match and how to fix it.

Duplicate IDs in ARIA and labels can create a confusing experience for screen reader users. Learn why it’s important for the IDs used in your ARIA and labels to be unique and how to fix it.

Image buttons without alternate text are a major accessibility issue. Learn how to add alternate text to your image buttons to comply with WCAG 2.0.

Input buttons without discernible text are a major accessibility issue. Learn how to add discernible text to your input buttons to comply with WCAG 2.0.

Nesting interactive controls is a major accessibility issue. Learn why you should not nest your interactive controls and how to fix it.

Links that are not distinguishable from the surrounding text are a major accessibility issue. Learn how to make your links stand out to comply with WCAG 2.0.

Links without discernible text are a major accessibility issue. Learn how to add discernible text to your links to comply with WCAG 2.0.

List items that are not contained in a list element are a major accessibility issue. Learn why it’s important for your list items to be contained in list elements and how to fix it.

Lists that contain elements other than li are a major accessibility issue. Learn why it’s important for your lists to only contain li content elements and how to fix it.

Object elements without alternate text are a major accessibility issue. Learn how to add alternate text to your object elements to comply with WCAG 2.0.

Pages without a title element are a major accessibility issue. Learn why it’s important for your pages to have a title element and how to fix it.

Pages without a means to bypass repeated blocks of content are a major accessibility issue. Learn why it’s important to provide a way for users to bypass repeated blocks of content and how to do it.

Missing required ARIA attributes can create a confusing experience for screen reader users. Learn why it’s important to provide all required ARIA attributes and how to fix it.

Select elements without an accessible name are a major accessibility issue. Learn how to add an accessible name to your select elements to comply with WCAG 2.0.

Server-side image maps are an outdated and inaccessible technology. Learn why you should not use server-side image maps and what to use instead.

Summary elements without discernible text are a major accessibility issue. Learn why it’s important for your summary elements to have discernible text and how to fix it.

SVG images and graphics without accessible text are a major accessibility issue. Learn why it’s important for your SVG images and graphics to have accessible text and how to fix it.

Using the ‘headers’ attribute incorrectly is a major accessibility issue. Learn why it’s important for your ‘headers’ attribute to refer to a cell in the same table and how to fix it.

Videos without captions are a major accessibility issue. Learn why it’s important for your video elements to have captions and how to fix it.

Autoplaying video and audio is a major accessibility issue. Learn why you should not autoplay your video and audio elements and how to fix it.

Using an invalid lang attribute value is a major accessibility issue. Learn why it’s important to use a valid value for the lang attribute and how to fix it.

Text with low color contrast is a major accessibility issue. Learn why it’s important for your text to have a high color contrast to the background and how to fix it.

Delayed meta refreshes are a major accessibility issue. Learn why you should not use delayed meta refreshes and what to use instead.

Links with the same accessible name are a major accessibility issue. Learn why it’s important for your links to have a unique accessible name and how to fix it.

Text with a low color contrast ratio is a major accessibility issue. Learn why it’s important for your text to have a high color contrast ratio to the background and how to fix it.

Using the autocomplete attribute incorrectly is a major accessibility issue. Learn why it’s important to use the autocomplete attribute correctly and how to fix it.

Inline text spacing that is not adjustable is a major accessibility issue. Learn why it’s important for your inline text spacing to be adjustable and how to fix it.

Touch targets that are too small or too close together are a major accessibility issue. Learn why it’s important for your touch targets to have a sufficient size and spacing and how to fix it.

Using the wrong ARIA attribute for a role can create a confusing experience for screen reader users. Learn how to use ARIA correctly to comply with WCAG 2.0.

Using invalid ARIA role values can break accessibility for screen reader users. Learn how to use the correct ARIA role values to comply with WCAG 2.0.

Using the wrong ARIA attribute for a role can create a confusing experience for screen reader users. Learn how to use the correct ARIA attributes to comply with WCAG 2.0.

Images without alternate text are a major accessibility issue. Learn how to add alternate text to your images to comply with WCAG 2.0.

Scrollable regions that are not keyboard accessible are a major accessibility issue. Learn why it’s important for your scrollable regions to be accessible by keyboard and how to fix it.