Add an outline or border on hover and focus: This method can be used in combination with adding an underline and/or background color change on hover and focus. Visual focus indicator All focusable elements MUST have a visual focus indicator when in focus. Browsers normally indicate which part is in focus by outlining it with […]

In simple terms, iframe is kind of a window in the middle of a web page that lets you view another page through that window. You basically cut out a rectangle of the page with the iframe and show the content of another page behind it. Iframes can have any kind of content, including advertisements […]

A navigation list SHOULD be assigned with the element or role=”navigation”. The main navigation menu — should be marked as navigation landmarks so that screen reader users can easily find them when they pull up the list of landmarks. The landmark should be used for the most important navigation regions on the page, so that […]

There are three basic types of lists in HTML: 1. Unordered lists, Unordered lists should be used when a set of items can be placed in any order. 2. Ordered lists Ordered lists should be used when the list items need to be placed in a specific order. 3. Definition lists Definition/description lists are used […]

The main language of the page MUST be identified correctly on the element. If the language is not specified, a screen reader will read the page in the user’s default language, which can be very difficult to understand. Good Example: The language is specified accurately on the second line in the code. Begin code: I […]

Landmarks Landmarks SHOULD be used to identify the layout of the page,, ( , , , , etc.). It can be easily achieved with HTML5 and ARIA, in that way screen reader users can easily find their way around the layout. Note: Landmarks are used to designate sections of the overall page design and layout. […]

A Link must have appropriate text description A link must have a text-based name related with it so that screen readers can announce something to users.   Good Example: Link text within the <a> element Link text must have clear concept for the screen reader users, must not have a duplicate label, and must be […]

If a “Skip to content” link is provided on any website, it will allow users to move the keyboard focus directly to the main content of the website. When header with navigation links is repeated at the top of several pages, keyboard users should be able to avoid it and move the keyboard focus directly […]

Headings play a very important role in the accessibility level of any document, whether it is a Word, PDF, or HTML document. Screen reader users use “Headings” for navigation and they provide a clear concept of a document which benefits all users, making it easier to understand the content. Remember that blind users can’t just […]

Why Title for Every Page   The Page Title is the First Thing Screen Reader announce to its users. Blind users cannot glance quickly at the content of a web page to see what the page is about, so they depend on the page title to give them this information. Web pages without titles waste […]